wpf - Visual Studio 2010 XAML layout editor not WYSIWYG -

when i'm creating wpf layouts in visual studio 2010 drag , drop controls toolbox onto default element, typically grid. when spacing shown in visual studio not match what's displayed @ runtime. example, here visual editor , runtime results, respectively, 2 layouts . . .

. . . , . . .

... notice spacing altered.
here's xaml generated 2 examples . . .

  <button content="projectpattern" height="23" horizontalalignment="left" margin="12,296,0,0" name="butprojpattern" verticalalignment="top" width="117" click="butprojpattern_click" />     <textblock height="22" horizontalalignment="left" margin="135,0,0,141" name="resultprojpattern" text="(result)"       verticalalignment="bottom" width="41" />     <textblock height="23" horizontalalignment="left" margin="175,295,0,0" name="textblockpattern" text="     (pattern file)" padding="4" verticalalignment="top" width="135" background="#fff1f3ff" />      <button content="...browse" height="23" horizontalalignment="right" margin="0,294,814,0" name="buttonpatternbrowse" verticalalignment="top" width="54" click="buttonpatternbrowse_click" /> 

...and...

<button content="display cross" height="24" horizontalalignment="left" margin="622,108,0,0" name="buttoncross" verticalalignment="top" width="117" click="buttoncross_click" /> <textblock height="24" horizontalalignment="right" margin="0,107,344,0" name="resultcross" text="(result)" verticalalignment="top" width="100" /> <button content="display diamond" height="23" horizontalalignment="left" margin="622,138,0,0" name="butdiamond" verticalalignment="top" width="117" click="butdiamond_click" /> <textblock height="23" horizontalalignment="right" margin="0,138,344,0" name="resultdiamond" text="(result)" verticalalignment="top" width="100" /> <button content="displayfullfield" height="24" horizontalalignment="left" margin="622,165,0,0" name="butfullfield" verticalalignment="top" width="117" /> <textblock height="24" horizontalalignment="right" margin="0,164,344,0" name="resultfullfield" text="(result)" verticalalignment="top" width="100" /> 

i added button handlers, text content, etc, layout strictly generated visual studio layout editor. 1 thing noticed though it's drag-and-drop toolbox onto grid, visual studio inconsistent whether chooses "left" or "right" horizontalalignment different elements.

the container element default grid in default window - can minimize not resize . . .

<window x:class="caller1.mainwindow"         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"         title="mainwindow" height="500" width="1200" resizemode="canminimize">     <grid height="460">  

the result have waste lots of time going between editor , running app "tweak" layout. prevents "wysiwyg" layout editor matching runtime layout , how can them correspond?

thanks in advance.

i can't see images (dumb work firewall), can tell xaml using grid wrong. understand may fault of editor, seriously, shouldn't setting width , height properties on elements.

if want fixed size grid's children, set rowdefinitions , columndefinitions , set sizes. layout easier work (and more accurate in designer) if this. so, first grid this:

<grid margin="12,0,0,0">     <grid.columndefinitions>     <columndefinition width="117" />     <columndefinition width="auto" />     <columndefinition width="138" /> <!-- desired width + horizontal margins -->     <columndefinition width="auto" />   </grid.columndefinitions>   <button x:name="butprojpattern"            grid.column="0"            content="projectpattern"            verticalalignment="center"            click="butprojpattern_click" />   <textblock x:name="resultprojpattern"               grid.column="1"               margin="6,0,0,0"               text="(result)"               verticalalignment="center" />   <textblock x:name="textblockpattern"               grid.column="2"              margin="3,0,0,0"               padding="4"              text="     (pattern file)"               background="#fff1f3ff" />    <button x:name="buttonpatternbrowse"            grid.column="3"           content="...browse"            margin="22,0,0,0"            verticalalignment="center"            padding="2,1"           click="buttonpatternbrowse_click"  /> </grid> 

the other thing want note after put in kaxaml, great rapid prototyping of xaml layouts, noticed should using stackpanel. first grid simpler implementation (you have set width on couple of items match layout):

<stackpanel margin="12,0,0,0" orientation="horizontal">     <button x:name="butprojpattern"            content="projectpattern"            width="117"           click="butprojpattern_click" />   <textblock x:name="resultprojpattern"               margin="6,0,0,0"               text="(result)"               verticalalignment="center" />   <textblock x:name="textblockpattern"               margin="3,0,0,0"               padding="4"              width="135"              text="     (pattern file)"               background="#fff1f3ff" />    <button x:name="buttonpatternbrowse"            content="...browse"            margin="22,0,0,0"            verticalalignment="center"            padding="2,1"           click="buttonpatternbrowse_click"  /> </stackpanel>