兩個XAML GridView的在一個StackPanel

Question

對於我的Windows 8.1 XAML應用程序，我想創建一個XAML佈局類似於下面的描述：

包含兩個GridView的

1. 一個StackPanel中（假設GV1，GV2）
2. 每個GridView包含通過數據綁定顯示的圖像
3. 當屏幕處於橫向模式時，GV1和GV2應水平堆疊。它們的寬度應該相等。圖像的滾動應該是垂直的。
4. 當屏幕處於縱向模式時，GV1和GV2應垂直堆放。有高度應該是平等的。圖像的滾動應該是水平的。

我已經嘗試了使用GridViews，StackPanels，ScrollViewer等各種組合的幾種方法，但似乎沒有任何工作。

我在創建一個基本的水平佈局的最新嘗試是在這裏：

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
    <StackPanel x:Name="theStackPanel" Orientation="Horizontal"> 
     <GridView x:Name="firstGridView" 
        ItemsSource="{Binding Path=FirstInputFileList}" 
        Margin="10,10,10,10" 
        SelectionMode="None"> 
      <GridView.ItemTemplate> 
       <DataTemplate> 
        <StackPanel HorizontalAlignment="Center"> 
         <Image Source="{Binding Path=SrcImage}" HorizontalAlignment="Center" Width="300" Height="225"/> 
        </StackPanel> 
       </DataTemplate> 
      </GridView.ItemTemplate> 
     </GridView> 

     <GridView x:Name="secondGridView" 
        ItemsSource="{Binding Path=SecondInputFileList}" 
        Margin="10,10,10,10" 
        SelectionMode="None"> 
      <GridView.ItemTemplate> 
       <DataTemplate> 
        <StackPanel HorizontalAlignment="Center"> 
         <Image Source="{Binding Path=SrcImage}" HorizontalAlignment="Center" Width="120" Height="90"/> 
        </StackPanel> 
       </DataTemplate> 
      </GridView.ItemTemplate> 
     </GridView> 
    </StackPanel> 
</Grid> 

任何指針或某種僞XAML代碼將是很有益。

Answer 1

我想試試這個：

<Page 
    x:Class="App79.MainPage" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="using:App79" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d"> 

    <Grid 
     Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
     <!-- Two layouts to put in the page. Handle SizeChanged events to show the one that should be visible. 
      You could use VisualStateManager to switch between these if you want to keep designer support. --> 
     <ContentPresenter 
      x:Name="PortraitLayout" 
      Visibility="Collapsed"> 
      <ContentPresenter.ContentTemplate> 
       <!-- Collapsed ContentPresenter in Windows 8.1 is roughly equivalent to x:Defer in Windows 10 --> 
       <DataTemplate> 
        <Grid> 
         <!-- Note that using a Grid here works better than a StackPanel since it will let you split the space into two rows/columns of same size --> 
         <Grid.RowDefinitions> 
          <RowDefinition /> 
          <RowDefinition /> 
         </Grid.RowDefinitions> 
         <GridView 
          x:Name="firstGridView" 
          ItemsSource="{Binding Path=FirstInputFileList}" 
          Margin="10,10,10,10" 
          SelectionMode="None"> 
          <GridView.ItemTemplate> 
           <DataTemplate> 
            <Image 
             Source="{Binding Path=SrcImage}" 
             HorizontalAlignment="Center" 
             Width="300" 
             Height="225" /> 
           </DataTemplate> 
          </GridView.ItemTemplate> 
         </GridView> 

         <GridView 
          Grid.Row="1" 
          x:Name="secondGridView" 
          ItemsSource="{Binding Path=SecondInputFileList}" 
          Margin="10,10,10,10" 
          SelectionMode="None"> 
          <GridView.ItemTemplate> 
           <DataTemplate> 
            <Image 
             Source="{Binding Path=SrcImage}" 
             HorizontalAlignment="Center" 
             Width="120" 
             Height="90" /> 
           </DataTemplate> 
          </GridView.ItemTemplate> 
         </GridView> 
        </Grid> 
       </DataTemplate> 
      </ContentPresenter.ContentTemplate> 
     </ContentPresenter> 

     <ContentPresenter 
      x:Name="LandscapeLayout" 
      Visibility="Collapsed"> 
      <ContentPresenter.ContentTemplate> 
       <!-- Collapsed ContentPresenter in Windows 8.1 is roughly equivalent to x:Defer in Windows 10 --> 
       <DataTemplate> 
        <Grid> 
         <!-- For landscape we-re using columns --> 
         <Grid.ColumnDefinitions> 
          <ColumnDefinition /> 
          <ColumnDefinition /> 
         </Grid.ColumnDefinitions> 
         <!-- Note that for vertical scrolling we're using ListViews with custom ItemsPanels. 
          In Windows 10 this might be simpler with just reconfigured GridViews. --> 
         <ListView 
          x:Name="firstGridView" 
          ItemsSource="{Binding Path=FirstInputFileList}" 
          Margin="10,10,10,10" 
          SelectionMode="None"> 
          <ListView.ItemsPanel> 
           <ItemsPanelTemplate> 
            <ItemsWrapGrid 
             Orientation="Horizontal" /> 
           </ItemsPanelTemplate> 
          </ListView.ItemsPanel> 
          <ListView.ItemTemplate> 
           <DataTemplate> 
            <Image 
             Source="{Binding Path=SrcImage}" 
             HorizontalAlignment="Center" 
             Width="300" 
             Height="225" /> 
           </DataTemplate> 
          </ListView.ItemTemplate> 
         </ListView> 

         <ListView 
          Grid.Column="1" 
          x:Name="secondGridView" 
          ItemsSource="{Binding Path=SecondInputFileList}" 
          Margin="10,10,10,10" 
          SelectionMode="None"> 
          <ListView.ItemsPanel> 
           <ItemsPanelTemplate> 
            <ItemsWrapGrid 
             Orientation="Horizontal" /> 
           </ItemsPanelTemplate> 
          </ListView.ItemsPanel> 
          <ListView.ItemTemplate> 
           <DataTemplate> 
            <Image 
             Source="{Binding Path=SrcImage}" 
             HorizontalAlignment="Center" 
             Width="120" 
             Height="90" /> 
           </DataTemplate> 
          </ListView.ItemTemplate> 
         </ListView> 
        </Grid> 
       </DataTemplate> 
      </ContentPresenter.ContentTemplate> 
     </ContentPresenter> 
    </Grid> 
</Page>