窗口枢纽页

Question

8多个网格视图我目前正在建设一个枢纽页我的应用程序。此页面设计为具有多个列，每个列都有一个标题和一个GridView。但是，每个列（gridview）都填充了来自我的视图模型的一组不同的数据。我成功地填充网格视图，但我所看到的是，水平滚动不工作，所以我不能查看所有的枢纽页上的信息。基本上，用户不能水平平移。

正在与分组数据（GridView控件），以实现这一目标的唯一途径？

我也应该说我尝试过使用滚动查看器，但它似乎缩小了我的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全景创建，以适应小屏幕上的大量数据。带停止点的ScrollViewer可以在Windows 8中做类似的事情，但不完全相同。

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

没有规则说每个组中的每个项目必须是相同的类型。您可以创建一个包含不同对象类型的大集合，并使用某个共享密钥对它们进行分组。您也可以手动创建组，并拥有一组组。

如果你遵循这两种方法之一，诀窍就是告诉GridView为不同的对象类型使用不同的数据模板。这是使用DataTemplateSelector完成的。下面是在WinRT中使用DataTemplateSelectors一个很好的博客文章：

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