Procedura: Scegliere tra StackPanel e DockPanel

  • Articolo

Anche se è possibile usare uno o DockPanelStackPanel per impilare gli elementi figlio, i due controlli non producono sempre gli stessi risultati. Ad esempio, l'ordine in cui si inseriscono gli elementi figlio può influire sulle dimensioni degli elementi figlio in un DockPanel oggetto ma non in un oggetto StackPanel. Questo comportamento diverso si verifica perché StackPanel misura la direzione dell'impilamento in Double.PositiveInfinity, ma DockPanel misura solo le dimensioni disponibili.

Gli esempi in questo articolo creano un Grid oggetto con due pannelli, simile all'immagine seguente:

A grid with two panels and hearts.

Esempio di XAML

L'esempio seguente illustra la differenza principale tra DockPanel e StackPanel quando si progetta una pagina in XAML.

<Grid Width="175" Height="150">
    <Grid.Resources>
        <ControlTemplate x:Key="EmojiViewBox" TargetType="{x:Type ContentControl}">
            <Viewbox>
                <Border Background="LightGray" BorderBrush="Black" BorderThickness="0.5">
                    <TextBlock Foreground="Red">💕</TextBlock>
                </Border>
            </Viewbox>
        </ControlTemplate>
    </Grid.Resources>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
    </Grid.RowDefinitions>

    <DockPanel Grid.Column="0" Grid.Row="0">
        <ContentControl Template="{StaticResource EmojiViewBox}" />
        <ContentControl Template="{StaticResource EmojiViewBox}" />
        <ContentControl Template="{StaticResource EmojiViewBox}" />
    </DockPanel>

    <StackPanel Grid.Column="0" Grid.Row="1"  Orientation="Horizontal">
        <ContentControl Template="{StaticResource EmojiViewBox}" />
        <ContentControl Template="{StaticResource EmojiViewBox}" />
        <ContentControl Template="{StaticResource EmojiViewBox}" />
    </StackPanel>
</Grid>

Esempio basato su codice

Nell'esempio seguente viene illustrata la differenza principale tra DockPanel e StackPanel. Questo codice viene eseguito nel Window.Loaded gestore eventi:

private void Window_Loaded(object sender, RoutedEventArgs e)
{
    Grid gridContainer = new Grid()
    {
        Width = 175,
        Height = 150
    };

    // Template to generate the content
    ControlTemplate viewBoxTemplate = (ControlTemplate)System.Windows.Markup.XamlReader.Parse(@"
        <ControlTemplate TargetType=""ContentControl"" xmlns=""http://schemas.microsoft.com/winfx/2006/xaml/presentation"">
            <Viewbox>
                <Border Background=""LightGray"" BorderBrush=""Black"" BorderThickness=""0.5"">
                    <TextBlock Foreground=""Red"">💕</TextBlock>
                </Border>
            </Viewbox>
        </ControlTemplate>
        ");

    gridContainer.RowDefinitions.Add(new RowDefinition());
    gridContainer.RowDefinitions.Add(new RowDefinition());

    // Dock panel
    DockPanel panel1 = new DockPanel();
    Grid.SetRow(panel1, 0);

    // Create the three controls for the panel
    panel1.Children.Add(new ContentControl() { Template = viewBoxTemplate });
    panel1.Children.Add(new ContentControl() { Template = viewBoxTemplate });
    panel1.Children.Add(new ContentControl() { Template = viewBoxTemplate });

    // Add the dock panel to the grid
    gridContainer.Children.Add(panel1);

    // Stack panel
    StackPanel panel2 = new StackPanel();
    panel2.Orientation = Orientation.Horizontal;
    Grid.SetRow(panel2, 1);

    // Create the three controls for the panel
    panel2.Children.Add(new ContentControl() { Template = viewBoxTemplate });
    panel2.Children.Add(new ContentControl() { Template = viewBoxTemplate });
    panel2.Children.Add(new ContentControl() { Template = viewBoxTemplate });

    // Add the dock panel to the grid
    gridContainer.Children.Add(panel2);
    
    // Set the grid as the content of this window or page
    Content = gridContainer;
}

Private Sub Window_Loaded(sender As Object, e As RoutedEventArgs)
    Dim gridContainer As New Grid() With {.Width = 175, .Height = 150}

    ' Template to generate the content
    Dim viewBoxTemplate As ControlTemplate = DirectCast(Markup.XamlReader.Parse("
            <ControlTemplate TargetType=""ContentControl"" xmlns=""http://schemas.microsoft.com/winfx/2006/xaml/presentation"">
                <Viewbox>
                    <Border Background=""LightGray"" BorderBrush=""Black"" BorderThickness=""0.5"">
                        <TextBlock Foreground=""Red"">💕</TextBlock>
                    </Border>
                </Viewbox>
            </ControlTemplate>"), ControlTemplate)


    gridContainer.RowDefinitions.Add(New RowDefinition())
    gridContainer.RowDefinitions.Add(New RowDefinition())

    ' Dock panel
    Dim panel1 As New DockPanel()
    Grid.SetRow(panel1, 0)

    ' Create the three controls for the panel
    panel1.Children.Add(New ContentControl() With {.Template = viewBoxTemplate})
    panel1.Children.Add(New ContentControl() With {.Template = viewBoxTemplate})
    panel1.Children.Add(New ContentControl() With {.Template = viewBoxTemplate})

    ' Add the dock panel to the grid
    gridContainer.Children.Add(panel1)

    ' Stack panel
    Dim panel2 As New StackPanel() With {.Orientation = Orientation.Horizontal}
    Grid.SetRow(panel2, 1)

    ' Create the three controls for the panel
    panel2.Children.Add(New ContentControl() With {.Template = viewBoxTemplate})
    panel2.Children.Add(New ContentControl() With {.Template = viewBoxTemplate})
    panel2.Children.Add(New ContentControl() With {.Template = viewBoxTemplate})

    ' Add the dock panel to the grid
    gridContainer.Children.Add(panel2)

    'Set the grid as the content of this window or page
    Content = gridContainer
End Sub

Vedi anche