Compartir a través de

Cómo: Alinear horizontal o verticalmente el contenido de un elemento StackPanel

  • Artículo

En este ejemplo se muestra cómo ajustar el Orientation de contenido dentro de un StackPanel elemento y también cómo ajustar el HorizontalAlignment y el VerticalAlignment del contenido secundario.

Ejemplo

En el ejemplo siguiente se crean tres elementos ListBox en lenguaje XAML. Cada ListBox representa los valores posibles de las propiedades Orientation, HorizontalAlignment y VerticalAlignment de StackPanel. Cuando un usuario selecciona un valor en cualquiera de los elementos ListBox, la propiedad asociada de StackPanel y sus elementos secundarios Button cambian.

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

El siguiente archivo de código subyacente define los cambios en los eventos asociados a los cambios de selección de ListBox. StackPanel se identifica mediante la propiedad Namesp1.

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

Vea también