Two XAML GridViews in a StackPanel - xaml

Question

For my Windows 8.1 XAML app, I am trying to create a XAML layout that resembles the following description:
One StackPanel that contains two GridViews (let's say GV1, GV2)
Each GridView contains images that are displayed through data binding
GV1 and GV2 should be horizontally stacked when screen is in landscape mode. Their width should be equal. The scrolling of images should be vertical.
GV1 and GV2 should be vertically stacked when screen is in portrait mode. There height should be equal. The scrolling of images should be horizontal.
I have tried several approaches using various combinations of GridViews, StackPanels, ScrollViewer etc. but nothing seems to work.
My latest attempt at creating a basic horizontal layout is here:
<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>
Any pointers or some kind of pseudo XAML code would be really helpful.

Answer 1

I'd try this:
<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>