自定义 GroupItem HeaderTemplate UWP

Question

我正在做一个 UWP 项目，我不想自定义组项的 HeaderTemplate，但我找不到如何完全自定义它。

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

                <ListView.GroupStyle>
                    <GroupStyle >
                        <GroupStyle.HeaderTemplate>
                            <DataTemplate x:DataType="data:GroupInfoList">
                                <TextBlock Text="{x:Bind Key}" 
                                           Style="{ThemeResource itleTextBlockStyle}"/>
<!-- Can't fully customize this part ?-->
                            </DataTemplate>
                        </GroupStyle.HeaderTemplate>
                    </GroupStyle>
                </ListView.GroupStyle>
            </ListView>

我的测试基于这个官方示例：

https://github.com/Microsoft/Windows-universal-samples/blob/de1bb527ec0327b767397d4c1a74a797356f4357/Samples/XamlListView/cs/Samples/SimpleListViewSample/SimpleListViewSample.xaml

我尝试用蓝色条带和自定义文本替换字母 A、B、C...。看起来很简单，但想不通它是如何工作的。

谢谢

Answer 1

HeaderTemplate定义了header内容的模板，但实际显示该内容的控件是ListViewHeaderItem。如果你愿意，你实际上可以简单地这样做：

<GroupStyle.HeaderTemplate>
    <DataTemplate x:DataType="data:GroupInfoList">
        <Border Background="LightSkyBlue">
            <TextBlock Text="My custom text" />
        </Border>
    </DataTemplate>
</GroupStyle.HeaderTemplate>

当ListView渲染时，每个组的ListViewHeaderItem会显示上面的内容，但控件本身仍然有自己的默认样式。

如果您还想设置控件的样式，可能使其水平拉伸或其他，您必须为 HeaderContainerStyle:

创建自己的样式

<GroupStyle.HeaderContainerStyle>
    <Style TargetType="ListViewHeaderItem">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListViewHeaderItem">
                    <ContentPresenter
                        x:Name="ContentPresenter"
                        Background="Red"
                        Margin="0"
                        HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalContentAlignment="Stretch"
                        Content="{TemplateBinding Content}"
                        ContentTemplate="{TemplateBinding ContentTemplate}"
                        ContentTransitions="{TemplateBinding ContentTransitions}" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</GroupStyle.HeaderContainerStyle>

ContentPresenter负责显示控件的Content，本例内容是HeaderTemplate.

里面的内容

自定义 GroupItem HeaderTemplate UWP

Customize GroupItem HeaderTemplate UWP

xaml

uwp

uwp-xaml