c# - How to achieve a "infinite-sized" canvas effect in WPF? -

my goal create canvas can translate child elements want moving around whole canvas (like example in grasshopper plugin rhino). tried "translatetransform" problem arises height or width of canvas isn't big enough include whole window again. tried solve problem adding width , height canvas whenever gets dragged around, size of canvas doesn't seem change.

here window.xaml:

<window x:name="window" x:class="oolong.windows.project.projectplan"         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:oolong.windows.project"         mc:ignorable="d"         title="projektplan" height="{dynamicresource {x:static systemparameters.primaryscreenheightkey}}" width="{dynamicresource {x:static systemparameters.primaryscreenwidthkey}}" windowstartuplocation="centerowner" showintaskbar="false" icon="/oolong;component/resources/images/icon2.png">     <window.background>         <imagebrush imagesource="/oolong;component/resources/images/ui/canvas_bg.png" tilemode="flipy"      stretch="uniform" alignmenty="top"  viewport="0,0,150,50" viewportunits="absolute" />     </window.background>     <canvas x:name="grid" scrollviewer.horizontalscrollbarvisibility="auto" scrollviewer.verticalscrollbarvisibility="auto" mouseleftbuttondown="grid_onmouseleftbuttondown" mousedown="grid_mousedown" mousemove="grid_mousemove" mouseup="grid_mouseup" mousewheel="grid_onmousewheel" width="{dynamicresource {x:static systemparameters.maximizedprimaryscreenwidthkey}}" height="{dynamicresource {x:static systemparameters.maximizedprimaryscreenheightkey}}">         <rectangle x:name="newtaskrectangle" fill="#fff4f4f5" horizontalalignment="left" height="87" margin="0,0,0,0" stroke="black" verticalalignment="top" width="208" visibility="hidden"/>             <label x:name="newtasklabel" content="gib den namen der aufgabe ein..." horizontalalignment="left" margin="10,17,0,0" verticalalignment="top" visibility="hidden"/>             <textbox  x:name="newtasktextbox" horizontalalignment="left" height="23" margin="10,48,0,0" textwrapping="wrap" verticalalignment="top" width="189" visibility="hidden" keyup="newtasktextbox_onkeyup"/>             <border x:name="newtasktemplate" borderbrush="black" borderthickness="2.5" horizontalalignment="left" height="30" margin="0" verticalalignment="top" background="#ffe2c027" padding="5" focusable="true" cornerradius="6" width="15" visibility="hidden" minwidth="150" minheight="30" mouserightbuttonup="newtasktemplate_onmouserightbuttonup">                 <border.contextmenu>                     <contextmenu x:name="newtaskcontextmenu">                         <menuitem x:name="addissuemenuitem" header="arbeitsschritt hinzufügen" click="addissuemenuitem_onclick"/>                         <menuitem x:name="deletemenuitem" header="löschen" click="deletemenuitem_onclick"/>                     </contextmenu>                 </border.contextmenu>             </border>         <canvas.rendertransform>             <transformgroup>                 <scaletransform x:name="scaletransform"/>                 <translatetransform x:name="tt" />             </transformgroup>         </canvas.rendertransform>     </canvas> </window> 

and here relevant c# code:

 private void newtasktemplate_onmouserightbuttonup(object sender, mousebuttoneventargs e)     {         point position = e.getposition(grid);         bool hasclickedontask = false;         if (app.projectplan.tasks != null)         {             var tasks = app.projectplan.tasks.distinctby(task => task.position);             var selectedtasks =                 tasks.where(                 (task =>                     math.abs(task.position.x - position.x + 10) < task.title.length*13 &&                     math.abs(task.position.y - position.y) < 20));             ienumerable<task> enumerable = selectedtasks task[] ?? selectedtasks.toarray();             if (enumerable.any())             {                 _selectedtask = enumerable.last();                 hasclickedontask = true;             }         }         if (!hasclickedontask) return;         newtaskcontextmenu.isopen = true;         e.handled = true;         setgridsize();     }      point _mstart;     vector _mstartoffset;      private void setgridsize()     {         grid.width += 250;         grid.height += 250;         grid.updatelayout();     }      private void grid_mousedown(object sender, mousebuttoneventargs e)     {         grid.cursor = cursors.scrollall;         _mstart = e.getposition(window);         _mstartoffset = new vector(tt.x, tt.y);         grid.capturemouse();     }      private void grid_mousemove(object sender, mouseeventargs e)     {         if (grid.ismousecaptured)         {             vector offset = point.subtract(e.getposition(window), _mstart);              tt.x = _mstartoffset.x + offset.x;             tt.y = _mstartoffset.y + offset.y;             setgridsize();         }     }      private void grid_mouseup(object sender, mousebuttoneventargs e)     {         grid.releasemousecapture();         grid.cursor = cursors.arrow;     }      private void grid_onmousewheel(object sender, mousewheeleventargs e)     {         point position = e.getposition(window);         scaletransform.centerx = position.x;         scaletransform.centery = position.y;         _gridzoom = _gridzoom + e.delta / 2400.00;         scaletransform.scalex = _gridzoom;         scaletransform.scaley = _gridzoom;         if (e.delta > 0)         {             setgridsize();         }         e.handled = true;     } 

the canvas @ beginning grid didn't work either. works move around canvas including elements of course, if put out of window, cant move anymore because canvas isn't there anymore. how can workaorund problem, user gets impression canvas infinite?

in case should surround grid scrollview , edit width , height properties after each dropping dragged element outside `grid'. this:

private void uielement_onpreviewmousemove(object sender, mouseeventargs e)     {         control c = (control)sender;         if (canmove) //field used define whether element dragged or not         {             c = (control) sender;             c.setvalue(canvas.leftproperty, e.getposition(canvas).x - p.x);             c.setvalue(canvas.topproperty, e.getposition(canvas).y - p.y);              var leftprop = convert.todouble(c.getvalue(canvas.leftproperty));             if (leftprop > canvas.width)                 canvas.width = leftprop + c.width+10;          }     }