windows-8 - 中心页面上的 Windows 8 多个 GridView

Question

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

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

我还应该说我尝试使用 Scrollviewer，但它似乎弄乱了我的 GridView ，它只在一列中显示我的数据(每个 GridView )。

请参阅下面我当前的 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 上实现类似于全景控件的功能？目前在 Windows 8 上没有这样的控件。 Panorama 的创建是为了通过模拟更宽的屏幕在小屏幕上容纳大量数据。带有停止点的 ScrollViewer 可以在 Windows 8 中执行类似的操作，但不完全相同。

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

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

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

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