GridView创建不同大小的items

Question

1、介 绍

在Windows store app 中，通常需要为GridView建立不同大小的items，目前为止没有一种直接的方式在GridView实现数据绑定的同时为其各个item配置不同的大小。综合英文论坛的讨论结果本文将介绍如何来为GridView创建不同大小的items。

2、 解决方法

 一般来说，创建一个包含不同大小的items的Container需要满足以下三个条件：

• 该Container需继承于GridView
• 需要重写PrepareContainerForItemOverride方法
• VariableSizedWrapGrid 应作为该Container 的ItemsPanel

当在GridView中使用VariableSizedWrapGrid时，应注意VariableSizedWrapGrid的”Orientation”属性，其决定了GridView中的items以何种方式来排列和填充Gridview空间。如当Orientation为Vertical时，其填充方向是先从上到下，再从左到右。

接下来是定义Gridview中items的大小，通常是先设置VariableSizedWrapGrid的ItemWidth和ItemHeight大小，然后items的大小设置为ItemWidth和ItemHeight大小的

倍数。另外可以通过设置VariableSizedWrapGrid的MaxRowsOrColumns大小来限制

Orientation方向上item的最大个数。例如VariableSizedWrapGrid的Orientation取值为Vertical，MaxRowsOrColumns为3，则表示每列的最大items个数为3.

通过上述设置我们可以定义items的布局，现在我们来设置各items的大小，通常items的大小定义为我们之前设置的ItemWidth和ItemHeight的大小的倍数。我们可以通过每个item的ColumnSpan和RowSpan的附加属性来设置其相对于ItemWidth和ItemHeight的倍数，从而设置每个items的大小。

在MyGridView.cs文件中，我们创建了一个继承于Gridview的类并在此类中重写了PrepareContainerForItemOverride方法。我们还通过创建一个DataModel类来定义GridView中各个item的内容和通过设置ColunmSpan和RowSpan属性的值来设置item的大小。

---

<THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
Thanks
MSDN Community Support

Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

Answer 1

3、主要代码

以下是MyGridView.cs的主要代码：

public class MyGridView : GridView
    {
           public  static   List<DataModel> Model;
           public MyGridView()
           {

            Model = new List<DataModel>();
            Model.Add(new DataModel { ColunmSpan = 6, RowSpan = 2, Title = "Item1", BaColor = "Blue" });
            Model.Add(new DataModel { ColunmSpan = 3, RowSpan = 1, Title = "Item2", BaColor = "Red" });
            Model.Add(new DataModel { ColunmSpan = 3, RowSpan = 1, Title = "Item3", BaColor = "GreenYellow" });
            Model.Add(new DataModel { ColunmSpan = 3, RowSpan = 1, Title = "Item4", BaColor = "Green" });
            Model.Add(new DataModel { ColunmSpan = 3, RowSpan = 2, Title = "Item5", BaColor = "MediumOrchid" });
            Model.Add(new DataModel { ColunmSpan = 2, RowSpan = 1, Title = "Item6", BaColor = "Brown" });
            Model.Add(new DataModel { ColunmSpan = 2, RowSpan = 1, Title = "Item7", BaColor = "Coral" });
            Model.Add(new DataModel { ColunmSpan = 2, RowSpan = 1, Title = "Item8", BaColor = "Blue" });
               }
       
        protected override void PrepareContainerForItemOverride(Windows.UI.Xaml.DependencyObject element, object item)
        {
          
            DataModel dataItem = item as DataModel;
          

            if (dataItem != null)
            {
                var gridItem = element as GridViewItem;
                if (gridItem != null)
                {
                    VariableSizedWrapGrid.SetRowSpan(gridItem, dataItem.RowSpan);
                    VariableSizedWrapGrid.SetColumnSpan(gridItem, dataItem.ColunmSpan);
                }

            }
            base.PrepareContainerForItemOverride(element, item);


        }
    }

    public class DataModel
    {
        
        public int RowSpan
        {
            get;
            set;
        }
        public int ColunmSpan
        {
            get;
            set;
        }
        public string  Title
        {
            get;
            set;
        }
        public string BaColor
        {
            get;
            set;
        }

    }

