xaml - 自定义 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 都会显示上述内容，但控件本身仍然有自己的默认样式。

如果您还想设置控件的样式(例如使其水平拉伸(stretch)或其他)，则必须为 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 内的内容。