0

私は問題があります。Windows 8 アプリケーションを作成したいと考えており、Visual Studio に含まれるグループ化されたアイテム アプリ テンプレートのサンプルのように、グループ化された GridView がデータ表現に適していると考えています。しかし、これがどのように機能するかを理解するのに問題があります(SampleDataSourceコンテンツが表示されるように、含まれているを変更することができました)。私が抱えている問題は、多くの要素があり、どの要素が何を引き起こしているのかを判断できないことです。

だから私の質問：

このようなグループ化された GridView を最初から構築する方法を誰かが説明 (またはリンクを提供) できますか? サンプル テンプレートは少し混乱するため、あまり役に立ちません (1 つのファイルに 4 つのクラスがあり、少し変わった構造になっている場合もあります)。

4

1 に答える 1

3

グループ化された GridView を使用するための基本的な要件は次のとおりです。

(注: すべてのクラス名は任意です)

  • ViewModel (Mvvm を使用していますよね?)
  • 各グループの要素を保持する Group オブジェクト。
  • 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; }
}

ビューモデルの例:

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に、そのプロパティのそれぞれの のセットをGroup伝えItemsPathます。CollectionViewSourceItemGroup

これ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ます。Mvvm Light を使用している場合は、次のようになります。それを機能させるには、明らかにさらにセットアップを行う必要があります。コンストラクターで設定することもできます。PageViewModelDataContext="{Binding GroupsVM, Source={StaticResource Locator}}"Page

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

お役に立てれば。ハッピーコーディング！

于 2013-05-19T23:46:53.820 に答える