0

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

所以我的问题：

谁能解释（或提供链接）我如何从头开始构建这样的 Grouped GridView？示例模板没有那么有用，因为它有点令人困惑（一个文件中有 4 个类，有时结构有点奇怪）。

4

1 回答 1

3

好的，所以使用 Grouped GridView 的基本要求是：

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

  • 一个 ViewModel（你使用的是 Mvvm，对吗？）
  • 一个 Group 对象，其中包含每个组的元素。
  • 一个 Item 对象， Group 将包含一个集合
  • 用于显示包含 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; }
}

一个示例视图模型：

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 绑定到Collections Group，并且ItemsPath告诉s 在每个属性CollectionViewSource中的集合。ItemGroup

你GridView会参考这个。如下所示设置项目来源很重要。一个空{Binding}的，Source设置为StaticResource的CollectionViewSource。GridView您可以使用GroupStyle类似这样的方式来设置每个组的样式。我把它剥离得非常基础。您已经拥有的默认示例将有一个更好的示例。

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

最后，您必须将DataContext您Page的设置为ViewModel. 如果您使用的是 Mvvm Light，它将类似于DataContext="{Binding GroupsVM, Source={StaticResource Locator}}". 您显然需要进行一些进一步的设置才能使其正常工作。您也可以在Page构造函数中设置它。

public MyGridViewPage()
{
    DataContext = new GroupsViewModel();
    this.InitializeComponent();
}

希望这可以帮助。快乐编码！

于 2013-05-19T23:46:53.820 回答