Question

我基本上希望列的标题作为按钮执行，我使用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>

但图片未显示在标题

中

Answer 1

您可以将图像绑定到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}}">

Columns。

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

Answer 2

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

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

如果您想要单独的col标题的单独图像，您可以

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

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

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

在ColumnHeaderStyle模板中的Button内设置Image源

2 个答案: