Edit

Share via

How to: Horizontally or Vertically Align Content in a StackPanel

  • Article

This example shows how to adjust the Orientation of content within a StackPanel element, and also how to adjust the HorizontalAlignment and VerticalAlignment of child content.

Example

The following example creates three ListBox elements in Extensible Application Markup Language (XAML). Each ListBox represents the possible values of the Orientation, HorizontalAlignment, and VerticalAlignment properties of a StackPanel. When a user selects a value in any of the ListBox elements, the associated property of the StackPanel and its child Button elements change.

    <ListBox VerticalAlignment="Top" SelectionChanged="changeOrientation" Grid.Row="2" Grid.Column="1" Width="100" Height="50" Margin="0,0,0,10">
        <ListBoxItem>Horizontal</ListBoxItem>
        <ListBoxItem>Vertical</ListBoxItem>
    </ListBox>

    <ListBox VerticalAlignment="Top" SelectionChanged="changeHorAlign" Grid.Row="2" Grid.Column="3" Width="100" Height="50" Margin="0,0,0,10">
        <ListBoxItem>Left</ListBoxItem>
        <ListBoxItem>Right</ListBoxItem>
        <ListBoxItem>Center</ListBoxItem>
        <ListBoxItem>Stretch</ListBoxItem>
    </ListBox>

    <ListBox VerticalAlignment="Top" SelectionChanged="changeVertAlign" Grid.Row="2" Grid.Column="5" Width="100" Height="50" Margin="0,0,0,10">
        <ListBoxItem>Top</ListBoxItem>
        <ListBoxItem>Bottom</ListBoxItem>
        <ListBoxItem>Center</ListBoxItem>
        <ListBoxItem>Stretch</ListBoxItem>
    </ListBox>

<StackPanel Grid.ColumnSpan="6" Grid.Row="3" Name="sp1" Background="Yellow">
    <Button>Button One</Button>
    <Button>Button Two</Button>
    <Button>Button Three</Button>
    <Button>Button Four</Button>
    <Button>Button Five</Button>
    <Button>Button Six</Button>
</StackPanel>

The following code-behind file defines the changes to the events that are associated with the ListBox selection changes. StackPanel is identified by the Name sp1.

private void changeOrientation(object sender, SelectionChangedEventArgs args)
    {
        ListBoxItem li = ((sender as ListBox).SelectedItem as ListBoxItem);
        if (li.Content.ToString() == "Horizontal")
        {
        sp1.Orientation = System.Windows.Controls.Orientation.Horizontal;
        }
        else if (li.Content.ToString() == "Vertical")
        {
        sp1.Orientation = System.Windows.Controls.Orientation.Vertical;
        }
    }

private void changeHorAlign(object sender, SelectionChangedEventArgs args)
    {
        ListBoxItem li = ((sender as ListBox).SelectedItem as ListBoxItem);
        if (li.Content.ToString() == "Left")
        {
        sp1.HorizontalAlignment = System.Windows.HorizontalAlignment.Left;
        }
        else if (li.Content.ToString() == "Right")
        {
        sp1.HorizontalAlignment = System.Windows.HorizontalAlignment.Right;
        }
        else if (li.Content.ToString() == "Center")
        {
        sp1.HorizontalAlignment = System.Windows.HorizontalAlignment.Center;
        }
        else if (li.Content.ToString() == "Stretch")
        {
        sp1.HorizontalAlignment = System.Windows.HorizontalAlignment.Stretch;
        }
    }

private void changeVertAlign(object sender, SelectionChangedEventArgs args)
    {
        ListBoxItem li = ((sender as ListBox).SelectedItem as ListBoxItem);
        if (li.Content.ToString() == "Top")
        {
        sp1.VerticalAlignment = System.Windows.VerticalAlignment.Top;
        }
        else if (li.Content.ToString() == "Bottom")
        {
        sp1.VerticalAlignment = System.Windows.VerticalAlignment.Bottom;
        }
        else if (li.Content.ToString() == "Center")
        {
        sp1.VerticalAlignment = System.Windows.VerticalAlignment.Center;
        }
        else if (li.Content.ToString() == "Stretch")
        {
        sp1.VerticalAlignment = System.Windows.VerticalAlignment.Stretch;
        }
    }

Private Sub changeOrientation(ByVal sender As Object, ByVal args As SelectionChangedEventArgs)
    Dim li As ListBoxItem = CType(CType(sender, ListBox).SelectedItem, ListBoxItem)
    If (li.Content.ToString() = "Horizontal") Then
        sp1.Orientation = System.Windows.Controls.Orientation.Horizontal
    ElseIf li.Content.ToString() = "Vertical" Then
        sp1.Orientation = System.Windows.Controls.Orientation.Vertical
    End If
End Sub
Private Sub changeHorAlign(ByVal sender As Object, ByVal args As SelectionChangedEventArgs)
    Dim li As ListBoxItem = CType(CType(sender, ListBox).SelectedItem, ListBoxItem)
    If (li.Content.ToString() = "Left") Then
        sp1.HorizontalAlignment = System.Windows.HorizontalAlignment.Left
    ElseIf (li.Content.ToString() = "Right") Then
        sp1.HorizontalAlignment = System.Windows.HorizontalAlignment.Right
    ElseIf (li.Content.ToString() = "Center") Then
        sp1.HorizontalAlignment = System.Windows.HorizontalAlignment.Center
    ElseIf (li.Content.ToString() = "Stretch") Then
        sp1.HorizontalAlignment = System.Windows.HorizontalAlignment.Stretch
    End If
End Sub
Private Sub changeVertAlign(ByVal sender As Object, ByVal args As SelectionChangedEventArgs)
    Dim li As ListBoxItem = CType(CType(sender, ListBox).SelectedItem, ListBoxItem)
    If (li.Content.ToString() = "Top") Then
        sp1.VerticalAlignment = System.Windows.VerticalAlignment.Top
    ElseIf (li.Content.ToString() = "Bottom") Then
        sp1.VerticalAlignment = System.Windows.VerticalAlignment.Bottom
    ElseIf (li.Content.ToString() = "Center") Then
        sp1.VerticalAlignment = System.Windows.VerticalAlignment.Center
    ElseIf (li.Content.ToString() = "Stretch") Then
        sp1.VerticalAlignment = System.Windows.VerticalAlignment.Stretch
    End If
End Sub

See also