Question

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

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

StackPanel中的两个XAML GridView

1 个答案: