GridView with 2 rows and horizontal scroll

Question

im trying to achieve something looking like this using a GridView in a Windows Store App project

i can get my items in a single line with horizontal scroll, but i want to have a GridView with 2 rows.

<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>

what should i change/add to get this result?

Answer 1

I have to say that is not really intuitive and the default behavior is usually vertical for the scrollviewer, here is the solution:

 <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>

Replace with your template and itemssource as you had