具有 2 行和水平滚动的 GridView

Question

我试图在 Windows 应用商店应用项目 中使用 GridView 来实现类似这样的功能@

我可以通过水平滚动将我的项目放在一行中，但我想要一个 2 行的 GridView。

<GridView Grid.Row="1" Margin="22,0,0,0" Style="{StaticResource GridViewStyle}" SelectionMode="None" ItemsSource="{Binding UserPhotos}"  HorizontalContentAlignment="Center" VerticalContentAlignment="Center">
                    <GridView.ItemTemplate>
                        <DataTemplate>

                                <Ellipse HorizontalAlignment="Left" Height="30" Width="30" Margin="0,7,10,0">
                                    <Ellipse.Fill>
                                        <ImageBrush Stretch="Uniform" ImageSource="{Binding}"/>
                                    </Ellipse.Fill>
                                </Ellipse>

                        </DataTemplate>
                    </GridView.ItemTemplate>
                </GridView>

我应该改变/添加什么来获得这个结果？

Answer 1

我不得不说这不是很直观，并且滚动查看器的默认行为通常是垂直的，这是解决方案：

 <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<ScrollViewer VerticalScrollBarVisibility="Hidden" VerticalScrollMode="Disabled" HorizontalScrollBarVisibility="Auto" HorizontalScrollMode="Enabled">
<GridView Grid.Row="1" Margin="22,0,0,0"   SelectionMode="None" HorizontalContentAlignment="Center" VerticalContentAlignment="Center">
    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <ItemsWrapGrid Orientation="Vertical" MaximumRowsOrColumns="2"/>
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>
    <GridView.ItemTemplate>
        <DataTemplate>
            <Grid>
            <Ellipse Stroke="Black" Width="144" Height="144"></Ellipse>
            <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding}"/>
            </Grid>
        </DataTemplate>
    </GridView.ItemTemplate>

    <GridView.Items>
        <x:String>1</x:String>
        <x:String>2</x:String>
        <x:String>3</x:String>
        <x:String>4</x:String>
        <x:String>5</x:String>
        <x:String>6</x:String>
        <x:String>7</x:String>
        <x:String>8</x:String>
        <x:String>9</x:String>
        <x:String>10</x:String>
        <x:String>11</x:String>
        <x:String>12</x:String>
        <x:String>13</x:String>
        <x:String>14</x:String>
    </GridView.Items>
</GridView>

用你的模板和 itemssource 替换