Adding an image and a textblock control inside a DataGridTemplateColumn header

Question

In our WPF application, we have a screen where we display a grid, the column's header right now is a Text, I'm supposed to add an image beside the text. This is the XAML code,

<Custom:DataGrid.Columns>
       <Custom:DataGridTemplateColumn Header="{Binding EmailIDHeader, Source={StaticResource LiteralDictionary}}" Width = "0.1*" CellTemplate="{StaticResource EmailIDTemplate}" SortMemberPath="EmailID"/>
 </Custom:DataGrid.Columns>

<DataTemplate x:Key="EmailIDTemplate">
        <Grid MinWidth="10" Margin="5,0,5,0">
            <TextBlock HorizontalAlignment="Left"  Text="{Binding customerItem.EmailID}" Margin="0,0,3,0"/>
        </Grid>

EMailIDHeader will load the Text value for the Header, I have to add an image beside it. How do I achieve this? I tried the solution given here. But this just shows me an empty header column.

Share the `EmailIDTemplate` code you tried. – Gopichandar Feb 17 '17 at 12:30 — Gopichandar, Feb 17 '17 at 12:30

Bruno · Accepted Answer · 2017-02-17T16:42:58.040

Define a DataTemplate where you organize your textblock and your image as desired, and set the property HeaderTemplate with this resource.

The data template for the header:

<DataTemplate x:Key="EmailIDHeaderTemplate">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition/>
                <RowDefinition/>
            </Grid.RowDefinitions>
            <Image Source="SPhotoEditor-20170120_075433.jpg" Width="20" Height="20"></Image>
            <TextBlock HorizontalAlignment="Left"  Text="{Binding EmailIDHeader, Source={StaticResource LiteralDictionary}}" Margin="0,0,3,0"/>

        </Grid>
</DataTemplate>

For the cell :

<DataTemplate x:Key="EmailIDTemplate">
    <Grid MinWidth="10" Margin="5,0,5,0">
        <TextBlock HorizontalAlignment="Left"  Text="{Binding customerItem.EmailID}" Margin="0,0,3,0"/>
    </Grid>
</DataTemplate>

Your grid :

<Custom:DataGrid.Columns>
   <Custom:DataGridTemplateColumn  HeaderTemplate="{StaticResource EmailIDHeaderTemplate}" CellTemplate="{StaticResource EmailIDTemplate}" Width = "0.1*"  SortMemberPath="EmailID"/>
</Custom:DataGrid.Columns>

This is not working, the header comes empty. I tried placing two textblocks inside instead of image, that is also not coming :( — user1890098, Feb 17 '17 at 15:30
Why there is somme "Custom" tag in front of your controls. Are they some kind of customized controls inherited from Datagrid and DataGridTemplatecolumn ? Because n a standard data grid it works like a charm (I've implemented the code i provided before posting it) — Bruno, Feb 17 '17 at 16:42

score 0 · Answer 2 · answered Feb 17 '17 at 13:14

Assuming that the model is

public class Model : INotifyPropertyChanged
{
    string _value;
    public string Value{ get { return _value; } set { _value = value; RaisePropertyChanged("Value"); } }

    public event PropertyChangedEventHandler PropertyChanged;
    void RaisePropertyChanged(string propname)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propname));
    }
}

and there are two properties in the View Model:

    string _name;
    public string Name { get { return _name; } set { _name = value; RaisePropertyChanged("Name"); } }


    string _imagePath;
    public string ImagePath { get { return _imagePath; } set { _imagePath = value; RaisePropertyChanged("ImagePath"); } }

You can use the following View:

    <DataGrid DataContext="{Binding}" ItemsSource="{Binding Models}" AutoGenerateColumns="False">
        <DataGrid.Columns>
            <DataGridTemplateColumn>
                <DataGridTemplateColumn.HeaderTemplate>
                    <DataTemplate>
                        <StackPanel>
                            <TextBlock Text="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DataGrid}}, Path=DataContext.Name}"/>
                            <Image Source="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DataGrid}}, Path=DataContext.ImagePath}"/>
                        </StackPanel>
                    </DataTemplate>
                </DataGridTemplateColumn.HeaderTemplate>
                <DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding Value}"/>
                    </DataTemplate>
                </DataGridTemplateColumn.CellTemplate>
            </DataGridTemplateColumn>
        </DataGrid.Columns>
    </DataGrid>

Adding an image and a textblock control inside a DataGridTemplateColumn header

2 Answers2