询问者
GridView创建不同大小的items

常规讨论
-
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.
全部回复
-
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. -
在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.
- 已编辑 Anne JingModerator 2013年9月23日 9:32 from
-
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++的代码吗?