2015-05-11 59 views
0

我嘗試實現的東西看起來像這樣在Windows Store應用項目中使用一個GridView enter image description here的GridView 2行和水平滾動

我可以讓我的項目與水平滾動一行,但我想有一個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

我不得不說,是不是真的直觀的默認行爲是對的ScrollViewer通常垂直,這裏是解決方案:

<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時,你有

+0

工作,謝謝 – Ric

+0

另一個疑問,我可以在哪裏編輯每個項目之間的邊距? – Ric

+0

沒關係,我管理使用此https://social.msdn.microsoft.com/Forums/vstudio/en-US/887e0d68-c815-4c24-987f-c78afe609858/whats-the-standard-margingap-between-the-gridview -items?論壇= winappswithcsharp – Ric