Question

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

第1项第3项第5项第2项第4项

有没有办法水平显示项目并指定在这样的行中显示多少项？

第1项第2项第3项第4项第5项

谢谢！

Answer 1

在WinRT中，没有特定的行或列计数可以指定给GridView ItemsPanelTemplate这里VariableSizedWrapGrid，但MaximumRowsOrColumns取决于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可以解决问题。只是进行了一些修改以达到预期的效果。

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

Windows商店应用gridview自定义？

2 个答案: