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

가 ScrollViewer에 GridView, ListView 및 ListView 랩, 다음과 같은 속성을 설정

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