Creating and using a new Brush or color using sliders and dependency properties in C# -

i'm working on project basic wpf "paint" app. have 3 options, draw ellipse, draw line, or draw 'shape' (a line closed sections filled in). these 3 options represented radio buttons. have part working. here's example screenshot:

http://i.stack.imgur.com/napyi.jpg

basically need is, when user changes sliders r, g, b, , (opacity / alpha), small preview area showing new color should updated, , color should set line or fill color, depending on group of sliders changed. all of needs done data binding.

i'm not sure to best approach problem. should have individual values each slider (rgba) , pass values color.fromargb(r,g,b,a)??

edit: here code

using system; using system.collections.generic; using system.linq; using system.text; using system.windows; using system.windows.controls; using system.windows.data; using system.windows.documents; using system.windows.input; using system.windows.media; using system.windows.media.imaging; using system.windows.navigation; using system.windows.shapes; using system.componentmodel;

namespace wpfpaint {     public partial class mainwindow : window, inotifypropertychanged     {         public bool start = false;         public ellipse myellipse;         public polyline myline;         public line myregline = new line();         public double xpos;         public double ypos;          public mainwindow()         {             initializecomponent();             mycanvas.children.add(myregline);         }          private void mycanvas_previewmousedown(object sender, mousebuttoneventargs e)         {             if (this.ellipse.ischecked ?? false)             {                 if (start)                 {                     start = !start;                     myellipse = null;                 }                 else                 {                     start = true;                     myellipse = new ellipse();                     xpos = e.getposition(mycanvas).x;                     ypos = e.getposition(mycanvas).y;                      mycanvas.children.add(myellipse);                     myellipse.strokethickness = 5;                     if (combobox2.text == "red")                     {                         myellipse.fill = brushes.red;                         fillr.value = 255;                         fillg.value = 0;                         fillb.value = 0;                     }                     else if (combobox2.text == "green")                     {                         myellipse.fill = brushes.green;                         fillr.value = 0;                         fillg.value = 255;                         fillb.value = 0;                     }                     else if (combobox2.text == "blue")                     {                         myellipse.fill = brushes.blue;                         fillr.value = 0;                         fillg.value = 0;                         fillb.value = 255;                     }                      if (combobox1.text == "red")                     {                         myellipse.stroke = brushes.red;                         liner.value = 255;                         lineg.value = 0;                         lineb.value = 0;                     }                     else if (combobox1.text == "green")                     {                         myellipse.stroke = brushes.green;                         liner.value = 0;                         lineg.value = 255;                         lineb.value = 0;                     }                     else if (combobox1.text == "blue")                     {                         myellipse.stroke = brushes.blue;                         liner.value = 0;                         lineg.value = 0;                         lineb.value = 255;                     }                 }             }             else             {                 switch (e.clickcount)                 {                     case 1:                         if (myline == null)                         {                             myline = new polyline();                             mycanvas.children.add(myline);                             myline.strokethickness = 5;                             if (combobox1.text == "red")                             {                                  myline.stroke = brushes.red;                                 liner.value = 255;                                 lineg.value = 0;                                 lineb.value = 0;                             }                             else if (combobox1.text == "green")                             {                                  myline.stroke = brushes.green;                                 liner.value = 0;                                 lineg.value = 255;                                 lineb.value = 0;                             }                             else if (combobox1.text == "blue")                             {                                  myline.stroke = brushes.blue;                                 liner.value = 0;                                 lineg.value = 0;                                 lineb.value = 255;                                                             }                              if (this.shape.ischecked ?? false)                             {                                 if (combobox2.text == "red")                                 {                                                                         myline.fill = brushes.red;                                     fillr.value = 255;                                     fillg.value = 0;                                     fillb.value = 0;                                 }                                 else if (combobox2.text == "green")                                 {                                                                         myline.fill = brushes.green;                                     fillr.value = 0;                                     fillg.value = 255;                                     fillb.value = 0;                                 }                                 else if (combobox2.text == "blue")                                 {                                                                         myline.fill = brushes.blue;                                     fillr.value = 0;                                     fillg.value = 0;                                     fillb.value = 255;                                 }                             }                           }                          myline.points.add(e.getposition(mycanvas));                         e.handled = true;                          break;                     case 2:                         myline = null;                         myregline = new line();                         mycanvas.children.add(myregline);                         break;                  }              }         }          private void mycanvas_previewmousemove(object sender, mouseeventargs e)         {             if (start)             {                 myellipse.height = math.abs(e.getposition(mycanvas).x - xpos) * 2;                 myellipse.width = math.abs(e.getposition(mycanvas).x - xpos) * 2;                  canvas.settop(myellipse, ((ypos) - myellipse.height / 2));                 canvas.setleft(myellipse, ((xpos) - myellipse.width / 2));             }              else             {                 if (myline != null)                 {                     myregline.stroke = myline.stroke;                     myregline.x1 = myline.points.last().x;                     myregline.y1 = myline.points.last().y;                     myregline.x2 = e.getposition(mycanvas).x;                     myregline.y2 = e.getposition(mycanvas).y;                 }             }         }          private void combobox1_selectionchanged(object sender, selectionchangedeventargs e)         {          }          private void combobox2_selectionchanged(object sender, selectionchangedeventargs e)         {          }     } } 

