Question

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

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

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

请参阅我目前的XAML代码。谢谢＆amp;期待您的回复。

<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/

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

1 个答案: