Version

Configuring Item Template (xamComboEditor)

A DataTemplate enables you to customize how the items will be displayed in the control. You can create a DataTemplate that will be applied to each ComboEditorItem. This can be achieved with the xamComboEditor™ control’s ItemTemplate property.

This topic assumes that you have a xamComboEditor bound to data. For more information, see the Adding xamComboEditor to Your Page topic.

The following example shows the DataTemplate definition.

In XAML:

<ig:XamComboEditor
  ItemsSource="{Binding Source={StaticResource DataUtil}, Path=Products}"
  DisplayMemberPath="ProductName"
  EmptyText="Choose Product ..."
  Height="30" Width="300">
    <ig:XamComboEditor.ItemTemplate>
      <DataTemplate>
        <Grid ToolTipService.ToolTip="Product Info">
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="80" />
            <ColumnDefinition Width="180" />
          </Grid.ColumnDefinitions>
          <Grid.RowDefinitions>
            <RowDefinition Height="25" />
            <RowDefinition Height="25" />
          </Grid.RowDefinitions>
          <TextBlock Text="Product Id" Margin="5"
            Grid.Column="0" Grid.Row="0" FontWeight="Bold" />
          <TextBlock Text="Product Name" Margin="5"
            Grid.Column="1" Grid.Row="0" FontWeight="Bold" />
          <TextBlock Text="{Binding Path=ProductID}"
            Margin="5" Grid.Column="0" Grid.Row="1" />
          <TextBlock Text="{Binding Path=ProductName}"
            Margin="5" Grid.Column="1" Grid.Row="1" />
        </Grid>
      </DataTemplate>
    </ig:XamComboEditor.ItemTemplate>
</ig:XamComboEditor>
xamComboEditor Using Data Template.png