and here xaml

<window x:class="wpfpaint.mainwindow"     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"     title="mainwindow" height="350" width="525"> <grid>     <radiobutton content="line" height="16" horizontalalignment="left" margin="12,10,0,0" name="line" groupname="options" verticalalignment="top" ischecked="true" />     <radiobutton content="shape" height="16" horizontalalignment="left" margin="12,34,0,0" name="shape" groupname="options" verticalalignment="top" />     <radiobutton content="ellipse" height="16" horizontalalignment="left" margin="12,56,0,0" name="ellipse" groupname="options" verticalalignment="top" />     <label content="r" margin="210,5,270,0" height="31" verticalalignment="top" />     <slider height="23" horizontalalignment="left" margin="229,5,0,0" name="liner" verticalalignment="top" width="50" ismovetopointenabled="false" interval="1" isselectionrangeenabled="false" maximum="255" />     <slider height="23" margin="306,5,147,0" name="lineg" verticalalignment="top" ismovetopointenabled="false" interval="1" maximum="255" />     <label content="g" margin="282,3,203,0" height="30" verticalalignment="top" />     <slider height="23" horizontalalignment="left" margin="380,5,0,0" name="lineb" verticalalignment="top" width="50" interval="1" maximum="255" />     <label content="b" margin="358,3,129,280"/>     <slider height="23" horizontalalignment="left" margin="453,5,0,0" name="linea" verticalalignment="top" width="50" interval="1" maximum="255" value="255" />     <label content="a" margin="428,3,56,0" height="28" verticalalignment="top" />     <canvas name="mycanvas" background="#ffdadada" margin="0,76,0,0" previewmousedown="mycanvas_previewmousedown" previewmousemove="mycanvas_previewmousemove"></canvas>     <combobox height="23" horizontalalignment="left" margin="127,5,0,0" name="combobox1" verticalalignment="top" width="70" selectionchanged="combobox1_selectionchanged">         <comboboxitem content="red" isselected="true" />         <comboboxitem content="green" />         <comboboxitem content="blue" />     </combobox>     <label content="line" height="28" horizontalalignment="left" margin="89,3,0,0" name="label1" verticalalignment="top" />     <label content="fill" height="28" horizontalalignment="left" margin="96,42,0,0" name="label2" verticalalignment="top" />     <combobox height="23" horizontalalignment="left" margin="127,44,0,0" name="combobox2" verticalalignment="top" width="70" selectionchanged="combobox2_selectionchanged">         <comboboxitem content="red" isselected="true" />         <comboboxitem content="green" />         <comboboxitem content="blue" />     </combobox>     <label content="r" margin="210,42,270,238" />     <slider height="23" horizontalalignment="left" ismovetopointenabled="false" margin="229,44,0,0" name="fillr" verticalalignment="top" width="50" maximum="255" interval="1" />     <slider height="23" horizontalalignment="left" ismovetopointenabled="false" margin="306,44,0,0" name="fillg" verticalalignment="top" width="50" maximum="255" interval="1" />     <label content="g" margin="282,40,203,241" />     <slider height="23" horizontalalignment="left" margin="380,44,0,0" name="fillb" verticalalignment="top" width="50" maximum="255" interval="1" />     <label content="b" margin="358,42,0,241" horizontalalignment="left" width="16" />     <slider height="23" horizontalalignment="left" margin="453,44,0,0" name="filla" verticalalignment="top" width="50" value="255" interval="1" maximum="255" />     <label content="a" margin="428,42,56,241" /> </grid> 

not sure if best way can have 5 public properties in viewmodel: 1 alpha, 1 red, 1 green, 1 blue, , 1 user defined structure use "group" 4 values (let's call fillvalue). bind 4 sliders alpha, red, green, , blue. in setters 4 properties, set corresponding field in fillvalue call notifypropertychanged both properties. this:

    public double red     {         { return fillvalue.red; }         set         {             fillvalue.red = value;             notifypropertychanged("red");             notifypropertychanged("fillvalue");         }     } 

then bind preview's fill property fillvalue , add converter convert fillvalue brush. binding this:

<stackpanel>         <stackpanel.resources>         <rgbexample:fillvaluecvtr x:key="colorcvtr"/>     </stackpanel.resources>      <rectangle fill="{binding fillvalue, converter={staticresource colorcvtr}}"/> </stackpanel>