Development

Improper Rendering of XAML?

Posted on September 13, 2009

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:

image

and in Expression Blend 3:

image

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.

You might find these interesting...

  • Writing to the Event Log in C #

    July 30, 2007
    When I'm writing code, I don't like to spend a lot of time fumbling around the framework.  Like tonight, I…

  • .NET Framework Source Code Available

    October 3, 2007
    With the release of Visual Studio 2008 and the Microsoft .NET Framework 3.5, Microsoft will also be releasing the source…

  • Accessing SQL Databases with PHP

    February 18, 2009
    Modifying pre-existing WordPress themes... That's my extent of PHP programming. I got to thinking that it would be cool to…
0 0 votes
Article Rating
Subscribe
Notify of
3 Comments
Inline Feedbacks
View all comments
Rob Relyea

If you could post a link to the XAML file that exhibits this inconsistent behavior, it would be easier to understand the problem and suggest the solution (or bug fix?).
Thanks, Rob

Rob Relyea | WPF & Xaml Language Team
robrelyea.com | /blog | /wpf | /xaml

0
erick ellis

Justin – I’m a VS WPF Designer team member and I’ve reproduced your problem with the freshest of VS2010 bits and it is still a problem. I’ve entered an issue to track it, hopefully we can improve the rendering before we ship, but this will llikely still be an issue in Beta2.

A workaround you could employ, just to make the rendering in the designer more accurate is to remove Window’s size, set a fixed size on Window’s child and set Window.SizeToContent=”WidthAndHeight”.

This will make the window “shrink-wrap” around the window’s child rather than have window’s borders/etc take up space in the child. Should give you the same layout with better fidelity.

0
Justin

Thanks Erick. Those few little changes seem to help the rendering; almost appears to fix the problem. Nice workaround.

0