窗口樞紐頁

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/