UWP - How do I center a button?

Question

I created a UWP solution and created a button. There are no problems with the buttons.

I do not know how to center the button in the window.

Code

        StackPanel stackPanel1 = new StackPanel();

        Button TestButton = new Button();
        TestButton.Content = "Test";

        stackPanel1.Children.Add(subscribeButton);
  
        Window.Current.Content = stackPanel1;

score 1 · Answer 1 · answered Oct 25 '20 at 23:32

1

This line is all you need.

TestButton.HorizontalAlignment = HorizontalAlignment.Center;

answered Oct 25 '20 at 23:32

ewan_jordan

76
3

score 0 · Answer 2 · answered Oct 25 '20 at 18:37

0

Changing the position of the button to half of the form's width and height will work.

Point point = new Point(this.Width / 2 - (button1.Width/2), this.Height / 2 - (button1.Height/ 2)); 
button1.Location = point;

The added - (button1.Width/2) is because the button's position is based on the upper right hand corner of the button, and not actually the center.

answered Oct 25 '20 at 18:37

ewan_jordan

76
3

The method `.Location` doesn't exist. – Oct 25 '20 at 18:39
Does `.Translation` work? It's a Vector3 type though – ewan_jordan Oct 25 '20 at 18:52

score 0 · Answer 3 · answered Oct 25 '20 at 18:41

You can set HorizontalAlignment something like these inside the stackpanel...

<StackPanel Margin="10,0,0,0" Orientation="Horizontal" Grid.Column="0">
<TextBlock Grid.Column="1" Grid.Row="0" FontSize="16" HorizontalAlignment="Center">2. Draw a pattern</TextBlock>
                <Button x:Name="DeleteSiteButton" Content="Delete Site" 
                        HorizontalAlignment="Right" Margin="0,0,0,0" VerticalAlignment="Top" Click="DeleteSiteButton_Click"/>
                <Button x:Name="AddSiteButton" Content="Add Site" HorizontalAlignment="Right"
                    Margin="10,0,0,0" VerticalAlignment="Top" Click="AddSiteButton_Click"/>
            </StackPanel>

Those are properties on the actual C# object. ButtonName.HorizontalAlignment.... — raddevus, Oct 25 '20 at 18:43

score 0 · Answer 4 · answered Oct 26 '20 at 06:40

StackPanel control arranges child elements into a single line that can be oriented horizontally or vertically. When the Orientation property is set to Vertical(The default value is Vertical), the VerticalAlignment property of the button control will be invalid. Similarly, when the Orientation property is set to Horizontal, the HorizontalAlignment property of the button control will be invalid.

If you add a button control into a StackPanel, the HorizontalAlignment property and VerticalAlignment property of the button control will not work at the same time, that is, the button control can not be centered in a StackPanel.

We suggest that you could add the button control to a Grid panel, like this:

Grid gridPanel1 = new Grid();

Button TestButton = new Button();
TestButton.Content = "Test";
TestButton.HorizontalAlignment = HorizontalAlignment.Center;
TestButton.VerticalAlignment = VerticalAlignment.Center;

gridPanel1.Children.Add(TestButton);

Window.Current.Content = gridPanel1;

UWP - How do I center a button?

4 Answers4