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">
  <igDP:UnboundField.Settings>
    <igDP:FieldSettings
      AllowEdit="False"
      AllowGroupBy="False"
      AllowResize="False"
      AllowSummaries="False"
      LabelClickAction="Nothing"
      LabelMaxWidth="45" CellMaxWidth="45"
      >
      <igDP:FieldSettings.CellValuePresenterStyle>
        <Style TargetType="{x:Type igDP:CellValuePresenter}">
          <Setter Property="Template">
            <Setter.Value>
              <ControlTemplate TargetType="{x:Type igDP:CellValuePresenter}">
                <DockPanel>
                  <!-- Give the left edge of the cell a vertical line. -->
                  <Border
                    DockPanel.Dock="Left"
                    BorderBrush="#FFEEEEEE"
                    BorderThickness="1,0,0,0"
                    />
                  <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                    <Grid x:Name="EmployeeIcon" ToolTip="Employee">
                      <!-- Drop shadow behind icon -->
                      <Ellipse
                        Fill="#FF444444"
                        Margin="1,0.5,0,0"
                        Width="12" Height="12"
                        />
                      <!-- Employee icon -->
                      <Ellipse                               
                        Fill="LawnGreen"
                        Width="12" Height="12"
                        />
                    </Grid>
                    <Grid x:Name="CustomerIcon" Margin="6,0,0,0" ToolTip="Customer">
                      <!-- Drop shadow behind icon -->
                      <Ellipse
                        Fill="#FF444444"
                        Margin="1,0.5,0,0"
                        Width="12" Height="12"
                        />
                      <!-- Customer icon -->
                      <Ellipse                                  
                        Fill="Orange"
                        Width="12" Height="12"
                        />
                    </Grid>
                  </StackPanel>
                </DockPanel>
                <!-- These triggers hide the icons that do not apply to a person. -->
                <ControlTemplate.Triggers>
                  <DataTrigger Binding="{Binding Path=DataItem.IsEmployee}" Value="False">
                    <Setter TargetName="EmployeeIcon" Property="Visibility" Value="Hidden" />
                  </DataTrigger>
                  <DataTrigger Binding="{Binding Path=DataItem.IsCustomer}" Value="False">
                    <Setter TargetName="CustomerIcon" Property="Visibility" Value="Hidden" />
                  </DataTrigger>
                </ControlTemplate.Triggers>
              </ControlTemplate>
            </Setter.Value>
          </Setter>
        </Style>
      </igDP:FieldSettings.CellValuePresenterStyle>
    </igDP:FieldSettings>
  </igDP:UnboundField.Settings>
</igDP:UnboundField>

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.