中心页面上的 Windows 8 多个网格视图

Question

我目前正在为我的应用程序构建一个中心页面。这个页面被设计成有多个列，每个列都有一个标题和下面的网格视图。但是，每一列（gridview）都填充了来自我的视图模型的一组不同的数据。我成功地填充了网格视图，但我看到的是水平滚动不起作用，所以我永远无法查看中心页面上的所有信息。基本上，用户不能水平平移。

使用分组数据 (gridview) 是实现此目的的唯一方法吗？

我还应该说我尝试使用 Scrollviewer，但它似乎会弄乱我的网格视图，它只在一列中显示我的数据（每个网格视图）。

请在下面查看我当前的 XAML 代码。感谢并期待您的回复。

<common:LayoutAwarePage
x:Name="pageRoot"
x:Class="CongressWatch.MainPage"
DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
IsTabStop="false"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:CongressWatch"
xmlns:common="using:CongressWatch.Common"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<Page.Resources>
    <!-- TODO: Delete this line if the key AppName is declared in App.xaml -->
    <x:String x:Key="AppName">congress watch</x:String>
</Page.Resources>

<!--
     This grid acts as a root panel for the page that defines two rows:
     * Row 0 contains the back button and page title
     * Row 1 contains the rest of the page layout
-->
<Grid Style="{StaticResource LayoutRootStyle}">
    <Grid.RowDefinitions>
        <RowDefinition Height="140"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <!-- Back button and page title -->
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
        <TextBlock x:Name="pageTitle" Grid.Column="1" Text="{StaticResource AppName}" Style="{StaticResource PageHeaderTextStyle}"/>
    </Grid>

    <Grid Grid.Row="1" Margin="0,-3,0,0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <TextBlock x:Name="txtHeadingLegislators" 
                   HorizontalAlignment="Left" 
                   TextWrapping="Wrap" 
                   Text="legislators" 
                   Margin="120,0,0,20"
                   VerticalAlignment="Top" 
                   Style="{StaticResource PageSubheaderTextStyle}"/>
        <GridView 
            x:Name="grdViewLegislators" 
            Grid.Row="1" 
            Margin="120,0,0,50"
            ItemsSource="{Binding Legislators, Mode=TwoWay}"
            IsItemClickEnabled="True"
            SelectionMode="None"
            ItemClick="grdViewLegislators_ItemClick" 
            ItemTemplate="{StaticResource LegislatorGVDataItemTemplate}"/>
        <TextBlock x:Name="txtHeadingCommittees" 
                   Grid.Column="1"
                   HorizontalAlignment="Left" 
                   TextWrapping="Wrap" 
                   Text="committees" 
                   Margin="80,0,0,20"
                   VerticalAlignment="Top" 
                   Style="{StaticResource PageSubheaderTextStyle}"/>
        <GridView 
            x:Name="grdViewCommittees" 
            Grid.Row="1" 
            Grid.Column="1"
            Margin="80,0,0,50"
            ItemsSource="{Binding Committees, Mode=TwoWay}"
            IsItemClickEnabled="True"
            SelectionMode="None"
            ItemClick="grdViewCommittees_ItemClick" 
            ItemTemplate="{StaticResource CommitteeGVDataItemTemplate}"/>
        <TextBlock x:Name="txtHeadingBills" 
                   Grid.Column="2"
                   HorizontalAlignment="Left" 
                   TextWrapping="Wrap" 
                   Text="bills" 
                   Margin="80,0,0,20"
                   VerticalAlignment="Top" 
                   Style="{StaticResource PageSubheaderTextStyle}"/>
    </Grid>

    <VisualStateManager.VisualStateGroups>

        <!-- Visual states reflect the application's view state -->
        <VisualStateGroup x:Name="ApplicationViewStates">
            <VisualState x:Name="FullScreenLandscape"/>
            <VisualState x:Name="Filled"/>

            <!-- The entire page respects the narrower 100-pixel margin convention for portrait -->
            <VisualState x:Name="FullScreenPortrait">
                <Storyboard>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>

            <!-- The back button and title have different styles when snapped -->
            <VisualState x:Name="Snapped">
                <Storyboard>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</Grid>

Answer 1

设计指南非常小心地指出了多个控件相互嵌套的问题，这些控件以相同甚至不同的方向滚动。您不仅会在一个控件从另一个控件获取事件时遇到问题，而且内容移动的方式可能无法确定并让用户感到沮丧。

听起来您可能正在尝试在 Windows Phone 上实现类似于 Panorama 控件的功能？目前在 Windows 8 上没有像这样工作的控件。 Panorama 的创建是为了通过模拟更宽的屏幕在小屏幕上容纳大量数据。带有停止点的 ScrollViewer 在 Windows 8 中可以做类似的事情，但不完全相同。

我会花一些时间坐下来思考屏幕的设计，并确保这是您想要的交互。看看今日美国之类的应用程序，看看它们如何处理主页上的分组。诚然，他们列表中的每一项都是一篇新闻文章。

没有规定每个组中的每个项目都必须是同一类型。您可以创建一个包含不同对象类型的大型集合，并通过某个共享键对它们进行分组。您也可以手动创建组，然后只拥有一组组。

如果您遵循其中任何一种方法，诀窍就是告诉 GridView 为不同的对象类型使用不同的数据模板。这是使用 DataTemplateSelector 完成的。这是一篇关于在 WinRT 中使用 DataTemplateSelectors 的好博文：

http://www.comyoucom.com/implementing-a-custom-datatemplateselector-in-winrt/