---

<THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
Thanks
MSDN Community Support

Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

Answer 2

在MainPage的XAML页面,我们为MyGridview控件定义了一个数据模版并设置了其   ItemsPanelTemplate为VariableSizedWrapGrid，代码段如下：

<Page.Resources>
        <DataTemplate x:Key="CustomTileItem">
            <Grid >
                <Border>
                    <Rectangle Stretch="UniformToFill" Fill="{Binding BaColor}"></Rectangle>
                </Border>
                
                <StackPanel VerticalAlignment="Bottom" >
                    <TextBlock Text="{Binding Title}" Foreground="{StaticResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextStyle}" Height="30" Margin="15,0,15,0"/>
                </StackPanel>
            </Grid>
        </DataTemplate>
    </Page.Resources>

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}" Name="grid" >
        <local:MyGridView ItemsSource="{Binding  }" ItemTemplate="{StaticResource CustomTileItem}"
                    Padding="0" Margin="100" Height="630" Name="mygridview">
            <local:MyGridView.ItemsPanel>
                <ItemsPanelTemplate>
                    <VariableSizedWrapGrid ItemHeight="150" ItemWidth="75" Orientation="Vertical" MaximumRowsOrColumns="3"/>
                </ItemsPanelTemplate>
            </local:MyGridView.ItemsPanel>
        </local:MyGridView>
    </Grid>

4、最终效果

---

<THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
Thanks
MSDN Community Support

Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

Answer 3

Hello AnneJing 版主：

想继续往下研究如下问题：

若想实现下述图片的效果，请问GridView与GridViewItem该如何实现呢？一直未能实现下述的GridView效果

Answer 4

3、主要代码

以下是MyGridView.cs的主要代码：

public class MyGridView : GridView
    {
           public  static   List<DataModel> Model;
           public MyGridView()
           {

            Model = new List<DataModel>();
            Model.Add(new DataModel { ColunmSpan = 6, RowSpan = 2, Title = "Item1", BaColor = "Blue" });
            Model.Add(new DataModel { ColunmSpan = 3, RowSpan = 1, Title = "Item2", BaColor = "Red" });
            Model.Add(new DataModel { ColunmSpan = 3, RowSpan = 1, Title = "Item3", BaColor = "GreenYellow" });
            Model.Add(new DataModel { ColunmSpan = 3, RowSpan = 1, Title = "Item4", BaColor = "Green" });
            Model.Add(new DataModel { ColunmSpan = 3, RowSpan = 2, Title = "Item5", BaColor = "MediumOrchid" });
            Model.Add(new DataModel { ColunmSpan = 2, RowSpan = 1, Title = "Item6", BaColor = "Brown" });
            Model.Add(new DataModel { ColunmSpan = 2, RowSpan = 1, Title = "Item7", BaColor = "Coral" });
            Model.Add(new DataModel { ColunmSpan = 2, RowSpan = 1, Title = "Item8", BaColor = "Blue" });
               }
       
        protected override void PrepareContainerForItemOverride(Windows.UI.Xaml.DependencyObject element, object item)
        {
          
            DataModel dataItem = item as DataModel;
          

            if (dataItem != null)
            {
                var gridItem = element as GridViewItem;
                if (gridItem != null)
                {
                    VariableSizedWrapGrid.SetRowSpan(gridItem, dataItem.RowSpan);
                    VariableSizedWrapGrid.SetColumnSpan(gridItem, dataItem.ColunmSpan);
                }

            }
            base.PrepareContainerForItemOverride(element, item);


        }
    }

    public class DataModel
    {
        
        public int RowSpan
        {
            get;
            set;
        }
        public int ColunmSpan
        {
            get;
            set;
        }
        public string  Title
        {
            get;
            set;
        }
        public string BaColor
        {
            get;
            set;
        }

    }

---

<THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
Thanks
MSDN Community Support

Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

你好！   Anne Jing<abbr class="affil"></abbr>

能给出一个c++的代码吗？

Answer 5

我想要窗口拖动 改变大小的时候可以使每一个Item的大小跟着改变  该怎么办呢