In this topic you'll learn how to use templates to format cells meeting specific criteria. By following the steps outlined below, you'll create a template that formats cell content above the number 50. You'll then apply that template to the UnitPrice column in a grid so that products with a price above 50 will be formatted in a red font. This topic assumes that you have completed steps 1 and 2 of the Grid for WPF Quick Start and have bound the C1DataGrid to the C1NWind.mdb database.
Complete the following steps to create and apply a template:
1. Add the mscorlib namespace to your project by adding xmlns:sys="clr-namespace:System;assembly=mscorlib" to the <Window> tag so that it looks similar to the following:
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:my="clr-namespace:C1.WPF.C1DataGrid;assembly=C1.WPF.C1DataGrid" x:Class="Window1"
Height="240" Width="411" x:Name="Window">
2. Create a new ControlTemplate resource in your project by adding the following XAML just below the <Window> tag:
<Window.Resources>
<ControlTemplate x:Key="unitPriceShowTemplate">
<Grid>
<TextBlock Name="tb" Text="{Binding Value}" TextWrapping="Wrap" Margin="3"
TextAlignment="Right"/>
<c1grid:MethodCaller Name="compareValue" ObjectType="sys:Decimal"
MethodName="Compare" MethodParameters0="{Binding Value}"
PermanentCall="True">
<c1grid:MethodCaller.MethodParameters1>
<sys:Decimal>50</sys:Decimal>
</c1grid:MethodCaller.MethodParameters1>
</c1grid:MethodCaller>
</Grid>
<ControlTemplate.Triggers>
<Trigger SourceName="compareValue" Property="Result">
<Trigger.Value>
<sys:Int32>1</sys:Int32>
</Trigger.Value>
<Setter TargetName="tb" Property="Foreground" Value="Red"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Window.Resources>
Note that the template uses the MethodCaller element that calls the Decimal.Compare static method. The result of this method is processed in Trigger, which sets the Foreground color to red if Decimal.Compare returned 1.
3. Now add the following XAML within the <c1grid:C1DataGrid> tag to define the columns and call the ItemCellShowContentTemplate in the UnitPrice column:
<c1grid:C1DataGrid Name="c1DataGrid1" ItemsSource="{Binding Path=ProductsDataSet.Products, ElementName=Window, Mode=Default}" AutoGenerateColumns="False">
<c1grid:C1DataGrid.Columns>
<c1grid:Column PropertyName="ProductName" Caption="Name" HeaderCellWidth="150"/>
<c1grid:Column PropertyName="UnitPrice" Caption="Price" HeaderCellWidth="60" ItemCellShowContentTemplate="{StaticResource unitPriceShowTemplate}"/>
<c1grid:Column PropertyName="QuantityPerUnit" Caption="Unit Size" HeaderCellWidth="125"/>
<c1grid:Column PropertyName="UnitsInStock" Caption="In Stock" HeaderCellWidth="75"/>
<c1grid:Column PropertyName="UnitsOnOrder" Caption="On Order" HeaderCellWidth="80"/>
<c1grid:Column PropertyName="ReorderLevel" Caption="Reorder Level" HeaderCellWidth="100"/>
<c1grid:Column PropertyName="Discontinued" Caption="Discontinued" HeaderCellWidth="95"/>
</c1grid:C1DataGrid.Columns>
</c1grid:C1DataGrid>
Run the project and observe:
The grid displays items in the UnitPrice column above 50 in a red font:
|
