I’m new to WPF and am used to winforms. I don’t understand why the compiled output is not the same as in the design view. I find this to be bit annoying and misleading.
When adding elements, I snapped them to the red border and the results are not consistent with what I see in the compiled window. In winforms, I’m used to using table layouts, panels, and docking and aligning items. Is there a proper way of doing this in WPF to get consistent results?

The XAML
<Window x:Class="WpfApplication4.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>
<Rectangle Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="300" Margin="10,10,0,0" Stroke="Black" VerticalAlignment="Top" Width="497"/>
</Grid>
</Window>

In WPF most containers don’t have the notion of children position. Instead, most controls use properties such as
Margin,HorizontalAlignmentandVerticalAlignmentto define their layout. Furthermore, specific containers offer different functions. If you want docking, you can use aDockPanel. If you want stacked elements, you can use aStackPaneland so on. I suggest you to look up a few tutorials online, it’s plenty of resources.In your case, if you want your control to completely fill its container, remove the
Margin,VerticalAlignment,HorizontalAlignment,WidthandHeightattributes from its XAML code.