c# - How to define DataGrid ComboBox column that shows choice of color rectangles from RGB values? -

i managed define column shows available color index (int) values in combobox. instead of color index should show rectangle filled color defined color's rgb-values.

xaml:

<datagrid name="selectionsets" canuseraddrows="false"          canuserresizecolumns="true" canusersortcolumns="true"          itemssource="{binding selectionsets}" autogeneratecolumns="false"         scrollviewer.cancontentscroll="true"         scrollviewer.verticalscrollbarvisibility="visible"         selecteditem="{binding selectedselectionset}">     <datagrid.columns>               <datagridcomboboxcolumn header="{staticresource xpstrcolor}" selectedvaluebinding="{binding colorindex}"                         selectedvaluepath="index" displaymemberpath="index">                   <datagridcomboboxcolumn.elementstyle>                        <style targettype="combobox">                               <setter property="itemssource" value="{binding relativesource={relativesource findancestor, ancestortype={x:type usercontrol}}, path=datacontext.colors}"/>                               <setter property="isreadonly" value="true"/>                        </style>                   </datagridcomboboxcolumn.elementstyle>                   <datagridcomboboxcolumn.editingelementstyle>                        <style targettype="combobox">                               <setter property="itemssource" value="{binding relativesource={relativesource findancestor, ancestortype={x:type usercontrol}}, path=datacontext.colors}"/>                        </style>                  </datagridcomboboxcolumn.editingelementstyle>           </datagridcomboboxcolumn>     </datagrid.columns> </datagrid> 

below viewmodel own class implements inotifypropertychanged , setvalue raises event.

viewmodel:

public class mainviewmodel : viewmodel {     private observablecollection<drawingcolor> _colors;     public observablecollection<drawingcolor> colors     {         { return _selectionsets; }         set { this.setvalue(ref _colors, value); }     }      private observablecollection<selectionsetviewmodel> _selectionsets;     public observablecollection<selectionsetviewmodel> selectionsets     {         { return _selectionsets; }         set { this.setvalue(ref _selectionsets, value); }     }      private selectionsetviewmodel _selectedselectionset;     public selectionsetviewmodel selectedselectionset     {         { return this._selectedselectionset; }         set { this.setvalue(ref _selectedselectionset, value); }     } } 

class 1 row:

public class selectionsetviewmodel : viewmodel {     //...      private int _colorindex;     public int colorindex     {         { return _colorindex; }         set { setvalue(ref _colorindex, value); }     }     //...  } 

class color:

    public class drawingcolor     {         public int index { get; set; }         public byte r { get; set; }         public byte g { get; set; }         public byte b { get; set; }     } 

so datacontext , class-structure works already.

i (kind of) know how show color rectangle in combobox:

                <combobox.itemtemplate>                     <datatemplate>                         <wrappanel>                             <rectangle height="10" width="80">                                 <rectangle.fill>                                     <solidcolorbrush color ="{binding converter={staticresource colorindextocolorconverter}}"/>                                 </rectangle.fill>                             </rectangle>                         </wrappanel>                     </datatemplate>                 </combobox.itemtemplate> 

converter

public class colorindextocolorconverter : ivalueconverter {     public object convert(object value, type targettype, object parameter,         system.globalization.cultureinfo culture)     {         if (((drawingcolor)value).index == -1 || ((drawingcolor)value).index == -10)             return color.fromargb(0, 255, 255, 255);         else             return color.fromargb(255, ((drawingcolor)value).r, ((drawingcolor)value).g, ((drawingcolor)value).b);     }      public object convertback(object value, type targettype, object parameter,         system.globalization.cultureinfo culture)     {         return value.equals(true) ? parameter : binding.donothing;     } } 

however did not understand how combine datatemplete example has datagridcomboboxcolumn containing displaymemberpath , datagridcomboboxcolumn.elementstyle.

try adding part of combobox style. this:

<datagridcomboboxcolumn header="{staticresource xpstrcolor}" selectedvaluebinding="{binding colorindex}"          selectedvaluepath="index" displaymemberpath="index">     <datagridcomboboxcolumn.elementstyle>         <style targettype="combobox">             <setter property="itemssource" value="{binding relativesource={relativesource findancestor, ancestortype={x:type usercontrol}}, path=datacontext.colors}"/>             <setter property="isreadonly" value="true"/>             <setter property="itemtemplate">                 <setter.value>                     <datatemplate>                         <wrappanel>                             <rectangle height="10" width="80">                                 <rectangle.fill>                                     <solidcolorbrush color ="{binding converter={staticresource colorindextocolorconverter}}"/>                                 </rectangle.fill>                             </rectangle>                         </wrappanel>                     </datatemplate>                 </setter.value>             </setter>         </style>     </datagridcomboboxcolumn.elementstyle>     <datagridcomboboxcolumn.editingelementstyle>         <style targettype="combobox">             <setter property="itemssource" value="{binding relativesource={relativesource findancestor, ancestortype={x:type usercontrol}}, path=datacontext.colors}"/>             <setter property="itemtemplate">                 <setter.value>                     <datatemplate>                         <wrappanel>                             <rectangle height="10" width="80">                                 <rectangle.fill>                                     <solidcolorbrush color ="{binding converter={staticresource colorindextocolorconverter}}"/>                                 </rectangle.fill>                             </rectangle>                         </wrappanel>                     </datatemplate>                 </setter.value>             </setter>         </style>     </datagridcomboboxcolumn.editingelementstyle> </datagridcomboboxcolumn> 

to fix cast exception, check if value drawingcolor in converter. return null if isn't. this:

public class colorindextocolorconverter : ivalueconverter {     public object convert(object value, type targettype, object parameter,         system.globalization.cultureinfo culture)     {         if (!(value drawingcolor))             return null;         if (((drawingcolor)value).index == -1 || ((drawingcolor)value).index == -10)             return color.fromargb(0, 255, 255, 255);         else             return color.fromargb(255, ((drawingcolor)value).r, ((drawingcolor)value).g, ((drawingcolor)value).b);     }      public object convertback(object value, type targettype, object parameter,         system.globalization.cultureinfo culture)     {         return value.equals(true) ? parameter : binding.donothing;     } }