櫥窗應用程序gridview自定義？

Question

我有一個通過ItemsSource屬性綁定到集合的Windows應用商店應用GridView。收集了5 items.By默認情況下，該項目被垂直顯示這樣

項目1項目3 ITEM5
項目2 ITEM4

是否有水平顯示的項目，並指定有多少項目在顯示方式這樣的排？

項目1 ITEM2
項目3 ITEM4 ITEM5

謝謝！

Answer 1

在WinRT中有沒有可以被指定爲GridView的ItemsPanelTemplate這裏VariableSizedWrapGrid特定行或列數，但有MaximumRowsOrColumns這取決於的VariableSizedWrapGridOrientation財產。

下面的代碼演示了輸出。

XAML代碼

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> 
    <Grid.RowDefinitions> 
     <RowDefinition /> 
     <RowDefinition /> 
    </Grid.RowDefinitions> 
    <GridView x:Name="MyGv" Height="200" Width="650"> 
     <GridView.ItemTemplate> 
      <DataTemplate> 
       <Border Height="50" Width="200" Background="Gray"> 
        <TextBlock FontSize="26.667" Text="{Binding}" VerticalAlignment="Center" HorizontalAlignment="Center"/> 
       </Border> 
      </DataTemplate> 
     </GridView.ItemTemplate> 
     <GridView.ItemsPanel> 
      <ItemsPanelTemplate> 
       <VariableSizedWrapGrid Orientation="Horizontal" MaximumRowsOrColumns="3"/> 
      </ItemsPanelTemplate> 
     </GridView.ItemsPanel> 
    </GridView> 
    <GridView x:Name="MyGv1" Height="200" Width="650" Grid.Row="1"> 
     <GridView.ItemTemplate> 
      <DataTemplate> 
       <Border Height="50" Width="200" Background="Gray"> 
        <TextBlock FontSize="26.667" Text="{Binding}" VerticalAlignment="Center" HorizontalAlignment="Center"/> 
       </Border> 
      </DataTemplate> 
     </GridView.ItemTemplate> 
     <GridView.ItemsPanel> 
      <ItemsPanelTemplate> 
       <VariableSizedWrapGrid Orientation="Vertical" MaximumRowsOrColumns="2"/> 
      </ItemsPanelTemplate> 
     </GridView.ItemsPanel> 
    </GridView> 
</Grid> 

C＃代碼

protected override void OnNavigatedTo(NavigationEventArgs e) 
{ 
    var ObserControl = new ObservableCollection<string>() { "Item 1", "Item 2", "Item 3", "Item 4", "Item 5"}; 
    MyGv.ItemsSource = ObserControl; 
    MyGv1.ItemsSource = ObserControl; 
} 

讓我知道如果你需要更多的幫助。

Answer 2

as Xyroid建議，有兩個GridViews可以解決這個問題。只是做了一些修改，以達到預期的結果。

XAML：

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="50" /> 
     <RowDefinition Height="50" /> 
    </Grid.RowDefinitions> 
    <GridView x:Name="MyGv" Margin="0" Grid.Row="0" Width="650"> 
     <GridView.ItemTemplate> 
      <DataTemplate> 
       <Border Height="50" Width="200" Background="Gray"> 
        <TextBlock FontSize="26.667" Text="{Binding}" VerticalAlignment="Center" HorizontalAlignment="Center"/> 
       </Border> 
      </DataTemplate> 
     </GridView.ItemTemplate> 
     <GridView.ItemsPanel> 
      <ItemsPanelTemplate> 
       <VariableSizedWrapGrid Orientation="Horizontal" MaximumRowsOrColumns="2"/> 
      </ItemsPanelTemplate> 
     </GridView.ItemsPanel> 
    </GridView> 
    <GridView x:Name="MyGv1" Margin="0" Height="60" Width="650" Grid.Row="1"> 
     <GridView.ItemTemplate> 
      <DataTemplate> 
       <Border Height="50" Width="200" Background="Gray"> 
        <TextBlock FontSize="26.667" Text="{Binding}" VerticalAlignment="Center" HorizontalAlignment="Center"/> 
       </Border> 
      </DataTemplate> 
     </GridView.ItemTemplate> 
     <GridView.ItemsPanel> 
      <ItemsPanelTemplate> 
       <VariableSizedWrapGrid Orientation="Vertical" MaximumRowsOrColumns="3"/> 
      </ItemsPanelTemplate> 
     </GridView.ItemsPanel> 
    </GridView> 
</Grid> 

C＃：

protected override void OnNavigatedTo(NavigationEventArgs e) 
    { 

     var ObserControl = new ObservableCollection<string>() { "Item 1", "Item 2", "Item 3", "Item 4", "Item 5" }; 
     MyGv.ItemsSource = ObserControl.Take(2); 
     MyGv1.ItemsSource = ObserControl.Skip(2); 
    }