gridview - Windows ストア アプリのグリッドビューのカスタマイズ?

Question

ItemsSource プロパティを介してコレクションにバインドされている Windows ストア アプリ GridView があります。コレクションには5つのアイテムがあります。デフォルトでは、アイテムはこのように縦に表示されます

アイテム1 アイテム3 アイテム5 アイテム2
アイテム4

このようにアイテムを横に並べて何個並べて表示するかを指定する方法はありますか？

アイテム
1 アイテム2 アイテム3 アイテム4 アイテム5

ありがとう！

Answer 1

GridViewWinRT では、のItemsPanelTemplatehereに指定できる行数または列数は特にありませんが、 のプロパティに依存するものVariableSizedWrapGridがあります。MaximumRowsOrColumnsOrientationVariableSizedWrapGrid

以下のコードは、両方の出力を示しています。

XAML コード

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>
    <GridView x:Name="MyGv" Height="200" Width="650">
        <GridView.ItemTemplate>
            <DataTemplate>
                <Border Height="50" Width="200" Background="Gray">
                    <TextBlock FontSize="26.667" Text="{Binding}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                </Border>
            </DataTemplate>
        </GridView.ItemTemplate>
        <GridView.ItemsPanel>
            <ItemsPanelTemplate>
                <VariableSizedWrapGrid Orientation="Horizontal" MaximumRowsOrColumns="3"/>
            </ItemsPanelTemplate>
        </GridView.ItemsPanel>
    </GridView>
    <GridView x:Name="MyGv1" Height="200" Width="650" Grid.Row="1">
        <GridView.ItemTemplate>
            <DataTemplate>
                <Border Height="50" Width="200" Background="Gray">
                    <TextBlock FontSize="26.667" Text="{Binding}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                </Border>
            </DataTemplate>
        </GridView.ItemTemplate>
        <GridView.ItemsPanel>
            <ItemsPanelTemplate>
                <VariableSizedWrapGrid Orientation="Vertical" MaximumRowsOrColumns="2"/>
            </ItemsPanelTemplate>
        </GridView.ItemsPanel>
    </GridView>
</Grid>

C# コード

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    var ObserControl = new ObservableCollection<string>() { "Item 1", "Item 2", "Item 3", "Item 4", "Item 5"};
    MyGv.ItemsSource = ObserControl;
    MyGv1.ItemsSource = ObserControl;
}

さらにサポートが必要な場合はお知らせください。

Answer 2

Xyroidが示唆したように、GridView を 2 つ持つことで問題を解決できます。目的の結果を達成するためにいくつかの変更を加えただけです。

xaml:

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="50" />
    </Grid.RowDefinitions>
    <GridView x:Name="MyGv" Margin="0"  Grid.Row="0" Width="650">
        <GridView.ItemTemplate>
            <DataTemplate>
                <Border Height="50" Width="200" Background="Gray">
                    <TextBlock FontSize="26.667" Text="{Binding}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                </Border>
            </DataTemplate>
        </GridView.ItemTemplate>
        <GridView.ItemsPanel>
            <ItemsPanelTemplate>
                <VariableSizedWrapGrid Orientation="Horizontal" MaximumRowsOrColumns="2"/>
            </ItemsPanelTemplate>
        </GridView.ItemsPanel>
    </GridView>
    <GridView  x:Name="MyGv1" Margin="0" Height="60" Width="650" Grid.Row="1">
        <GridView.ItemTemplate>
            <DataTemplate>
                <Border Height="50" Width="200"  Background="Gray">
                    <TextBlock FontSize="26.667" Text="{Binding}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
                </Border>
            </DataTemplate>
        </GridView.ItemTemplate>
        <GridView.ItemsPanel>
            <ItemsPanelTemplate>
                <VariableSizedWrapGrid Orientation="Vertical" MaximumRowsOrColumns="3"/>
            </ItemsPanelTemplate>
        </GridView.ItemsPanel>
    </GridView>
</Grid>

c#:

protected override void OnNavigatedTo(NavigationEventArgs e)
    {

        var ObserControl = new ObservableCollection<string>() { "Item 1", "Item 2", "Item 3", "Item 4", "Item 5" };
        MyGv.ItemsSource = ObserControl.Take(2);
        MyGv1.ItemsSource = ObserControl.Skip(2);
    }