XAML水平滾動有兩個項目

Question

我有一些問題在項目頁面工作上獲得水平滾動。

默認網格模板將在水平滾動，如果它有更多的數據，並且屏幕調整。但是我想添加一個listview到頁面。

所以基本上，我想要網頁水平滾動網格，然後滾動到列表。

目前，它只是部分切斷了「MessageList」。

請參見XAML下面：

<common:LayoutAwarePage.Resources> 

    <!-- Collection of items displayed by this page --> 
    <CollectionViewSource 
     x:Name="itemsViewSource" 
     Source="{Binding Items}" 
     d:Source="{Binding AllGroups, Source={d:DesignInstance IsDesignTimeCreatable=True, Type=data:SampleDataSource}}"/> 
</common:LayoutAwarePage.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}" ScrollViewer.HorizontalScrollBarVisibility="Auto" Margin="0,0,0.429,0.429"> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="140"/> 
     <RowDefinition Height="*"/> 
    </Grid.RowDefinitions> 


    <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> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridView" Storyboard.TargetProperty="Padding"> 
         <DiscreteObjectKeyFrame KeyTime="0" Value="96,136,86,56"/> 
        </ObjectAnimationUsingKeyFrames> 
       </Storyboard> 
      </VisualState> 

      <!-- 
       The back button and title have different styles when snapped, and the list representation is substituted 
       for the grid displayed in all other view states 
      --> 
      <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> 

        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemListView" Storyboard.TargetProperty="Visibility"> 
         <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/> 
        </ObjectAnimationUsingKeyFrames> 
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="itemGridView" Storyboard.TargetProperty="Visibility"> 
         <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/> 
        </ObjectAnimationUsingKeyFrames> 
       </Storyboard> 
      </VisualState> 
     </VisualStateGroup> 
    </VisualStateManager.VisualStateGroups> 

    <!-- Horizontal scrolling grid used in most view states --> 
    <GridView 
     x:Name="itemGridView" 
     AutomationProperties.AutomationId="ItemsGridView" 
     AutomationProperties.Name="Items" 
     TabIndex="1" 
     Grid.RowSpan="2" 
     Padding="116,136,116,46" 
     ItemsSource="{Binding Source={StaticResource itemsViewSource}}" 
     ItemTemplate="{StaticResource Standard250x250ItemTemplate}" 
     SelectionMode="None" 
     IsSwipeEnabled="false" 
     IsItemClickEnabled="True" 
     ItemClick="ItemView_ItemClick" ScrollViewer.HorizontalScrollBarVisibility="Auto"/> 

    <ListView x:Name="MessageList" Height="628" VerticalAlignment="Top" Margin="1191,0,-219,0" 
     ItemsSource="{Binding}" 
     ItemTemplate="{StaticResource MessageTemplate}" Grid.Row="1" HorizontalAlignment="Left" Width="399"/> 

    <!-- Vertical scrolling list only used when snapped --> 
    <ListView 
     x:Name="itemListView" 
     AutomationProperties.AutomationId="ItemsListView" 
     AutomationProperties.Name="Items" 
     TabIndex="1" 
     Grid.Row="1" 
     Visibility="Collapsed" 
     Margin="0,-10,0,0" 
     Padding="10,0,0,60" 
     ItemsSource="{Binding Source={StaticResource itemsViewSource}}" 
     ItemTemplate="{StaticResource Standard80ItemTemplate}" 
     SelectionMode="None" 
     IsSwipeEnabled="false" 
     IsItemClickEnabled="True" 
     ItemClick="ItemView_ItemClick"/> 

    <!-- 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}" IsHitTestVisible="false" Style="{StaticResource PageHeaderTextStyle}"/> 
    </Grid> 
</Grid> 

Answer 1

包裝你GridView，ListView和ListView在ScrollViewer，並設置以下屬性：

<ScrollViewer HorizontalScrollMode="Auto" 
       HorizontalScrollBarVisibility="Auto" 
       VerticalScrollMode="Disabled" 
       VerticalScrollBarVisibility="Hidden"> 
<!-- The elements you want to be horizontally scrollable goes here --> 
</ScrollViewer>