如何将图像设置为 DataGrid 标题背景？

Posted 2023-02-19

【中文标题】如何将图像设置为 DataGrid 标题背景？

【英文标题】：How to set an image as DataGrid header background?

【发布时间】：2013-07-03 10:16:18

【问题描述】：

下面是我绑定到数据源的DataGrid xaml。

<DataGrid AutoGenerateColumns="False" Height="240" Name="dtDemo"
    ItemsSource="Binding Path=LfdConnections">
    <DataGrid.ColumnHeaderStyle>
        <Style TargetType="x:Type DataGridColumnHeader">
            <Setter Property="FontWeight" Value="Bold" />
        </Style>
    </DataGrid.ColumnHeaderStyle>
    <DataGrid.Resources>
        <ResourceDictionary>
            <Style x:Key="x:Type DataGridCell" TargetType="x:Type DataGridCell">
                <Setter Property="Background" Value="Transparent" />
                <Setter Property="BorderBrush" Value="Transparent" />
                <Style.Triggers>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter Property="Background" Value="Transparent" />
                        <Setter Property="BorderBrush" Value="Transparent" />
                    </Trigger>
                </Style.Triggers>
            </Style>
            <Style TargetType="x:Type DataGridRow">
                <Setter Property="Background" Value="Transparent" />
                <Setter Property="BorderBrush" Value="Transparent" />
                <Style.Triggers>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter Property="Background" Value="Transparent" />
                        <Setter Property="BorderBrush" Value="Transparent" />
                    </Trigger>
                </Style.Triggers>
            </Style>
        </ResourceDictionary>
    </DataGrid.Resources>
    <DataGrid.Columns>
        <DataGridTemplateColumn Header="Monitor" Width="55" IsReadOnly="True">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <Label Content="Binding Path=MonitorName" Height="28" Name="lblMonitorName" />
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
        <DataGridTemplateColumn Header="Connection" Width="70" IsReadOnly="True">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <ComboBox ItemsSource="Binding Path=ConnTypes,Mode=OneTime, UpdateSourceTrigger=PropertyChanged" SelectedIndex="0">
                    </ComboBox>
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
        <DataGridTemplateColumn Header="Port/IP" Width="70" IsReadOnly="True">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <ComboBox ItemsSource="Binding Path=PortTypes,Mode=OneTime, UpdateSourceTrigger=PropertyChanged"
                                              SelectedIndex="0"/>
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
        <DataGridTemplateColumn Header="ID" Width="50" IsReadOnly="True">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <ComboBox ItemsSource="Binding Path=LfdIds,Mode=OneTime, UpdateSourceTrigger=PropertyChanged"
                                              SelectedIndex="0"/>
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
        <DataGridTemplateColumn Header="Source" Width="130" IsReadOnly="True">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <ComboBox ItemsSource="Binding Path=SourceTypes,Mode=OneTime, UpdateSourceTrigger=PropertyChanged"
                                              SelectedIndex="0"/>
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
        <DataGridTemplateColumn Header="Connect" Width="*" IsReadOnly="True">
            <DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <Button Content="Connect" Height="23" Name="btnConnect" Width="75" />
                </DataTemplate>
            </DataGridTemplateColumn.CellTemplate>
        </DataGridTemplateColumn>
    </DataGrid.Columns>
</DataGrid>

我想在这个DataGrid 中添加一个image 作为列标题。你能告诉我怎么做吗？

【问题讨论】：

您想将图片设置为背景还是添加为标题的一部分？

您应该根据需要设置 DataGridColumnHeader 模板的样式。要么你可以在msdn网站上搜索模板样式，或者尝试使用Expression Blend来获取。

@dkozl 我想要图片作为背景。

@Santux 我没有 Expression Blend。 :(

您可以在这里查看模板样式：msdn.microsoft.com/en-us/library/cc278066(v=vs.95).aspx它可以帮助您。

【参考方案1】：

请试试下面的sn-p

<DataGridTemplateColumn>
   <DataGridTemplateColumn.Header>
      <Grid>
         <Image Source="C:\Users\Vimal\Desktop\1.jpg" />
         <TextBlock Text="Monitor"  HorizontalAlignment="Center" VerticalAlignment="Center"/>
      </Grid>
   </DataGridTemplateColumn.Header>
</DataGridTemplateColumn>

【参考方案2】：

这是一个相当古老的问题，但如果它对某人有用，我必须对 Vimal 的答案进行一些更改。这是我的代码：

<DataGridTemplateColumn Header="EstadoSinc" CanUserSort="False" MinWidth="60" Width="60" MaxWidth="60" >
    <DataGridTemplateColumn.HeaderTemplate>
        <DataTemplate>
            <Image Source="/MyApp;component/Images/Sincronizar.png" />
        </DataTemplate>
    </DataGridTemplateColumn.HeaderTemplate>
    <DataGridTemplateColumn.CellTemplate>
        <DataTemplate>
            <Label Content="Binding Path=IdEstadoSincronizacion" />
        </DataTemplate>
    </DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>