C# UWP listview组样式

我正在创建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>

一切都很好，只是我想让每个小组都有某种边界。像这样：

---

如何实现这一点？

正如@Ken Tucker所说，您可以编辑

GroupStyle

并使用属性为每个组添加边框。例如，使用如下所示的

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>

---

然后您应该能够看到每个组的边界。有关更多信息，请参阅。另外请注意，由于缺少UI虚拟化，使用

GroupStyle.Panel

可能会影响性能。你可以考虑是否根据你的真实情况使用这个。

可能的副本。这是标题项样式，这是组样式。替换组样式中的ItemsPanelTemplate

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