Why is this button cut off?

Question

In the following XAML code the button text is half missing. I can change the Margin property and it becomes obvious that after 250px the content is hidden. Why is that, and how can I fix it?

<Window x:Class="InnerInterface.InventoryManagement" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="someWindow" Height="500" Width="500">
    <DockPanel HorizontalAlignment="Left" Name="dockPanel1" VerticalAlignment="Top">
        <Grid DockPanel.Dock="Top">
            <Button Name="buttonReturnToMainMenu" Content="someButton" Margin="200,0" Width="125" />
        </Grid>
    </DockPanel>
</Window>

Answer 1

You have a horizontal margin of 200, and a button width of 125, which means the total width needed to show the control properly is about 525.

You also have HorizontalAlignment=Left" on your DockPanel, which means it will draw the content at whatever width it needs and align it to the left side of the screen instead of stretching it to fill all available space. This means it is blocking out a space of 200 on either side of the control, and drawing the button in the remaining space. If this remaining space is less than 125, the image will be cropped.

If you switch to HorizontalAlignment="Stretch", then it will draw the control first (with margins), then stretch it's size so it fits all available space, so the entire control gets resized rather than cropped.

You might be interested in reading this MSDN article on Alignment, Margins, and Padding in WPF.

Edit

If you want only the Left margin to be 200, then use Margin="200,0,0,0". Using Margin="200,0" means that both the left and the right Margins will be 200.