How to place a button correctly on the bottom/right?

Question

I try to place a button 10px from the right and bottom corner. In the Designer the button is about 10px from the corner, but not in the program (it is only 1px from the corner which looks a bit bad). Is this a bug in WPF?

<Window x:Class="wpftest.test"
        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" 
        xmlns:local="clr-namespace:wpftest" mc:Ignorable="d" Title="test"               
        Height="300" Width="300">
    <Grid>
        <Button x:Name="button" Content="Button" HorizontalAlignment="Left" Margin="207,239,0,0" VerticalAlignment="Top" Width="75" RenderTransformOrigin="-0.133,-0.75"/>
    </Grid>
</Window>

Answer 1

You will definitely want to be able to understand xaml markup if you intend on using WPF or UWP. Drag and drop in the designer rarely gives you what you really want, in my experience. However, the designer and the properties tell you exactly what is going on. Did you see what happens if you maximize your window at runtime? The button will be nowhere near the bottom, right corner. It will always be 207px from the left and 239px from the top, as defined. See below for a quick explanation.

• Blue - the object is constrained a distance from this edge.
• Red - the value by which the object is constrained.
• Green - the object is not constrained to this edge.

If you requirement be that the button be 10px from the right edge and 10px from the bottom, you can define that by clicking the "links" for the constraints to make the intended edges the reference edges (clicking them toggles them, so "turn off" the left and top), and adjust the values. You'll probably want to get rid of that transform that the designer put in for you as well.