UWP Сгруппированного GridView с WrapGrid

Question

Я разрабатывает UWP приложения, и я стараюсь, чтобы выровнять горизонтально мои детали в каждой GridView группы

У меня есть это:

GROUP 1 

Data 1 | Data 2 | Data 3 

Data 1 | Data 2 | Data 3 

Data 1 | Data 2 | Data 3 

GROUP 2 

Data 1 | Data 2 | Data 3 

Data 1 | Data 2 | Data 3 

и я хочу это:

GROUP 1 

______________________________Data 1 | Data 2 | Data 3 

______________________________Data 1 | Data 2 | Data 3 

______________________________Data 1 | Data 2 | Data 3 

GROUP 2 

______________________________Data 1 | Data 2 | Data 3 

______________________________Data 1 | Data 2 | Data 3 

Я заказываю для выравнивания своих предметов. Я использую WrapGrid. Я также пробовал с негруппированным gridview, и мой код работает нормально.

<GridView Grid.Column="0" ItemsSource="{Binding Source={StaticResource GroupBycodeFamille}}" ItemTemplate="{StaticResource DataTempateCatalogue}"> 
<GridView.GroupStyle> 
<GroupStyle> 
<GroupStyle.HeaderTemplate> 
<DataTemplate x:DataType="viewModels:GroupInfoList"> 
<TextBlock Text="{x:Bind Key}" Style="{ThemeResource TitleTextBlockStyle}"/> 
</DataTemplate> 
</GroupStyle.HeaderTemplate> 
</GroupStyle> 
</GridView.GroupStyle> 
<GridView.ItemsPanel> 
<ItemsPanelTemplate> 
<WrapGrid Orientation="Horizontal" HorizontalAlignment="Center"/> 
</ItemsPanelTemplate> 
</GridView.ItemsPanel> 
</GridView> 

Не могли бы вы помочь?

Заранее спасибо

Answer 1

Вы можете получить то, что вы хотите, установив GroupStyle.Panel property. Это свойство задает шаблон, который создает панель, используемую для размещения элементов. Но GridViewItem has two templates, когда GridView «s ItemsPanel является ItemsWrapGrid (по умолчанию) или ItemsStackPanel, GridViewItem использует шаблон, который использует GridViewItemPresenter вместо UIElement дерева для улучшения производительности сетки. И при использовании этого шаблона значение GroupStyle.Panel не повлияет на GridView. Нам нужен GridViewItem, используя его второй шаблон, установив GridView's ItemsPanel в некоторые другие Panel. Как ваша группа выровнена по вертикали, мы можем установить GridView «s ItemsPanel к:

<GridView.ItemsPanel> 
    <ItemsPanelTemplate> 
     <StackPanel HorizontalAlignment="Center" Orientation="Vertical" /> 
    </ItemsPanelTemplate> 
</GridView.ItemsPanel> 

Тогда мы можем установить GroupStyle.Panel с левой Margin для достижения своей цели. Но обратите внимание, что:

Корневой элемент шаблона объявлен для ItemsPanelTemplate в GroupStyle.Panel собственности не может быть виртуализацию панель. Панели виртуализации определяются как любые типы, которые производятся от VirtualizingPanel, например класс VirtualizingStackPanel.

Таким образом, мы не можем использовать WrapGrid здесь, мы можем использовать StackPanel но элементы будут расположены в одну линию. Чтобы упорядочить элементы в несколько строк, нам нужен Panel, как WrapPanel в WPF. Мы можем его настроить или использовать третью сторону WrapPanel как в WinRTXamlToolkit. Использование WinRTXamlToolkit, например:

xmlns:toolkit="using:WinRTXamlToolkit.Controls" 

<GroupStyle.Panel> 
    <ItemsPanelTemplate> 
     <toolkit:WrapPanel Margin="200,0,0,0" Orientation="Horizontal" /> 
    </ItemsPanelTemplate> 
</GroupStyle.Panel> 

Полный код XAML может понравиться:

<GridView Grid.Column="0" ItemsSource="{Binding Source={StaticResource GroupBycodeFamille}}" ItemTemplate="{StaticResource DataTempateCatalogue}"> 
    <GridView.GroupStyle> 
     <GroupStyle> 
      <GroupStyle.HeaderTemplate> 
       <DataTemplate x:DataType="viewModels:GroupInfoList"> 
        <TextBlock Text="{x:Bind Key}" Style="{ThemeResource TitleTextBlockStyle}"/> 
       </DataTemplate> 
      </GroupStyle.HeaderTemplate> 
      <GroupStyle.Panel> 
       <ItemsPanelTemplate> 
        <toolkit:WrapPanel Margin="200,0,0,0" Orientation="Horizontal" /> 
       </ItemsPanelTemplate> 
      </GroupStyle.Panel> 
     </GroupStyle> 
    </GridView.GroupStyle> 
    <GridView.ItemsPanel> 
     <ItemsPanelTemplate> 
      <StackPanel HorizontalAlignment="Center" Orientation="Vertical" /> 
     </ItemsPanelTemplate> 
    </GridView.ItemsPanel> 
</GridView> 

Ниже выходной, когда я тестировал в моей стороне: