在ColumnHeaderStyle模板中的按钮内设置图像源

本文关键字：设置 图像 按钮 ColumnHeaderStyle | 更新日期: 2023-09-27 18:24:18

我基本上希望列的标题像按钮一样执行，我认为使用ColumnHEaderStyle会很容易，但我认为我缺少了

<Window.Resources>
    <Style x:Key="ColumnHeadTemplate" TargetType="{x:Type DataGridColumnHeader}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
                    <Grid Height="82">
                        <Button x:Name="button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                            <Image   Stretch="Uniform" Height="77" Width="120" VerticalAlignment="Stretch" Source="{TemplateBinding ??}" />
                        </Button>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>
<DataGrid x:Name="dataGrid" SelectionChanged="dataGrid_SelectionChanged" ColumnHeaderStyle="{DynamicResource ColumnHeadTemplate}">
    <DataGrid.Columns>
        <DataGridCheckBoxColumn Binding="{x:Null}" ClipboardContentBinding="{x:Null}"/>
        <DataGridCheckBoxColumn Binding="{x:Null}" ClipboardContentBinding="{x:Null}"/>
        <DataGridCheckBoxColumn Binding="{x:Null}" ClipboardContentBinding="{x:Null}"/>
    </DataGrid.Columns>
</DataGrid>

这个模板是有效的，但现在我一直在尝试为每个列设置图像源，如何才能做到这一点？

编辑1测试后

<Window.Resources>
    <Style x:Key="ColumnHeadTemplate" TargetType="{x:Type DataGridColumnHeader}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
                    <Grid Height="82">
                        <Button x:Name="button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                            <Image   Stretch="Uniform" Height="77" Width="120" VerticalAlignment="Stretch" Source="{Binding Path=Column.Header, RelativeSource={RelativeSource Mode=TemplatedParent}}"  />
                        </Button>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>
<Viewbox Stretch="Fill">
    <DataGrid x:Name="dataGrid" SelectionChanged="dataGrid_SelectionChanged" ColumnHeaderStyle="{DynamicResource ColumnHeadTemplate}" Height="319" Width="1014">
        <DataGrid.Columns>
            <DataGridCheckBoxColumn Binding="{x:Null}" ClipboardContentBinding="{x:Null}" Header="pack://siteoforigin:,,,/Resources/a_128.png"/>
            <DataGridCheckBoxColumn Binding="{x:Null}" ClipboardContentBinding="{x:Null}" Header="pack://siteoforigin:,,,/Resources/b_128.png"/>
            <DataGridCheckBoxColumn Binding="{x:Null}" ClipboardContentBinding="{x:Null}" Header="pack://siteoforigin:,,,/Resources/c_128.png"/>
        </DataGrid.Columns>
    </DataGrid>
</Viewbox>

但是图像没有显示在标题中

在ColumnHeaderStyle模板中的按钮内设置图像源

您正在更改将应用于所有列标题的模板。如果你想使用控制模板，并且仍然想要不同的图像作为单独的标题，你可以选择

  1. 样式选择器，

  2. 如果您仍然想使用TemplateBinding语法，那么您可以在Button的Tag属性中获取ImageSource值，并在当前模板中像<Image Source="{TemplateBinding Tag}" />一样绑定Image的源。

如果您想要为单独的col标头提供单独的图像，您可以选择

  1. 每个列标题中的硬代码值，如<Image source = "img/headerimg1.png"/>或

  2. 绑定源属性，如<Image source = {x:Static local:SomeClass.Src1} />。

                <DataGridTemplateColumn.HeaderTemplate>
                <DataTemplate>                            
                 <Image Source="{x:Static local:SomeClass.Src1}"/>                                            
                </DataTemplate>
            </DataGridTemplateColumn.HeaderTemplate>

您可以将图像绑定到DataGridColumn的某些属性，例如Header属性。在这种情况下，Image代码如下所示。

<Image Stretch="Uniform" Height="60" Width="100" VerticalAlignment="Stretch"                                                 
       Source="{Binding Path=Column.Header, RelativeSource={RelativeSource Mode=TemplatedParent}}" />

以及Columns代码。如果你愿意的话，我想你可以在标题中使用Bindings。

<DataGrid.Columns>
    <DataGridCheckBoxColumn Header="/WPFTest;component/Images/GPlus.png" Binding="{x:Null}" ClipboardContentBinding="{x:Null}"/>
    <DataGridCheckBoxColumn Header="/WPFTest;component/Images/GMain.ico" Binding="{x:Null}" ClipboardContentBinding="{x:Null}"/>
    <DataGridCheckBoxColumn Binding="{x:Null}" ClipboardContentBinding="{x:Null}"/>
</DataGrid.Columns>

更新

另一种方式。您可以在Resources中定义按钮内容。

<Image x:Key="testImage" Height="60" Width="100" Source="/WPFTest;component/Images/GPlus.png" />
<Image x:Key="testImage2" Height="60" Width="100" Source="/WPFTest;component/Images/GMain.ico" />

并且应该更改ControlTemplate中的按钮。

<Button x:Name="button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
        Content="{Binding Path=Column.Header, RelativeSource={RelativeSource Mode=TemplatedParent}}">

和CCD_ 11。

<DataGrid.Columns>
    <DataGridCheckBoxColumn Header="{StaticResource testImage}" Binding="{x:Null}" ClipboardContentBinding="{x:Null}"/>
    <DataGridCheckBoxColumn Header="{StaticResource testImage2}" Binding="{x:Null}" ClipboardContentBinding="{x:Null}"/>
    <DataGridCheckBoxColumn Binding="{x:Null}" ClipboardContentBinding="{x:Null}"/>
</DataGrid.Columns>
相关文章：