Strange white box covering controls - wpf

Question

In the Designer everything looks alright but in Debbuging a weird white rectangle covers a part of it (If I don't set any Margin in the Button, It looks fine).
Designer
While Debugging
<Window x:Class="MyProgram.MainWindow" ResizeMode="NoResize"
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:MyProgram"
mc:Ignorable="d"
Title="MyProgram" Height="450" Width="650">
<Grid>
<Label Content="Things:" HorizontalAlignment="Left" Margin="0,7,0,0" VerticalAlignment="Top" FontSize="22"/>
<Button Height="28" Width="180" Background="Transparent" BorderThickness="0" Margin="454,15,10,378" >
<StackPanel Orientation="Horizontal">
<Image Source="Resources/addpackage2.png" Width="35" />
<TextBlock Text="Add" Margin="3,0,3,0" FontSize="18" />
</StackPanel>
</Button>
</Grid>
I'm doing something wrong?

Answer 1

The margin on your button Margin="454,15,10,378" is constricting the space available for the button. If you make the make the window larger, you will see the whole button.
Edit
There are different ways to organize a layout in XAML, but usually a grid is a good choice.
This is one way you could write it.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Grid.Column="0" Content="Things:" HorizontalAlignment="Left" Margin="7" VerticalAlignment="Top" FontSize="22"/>
<Button Grid.Row="0" Grid.Column="1" Height="28" Width="180" Background="Transparent" BorderThickness="0" >
<StackPanel Orientation="Horizontal">
<Image Source="Resources/addpackage2.png" Width="35" />
<TextBlock Text="Add" Margin="3,0,3,0" FontSize="18" />
</StackPanel>
</Button>
</Grid>
I have added row and column definitions to the grid. In this case two rows and two columns.
The top row is sized automatically according to its content. The second row fills the remaining space.
Similarly, the right hand column is sized automatically according to its content and the left hand column fills the remaining space.
This is just an example. You might want to define a different layout. I presume that the bottom of the screen will not always be white space.
Having defined the rows and columns, you can assign the individual controls to the cells in the grid, by specifying the Grid.Row and Grid.Column properties.
I have placed your label in row 0, column 0 and I have placed the button in row 0 column 1.
Very important, is that I have removed the Margin definition from the button. This kind of positioning controls is, in my opinion, always an error.
I think that the layout is more or less as you wanted.