Information
The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

How to: Horizontally or Vertically Align Content in a StackPanel

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.

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;
            }
        }


Show:
© 2014 Microsoft