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

【问题标题】：windows store app gridview customizations?windows商店应用程序gridview自定义？
【发布时间】：2013-03-22 04:38:39
【问题描述】：

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

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

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

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

谢谢！

【问题讨论】：

标签： gridview windows-store-apps

【解决方案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;
}

如果您需要更多帮助，请告诉我。

【讨论】：

【解决方案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);
    }

【讨论】：