Two XAML GridViews in a StackPanel

Question

For my Windows 8.1 XAML app, I am trying to create a XAML layout that resembles the following description:

1. One StackPanel that contains two GridViews (let's say GV1, GV2)
2. Each GridView contains images that are displayed through data binding
3. 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.
4. 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>