How to: Display an Image within a Column Header

• Apr 15, 2018
• 3 minutes to read

This example demonstrates how to display an image within the 'Product Name' column's header.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/how-to-display-an-image-within-a-column-header-e1629.

Window1.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace DXGrid_DisplayHeaderImage {
    public partial class Window1 : Window {
        public Window1() {
            InitializeComponent();
            grid.ItemsSource = Products.GetData();
        }
    }
    public class Products {
        public static List<Product> GetData() {
            List<Product> data = new List<Product>();
            data.Add(new Product() { ProductName = "Chai",
                UnitPrice = 18, UnitsOnOrder = 10 });
            data.Add(new Product() { ProductName = "Ipoh Coffee",
                UnitPrice = 36.8, UnitsOnOrder = 12 });
            data.Add(new Product() { ProductName = "Outback Lager",
                UnitPrice = 12, UnitsOnOrder = 25 });
            data.Add(new Product() { ProductName = "Boston Crab Meat",
                UnitPrice = 18.4, UnitsOnOrder = 18 });
            data.Add(new Product() { ProductName = "Konbu",
                UnitPrice = 6, UnitsOnOrder = 24 });
            return data;
        }
    }
    public class Product {
        public string ProductName { get; set; }
        public double UnitPrice { get; set; }
        public int UnitsOnOrder { get; set; }
    }
}

Window1.xaml

<Window x:Class="DXGrid_DisplayHeaderImage.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors" xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid" Title="Window1" Height="365" Width="598">
    <Window.Resources>
        <DataTemplate x:Key="productHeader">
            <StackPanel Orientation="Horizontal">
                <Image Source="Product.png" Stretch="None" />
                <TextBlock Margin="3,0,0,0" Text="{Binding}" Foreground="WhiteSmoke" FontWeight="Bold" />
            </StackPanel>
        </DataTemplate>
    </Window.Resources>
    <Grid>
        <dxg:GridControl x:Name="grid">
            <dxg:GridControl.Columns>
                <dxg:GridColumn FieldName="ProductName" HeaderTemplate="{StaticResource productHeader}">
                    Product</dxg:GridColumn>
                <dxg:GridColumn FieldName="UnitPrice">Unit Price
                    <dxg:GridColumn.EditSettings>
                        <dxe:SpinEditSettings DisplayFormat="c2" MinValue="1" MaxValue="999" />
                    </dxg:GridColumn.EditSettings>
                </dxg:GridColumn>
                <dxg:GridColumn FieldName="UnitsOnOrder">Units On Order</dxg:GridColumn>
            </dxg:GridControl.Columns>
            <dxg:GridControl.View>
                <dxg:TableView AutoWidth="True" />
            </dxg:GridControl.View>
        </dxg:GridControl>
    </Grid>
</Window>

Application.xaml.vb

Imports Microsoft.VisualBasic
Imports System
Imports System.Collections.Generic
Imports System.Configuration
Imports System.Data
Imports System.Linq
Imports System.Windows

Namespace DXGrid_DisplayHeaderImage
    ''' <summary>
    ''' Interaction logic for App.xaml
    ''' </summary>
    Partial Public Class App
        Inherits Application
    End Class
End Namespace

Application.xaml

<Application x:Class="DXGrid_DisplayHeaderImage.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" StartupUri="Window1.xaml">
    <Application.Resources>

    </Application.Resources>
</Application>

Window1.xaml.vb

Imports Microsoft.VisualBasic
Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Text
Imports System.Windows
Imports System.Windows.Controls
Imports System.Windows.Data
Imports System.Windows.Documents
Imports System.Windows.Input
Imports System.Windows.Media
Imports System.Windows.Media.Imaging
Imports System.Windows.Navigation
Imports System.Windows.Shapes

Namespace DXGrid_DisplayHeaderImage
    Partial Public Class Window1
        Inherits Window
        Public Sub New()
            InitializeComponent()
            grid.ItemsSource = Products.GetData()
        End Sub
    End Class
    Public Class Products
        Public Shared Function GetData() As List(Of Product)
            Dim data As New List(Of Product)()
            data.Add(New Product() With {.ProductName = "Chai", _
                .UnitPrice = 18, .UnitsOnOrder = 10})
            data.Add(New Product() With {.ProductName = "Ipoh Coffee", _
                .UnitPrice = 36.8, .UnitsOnOrder = 12})
            data.Add(New Product() With {.ProductName = "Outback Lager", _
                .UnitPrice = 12, .UnitsOnOrder = 25})
            data.Add(New Product() With {.ProductName = "Boston Crab Meat", _
                .UnitPrice = 18.4, .UnitsOnOrder = 18})
            data.Add(New Product() With {.ProductName = "Konbu", _
                .UnitPrice = 6, .UnitsOnOrder = 24})
            Return data
        End Function
    End Class
    Public Class Product
        Private privateProductName As String
        Public Property ProductName() As String
            Get
                Return privateProductName
            End Get
            Set(ByVal value As String)
                privateProductName = value
            End Set
        End Property
        Private privateUnitPrice As Double
        Public Property UnitPrice() As Double
            Get
                Return privateUnitPrice
            End Get
            Set(ByVal value As Double)
                privateUnitPrice = value
            End Set
        End Property
        Private privateUnitsOnOrder As Integer
        Public Property UnitsOnOrder() As Integer
            Get
                Return privateUnitsOnOrder
            End Get
            Set(ByVal value As Integer)
                privateUnitsOnOrder = value
            End Set
        End Property
    End Class
End Namespace