c# - WPF draw border in container -

i want draw area inside container. thought using custom control.

my problem canvas not take given space gets. how force use available space?

what have done inherited canvas , created border element inside it:

public class drawablecanvas : canvas {     private border border;      static drawablecanvas()     {         defaultstylekeyproperty.overridemetadata(typeof(drawablecanvas), new frameworkpropertymetadata(typeof(drawablecanvas)));     }      public drawablecanvas()     {         this.border = new border();         border.background = new solidcolorbrush(colors.blue);         border.borderthickness = new thickness(1);         border.width = 0;         border.visibility = visibility.hidden;         border.opacity = 0.3;          this.children.add(border);          this.mouseleftbuttondown += drawablecanvas_mouseleftbuttondown;         this.mouseleftbuttonup += drawablecanvas_mouseleftbuttonup;         this.mousemove += drawablecanvas_mousemove;     }      private void drawablecanvas_mouseleftbuttonup(object sender, mousebuttoneventargs e)     {         debug.writeline("left mouse up");          // release mouse         mouse.capture(null);          border.width = 0;         border.height = 100;          startposition = 0;     }      double startposition = 0;     private void drawablecanvas_mouseleftbuttondown(object sender, mousebuttoneventargs e)     {         debug.writeline("left mouse down");          border.visibility = visibility.visible;          // capture mouse         mouse.capture(this);          var point = e.getposition(this);         startposition = point.x;          setleft(border, point.x);     }      private void drawablecanvas_mousemove(object sender, mouseeventargs e)     {         if(this.ismousecaptured)         {             var point = e.getposition(this);              debug.writeline("mouse move");              // set position far left             setleft(border, math.min(startposition, point.x));              // width difference between 2 points             border.width = math.abs(startposition - point.x);              debug.writeline(math.min(startposition, point.x));             debug.writeline(border.width);         }     } } 

and view:

<dockpanel>     <local:drawablecanvas>         <rectangle height="500" width="500" fill="transparent" />     </local:drawablecanvas> </dockpanel> 

i want this:

what wanted create control enable selection on ui.

for needed border/rectangle span in width , use height gets

i ended this:

view:

<window x:class="wpf.test01.stack_43281567"         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:local="clr-namespace:wpf.test01.controls"         mc:ignorable="d"         title="stack_43281567" height="300" width="300">     <grid>         <local:drawablecanvas />     </grid> </window> 

drawablecanvas.cs:

public class drawablecanvas : canvas {     private border border;      static drawablecanvas()     {         defaultstylekeyproperty.overridemetadata(typeof(drawablecanvas), new frameworkpropertymetadata(typeof(drawablecanvas)));     }      // when selection done expose event notify user of selection change      public drawablecanvas()     {         this.border = new border();         border.background = new solidcolorbrush(colors.blue);         border.borderthickness = new thickness(1);         border.visibility = visibility.hidden;         border.opacity = 0.3;         border.height = this.actualheight;          this.children.add(border);         this.background = new solidcolorbrush(colors.transparent);          this.mouseleftbuttondown += drawablecanvas_mouseleftbuttondown;         this.mouseleftbuttonup += drawablecanvas_mouseleftbuttonup;         this.mousemove += drawablecanvas_mousemove;          this.sizechanged += drawablecanvas_sizechanged;     }      private void drawablecanvas_sizechanged(object sender, sizechangedeventargs e)     {         border.height = e.newsize.height;     }      private void drawablecanvas_mouseleftbuttonup(object sender, mousebuttoneventargs e)     {         debug.writeline("left mouse up");          // release mouse         mouse.capture(null);          border.width = 0;          startposition = 0;     }      double startposition = 0;     private void drawablecanvas_mouseleftbuttondown(object sender, mousebuttoneventargs e)     {         debug.writeline("left mouse down");          border.visibility = visibility.visible;          // capture mouse         mouse.capture(this);          var point = e.getposition(this);         startposition = point.x;          setleft(border, point.x);     }      private void drawablecanvas_mousemove(object sender, mouseeventargs e)     {         if (this.ismousecaptured)         {             var point = e.getposition(this);              debug.writeline("mouse move");              // set position far left             setleft(border, math.min(startposition, point.x));              // width difference between 2 points             border.width = math.abs(startposition - point.x);              debug.writeline(math.min(startposition, point.x));             debug.writeline(border.width);         }     } }