Question

我有问题。我想编写一个Windows 8应用程序，并认为像Visual Studio中包含的示例分组项目应用程序模板中的Grouped GridView将是数据表示的一个很好的选择。但是我在理解它是如何工作方面遇到了问题（我管理修改包含的SampleDataSource，以便显示我的内容）。我遇到的问题是，有很多元素，我无法确定哪个元素会导致什么。

所以我的问题：

任何人都可以解释（或提供链接）如何从头开始构建这样的Grouped GridView？样本模板没有用，因为它有点令人困惑（一个文件中有4个类，有时候有点奇怪的构造）。

Answer 1

好的，因此使用Grouped GridView的基本要求是：

（注意：所有类名都是任意的）

一个ViewModel（你正在使用Mvvm，对吧？）
一个包含每个组元素的Group对象。
一个Item对象，该组将包含
用于显示包含GridView和CollectionViewSource的项目的视图（包括组和项目的任何样式）

示例组和项目：

public class Group<T> where T : Item
{
    public ObservableCollection<T> Items { get; set;}
    public string Title { get; set; }
}

public class Item
{
    public string Value { get; set; }
}

示例ViewModel：

public class GroupsViewModel : ViewModelBase // This implementation uses Mvvm Light's ViewModelBase, feel free to use any
{
    public ObservableCollection<Group<Item>> AllGroups { get; set; }

    public GroupsViewModel()
    {
        AllGroups = new ObservableCollection<Group<Item>>();

        Group<Item> group1 = new Group<Item>();
        group1.Title = "Group 1 Title";
        group1.Add(new Item(){ Value = "The first value." });
        AllGroups.Add(group1);

        Group<Item> group2 = new Group<Item>();
        group2.Title = "Group 2 Title";
        group2.Add(new Item(){ Value = "The second value." });
    }
}

在您的页面上，在Page.Resources中创建一个CollectionViewSource：

<Page.Resources>
    <CollectionViewSource Source="{Binding AllGroups}"
                            IsSourceGrouped=True
                            ItemsPath="Items"
                            x:Name="GroupedCollection"/>
</Page.Resources>

请注意，Source绑定到Collection的{{1}}，Group告诉ItemsPath每个CollectionViewSource的{{1}}该房产Item。

您的Group会参考此内容。设置项目来源非常重要，如下所示。将GridView设置为{Binding}的{{1}}的空Source。您可以使用StaticResource类似的方式在CollectionViewSource中设置每个组的样式。我把它剥离成非常基本的。您已有的默认示例将有一个更好的示例。

GridView

最后，您必须将GroupStyle的{{1}}设置为<GridView ItemsSource="{Binding Source={StaticResource GroupedCollection}}" ItemTemplate="{StaticResource Standard250x250ItemTemplate}" > <GridView.ItemsPanel> <ItemsPanelTemplate> <VirtualizingStackPanel Orientation="Horizontal"/> </ItemsPanelTemplate> </GridView.ItemsPanel> <GridView.GroupStyle> <GroupStyle> <GroupStyle.HeaderTemplate> <DataTemplate> <Grid Margin="1,0,0,6"> <StackPanel Orientation="Horizontal"> <TextBlock Text="{Binding Title}" Margin="3,-7,10,10" Style="{StaticResource GroupHeaderTextStyle}" /> <TextBlock Text="{StaticResource ChevronGlyph}" FontFamily="Segoe UI Symbol" Margin="0,-7,0,10" Style="{StaticResource GroupHeaderTextStyle}"/> </StackPanel> </Grid> </DataTemplate> </GroupStyle.HeaderTemplate> <GroupStyle.Panel> <ItemsPanelTemplate> <VariableSizedWrapGrid Orientation="Vertical" Margin="0,0,80,0"/> </ItemsPanelTemplate> </GroupStyle.Panel> </GroupStyle> </GridView.GroupStyle> </GridView>。如果您使用的是Mvvm Light，它将类似于DataContext。您需要进行一些进一步的设置才能实现这一点。您也可以在Page构造函数中设置它。

ViewModel

希望这会有所帮助。快乐的编码！

分组视图的可能性更简单

1 个答案: