27

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.

3 Answers 3

39

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>
2
  • @vargonian Setting Visibility to Hidden can also prevent you from clicking on the Separator in design view, which may or may not be desirable. Nov 24, 2019 at 3:04
  • For some reason this did not work for me... even when set to transparent, it was still visible (?) Dec 23, 2021 at 13:47
31

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...

8
  • 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. May 15, 2011 at 12:17
  • You could add Padding to the StackPanel - any controls within the stackpanel will then get padding placed around them. Will give a similar result. May 15, 2011 at 12:18
  • How to add padding. I don't seem to find any property by that name? May 15, 2011 at 12:19
  • See Here: danrigsby.com/blog/index.php/2008/05/20/… for details on how padding and margin work. May 15, 2011 at 12:19
  • 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 May 15, 2011 at 12:25
2

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.