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

How-to Discussions
1

If I have this:

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

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%"/>
    <Circle>
        <Stroke Brush="#fff" Width="3"/>
    </Circle>
</Panel>

and

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

If I render this, it looks, intersting =)

file
tWl7N8pl01DY-image-1476966924445.png392×703

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

2

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.

3

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