I’m working on a project right now and have noticed that XAML seems to be incorrectly rendered in the Visual Studio designer, versus it properly being shown in the Expression Blend 3.
It seems that sizes and alignments are completely off in Visual Studio 2008 where everything appears correct, renders properly, and executes normally when created in Expression Blend 3.
Here’s an example of XAML as rendered in Visual Studio 2008:
and in Expression Blend 3:
Ignore the black background on the Expression screenshot, but notice that the buttons and all aspects are alligned properly, where the screenshot from Visual Studio 2008 is not.
Here is the XAML source:
<Window x:Class="QuickTwit.AccountWindow"
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"
Title="Accounts" mc:Ignorable="d" Height="300" Width="300" ResizeMode="NoResize" WindowStartupLocation="CenterScreen">
<Grid>
<ListBox Margin="12,12,0,124" Name="listAccounts" HorizontalAlignment="Left" Width="188" SelectionChanged="listAccounts_SelectionChanged" />
<Button Height="23" HorizontalAlignment="Right" Margin="0,0,12,7" Name="buttonOK" VerticalAlignment="Bottom" Width="75" Click="buttonOK_Click">OK</Button>
<Button Height="23" HorizontalAlignment="Right" Margin="0,20,12,0" Name="buttonDeleteAccount" VerticalAlignment="Top" Width="75" Click="buttonDeleteAccount_Click" IsEnabled="False">Delete</Button>
<Rectangle Stroke="#FFC9C9C9" Margin="13,0,12,41" VerticalAlignment="Bottom" Height="75" RadiusX="10" RadiusY="10" Opacity="0.5">
<Rectangle.Effect>
<DropShadowEffect BlurRadius="1" ShadowDepth="1" Opacity="0.5"/>
</Rectangle.Effect>
</Rectangle>
<TextBox Height="23" Margin="0,0,27,79" Name="textUsername" VerticalAlignment="Bottom" HorizontalAlignment="Right" Width="160" />
<Label Height="28" HorizontalAlignment="Left" Margin="28,168,0,0" Name="label1" VerticalAlignment="Top" Width="69">Username:</Label>
<Button x:Name="buttonAuthorize" VerticalAlignment="Bottom" Content="Authorize" Margin="0,0,27,49.04" HorizontalAlignment="Right" Width="75" Click="buttonAuthorize_Click" />
</Grid>
</Window>
If you have seen this happen or know how to fix it, let me know.