Display Multiple Icons in a XamDataGrid Field

This blog post demonstrates how to, optionally, display multiple icons/images/indicators in an UnboundField of the XamDataGrid.  This is a common use case of a data grid control, where one column displays multiple status values.  In this example, we have a single column that indicates whether each person displayed in the data grid is an employee and/or customer of some company.  When you run the demo program, it looks like this:

Download the demo project here.

The data source in this simple demo is an array of Person objects, where the Person class is defined as:

public class Person
    public Person(string firstName, string lastName, bool isEmployee, bool isCustomer)
        this.FirstName = firstName;
        this.LastName = lastName;
        this.IsCustomer = isCustomer;
        this.IsEmployee = isEmployee;

    public string FirstName { get; private set; }
    public string LastName { get; private set; }
    public bool IsEmployee { get; private set; }
    public bool IsCustomer { get; private set; }

The values of the two Boolean properties are displayed in the same field, as seen above.  That field is declared as an UnboundField object, because it is not bound to a single, specific property on the data source objects.  Now let’s see how that UnboundField is configured such that it conditionally displays the two indicators that tell the user if a person is an employee and/or customer.

This unbound field contains icons that indicate if the person
represented by a record is an Employee and/or Customer.
<igDP:UnboundField Label=" E / C">
      LabelMaxWidth="45" CellMaxWidth="45"
        <Style TargetType="{x:Type igDP:CellValuePresenter}">
          <Setter Property="Template">
              <ControlTemplate TargetType="{x:Type igDP:CellValuePresenter}">
                  <!-- Give the left edge of the cell a vertical line. -->
                  <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                    <Grid x:Name="EmployeeIcon" ToolTip="Employee">
                      <!-- Drop shadow behind icon -->
                        Width="12" Height="12"
                      <!-- Employee icon -->
                        Width="12" Height="12"
                    <Grid x:Name="CustomerIcon" Margin="6,0,0,0" ToolTip="Customer">
                      <!-- Drop shadow behind icon -->
                        Width="12" Height="12"
                      <!-- Customer icon -->
                        Width="12" Height="12"
                <!-- These triggers hide the icons that do not apply to a person. -->
                  <DataTrigger Binding="{Binding Path=DataItem.IsEmployee}" Value="False">
                    <Setter TargetName="EmployeeIcon" Property="Visibility" Value="Hidden" />
                  <DataTrigger Binding="{Binding Path=DataItem.IsCustomer}" Value="False">
                    <Setter TargetName="CustomerIcon" Property="Visibility" Value="Hidden" />


That XAML is rather verbose, because I wanted to add a subtle drop shadow effect to each indicator, but without using the DropShadowBitmapEffect (which is not hardware-accelerated unless running on .NET 3.5 SP1 or later).  The template’s triggers are responsible for hiding the indicators that do not apply to a person.

This project was built against NetAdvantage for WPF v8.1 using Visual Studio 2008.  You can download the source code here.

Tags /

Comments  (1 )

on Thu, Dec 6 2012 3:51 PM


Using that technique if have an issue with selection, when I select a bunch of cells those cells doesn't show as selected. Do you have a simple solution for that?