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定义了标头内容的模板，但是显示此内容的实际控件是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

1 个答案: