UWPリストビューグループスタイル

Question

私はUWPアプリケーションを作成しています。グループを持つリストビューがあります。

XAMLコードはこのように書きます：

<Page.Resources> 
    <CollectionViewSource x:Name="ContactsCVS" IsSourceGrouped="True" /> 

    <!-- When using x:Bind, you need to set x:DataType --> 
    <DataTemplate x:Name="ContactListViewTemplate" x:DataType="data:Contact"> 
     <Grid> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="*"/> 
       <RowDefinition Height="*"/> 
      </Grid.RowDefinitions> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="Auto"/> 
       <ColumnDefinition Width="*"/> 
      </Grid.ColumnDefinitions> 
      <Ellipse x:Name="Ellipse" 
        Grid.RowSpan="2" 
        Width ="32" 
        Height="32" 
        Margin="6" 
        VerticalAlignment="Center" 
        HorizontalAlignment="Center" 
        Fill="LightGray"/> 
      <TextBlock Grid.Column="1" 
         Text="{x:Bind Name}" 
         x:Phase="1" 
         Style="{ThemeResource BaseTextBlockStyle}" 
         Margin="12,6,0,0"/> 
      <TextBlock Grid.Column="1" 
         Grid.Row="1" 
         Text="{x:Bind Position}" 
         x:Phase="2" 
         Style="{ThemeResource BodyTextBlockStyle}" 
         Margin="12,0,0,6"/> 
     </Grid> 
    </DataTemplate> 

</Page.Resources> 

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 

    <Grid.RowDefinitions> 
     <RowDefinition Height="Auto"/> 
     <RowDefinition Height="*"/> 
    </Grid.RowDefinitions> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="Auto"/> 
     <ColumnDefinition Width="*"/> 
    </Grid.ColumnDefinitions> 

    <ListView ItemsSource="{x:Bind ContactsCVS.View}" 
       ItemTemplate="{StaticResource ContactListViewTemplate}" 
       SelectionMode="Single" 
       ShowsScrollingPlaceholders="True" 
       Grid.Row="1" 
       Grid.ColumnSpan="2" x:Name="listViewMain"> 

     <ListView.GroupStyle> 
      <GroupStyle> 
       <GroupStyle.HeaderTemplate> 
        <DataTemplate x:DataType="data:GroupInfoList"> 
         <TextBlock Text="{x:Bind Key}" 
            /> 
        </DataTemplate> 
       </GroupStyle.HeaderTemplate> 
      </GroupStyle> 
     </ListView.GroupStyle> 
    </ListView> 
</Grid> 

、すべてが、私は、各グループは、国境のいくつかの種類を持ってしたいことを除いて、okです。これを達成するための方法

：このような？

Answer 1

@Ken Tuckerによると、GroupStyleを編集し、GroupStyle.Panelプロパティを使用して各グループの境界線を追加することができます。たとえば、次のようなGroupStyleを使用して：

<GroupStyle> 
    <GroupStyle.HeaderTemplate> 
     <DataTemplate x:DataType="data:GroupInfoList"> 
      <TextBlock Text="{x:Bind Key}" 
         Style="{ThemeResource TitleTextBlockStyle}" /> 
     </DataTemplate> 
    </GroupStyle.HeaderTemplate> 
    <GroupStyle.Panel> 
     <ItemsPanelTemplate> 
      <StackPanel BorderBrush="Red" BorderThickness="1" Margin="8,0,18,0" /> 
     </ItemsPanelTemplate> 
    </GroupStyle.Panel> 
</GroupStyle> 

しかし、あなたのコードでは、このGroupStyleを使用して効果がないかもしれません。これは、GroupStyle.PanelがUI仮想化では機能しないためです。 ListViewがItemsWrapGridまたはItemsStackPanelなどの仮想化パネルを使用する場合、GroupStyle.Panelは効果を持ちません。 ListViewの場合、デフォルトのItemsPanelはItemsStackPanelです。その後、各グループの境界線を見ることができるはず

<ListView.ItemsPanel> 
    <ItemsPanelTemplate> 
     <StackPanel /> 
    </ItemsPanelTemplate> 
</ListView.ItemsPanel> 

：だからあなたもListViewのItemsPanelなどを変更する必要があります。詳細は、this caseを参照してください。また、GroupStyle.Panelを使用すると、UIの仮想化の欠如としてパフォーマンスに影響する可能性があることにも注意してください。実際のシナリオに従ってこれを使用するかどうかを検討することができます。