Version

Adding xamColorPicker to Your Grid

Before You Begin

The xamColorPicker™ control is a simple editor control that allows your end users to select a color value from a pre-defined palette of colors.

What You Will Accomplish

This topic will demonstrate how to add a xamColorPicker control to your DataGrid control using XAML.

Follow These Steps

  1. Create a WPF project.

  1. Add the following NuGet package to your application:

    • Infragistics.WPF.ColorPicker

For more information on setting up the NuGet feed and adding NuGet packages, you can take a look at the following documentation: NuGet Feeds.

  1. Add the following namespace declarations for xamColorPicker and Windows.Controls:

    In XAML:

    xmlns:ig="http://schemas.infragistics.com/xaml"
    xmlns:msd="clr-namespace:System.Windows.Controls;
        assembly=System.Windows.Controls.Data"
  1. Add a DataGrid Control to your page. Set the following:

    1. x:Name - MyDataGrid

    2. In the Columns collection add a template column

    3. In the DataTemplate add a xamColorPicker control with Width - 40

    In XAML:

    <msd:DataGrid x:Name="MyDataGrid" AutoGenerateColumns="True">
      <msd:DataGrid.Columns>
        <msd:DataGridTemplateColumn CanUserSort=">
          <msd:DataGridTemplateColumn.CellTemplate>
            <DataTemplate>
              <ig:XamColorPicker x:Name="MyColorPicker"
                                 DerivedPalettesCount="10"
                                 Width="40" />
            </DataTemplate>
          </msd:DataGridTemplateColumn.CellTemplate>
        </msd:DataGridTemplateColumn>
      </msd:DataGrid.Columns>
    </msd:DataGrid>
  1. You can bind the property SelectedColor to the appropriate path of your DataGrid’s data source.