StackPanel 中的两个 XAML GridView

Question

对于我的 Windows 8.1 XAML 应用程序，我正在尝试创建一个类似于以下描述的 XAML 布局：

一个包含两个 GridView 的 StackPanel（比如说 GV1、GV2）
每个 GridView 包含通过数据绑定显示的图像
当屏幕处于横向模式时，GV1 和 GV2 应水平堆叠。它们的宽度应该相等。图片的滚动应该是垂直的。
当屏幕处于纵向模式时，GV1 和 GV2 应垂直堆叠。高度应该相等。图像的滚动应该是水平的。

我尝试了几种方法，使用 GridView、StackPanel、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>

StackPanel 中的两个 XAML GridView

Two XAML GridViews in a StackPanel

xaml

gridview

winrt-xaml