GridView有2行和水平滚动

时间:2015-05-11 16:50:56

标签: c# xaml gridview windows-runtime windows-store-apps

我试图在Windows应用商店应用项目enter image description here

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

我应该更改/添加什么才能获得此结果?

1 个答案:

答案 0 :(得分: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