C# WPF different size from IDE after debugging?

Question

I am having a problem with different appearance in Blend/VS2012 IDE and in Debugging. In IDE, the Rectangle is at the center, but when it is compiled or debugged, the size of the margin is different. In my view, this occurs because the size of the window border is different. I really want to fix this problem. Any suggestions?

Thank You.

XAML

<Window x:Class="WpfApplication2.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="202" Width="194">
<Grid HorizontalAlignment="Left" Height="171" VerticalAlignment="Top" Width="186">
    <Rectangle Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="151" Margin="10,10,0,0" Stroke="Black" VerticalAlignment="Top" Width="166"/>
</Grid>

Edited XAML code:

<Window x:Class="WpfApplication2.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="202" Width="194">
<Grid HorizontalAlignment="Left" Height="171" VerticalAlignment="Top" Width="186">
    <Rectangle Fill="#FFF4F4F5" HorizontalAlignment="Center" Height="151" Margin="10" Stroke="Black" VerticalAlignment="Center" Width="166"/>
</Grid>

Result is the same. Is this problem of my PC?

Answer 1

Your Problem here is Window Size includes the Chrome Size(Window Border and stuff like close/max min buttons).

Your Grid is hence the size you requested but it does not fit in the window size you've requested.

I could fix your issue to make the output window look like this, with Window size:

Width: 202 Height: 210

on Windows 8

However you should rather have your window size set to SizeToContent="WidthAndHeight"

Example:

<Window x:Class="WpfApplication4.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApplication4"
        x:Name="window"
        Title="MainWindow"
        SizeToContent="WidthAndHeight">
<Grid HorizontalAlignment="Left" Height="171" VerticalAlignment="Top" Width="186">
    <Rectangle Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="151" Margin="10,10,0,0" Stroke="Black" VerticalAlignment="Top" Width="166"/>
</Grid>
</Window>

Your thus not assuming Chrome sizes which might be different from different versions of Windows.

You should also get Snoop. It helps you debug such issues very easily, It shows a red border on a control when you hover on it with Shift+Ctrl, so you can actually see the Grid extend past the visible Window while showing the actual Element Layout of your UI