如何在Windows 8中显示具有可变宽度的GridView项？

Question

我的GridView项具有其第一项大小的尺寸。我该如何改变这种行为？

如何根据内容显示具有可变宽度的GridView项？

我想要显示第一个，但我得到了第二个。有什么建议吗？

- asitis

---

可能会有帮助 如何获得具有可变大小的GridView项的GridView？ - Farhan Ghumra

@Xyroid谢谢，但是你给的是分组网格视图的链接。我正在寻找没有分组的GridView本身。 - asitis

好的，我会发布解决方案。 - Farhan Ghumra

嗨，这个链接帮助我找到了简单的解决方案如何在Windows 8 Metro样式网格应用程序中显示多个大小的项目。 - asitis

Answer 1

您可以通过将GridView的ItemsPanel设置为WrapPanel来创建此视图，您可以在Jerry Nixon的博客上获取WrapPanel。以下是代码。

XAML

<GridView x:Name="gv">
    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <local:WrapPanel Orientation="Horizontal"  />
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>
    <GridView.ItemTemplate>
        <DataTemplate>
            <Grid Height="140" Width="{Binding MyWidth}">
                <Grid.Background>
                    <SolidColorBrush Color="{Binding MyColor}" />
                </Grid.Background>
                <TextBlock FontSize="20" VerticalAlignment="Bottom" Margin="10,0,0,10">
                    <Run Text="{Binding MyWidth}" />
                </TextBlock>
            </Grid>
        </DataTemplate>
    </GridView.ItemTemplate>
</GridView>

C#

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    var list = new List<ViewModel>() 
    {
        new ViewModel(110, Colors.LawnGreen),
        new ViewModel(50, Colors.DarkBlue),
        new ViewModel(130, Colors.Firebrick),
        new ViewModel(60, Colors.RosyBrown),
        new ViewModel(100, Colors.IndianRed),
        new ViewModel(210, Colors.BurlyWood),
        new ViewModel(150, Colors.Turquoise)
    };

    gv.ItemsSource = list;
}

public class ViewModel
{
    public double MyWidth { get; set; }
    public Color MyColor { get; set; }

    public ViewModel(double _MyWidth, Color _MyColor)
    {
        MyWidth = _MyWidth;
        MyColor = _MyColor;
    }
}

- Farhan Ghumra

---

嗨，这个链接帮助我找到了简单的解决方案如何在Windows 8 Metro样式网格应用程序中显示多个大小的项目。 - asitis

Answer 2

请查看Windows 8 GridView和可变大小的项以及WinRT GridView中不同大小的平铺项，还要检查可变大小网格模板。
希望这可以帮到你。

- jimpanzer

Answer 3

这是我的解决方案。

//可变大小的网格视图

public class VariableSizedGridView : GridView
{
    protected override void PrepareContainerForItemOverride(Windows.UI.Xaml.DependencyObject element, object item)
    {
        try
        {
            dynamic gridItem = item;

            var typeItem = item as CommonType;
            if (typeItem != null)
            {
                var heightPecentage = (300.0 / typeItem.WbmImage.PixelHeight);
                var itemWidth = typeItem.WbmImage.PixelWidth * heightPecentage;
                var columnSpan = Convert.ToInt32(itemWidth / 10.0);


                if (gridItem != null)
                {
                    element.SetValue(VariableSizedWrapGrid.ItemWidthProperty, itemWidth);
                    element.SetValue(VariableSizedWrapGrid.ColumnSpanProperty, columnSpan);
                    element.SetValue(VariableSizedWrapGrid.RowSpanProperty, 1);
                }
            }
        }
        catch
        {
            element.SetValue(VariableSizedWrapGrid.ItemWidthProperty, 100);
            element.SetValue(VariableSizedWrapGrid.ColumnSpanProperty, 1);
            element.SetValue(VariableSizedWrapGrid.RowSpanProperty, 1);
        }
        finally
        {
            base.PrepareContainerForItemOverride(element, item);
        }
    }

//集合视图源代码

     <CollectionViewSource  x:Name="collectionViewSource"
                           Source="{Binding ImageList,Mode=TwoWay}"
                           IsSourceGrouped="False"
                           ItemsPath="Items" />   

//可变大小网格视图 XAML

     <controls:VariableSizedGridView x:Name="ImageGridView"
                      AutomationProperties.AutomationId="ImageGridView"                            
                      ItemsSource="{Binding Source={StaticResource collectionViewSource}}" 
                      IsItemClickEnabled="True"
                      TabIndex="1" >
     <controls:VariableSizedGridView.ItemTemplate>
     <DataTemplate>
    <Grid Height="300" >
        <Image Stretch="Uniform" Source="{Binding WbmImage}" />
    </Grid>
    </DataTemplate>
    </controls:VariableSizedGridView.ItemTemplate>
                <controls:VariableSizedGridView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <VariableSizedWrapGrid  ItemWidth="10"   ItemHeight="300" Orientation="Vertical"/>
                    </ItemsPanelTemplate>
                </controls:VariableSizedGridView.ItemsPanel>                  
    </controls:VariableSizedGridView>

- asitis