Adding spaces between WPF controls

Question

I have created two buttons using the following XAML code.

<Button x:Name="Button1" Width="100" Content="Button1" HorizontalAlignment="Left" VerticalAlignment="Top" ></Button>
                        <Button x:Name="Button2" Width="100" Content="Button2" HorizontalAlignment="Left" VerticalAlignment="Top" ></Button>

The two buttons are tightly touching each other. How to put some space between them?

Note: The buttons are located inside a stackpanel with Horizontal orientation.

Jopa

Answer 1

Add a Margin to your buttons

<Button Margin="10" x:Name="Button1" Width="100" Content="Button1" HorizontalAlignment="Left" VerticalAlignment="Top" ></Button>
<Button Margin="10"  x:Name="Button2" Width="100" Content="Button2" HorizontalAlignment="Left" VerticalAlignment="Top" ></Button>

The Margin will make sure there is at least that much space between each button and any other control

Something you might find useful is that you can have different margin values for top, left, right and bottom so:

Margin="10,0,10,0"

Would space the buttons out horizontally but wouldn't make them any smaller vertically...

Krasner

This isn't working for my case. Adding a margin shrinks the button in every dimension. Perhaps I should have added this before, the Button is inside a stackpanel. – Jopa

You could add Padding to the StackPanel - any controls within the stackpanel will then get padding placed around them. Will give a similar result. – Krasner

How to add padding. I don't seem to find any property by that name? – Jopa

See Here: danrigsby.com/blog/index.php/2008/05/20/… for details on how padding and margin work. – Krasner

Sorry, I was wrong about the padding I think. You will need to use Margin on your buttons to get the desired effect> Maybe you could post more of your XAML and we'll be able to give a solution where Margin would work for you – Krasner

@Gunner, isn't <Button x:Name="Button1" Width="100" Content="Button1" HorizontalAlignment="Left" VerticalAlignment="Top"></Button> <Button x:Name="Button2" Width="100" Content="Button2" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,0,0,0"></Button> working for you? – Euchology

@publicgk: Yes, Margin with all four parameters is now now working. – Jopa

Your answer implicitly suggests that the order of the Margin properties is top, left, right, bottom, but it really is left, top, right, bottom. – Glisten

Answer 2

If you do not use (for some reason) Button's Margin property, you can put transparent Separator (Transparent background color) with desired Width (or/and Height) between your controls (Buttons in your case).

In xaml:

<StackPanel Orientation="Horizontal">
  <Button x:Name="Button1" Width="100" Content="Button1"/>
  <Separator Width="20" Background="Transparent"/>
  <Button x:Name="Button2" Width="100" Content="Button2"/>
</StackPanel>

Background

@vargonian Setting Visibility to Hidden can also prevent you from clicking on the Separator in design view, which may or may not be desirable. – Nevins

For some reason this did not work for me... even when set to transparent, it was still visible (?) – Szczecin

Answer 3

For me setting the foreground and background colors of a Separator to transparent did not work - it was still visible.

Instead I used the following:

<Separator Visibility="Hidden" Height="15"/>

I preferred this over setting a margin partly for the reasons cited in comments to another answer (it can have side-effects on the size of the item) and partly because I think using a separator is a little more clear for other programmers (or even myself) later on.

Szczecin