none
GridView创建不同大小的items RRS feed

  • 常规讨论

  • 1、介

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

    2 解决方法

     一般来说,创建一个包含不同大小的itemsContainer需要满足以下三个条件:

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

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

    接下来是定义Gridviewitems的大小,通常是先设置VariableSizedWrapGridItemWidthItemHeight大小,然后items的大小设置为ItemWidthItemHeight大小的

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

    Orientation方向上item的最大个数。例如VariableSizedWrapGridOrientation取值为VerticalMaxRowsOrColumns3,则表示每列的最大items个数为3.

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

    MyGridView.cs文件中,我们创建了一个继承于Gridview的类并在此类中重写了PrepareContainerForItemOverride方法。我们还通过创建一个DataModel类来定义GridView中各个item的内容和通过设置ColunmSpanRowSpan属性的值来设置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.

    2013年9月23日 9:27
    版主

全部回复

  • 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.

    2013年9月23日 9:29
    版主
  • MainPageXAML页面,我们为MyGridview控件定义了一个数据模版并设置了其   ItemsPanelTemplateVariableSizedWrapGrid,代码段如下:

    <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.



    2013年9月23日 9:30
    版主
  • Hello AnneJing 版主:

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

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

    2013年9月27日 6:20
  • 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++的代码吗?

    2014年7月23日 2:23
  • 我想要窗口拖动 改变大小的时候可以使每一个Item的大小跟着改变  该怎么办呢  
    2016年1月5日 12:45