Gewusst wie: Horizontales oder vertikales Ausrichten von Inhalt in einem StackPanel

Aktualisiert: November 2007

In diesem Beispiel wird veranschaulicht, wie die Orientation des Inhalts in einem StackPanel-Element sowie die HorizontalAlignment und VerticalAlignment von untergeordnetem Inhalt angepasst werden kann.

Beispiel

Im folgenden Beispiel werden drei ListBox-Elemente in Extensible Application Markup Language (XAML) erstellt. Jede ListBox stellt die möglichen Werte der Eigenschaften Orientation, HorizontalAlignment und VerticalAlignment eines StackPanel dar. Wenn von einem Benutzer ein Wert in einer der ListBox-Elemente ausgewählt wird, ändert sich die zugehörige Eigenschaft des StackPanel und seiner untergeordneten Button-Elemente.

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

Von der folgenden Code-Behind-Datei werden die Änderungen der Ereignisse festgelegt, die den Änderungen der ListBox-Auswahl zugeordnet sind. StackPanel wird durch den Name sp1 identifiziert.

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

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

Das vollständige Beispiel finden Sie unter Beispiel für eine StackPanel-Positionierung.

Siehe auch

Konzepte

Übersicht über Panel-Elemente

Referenz

StackPanel

ListBox

HorizontalAlignment

VerticalAlignment