gridview - windows商店应用程序gridview自定义？

Question

我有一个 Windows Store App GridView，它通过 ItemsSource 属性绑定到一个集合。该集合有 5 个项目。默认情况下，项目是这样垂直显示的

项目1 项目3项目5
项目2 项目4

有没有办法像这样水平显示项目并指定要连续显示多少项目？

项目1
项目2 项目3 项目4 项目5

谢谢！

Answer 1

在 WinRT 中，没有特定的 Row 或 Column 计数可以在GridView's ItemsPanelTemplatehere中指定VariableSizedWrapGrid，但'sMaximumRowsOrColumns取决于Orientation.VariableSizedWrapGrid

下面的代码演示了这两个输出。

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 可以解决这个问题。只是做了一些修改以达到预期的效果。

xml:

<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);
    }