Partilhar via

Como: Alinhar horizontalmente ou verticalmente o conteúdo em um StackPanel

  • Artigo

Este exemplo mostra como ajustar o Orientation do conteúdo dentro de um elemento StackPanel e também como ajustar o HorizontalAlignment e VerticalAlignment do conteúdo filho.

Exemplo

O exemplo a seguir cria três elementos ListBox em Extensible Application Markup Language (XAML). Cada ListBox representa os valores possíveis das propriedades Orientation, HorizontalAlignmente VerticalAlignment de um StackPanel. Quando um utilizador seleciona um valor em qualquer um dos elementos ListBox, a propriedade associada do StackPanel e dos seus elementos filho Button mudam.

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

O arquivo code-behind a seguir define as alterações nos eventos associados às alterações de seleção de ListBox. StackPanel é identificada pelo 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

Ver também