Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

WPF Stack Panel Align Centrally

I want to be able to align buttons within a stack panel centrally. The number of buttons is dynamic and generated when the control is loaded. For example, if 1 button is generated then this button should be placed in the center of the control. If 5 buttons are displayed then all 5 should be horizontally aligned next 2 each other but central to the control.

An alternative approach would be to have the control dynamically resize based on its content so it would be wider with more buttons and then horizontally align the user control on the page but I'm not sure how to approach either solution?

Does anybody have any ideas?

like image 503
user1474992 Avatar asked Jun 22 '12 13:06

user1474992


People also ask

How do you center something in WPF?

How do I center text in a label in WPF? If you want to center each line, use a TextBlock instead, and set TextAlignment="Center" .

Which panel in WPF is well suited to place elements in an ordered and aligned manner?

The Panel ClassDerived Panel elements are used to position and arrange elements in Extensible Application Markup LanguageExtensible Application Markup LanguageExtensible Application Markup Language (XAML /ˈzæməl/ ( listen)) is a declarative XML-based language that Microsoft developed for initializing structured values and objects. It is available under Microsoft's Open Specification Promise. Extensible Application Markup Language (XAML) Filename extension.https://en.wikipedia.org › wiki › Extensible_Application_Mar...Extensible Application Markup Language - Wikipedia (XAML) and code.

How do you draw a horizontal line in WPF?

To draw a line, create a Line element. Use its X1 and Y1 properties to set its start point; and use its X2 and Y2 properties to set its end point. Finally, set its Stroke and StrokeThickness because a line without a stroke is invisible. Setting the Fill element for a line has no effect, because a line has no interior.

What is stack panel?

StackPanel is a layout panel that arranges child elements into a single line that can be oriented horizontally or vertically. By default, StackPanel stacks items vertically from top to bottom in the order they are declared. You can set the Orientation property to Horizontal to stack items from left to right.


2 Answers

This should work. Set the Horizontal Alignment in the stack panel, and make sure when you are dynamically adding your button, you give them each a margin property value to give them some space from each other. horizontal to each other, central to the control.

    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="20">
        <Button Margin="10">one</Button>
        <Button Margin="10">two</Button>
        <Button Margin="10">three</Button>
        <Button Margin="10">four</Button>
        <Button Margin="10">five</Button>            
    </StackPanel>
like image 66
GrayFox374 Avatar answered Oct 08 '22 13:10

GrayFox374


You can simply set following in XAML

StackPanel.HorizontalAlignment = HorizontalAlignment.Center;

or

HorizontalAlignment="Center" (as GrayFox374 mentioned)

Here is a MSDN sample explaining various alignment operations, having exactly what you need I think - How to: Horizontally or Vertically Align Content in a StackPanel

like image 32
akjoshi Avatar answered Oct 08 '22 11:10

akjoshi