ListView 标题模板答案

【问题标题】：ListView Header TemplateListView 标题模板
【发布时间】：2016-06-28 14:53:16
【问题描述】：

我在 listView 中为分组项目的标题使用控件，我希望控件填充整个标题框架，但面板底部和控件之间始终存在间隙。这是下面的代码：

<ListView.GroupStyle>
                        <GroupStyle HidesIfEmpty="True">
                            <GroupStyle.HeaderContainerStyle>
                                <Style TargetType="ListViewHeaderItem">
                                    <Setter Property="Margin" Value="0"/>
                                    <Setter Property="Padding" Value="0"/>
                                    <Setter Property="Background" Value="{StaticResource MyRed}"/>
                                    <Setter Property="HorizontalAlignment" Value="Stretch"/>
                                    <Setter Property="VerticalAlignment" Value="Stretch"/>
                                    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                                    <Setter Property="VerticalContentAlignment" Value="Stretch"/>
                                </Style>
                            </GroupStyle.HeaderContainerStyle>
                            <GroupStyle.HeaderTemplate>
                                <DataTemplate>
                                    <ctrl:HeaderControl Label="{Binding Key}"
                                                        Foreground="{StaticResource MyLightText}"
                                                        Background="{StaticResource MyDarkText}"/>
                                </DataTemplate>
                            </GroupStyle.HeaderTemplate>
                        </GroupStyle>
                    </ListView.GroupStyle>

这是它的样子

【问题讨论】：

标签： c# xaml uwp win-universal-app

【解决方案1】：

我不确定您的HeaderControl 是如何实现的。但是，我可以通过 Grid 包含 TextBlock 来重现您的问题，如下所示：

<ListView.GroupStyle>
    <GroupStyle HidesIfEmpty="True">
        <GroupStyle.HeaderContainerStyle>
            <Style TargetType="ListViewHeaderItem">
                <Setter Property="Margin" Value="0" />
                <Setter Property="Padding" Value="0" />
                <Setter Property="Background" Value="Red" />
                <Setter Property="HorizontalAlignment" Value="Stretch" />
                <Setter Property="VerticalAlignment" Value="Stretch" />
                <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                <Setter Property="VerticalContentAlignment" Value="Stretch" />
            </Style>
        </GroupStyle.HeaderContainerStyle>
        <GroupStyle.HeaderTemplate>
            <DataTemplate>
                <Grid Background="DarkBlue">
                    <TextBlock Margin="20" Foreground="White" Text="{Binding Key}" />
                </Grid>
                <!--<ctrl:HeaderControl Label="{Binding Key}"
                                            Foreground="{StaticResource MyLightText}"
                                            Background="{StaticResource MyDarkText}" />-->
            </DataTemplate>
        </GroupStyle.HeaderTemplate>
    </GroupStyle>
</ListView.GroupStyle>

它看起来像：

我们在这里有一个空白，因为默认情况下，ListViewHeaderItem 在其模板中的ContentPresenter 下有一个Rectangle。这个Rectangle 用于显示一个横线，如果你把Background从HeaderContainerStyle中去掉，你可以清楚地看到这一点：

以下是ListViewHeaderItem的默认样式和模板：

<!-- Default style for Windows.UI.Xaml.Controls.ListViewHeaderItem -->
<Style TargetType="ListViewHeaderItem">
    <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
    <Setter Property="FontSize" Value="{ThemeResource ListViewHeaderItemThemeFontSize}" />
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="Margin" Value="0,0,0,4"/>
    <Setter Property="Padding" Value="12,8,12,0"/>
    <Setter Property="HorizontalContentAlignment" Value="Left" />
    <Setter Property="VerticalContentAlignment" Value="Top" />
    <Setter Property="MinHeight" Value="{ThemeResource ListViewHeaderItemMinHeight}"/>
    <Setter Property="UseSystemFocusVisuals" Value="True" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListViewHeaderItem">
                <StackPanel Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                    <ContentPresenter x:Name="ContentPresenter"
                                      Margin="{TemplateBinding Padding}"
                                      Content="{TemplateBinding Content}"
                                      ContentTemplate="{TemplateBinding ContentTemplate}"
                                      ContentTransitions="{TemplateBinding ContentTransitions}"
                                      HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                      VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    <Rectangle Stroke="{ThemeResource SystemControlForegroundBaseLowBrush}"
                               StrokeThickness="0.5"
                               Height="1"
                               VerticalAlignment="Bottom"
                               HorizontalAlignment="Stretch"
                               Margin="12,8,12,0"/>
                </StackPanel>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

更多信息，请查看ListViewHeaderItem styles and templates。

要消除差距，我们可以从ListViewHeaderItem 的模板中删除Rectangle 并使用HeaderContainerStyle 中的新模板，例如：

<GroupStyle HidesIfEmpty="True">
    <GroupStyle.HeaderContainerStyle>
        <Style TargetType="ListViewHeaderItem">
            <Setter Property="Margin" Value="0" />
            <Setter Property="Padding" Value="0" />
            <Setter Property="Background" Value="Red" />
            <Setter Property="HorizontalAlignment" Value="Stretch" />
            <Setter Property="VerticalAlignment" Value="Stretch" />
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <Setter Property="VerticalContentAlignment" Value="Stretch" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListViewHeaderItem">
                        <StackPanel Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                            <ContentPresenter x:Name="ContentPresenter"
                                              Margin="{TemplateBinding Padding}"
                                              HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                              VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                              Content="{TemplateBinding Content}"
                                              ContentTemplate="{TemplateBinding ContentTemplate}"
                                              ContentTransitions="{TemplateBinding ContentTransitions}" />
                        </StackPanel>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </GroupStyle.HeaderContainerStyle>
    <GroupStyle.HeaderTemplate>
        <DataTemplate>
            <Grid Background="DarkBlue">
                <TextBlock Margin="20" Foreground="White" Text="{Binding Key}" />
            </Grid>
            <!--<ctrl:HeaderControl Label="{Binding Key}"
                                        Foreground="{StaticResource MyLightText}"
                                        Background="{StaticResource MyDarkText}" />-->
        </DataTemplate>
    </GroupStyle.HeaderTemplate>
</GroupStyle>

【讨论】：