WPF项目中FilterDataGrid应用Material Design表头文本被遮挡问题求助

方法一：调整表头布局，让元素合理分配空间 #

问题根源是Material Design的表头模板没有为FilterDataGrid自带的筛选按钮预留空间，导致文本被挤压。你可以重写表头的ControlTemplate，用Grid重新组织排序指示器、文本、筛选按钮的布局：

<Style x:Key="MaterialDesignFilterColumnHeader" 
       TargetType="{x:Type dg:FilterDataGridColumnHeader}" 
       BasedOn="{StaticResource MaterialDesignDataGridColumnHeader}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type dg:FilterDataGridColumnHeader}">
                <Grid Background="{TemplateBinding Background}">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    
                    <!-- 排序指示器 -->
                    <Path x:Name="SortArrow" 
                          Grid.Column="0"
                          Data="M0,0 L1,0 0.5,1 z"
                          Fill="{TemplateBinding Foreground}"
                          Visibility="Collapsed"
                          Margin="4,0"/>
                    
                    <!-- 表头文本 -->
                    <ContentPresenter Grid.Column="1"
                                      HorizontalAlignment="Center"
                                      VerticalAlignment="Center"
                                      Margin="8,0"
                                      RecognizesAccessKey="True"/>
                    
                    <!-- 筛选按钮 -->
                    <Button x:Name="FilterBtn"
                            Grid.Column="2"
                            Style="{StaticResource MaterialDesignIconButton}"
                            Width="24" Height="24"
                            Margin="4,0"
                            Command="{Binding FilterCommand, RelativeSource={RelativeSource TemplatedParent}}">
                        <materialDesign:PackIcon Kind="Filter" Width="16" Height="16"/>
                    </Button>
                </Grid>
                
                <ControlTemplate.Triggers>
                    <Trigger Property="SortDirection" Value="Ascending">
                        <Setter TargetName="SortArrow" Property="Visibility" Value="Visible"/>
                        <Setter TargetName="SortArrow" Property="Data" Value="M0,1 L1,1 0.5,0 z"/>
                    </Trigger>
                    <Trigger Property="SortDirection" Value="Descending">
                        <Setter TargetName="SortArrow" Property="Visibility" Value="Visible"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

这个模板用Grid的星号列让文本自动填充剩余空间，排序指示器和筛选按钮分别占左右固定宽度，彻底避免挤压重叠，同时保留了Material Design的样式和排序功能。

方法二：快速调整筛选按钮与文本的间距 #

如果不想修改完整模板，可以直接调整筛选按钮的尺寸和表头文本的内边距，快速解决问题：

<Style TargetType="{x:Type dg:FilterDataGridColumnHeader}" 
       BasedOn="{StaticResource MaterialDesignDataGridColumnHeader}">
    <!-- 缩小筛选按钮尺寸 -->
    <Setter Property="FilterButtonStyle">
        <Setter.Value>
            <Style TargetType="Button" BasedOn="{StaticResource MaterialDesignIconButton}">
                <Setter Property="Width" Value="20"/>
                <Setter Property="Height" Value="20"/>
                <Setter Property="Margin" Value="2,0,4,0"/>
            </Style>
        </Setter.Value>
    </Setter>
    <!-- 给文本右侧留足按钮空间 -->
    <Setter Property="Padding" Value="8,0,28,0"/>
</Style>

这种方式无需改动模板结构，适合快速修复场景。

注意事项 #

不要直接设置表头背景为透明，这会导致模板内的排序指示器等元素丢失样式。所有调整都应该基于原Material Design样式的结构，通过修改布局、控件尺寸或内边距来解决空间冲突。

内容的提问来源于stack exchange，提问作者Keeday