具有 2 行和水平滚动的 GridView

Question

我正在尝试在 Windows Store App 项目

中使用 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>

我 change/add 应该怎么做才能得到这个结果？

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>

替换为您的模板和项目源

具有 2 行和水平滚动的 GridView

GridView with 2 rows and horizontal scroll

c#

xaml

gridview

windows-runtime

windows-store-apps