Effect of X, Y and Alignment property on an object?

If I have this:

<Page ux:Class="SplashScreen">
    <AlfaPro ux:Name="alfaProIcon" Opacity="1" X="50%" Y="200" Alignment="Center" />

Where AlfaPro is a Class that displays an icon:

<Panel ux:Class="Icon" Width="80" Height="80" TransformOrigin="Center">
    <Image Source="{Resource iconFile}" Width="60%" Height="60%"/>
        <Stroke Brush="#fff" Width="3"/>


<Icon ux:Class="AlfaPro">
    <FileImageSource File="../assets/taxi.png" ux:Key="iconFile"/>

If I render this, it looks, intersting =)

What is going on here? Why is it placed in the lower right?

The X and Y properties are relative to the alignment of the element. By default, when you specify X or Y it will be Alignment="TopLeft". When you specify Alignment="Center" it offsets the X/Y amount from the center of the parent instead. Just remove the Alignment.

You will probably want an Anchor="50%,50%" on the item then. This will ensure the center of it is aligned at X=50% and Y=200, rather than the default TopLeft anchor.

Ah, the Anchor prop was it, thanks! =)