Create a Template Column

A template column in xamGrid™ allows you to display custom content. You can add content to the column by setting its ItemTemplate property to an instance of a data template. The data context of the ItemTemplate is the data object that the current row would represent.

The following code shows you how to display content for the Description and Address column in xamGrid using a template column. For an example of binding controls to data inside a template column, see Editing Data in a Template Column.

In XAML:

<ig:XamGrid x:Name="dataGrid" AutoGenerateColumns="False" ColumnWidth="*">
   <ig:XamGrid.Columns>
      <ig:TextColumn Key="MLS" HeaderText="MLS#" />
      <ig:TemplateColumn Key="SqFeet" HeaderText="Description">
         <ig:TemplateColumn.ItemTemplate>
            <DataTemplate>
               <StackPanel>
                  <StackPanel Orientation="Horizontal">
                     <TextBlock Text="{Binding SqFeet, Converter={StaticResource FormatConverter}, ConverterParameter=N0}" />
                     <TextBlock Text="Sq. Feet" Margin="5,0,0,0" />
                  </StackPanel>
                  <StackPanel Orientation="Horizontal">
                     <TextBlock Text="{Binding NumberOfBedRooms}" />
                     <TextBlock Text="Bed Rooms" Margin="5,0,0,0" />
                     <TextBlock Text="{Binding NumberOfBathRooms}" Margin="5,0,0,0" />
                     <TextBlock Text="Bath Rooms" Margin="5,0,0,0" />
                  </StackPanel>
               </StackPanel>
            </DataTemplate>
         </ig:TemplateColumn.ItemTemplate>
      </ig:TemplateColumn>
      <ig:TemplateColumn Key="City" HeaderText="Address">
         <ig:TemplateColumn.ItemTemplate>
            <DataTemplate>
               <StackPanel Orientation="Horizontal">
                  <TextBlock Text="{Binding City}" Margin="5,0,0,0"  />
                  <TextBlock Text="," />
                  <TextBlock Text="{Binding State}" Margin="5,0,0,0" />
                  <TextBlock Text="{Binding PostalCode}" Margin="5,0,0,0" />
               </StackPanel>
            </DataTemplate>
         </ig:TemplateColumn.ItemTemplate>
      </ig:TemplateColumn>
   </ig:XamGrid.Columns>
</ig:XamGrid>

sl xamGrid Create a Template Column 01.png

WPF | Help Topics

Create a Template Column

Related Topics