Elements starting by center of a stackpanel

Question

How can I insert elements into a stackpanel, and they start positioned by center? Something like this:

|_ _ x _ _ |

|_ x x _ _ |

|_ x x x _ |

The "x" are the elements, and the "_" are blank space.

Is there something already implemented?

Answer 1

You could wrap your elements in a Grid:

<Grid Width="720">
  <StackPanel HorizontalAlignment="Center" Orientation="Horizontal" Width="Auto" >
    <!-- elements go here -->
  </StackPanel>
</Grid>

This is the simplest approach in my opinion. You also need to make sure that the StackPanel's Width="Auto" and Grid's Width="720"(some fixed value as needed).

Answer 2

<StackPanel>
  <StackPanel HorizontalAlignment="Center" Orientation="Horizontal">
    <!-- element x -->
  </StackPanel>
  <StackPanel HorizontalAlignment="Center" Orientation="Horizontal">
    <!-- element x -->
    <!-- element x -->
  </StackPanel>
  <StackPanel HorizontalAlignment="Center" Orientation="Horizontal">
    <!-- element x -->
    <!-- element x -->
    <!-- element x -->
  </StackPanel>
<StackPanel>

This produces the example you gave.