Databinding ColorPicker and get changes

Sep 29, 2011 at 1:07 PM

I'm using the ColorPicker inside a DataGrid in my WPF-application.

I have databinded the SelectedColor-property to the color-property of the objects I'm displaying.


<DataGridTemplateColumn Header="Color" Width="70">



                            <toolkit:ColorPicker SelectedColor="{Binding Color, Mode=TwoWay}" SelectedColorChanged="ColorPicker_SelectedColorChanged" />





I tried using the SelectedColorChanged-event to detect changes and commit these to my database. The event is raised but the SelectedColor hasn't changed. Am I doing the databinding wrong or am I missing something else?

Sep 29, 2011 at 1:48 PM

The row is not in edit mode, you need to set the CellEditTemplate instead.

Sep 29, 2011 at 1:57 PM

Still doesn't work right.

Could you write a small example for me to use?

Sep 29, 2011 at 2:06 PM

Yes it does.  When you first enter edit mode and change the color the value is not updated until the row leaves edit mode.  This means you must leave the row to end edit.  Then your property setter will fire.  Another option is to add an UpdateSourceTrigger to your binding.

                <DataGridTemplateColumn Header="Color">
                        <extToolkit:ColorPicker SelectedColor="{Binding Color, UpdateSourceTrigger=PropertyChanged}" />
Oct 12, 2011 at 7:50 AM

This didn't help me so much.

My situation is, that I have a WPF DataGrid with a ObservableCollection<vmColor> for ItemsSource.

vmColor has a property called Color that I bind to the <extToolkit:ColorPicker />.

Could you post the complete code for the DataGridTemplateColumn, with editing-mode and all?

Sorry for the inconvenience.

Oct 12, 2011 at 1:38 PM

What code do you have that isn't working?  Please provide the XAML and the vmColor class.

Oct 13, 2011 at 9:41 AM
Edited Oct 13, 2011 at 9:43 AM
public class vmColor : vmBase
        int _level;
        UserSetting setting;
        Color _color;

        public Color Color
            get { return _color; }
            set { _color = value; OnPropertyChanged("Color"); }

        public int Level
            get { return _level; }
            set { _level = value; OnPropertyChanged("Level"); }

        public vmColor(Color color, int level)
            this._color = color;
            this._level = level;

            ItemsSource="{Binding Colors}"
            SelectedItem="{Binding CurrentColor}"
                <DataGridTextColumn Header="Level" Binding="{Binding Level}" IsReadOnly="True" />
                <DataGridTemplateColumn Header="Color">
                            <extToolkit:ColorPicker SelectedColor="{Binding Color, UpdateSourceTrigger=PropertyChanged}" />
I have simplified vmColor a bit, but the basics should be the same...
Oct 13, 2011 at 1:42 PM

Can you also describe the issue?  What exactly is the problem?  Is the DataGrid not being populated, is the Color not being data bound, or is the Color being data bound but not updating when changed?

Oct 13, 2011 at 2:46 PM

When the list of colors is first loaded the colors are displayed correct. The ColorPicker expands just fine, but the Color-property isn't updated when I leave the field/control.

Oct 13, 2011 at 2:50 PM

What version are you using?  v1.5.0?

Oct 13, 2011 at 2:53 PM
Edited Oct 13, 2011 at 2:57 PM

I suppose so. I downloaded it on September 29th.


Just checked the DLL. It is 1.5.0!

Oct 13, 2011 at 3:05 PM

This is working as expected.  I took your exact code and pasted it into my sample application and it worked.  Place a break point in the setter of the vmColor.Color property.  Change the color for a row using the ColorPicker control and the setter will fire setting the new value of the Color property.  Make sure you don't have any code in your CellEditEnding vevent that could be causing problems.

Oct 13, 2011 at 3:07 PM

To clarify; with the code you have provided, the color will be changed immediately.  If you are expecting it to changed after you leave the field, it won't because it has already been changed before you leave the field.

Oct 14, 2011 at 12:25 PM
Edited Dec 21, 2011 at 11:34 AM

Finally got it working.

I discovered another error though (or maybe a bug in the ColorPicker)


The width of the color-field in the ColorPicker seems to vary when I select different colors from the presets. I have set the width of the ColorPicker to fixed 100, with the same XAML as my previous post.

I haven't tried the ColorPicker outside the DataGrid...

Oct 14, 2011 at 12:49 PM
Edited Oct 14, 2011 at 12:51 PM

In all the screenshots of the ColorPicker it seems as if the color-field just "fills" the width of the control, but in my case it has some kind of max/fixed width. Am I missing a property or something?

Oct 14, 2011 at 1:34 PM

This is due to the DataGrid.  I suggest setting the DisplayColorAndName property to true to eliminate this behavior.  I do not plan on investigating this issue though as I am not concerned with supporting the DataGrid.