Question

我正在自定义DataGrid的样式，我想描述列标题的ControlTemplate。

它基本上是一个TextBlock和一个图像，但问题是，当我添加控制图像时，我发现它也在我的标题的底部......

我已经尝试过许多方法来修复问题，比如使用DataTemplate，但是效果不好......

以下是XAML代码：

<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="MinWidth" Value="0" />
<Setter Property="MinHeight" Value="50" />
<Setter Property="FontFamily" Value="{StaticResource LatoRegular}" />
<Setter Property="Foreground" Value="#FF000000" />
<Setter Property="FontSize" Value="14" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
            <Grid>
                <Border Grid.Column="0" BorderThickness="0,1,0,1" BorderBrush="#FFEDEDED">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="20" />
                        </Grid.ColumnDefinitions>

                        <TextBlock Grid.Column="0" Margin="6" HorizontalAlignment="Left" VerticalAlignment="Center"
                                TextTrimming="CharacterEllipsis"
                                FontFamily="{StaticResource LatoRegular}"
                                Text="{TemplateBinding Content}" />

                        <Image Grid.Column="1" Height="16" Width="16" Source="..\..\View\Image\search.png" RenderOptions.BitmapScalingMode="HighQuality" />
                    </Grid>
                </Border>

                <Thumb x:Name="PART_LeftHeaderGripper" HorizontalAlignment="Left" Opacity="0" Cursor="SizeWE" />
                <Thumb x:Name="PART_RightHeaderGripper" HorizontalAlignment="Right" Opacity="0" Cursor="SizeWE" />
            </Grid>
        </ControlTemplate>
    </Setter.Value>
</Setter>

您是否有想法纠正或解决问题？

谢谢大家！

Answer 1

我成功了：

没有数据网格默认样式的键

<Style TargetType="{x:Type DataGridColumnHeader}">
    <Setter Property="SnapsToDevicePixels" Value="True" />
    <Setter Property="MinWidth" Value="0" />
    <Setter Property="MinHeight" Value="50" />
    <Setter Property="FontFamily" Value="{StaticResource LatoRegular}" />
    <Setter Property="Foreground" Value="#FF000000" />
    <Setter Property="FontSize" Value="14" />
    <Setter Property="Cursor" Value="Hand" />
    <Setter Property="FocusVisualStyle" Value="{x:Null}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
                <Border Grid.Column="0" BorderThickness="0,1,0,1" BorderBrush="#FFEDEDED" />
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

以及每列的样式

<Style x:Key="styleDtgHeader" TargetType="{x:Type DataGridColumnHeader}">
    <Setter Property="SnapsToDevicePixels" Value="True" />
    <Setter Property="MinWidth" Value="0" />
    <Setter Property="MinHeight" Value="50" />
    <Setter Property="FontFamily" Value="{StaticResource LatoRegular}" />
    <Setter Property="Foreground" Value="#FF000000" />
    <Setter Property="FontSize" Value="14" />
    <Setter Property="Cursor" Value="Hand" />
    <Setter Property="FocusVisualStyle" Value="{x:Null}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
                <Grid>
                    <Border Grid.Column="0" BorderThickness="0,1,0,1" BorderBrush="#FFEDEDED" Background="red">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="20" />
                            </Grid.ColumnDefinitions>

                            <TextBlock Grid.Column="0" Margin="6" HorizontalAlignment="Left" VerticalAlignment="Center"
                                    TextTrimming="CharacterEllipsis"
                                    FontFamily="{StaticResource LatoRegular}"
                                    Text="{TemplateBinding Content}" />

                            <Image Grid.Column="1" Height="16" Width="16" Source="..\..\View\Image\search.png" RenderOptions.BitmapScalingMode="HighQuality" />
                        </Grid>
                    </Border>

                    <Thumb x:Name="PART_LeftHeaderGripper" HorizontalAlignment="Left" Opacity="0" Cursor="SizeWE" />
                    <Thumb x:Name="PART_RightHeaderGripper" HorizontalAlignment="Right" Opacity="0" Cursor="SizeWE" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

但我怀疑这是一个干净的解决方案吗？

Answer 2

您需要做以下两件事才能解决问题：

将最后一列的宽度设置为*，以便不会创建额外的列。
在DataGridColumnHeader控件模板中，将网格第一列宽度设置为＆＃34; auto＆＃34;和左边的图像HorizontalAlingment。

这是代码

<Style TargetType="{x:Type DataGridColumnHeader}">
        <Setter Property="SnapsToDevicePixels" Value="True" />
        <Setter Property="MinWidth" Value="0" />
        <Setter Property="MinHeight" Value="50" />
        <Setter Property="FontFamily" Value="{StaticResource LatoRegular}" />
        <Setter Property="Foreground" Value="#FF000000" />
        <Setter Property="FontSize" Value="14" />
        <Setter Property="Cursor" Value="Hand" />
        <Setter Property="FocusVisualStyle" Value="{x:Null}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
                    <Grid>
                        <Border Grid.Column="0" BorderThickness="0,1,0,1" BorderBrush="#FFEDEDED">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="auto" />
                                    <ColumnDefinition Width="20" />
                                </Grid.ColumnDefinitions>

                                <TextBlock Grid.Column="0" Margin="6" HorizontalAlignment="Left" VerticalAlignment="Center"
                            TextTrimming="CharacterEllipsis"
                            Text="{TemplateBinding Content}" />
                                <Image Grid.Column="1" Height="16" Width="16" Source="C:\Users\a0711212\Desktop\profilePic.png"
                                      HorizontalAlignment="Left"  RenderOptions.BitmapScalingMode="HighQuality" />
                            </Grid>
                        </Border>

                        <Thumb x:Name="PART_LeftHeaderGripper" HorizontalAlignment="Left" Opacity="0" Cursor="SizeWE" />
                        <Thumb x:Name="PART_RightHeaderGripper" HorizontalAlignment="Right" Opacity="0" Cursor="SizeWE" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

ControlTemplate DataGridColumnHeader控制可见的外部列

2 个答案: