How to add ColorPicker to Datagrid Cell - MVVM Light

Question

How can I add a ColorPicker to a cell in a datagrid?

What I'm doing is saving JSON objects in a text file using Newtonsoft and then displaying them in a datagrid, the saving and loading of the objects work fine but is not exactly what I want. My issue is that I would like to be able to save hexadecimal numbers and then later be able to load them and display them as colors in a ColorPicker. The way I have it right now it's using strings to save the hexadecimal number and when loading them the load as simple text which is not what I'm looking for.

So the main question here is, how can I add a ColorPicker into a cell in a datagrid and display a color?

Here is what I have...

XAML

    <Window x:Class="Tool.Views.WiresView"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
 xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
            xmlns:ignore="http://www.galasoft.ch/ignore"
            mc:Ignorable="d ignore"
            Title="Wires" Height="715" Width="790"
            DataContext="{Binding WiresDialogBox, Source={StaticResource Locator}}">

        <Grid>
            <DataGrid x:Name="dataGrid"
                      ItemsSource="{Binding WiresObservableCollection}"
                      AutoGenerateColumns="False">

                <DataGrid.Columns >
                    <DataGridTextColumn Header="Length" Binding="{Binding WireLength}"></DataGridTextColumn>
                    <DataGridTextColumn Header="Color" Binding="{Binding WireColor}"></DataGridTextColumn>
                    <DataGridTextColumn Header="Description" Binding="{Binding WireDescription}"></DataGridTextColumn>
                </DataGrid.Columns>
            </DataGrid>
        </Grid>
    </Window>

MODEL

public class Wire
{
    public string WireLength { get; set; }
    public string WireColor { get; set; }
    public string WireDescription { get; set; }
}

FYI - I'm using MVVM Light , Newtonsoft to parse the JSON objects and toolkit for the ColorPicker.

Answer 1

I used DataGridTemplateColumn as suggested by ASh .

Here is how I did it.

            <DataGrid.Columns >
                <DataGridTextColumn Header="Length" Binding="{Binding WireLength}"></DataGridTextColumn>

               <DataGridTemplateColumn Header="Color" SortMemberPath="WireColor">
                  <DataGridTemplateColumn.CellTemplate>
                      <DataTemplate>
                           <Label  Background="{Binding Path=WireColor, Mode=TwoWay}"/>
                      </DataTemplate>
                  </DataGridTemplateColumn.CellTemplate>
               </DataGridTemplateColumn>

                <DataGridTextColumn Header="Description" Binding="{Binding WireDescription}"></DataGridTextColumn>
            </DataGrid.Columns>