Question

我在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>

这是它的外观

Answer 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>

它看起来像：
Spring Session

我们之间存在差距，因为默认情况下，ListViewHeaderItem在其模板中Rectangle下有ContentPresenter。此Rectangle用于显示横向规则，如果您从Background中移除HeaderContainerStyle，您可以清楚地看到这一点：

以下是ListViewHeaderItem：

的defalut样式和模板

<!-- 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>

有关详细信息，请参阅。

要消除差距，我们只需从Rectangle的模板中删除ListViewHeaderItem，然后使用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>

ListView标题模板

1 个答案: