c# - How do i implement drag delta on grid when grid column*row (4*5) staying on canvas in wpf -

i have created usercontrol below.please me. please see below code xaml code :

<border cliptobounds="true" borderthickness="2" borderbrush="deeppink" width="200" height="150" x:name="tempmaxentityborder">      <canvas  x:name="tempmaxentitycanvas" background="lightpink" focusable="true" allowdrop="true"  tag="matrixentitycanvas" horizontalalignment="stretch" verticalalignment="stretch" >          <grid x:name="gridlayout" verticalalignment="stretch" horizontalalignment="stretch" >             <grid.rowdefinitions >                 <rowdefinition height="auto" ></rowdefinition>                 <rowdefinition height="auto"></rowdefinition>                 <rowdefinition height="auto"></rowdefinition>             </grid.rowdefinitions>             <textblock text="entity" textalignment="center" grid.row="0" grid.column="0" fontsize="16" verticalalignment="center" horizontalalignment="center" width="200"></textblock>             <line margin="0,5,0,0" grid.row="1" grid.column="0"  stroke="deeppink" strokethickness="2" x2="{binding path=actualwidth, relativesource={relativesource self}}" verticalalignment="top" />             <grid  x:name="childgridlayout" grid.row="2" horizontalalignment="stretch" verticalalignment="stretch" >                 <grid.columndefinitions >                     <columndefinition width="auto"></columndefinition>                     <columndefinition width="auto"></columndefinition>                     <columndefinition width="auto"></columndefinition>                     <columndefinition width="auto"></columndefinition>                 </grid.columndefinitions>                 <grid.rowdefinitions>                     <rowdefinition height="auto"></rowdefinition>                     <rowdefinition height="auto"></rowdefinition>                     <rowdefinition height="auto"></rowdefinition>                     <rowdefinition height="auto"></rowdefinition>                     <rowdefinition height="auto"></rowdefinition>                 </grid.rowdefinitions>                 <rectangle grid.row="0" grid.column="0" width="20" height="25" strokethickness="2" stroke="deeppink" ></rectangle>                 <rectangle grid.row="1" grid.column="0" width="20" height="20" strokethickness="1" stroke="deeppink" radiusx="10" radiusy="10" fill="transparent"></rectangle>                 <textblock grid.row="1" grid.column="0" text="a"   padding="22,5"/>                 <rectangle  grid.row="2" grid.column="0" width="20" height="20" strokethickness="1" stroke="deeppink" radiusx="10" radiusy="10" fill="transparent"></rectangle>                 <textblock grid.row="2" grid.column="0" text="a"   padding="22,0"/>                 <rectangle grid.row="3" grid.column="0" width="20" height="20" strokethickness="1" stroke="deeppink" radiusx="10" radiusy="10" fill="transparent"></rectangle>                 <textblock grid.row="3" grid.column="0" text="a"   padding="22,0"/>                 <rectangle grid.row="4" grid.column="0" width="20" height="20" strokethickness="1" stroke="deeppink" radiusx="10" radiusy="10" fill="transparent"></rectangle>                 <textblock grid.row="4" grid.column="0" text="a"   padding="22,0"/>                  <rectangle grid.row="0" grid.column="1" width="20" height="25" strokethickness="2" stroke="deeppink"></rectangle>                 <rectangle grid.row="1" grid.column="1" width="20" height="20" strokethickness="1" stroke="deeppink" radiusx="10" radiusy="10" fill="transparent"></rectangle>                 <textblock grid.row="1" grid.column="1" text="b"   padding="22,0"/>                 <rectangle grid.row="2" grid.column="1" width="20" height="20" strokethickness="1" stroke="deeppink" radiusx="10" radiusy="10" fill="transparent"></rectangle>                 <textblock grid.row="2" grid.column="1" text="b"   padding="22,0"/>                 <rectangle grid.row="3" grid.column="1" width="20" height="20" strokethickness="1" stroke="deeppink" radiusx="10" radiusy="10" fill="transparent"></rectangle>                 <textblock grid.row="3" grid.column="1" text="b"   padding="22,0"/>                 <rectangle grid.row="4" grid.column="1" width="20" height="20" strokethickness="1" stroke="deeppink" radiusx="10" radiusy="10" fill="transparent"></rectangle>                 <textblock grid.row="4" grid.column="1" text="b"   padding="22,0"/>                  <rectangle grid.row="0" grid.column="2" width="20" height="25" strokethickness="2" stroke="deeppink"></rectangle>                 <rectangle grid.row="1" grid.column="2" width="20" height="20" strokethickness="1" stroke="deeppink" radiusx="10" radiusy="10" fill="transparent"></rectangle>                 <textblock grid.row="1" grid.column="2" text="c" padding="22,0"/>                 <rectangle grid.row="2" grid.column="2" width="20" height="20" strokethickness="1" stroke="deeppink" radiusx="10" radiusy="10" fill="transparent"></rectangle>                 <textblock grid.row="2" grid.column="2" text="c" padding="22,0"/>                 <rectangle grid.row="3" grid.column="2" width="20" height="20" strokethickness="1" stroke="deeppink" radiusx="10" radiusy="10" fill="transparent"></rectangle>                 <textblock grid.row="3" grid.column="2" text="c" padding="22,0"/>                 <rectangle grid.row="4" grid.column="2" width="20" height="20" strokethickness="1" stroke="deeppink" radiusx="10" radiusy="10" fill="transparent"></rectangle>                 <textblock grid.row="4" grid.column="2" text="c" padding="22,0"/>                  <rectangle grid.row="0" grid.column="3" width="20" height="25" strokethickness="2" stroke="deeppink"></rectangle>                 <rectangle grid.row="1" grid.column="3" width="20" height="20" strokethickness="1" stroke="deeppink" radiusx="10" radiusy="10" fill="transparent"></rectangle>                 <textblock grid.row="1" grid.column="3" text="d" padding="22,0"/>                 <rectangle grid.row="2" grid.column="3" width="20" height="20" strokethickness="1" stroke="deeppink" radiusx="10" radiusy="10" fill="transparent"></rectangle>                 <textblock grid.row="2" grid.column="3" text="d" padding="22,0"/>                 <rectangle grid.row="3" grid.column="3" width="20" height="20" strokethickness="1" stroke="deeppink" radiusx="10" radiusy="10" fill="transparent"></rectangle>                 <textblock grid.row="3" grid.column="3" text="d" padding="22,0"/>                 <rectangle grid.row="4" grid.column="3" width="20" height="20" strokethickness="1" stroke="deeppink" radiusx="10" radiusy="10" fill="transparent"></rectangle>                 <textblock grid.row="4" grid.column="3" text="d" padding="22,0"/>              </grid>         </grid>     </canvas> </border> 

i write thumb code in c# file , work good. when using dragdelta on canvas through thumb,this canvas resize using thumb grid not resize.grid staying in same position.

thanks in advance. how bind grid parent canvas.

you choosing wrong container (canvas) layout. canvas places children using absolute positioning, means position of each children defined [offsetx, offsety] canvas. when canvas resizes, children stay were. verticalalignment/horizontalalignment property not work if container canvas.

<grid x:name="gridlayout" verticalalignment="stretch" horizontalalignment="stretch" 

further reading on wpf canvas layout.

you can workaround binding width/height of gridlayout actual width/height of canvas. better solution choosing grid container.

i have deleted canvas, replaced column/row definitions auto * (you can test difference between two).

<border cliptobounds="true" borderthickness="2" borderbrush="deeppink" x:name="tempmaxentityborder" margin="159,85,137.667,55.667">     <grid x:name="gridlayout" verticalalignment="stretch" horizontalalignment="stretch" >         <grid.rowdefinitions >             <rowdefinition height="auto" ></rowdefinition>             <rowdefinition height="auto"></rowdefinition>             <rowdefinition height="*"></rowdefinition>         </grid.rowdefinitions>         <textblock text="entity" textalignment="center" grid.row="0" grid.column="0" fontsize="16" verticalalignment="center" horizontalalignment="center" width="200"></textblock>         <line margin="0,5,0,0" grid.row="1" grid.column="0"  stroke="deeppink" strokethickness="2" x2="{binding path=actualwidth, relativesource={relativesource self}}" verticalalignment="top" />         <grid  x:name="childgridlayout" grid.row="2" horizontalalignment="stretch" verticalalignment="stretch" >             <grid.columndefinitions >                 <columndefinition width="*"></columndefinition>                 <columndefinition width="*"></columndefinition>                 <columndefinition width="*"></columndefinition>                 <columndefinition width="*"></columndefinition>             </grid.columndefinitions>             <grid.rowdefinitions>                 <rowdefinition height="*"></rowdefinition>                 <rowdefinition height="*"></rowdefinition>                 <rowdefinition height="*"></rowdefinition>                 <rowdefinition height="*"></rowdefinition>                 <rowdefinition height="*"></rowdefinition>             </grid.rowdefinitions>             <rectangle grid.row="0" grid.column="0" width="20" height="25" strokethickness="2" stroke="deeppink" ></rectangle>             <rectangle grid.row="1" grid.column="0" width="20" height="20" strokethickness="1" stroke="deeppink" radiusx="10" radiusy="10" fill="transparent"></rectangle>             <textblock grid.row="1" grid.column="0" text="a"   padding="22,5"/>             <rectangle  grid.row="2" grid.column="0" width="20" height="20" strokethickness="1" stroke="deeppink" radiusx="10" radiusy="10" fill="transparent"></rectangle>             <textblock grid.row="2" grid.column="0" text="a"   padding="22,0"/>             <rectangle grid.row="3" grid.column="0" width="20" height="20" strokethickness="1" stroke="deeppink" radiusx="10" radiusy="10" fill="transparent"></rectangle>             <textblock grid.row="3" grid.column="0" text="a"   padding="22,0"/>             <rectangle grid.row="4" grid.column="0" width="20" height="20" strokethickness="1" stroke="deeppink" radiusx="10" radiusy="10" fill="transparent"></rectangle>             <textblock grid.row="4" grid.column="0" text="a"   padding="22,0"/>              <rectangle grid.row="0" grid.column="1" width="20" height="25" strokethickness="2" stroke="deeppink"></rectangle>             <rectangle grid.row="1" grid.column="1" width="20" height="20" strokethickness="1" stroke="deeppink" radiusx="10" radiusy="10" fill="transparent"></rectangle>             <textblock grid.row="1" grid.column="1" text="b"   padding="22,0"/>             <rectangle grid.row="2" grid.column="1" width="20" height="20" strokethickness="1" stroke="deeppink" radiusx="10" radiusy="10" fill="transparent"></rectangle>             <textblock grid.row="2" grid.column="1" text="b"   padding="22,0"/>             <rectangle grid.row="3" grid.column="1" width="20" height="20" strokethickness="1" stroke="deeppink" radiusx="10" radiusy="10" fill="transparent"></rectangle>             <textblock grid.row="3" grid.column="1" text="b"   padding="22,0"/>             <rectangle grid.row="4" grid.column="1" width="20" height="20" strokethickness="1" stroke="deeppink" radiusx="10" radiusy="10" fill="transparent"></rectangle>             <textblock grid.row="4" grid.column="1" text="b"   padding="22,0"/>              <rectangle grid.row="0" grid.column="2" width="20" height="25" strokethickness="2" stroke="deeppink"></rectangle>             <rectangle grid.row="1" grid.column="2" width="20" height="20" strokethickness="1" stroke="deeppink" radiusx="10" radiusy="10" fill="transparent"></rectangle>             <textblock grid.row="1" grid.column="2" text="c" padding="22,0"/>             <rectangle grid.row="2" grid.column="2" width="20" height="20" strokethickness="1" stroke="deeppink" radiusx="10" radiusy="10" fill="transparent"></rectangle>             <textblock grid.row="2" grid.column="2" text="c" padding="22,0"/>             <rectangle grid.row="3" grid.column="2" width="20" height="20" strokethickness="1" stroke="deeppink" radiusx="10" radiusy="10" fill="transparent"></rectangle>             <textblock grid.row="3" grid.column="2" text="c" padding="22,0"/>             <rectangle grid.row="4" grid.column="2" width="20" height="20" strokethickness="1" stroke="deeppink" radiusx="10" radiusy="10" fill="transparent"></rectangle>             <textblock grid.row="4" grid.column="2" text="c" padding="22,0"/>              <rectangle grid.row="0" grid.column="3" width="20" height="25" strokethickness="2" stroke="deeppink"></rectangle>             <rectangle grid.row="1" grid.column="3" width="20" height="20" strokethickness="1" stroke="deeppink" radiusx="10" radiusy="10" fill="transparent"></rectangle>             <textblock grid.row="1" grid.column="3" text="d" padding="22,0"/>             <rectangle grid.row="2" grid.column="3" width="20" height="20" strokethickness="1" stroke="deeppink" radiusx="10" radiusy="10" fill="transparent"></rectangle>             <textblock grid.row="2" grid.column="3" text="d" padding="22,0"/>             <rectangle grid.row="3" grid.column="3" width="20" height="20" strokethickness="1" stroke="deeppink" radiusx="10" radiusy="10" fill="transparent"></rectangle>             <textblock grid.row="3" grid.column="3" text="d" padding="22,0"/>             <rectangle grid.row="4" grid.column="3" width="20" height="20" strokethickness="1" stroke="deeppink" radiusx="10" radiusy="10" fill="transparent"></rectangle>             <textblock grid.row="4" grid.column="3" text="d" padding="22,0"/>         </grid>     </grid> </border>