Partager via

Vue d'ensemble de l'alignement, des marges et du remplissage

  • Article

La classe FrameworkElement expose plusieurs propriétés, utilisées pour positionner des éléments enfants de manière précise. Cette rubrique présente quatre des propriétés les plus importantes : HorizontalAlignment, Margin, Padding et VerticalAlignment. Il est important de comprendre les effets de ces propriétés, car elles servent de base au contrôle de la position des éléments dans les applications Windows Presentation Foundation (WPF).

Cette rubrique comprend les sections suivantes.

  • Introduction au positionnement d'un élément
  • Présentation des propriétés d'alignement
  • Présentation des propriétés de marge
  • Présentation de la propriété de remplissage
  • Utilisation de l'alignement, des marges et du remplissage dans une application
  • Quoi d'autre ?
  • Rubriques connexes

Introduction au positionnement d'un élément

Il existe de nombreuses manières de positionner des éléments à l'aide de WPF. Toutefois, pour obtenir une disposition parfaite, il ne suffit pas simplement de choisir le bon élément Panel. Un contrôle de positionnement précis requiert une bonne connaissance des propriétés HorizontalAlignment, Margin, Padding et VerticalAlignment.

L'illustration suivante montre un scénario de disposition qui utilise plusieurs propriétés de positionnement.

Exemple de propriétés de positionnement WPF

À première vue, les éléments Button de cette illustration semblent placés de manière aléatoire. Toutefois, leurs positions sont contrôlées de manière précise à l'aide d'une combinaison de marges, d'alignements et de remplissage.

L'exemple suivant décrit comment créer la disposition de l'illustration précédente. Un élément Border encapsule un StackPanel parent, avec une valeur Padding de 15 pixels indépendants du périphérique. Cela explique l'étroite bande LightBlue qui entoure le StackPanel enfant. Les éléments enfants du StackPanel sont utilisés pour illustrer chacune des différentes propriétés de positionnement détaillées dans cette rubrique. Trois éléments Button sont utilisés pour montrer les propriétés Margin et HorizontalAlignment.

WindowTitle = "Margins, Padding and Alignment Sample"

'Add a Border.
Dim myBorder As New Border()
myBorder.Background = Brushes.LightBlue
myBorder.BorderBrush = Brushes.Black
myBorder.Padding = New Thickness(15)
myBorder.BorderThickness = New Thickness(2)

Dim myStackPanel As New StackPanel()
myStackPanel.Background = Brushes.White
myStackPanel.HorizontalAlignment = Windows.HorizontalAlignment.Center
myStackPanel.VerticalAlignment = Windows.VerticalAlignment.Top

Dim myTextBlock As New TextBlock()
myTextBlock.Margin = New Thickness(5, 0, 5, 0)
myTextBlock.FontSize = 18
myTextBlock.HorizontalAlignment = Windows.HorizontalAlignment.Center
myTextBlock.Text = "Alignment, Margin and Padding Sample"
Dim myButton1 As New Button()
myButton1.HorizontalAlignment = Windows.HorizontalAlignment.Left
myButton1.Margin = New Thickness(20)
myButton1.Content = "Button 1"
Dim myButton2 As New Button()
myButton2.HorizontalAlignment = Windows.HorizontalAlignment.Right
myButton2.Margin = New Thickness(10)
myButton2.Content = "Button 2"
Dim myButton3 As New Button()
myButton3.HorizontalAlignment = Windows.HorizontalAlignment.Stretch
myButton3.Margin = New Thickness(0)
myButton3.Content = "Button 3"

'Add child elements to the parent StackPanel.
myStackPanel.Children.Add(myTextBlock)
myStackPanel.Children.Add(myButton1)
myStackPanel.Children.Add(myButton2)
myStackPanel.Children.Add(myButton3)

'Add the StackPanel as the lone Child of the Border.
myBorder.Child = myStackPanel

' Add the Canvas as the lone Child of the Border
myBorder.Child = myStackPanel
Me.Content = myBorder


            // Create the application's main Window.
            mainWindow = new Window ();
            mainWindow.Title = "Margins, Padding and Alignment Sample";

            // Add a Border
            myBorder = new Border();
            myBorder.Background = Brushes.LightBlue;
            myBorder.BorderBrush = Brushes.Black;
            myBorder.Padding = new Thickness(15);
            myBorder.BorderThickness = new Thickness(2);

            myStackPanel = new StackPanel();
            myStackPanel.Background = Brushes.White;
            myStackPanel.HorizontalAlignment = HorizontalAlignment.Center;
            myStackPanel.VerticalAlignment = VerticalAlignment.Top;

            TextBlock myTextBlock = new TextBlock();
            myTextBlock.Margin = new Thickness(5, 0, 5, 0);
            myTextBlock.FontSize = 18;
            myTextBlock.HorizontalAlignment = HorizontalAlignment.Center;
            myTextBlock.Text = "Alignment, Margin and Padding Sample";
            Button myButton1 = new Button();
            myButton1.HorizontalAlignment = HorizontalAlignment.Left;
            myButton1.Margin = new Thickness(20);
            myButton1.Content = "Button 1";
            Button myButton2 = new Button();
            myButton2.HorizontalAlignment = HorizontalAlignment.Right;
            myButton2.Margin = new Thickness(10);
            myButton2.Content = "Button 2";
            Button myButton3 = new Button();
            myButton3.HorizontalAlignment = HorizontalAlignment.Stretch;
            myButton3.Margin = new Thickness(0);
            myButton3.Content = "Button 3";

            // Add child elements to the parent StackPanel.
            myStackPanel.Children.Add(myTextBlock);
            myStackPanel.Children.Add(myButton1);
            myStackPanel.Children.Add(myButton2);
            myStackPanel.Children.Add(myButton3);

            // Add the StackPanel as the lone Child of the Border.
            myBorder.Child = myStackPanel;

            // Add the Border as the Content of the Parent Window Object.
            mainWindow.Content = myBorder;
            mainWindow.Show ();


<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" WindowTitle="Margins, Padding and Alignment Sample">
  <Border Background="LightBlue" BorderBrush="Black" BorderThickness="2" Padding="15">
    <StackPanel Background="White" HorizontalAlignment="Center" VerticalAlignment="Top">
        <TextBlock Margin="5,0,5,0" FontSize="18" HorizontalAlignment="Center">Alignment, Margin and Padding Sample</TextBlock>
        <Button HorizontalAlignment="Left" Margin="20">Button 1</Button>
        <Button HorizontalAlignment="Right" Margin="10">Button 2</Button>
        <Button HorizontalAlignment="Stretch" Margin="0">Button 3</Button>
    </StackPanel> 
  </Border>    
</Page>

Le diagramme suivant fournit un gros plan de l'affichage des différentes propriétés de positionnement utilisées dans l'exemple précédent. Les sections suivantes de cette rubrique décrivent plus en détail la manière d'utiliser chaque propriété de positionnement.

Propriétés de positionnement avec légendes d'écran

Présentation des propriétés d'alignement

Les propriétés HorizontalAlignment et VerticalAlignment décrivent la manière de positionner un élément enfant dans l'espace de disposition alloué d'un élément parent. En utilisant ces propriétés ensemble, vous pouvez positionner des éléments enfants de manière précise. Par exemple, les éléments enfants d'un DockPanel peuvent spécifier quatre alignements horizontaux différents : Left, Right, Center ou Stretch pour remplir l'espace disponible. Des valeurs similaires sont disponibles pour le positionnement vertical.

RemarqueRemarque

Les propriétés Height et Width, définies explicitement sur un élément, ont la priorité sur la valeur de propriété Stretch.En cas de tentative de définition d'une valeur Height, Width et HorizontalAlignment sur Stretch, la requête Stretch est ignorée.

Propriété HorizontalAlignment

La propriété HorizontalAlignment déclare les caractéristiques de l'alignement horizontal à appliquer aux éléments enfants. Le tableau suivant montre toutes les valeurs possibles de la propriété HorizontalAlignment.

Membre

Description

Left

Les éléments enfants sont alignés à gauche de l'espace de disposition alloué de l'élément parent.

Center

Les éléments enfants sont alignés au centre de l'espace de disposition alloué de l'élément parent.

Right

Les éléments enfants sont alignés à droite de l'espace de disposition alloué de l'élément parent.

Stretch (par défaut)

Les éléments enfants sont étirés pour remplir l'espace de disposition alloué de l'élément parent. Les valeurs Width et Height explicites sont prioritaires.

L'exemple suivant indique comment appliquer la propriété HorizontalAlignment aux éléments Button. Chaque valeur d'attribut est présentée pour mieux illustrer les différents comportements de rendu.

Dim myButton1 As New Button()
myButton1.HorizontalAlignment = Windows.HorizontalAlignment.Left
myButton1.Margin = New Thickness(20)
myButton1.Content = "Button 1"
Dim myButton2 As New Button()
myButton2.HorizontalAlignment = Windows.HorizontalAlignment.Right
myButton2.Margin = New Thickness(10)
myButton2.Content = "Button 2"
Dim myButton3 As New Button()
myButton3.HorizontalAlignment = Windows.HorizontalAlignment.Center
myButton3.Margin = New Thickness(0)
myButton3.Content = "Button 3"
Dim myButton4 As New Button()
myButton4.HorizontalAlignment = Windows.HorizontalAlignment.Stretch
myButton4.Content = "Button 4 (Stretch)"

Button myButton1 = new Button();
myButton1.HorizontalAlignment = HorizontalAlignment.Left;
myButton1.Content = "Button 1 (Left)";
Button myButton2 = new Button();
myButton2.HorizontalAlignment = HorizontalAlignment.Right;
myButton2.Content = "Button 2 (Right)";
Button myButton3 = new Button();
myButton3.HorizontalAlignment = HorizontalAlignment.Center;
myButton3.Content = "Button 3 (Center)";
Button myButton4 = new Button();
myButton4.HorizontalAlignment = HorizontalAlignment.Stretch;
myButton4.Content = "Button 4 (Stretch)";

<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" WindowTitle="HorizontalAlignment Sample">
  <Border Background="LightBlue" BorderBrush="Black" BorderThickness="2" Padding="15">
    <StackPanel Background="White" HorizontalAlignment="Center" VerticalAlignment="Top">
        <TextBlock Margin="5,0,5,0" FontSize="18" HorizontalAlignment="Center">HorizontalAlignment Sample</TextBlock>
    <Button HorizontalAlignment="Left">Button 1 (Left)</Button>
    <Button HorizontalAlignment="Right">Button 2 (Right)</Button>
    <Button HorizontalAlignment="Center">Button 3 (Center)</Button>
    <Button HorizontalAlignment="Stretch">Button 4 (Stretch)</Button>

    </StackPanel> 
  </Border>    
</Page>

Le code précédent donne une disposition semblable à l'image suivante. Les effets de positionnement de chaque valeur HorizontalAlignment sont visibles dans l'illustration.

Exemple d'alignement horizontal

Propriété VerticalAlignment

La propriété VerticalAlignment décrit les caractéristiques de l'alignement vertical à appliquer aux éléments enfants. Le tableau suivant montre toutes les valeurs possibles pour la propriété VerticalAlignment.

Membre

Description

Top

Les éléments enfants sont alignés en haut de l'espace de disposition alloué de l'élément parent.

Center

Les éléments enfants sont alignés au centre de l'espace de disposition alloué de l'élément parent.

Bottom

Les éléments enfants sont alignés en bas de l'espace de disposition alloué de l'élément parent.

Stretch (par défaut)

Les éléments enfants sont étirés pour remplir l'espace de disposition alloué de l'élément parent. Les valeurs Width et Height explicites sont prioritaires.

L'exemple suivant indique comment appliquer la propriété VerticalAlignment aux éléments Button. Chaque valeur d'attribut est présentée pour mieux illustrer les différents comportements de rendu. Pour les besoins de cet exemple, un élément Grid avec un quadrillage visible est utilisé en tant que parent pour mieux illustrer le comportement de disposition de chaque valeur de propriété.

Dim myTextBlock As New TextBlock()
myTextBlock.FontSize = 18
myTextBlock.HorizontalAlignment = Windows.HorizontalAlignment.Center
myTextBlock.Text = "VerticalAlignment Sample"
Grid.SetRow(myTextBlock, 0)
Dim myButton1 As New Button()
myButton1.VerticalAlignment = Windows.VerticalAlignment.Top
myButton1.Content = "Button 1 (Top)"
Grid.SetRow(myButton1, 1)
Dim myButton2 As New Button()
myButton2.VerticalAlignment = Windows.VerticalAlignment.Bottom
myButton2.Content = "Button 2 (Bottom)"
Grid.SetRow(myButton2, 2)
Dim myButton3 As New Button()
myButton3.VerticalAlignment = Windows.VerticalAlignment.Center
myButton3.Content = "Button 3 (Center)"
Grid.SetRow(myButton3, 3)
Dim myButton4 As New Button()
myButton4.VerticalAlignment = Windows.VerticalAlignment.Stretch
myButton4.Content = "Button 4 (Stretch)"
Grid.SetRow(myButton4, 4)

TextBlock myTextBlock = new TextBlock();
myTextBlock.FontSize = 18;
myTextBlock.HorizontalAlignment = HorizontalAlignment.Center;
myTextBlock.Text = "VerticalAlignment Sample";
Grid.SetRow(myTextBlock, 0);
Button myButton1 = new Button();
myButton1.VerticalAlignment = VerticalAlignment.Top;
myButton1.Content = "Button 1 (Top)";
Grid.SetRow(myButton1, 1);
Button myButton2 = new Button();
myButton2.VerticalAlignment = VerticalAlignment.Bottom;
myButton2.Content = "Button 2 (Bottom)";
Grid.SetRow(myButton2, 2);
Button myButton3 = new Button();
myButton3.VerticalAlignment = VerticalAlignment.Center;
myButton3.Content = "Button 3 (Center)";
Grid.SetRow(myButton3, 3);
Button myButton4 = new Button();
myButton4.VerticalAlignment = VerticalAlignment.Stretch;
myButton4.Content = "Button 4 (Stretch)";
Grid.SetRow(myButton4, 4);

<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
      WindowTitle="VerticalAlignment Sample">
  <Border Background="LightBlue" BorderBrush="Black" BorderThickness="2" Padding="15">
    <Grid Background="White" ShowGridLines="True">
      <Grid.RowDefinitions>
        <RowDefinition Height="25"/>
        <RowDefinition Height="50"/>
        <RowDefinition Height="50"/>
        <RowDefinition Height="50"/>
        <RowDefinition Height="50"/>
      </Grid.RowDefinitions>
            <TextBlock Grid.Row="0" Grid.Column="0" FontSize="18" HorizontalAlignment="Center">VerticalAlignment Sample</TextBlock>
            <Button Grid.Row="1" Grid.Column="0" VerticalAlignment="Top">Button 1 (Top)</Button>
            <Button Grid.Row="2" Grid.Column="0" VerticalAlignment="Bottom">Button 2 (Bottom)</Button>    
            <Button Grid.Row="3" Grid.Column="0" VerticalAlignment="Center">Button 3 (Center)</Button>
            <Button Grid.Row="4" Grid.Column="0" VerticalAlignment="Stretch">Button 4 (Stretch)</Button>          
    </Grid>
  </Border>    
</Page>

Le code précédent donne une disposition semblable à l'image suivante. Les effets de positionnement de chaque valeur VerticalAlignment sont visibles dans l'illustration.

Exemple de propriété VerticalAlignment

Présentation des propriétés de marge

La propriété Margin décrit la distance entre un élément et son enfant ou ses homologues. Les valeurs Margin peuvent être uniformes, en utilisant une syntaxe telle que Margin="20". Avec cette syntaxe, un Margin uniforme de 20 dip (device independent pixels) serait appliqué à l'élément. Les valeurs Margin peuvent également prendre la forme de quatre valeurs distinctes, chaque valeur décrivant une marge distincte à s'appliquer à gauche, en haut, à droite et en bas (dans cet ordre), comme Margin="0,10,5,25". Une utilisation adéquate de la propriété Margin permet un excellent contrôle de la position de rendu d'un élément et de la position de rendu de ses éléments voisins et enfants.

RemarqueRemarque

Une marge non nulle applique un espace en dehors de la ActualWidth et de la ActualHeight de l'élément.

L'exemple suivant indique comment appliquer des marges uniformes autour d'un groupe d'éléments Button. Les éléments Button sont espacés régulièrement avec une mémoire tampon de marge de dix pixels dans chaque direction.

Dim myButton7 As New Button
myButton7.Margin = New Thickness(10)
myButton7.Content = "Button 7"
Dim myButton8 As New Button
myButton8.Margin = New Thickness(10)
myButton8.Content = "Button 8"
Dim myButton9 As New Button
myButton9.Margin = New Thickness(10)
myButton9.Content = "Button 9"

Button myButton7 = new Button();
myButton7.Margin = new Thickness(10);
myButton7.Content = "Button 7";
Button myButton8 = new Button();
myButton8.Margin = new Thickness(10);
myButton8.Content = "Button 8";
Button myButton9 = new Button();
myButton9.Margin = new Thickness(10);
myButton9.Content = "Button 9";

Button^ myButton7 = gcnew Button();
myButton7->Margin = Thickness(10);
myButton7->Content = "Button 7";
Button^ myButton8 = gcnew Button();
myButton8->Margin = Thickness(10);
myButton8->Content = "Button 8";
Button^ myButton9 = gcnew Button();
myButton9->Margin = Thickness(10);
myButton9->Content = "Button 9";

<Button Margin="10">Button 7</Button>
<Button Margin="10">Button 8</Button>
<Button Margin="10">Button 9</Button>

Dans de nombreux cas, une marge uniforme n'est pas appropriée. Dans ces cas précis, l'espacement non uniforme peut être appliqué. L'exemple suivant indique comment appliquer un espacement de marge non uniforme aux éléments enfants. Les marges sont décrites dans cet ordre : gauche, haut, droite, bas.

Dim myButton1 As New Button
myButton1.Margin = New Thickness(0, 10, 0, 10)
myButton1.Content = "Button 1"
Dim myButton2 As New Button
myButton2.Margin = New Thickness(0, 10, 0, 10)
myButton2.Content = "Button 2"
Dim myButton3 As New Button
myButton3.Margin = New Thickness(0, 10, 0, 10)

Button myButton1 = new Button();
myButton1.Margin = new Thickness(0, 10, 0, 10);
myButton1.Content = "Button 1";
Button myButton2 = new Button();
myButton2.Margin = new Thickness(0, 10, 0, 10);
myButton2.Content = "Button 2";
Button myButton3 = new Button();
myButton3.Margin = new Thickness(0, 10, 0, 10);

Button^ myButton1 = gcnew Button();
myButton1->Margin = Thickness(0, 10, 0, 10);
myButton1->Content = "Button 1";
Button^ myButton2 = gcnew Button();
myButton2->Margin = Thickness(0, 10, 0, 10);
myButton2->Content = "Button 2";
Button^ myButton3 = gcnew Button();
myButton3->Margin = Thickness(0, 10, 0, 10);

<Button Margin="0,10,0,10">Button 1</Button>
<Button Margin="0,10,0,10">Button 2</Button>
<Button Margin="0,10,0,10">Button 3</Button>

Présentation de la propriété de remplissage

Le remplissage est semblable à Margin à bien des égards. La propriété Padding n'est exposée que sur un petit nombre de classes, principalement pour des raisons pratiques : Block, Border, Control et TextBlock sont des exemples de classes qui exposent une propriété Padding. La propriété Padding agrandit la taille effective d'un élément enfant selon la valeur Thickness spécifiée.

L'exemple suivant indique comment appliquer Padding à un élément Border parent.

Dim myBorder As New Border
myBorder.Background = Brushes.LightBlue
myBorder.BorderBrush = Brushes.Black
myBorder.BorderThickness = New Thickness(2)
myBorder.CornerRadius = New CornerRadius(45)
myBorder.Padding = New Thickness(25)

myBorder = new Border();
myBorder.Background = Brushes.LightBlue;
myBorder.BorderBrush = Brushes.Black;
myBorder.BorderThickness = new Thickness(2);
myBorder.CornerRadius = new CornerRadius(45);
myBorder.Padding = new Thickness(25);

myBorder = gcnew Border();
myBorder->Background = Brushes::LightBlue;
myBorder->BorderBrush = Brushes::Black;
myBorder->BorderThickness = Thickness(2);
myBorder->CornerRadius = CornerRadius(45);
myBorder->Padding = Thickness(25);

<Border Background="LightBlue" 
        BorderBrush="Black" 
        BorderThickness="2" 
        CornerRadius="45" 
        Padding="25">

Utilisation de l'alignement, des marges et du remplissage dans une application

HorizontalAlignment, Margin, Padding et VerticalAlignment fournissent le contrôle de positionnement nécessaire à la création d'une user interface (UI) complexe. Vous pouvez utiliser les effets de chaque propriété pour modifier le positionnement d'un élément enfant, en offrant une plus grande souplesse lors de la création d'applications dynamiques et d'expériences utilisateur.

L'exemple suivant montre chacun des concepts détaillés dans cette rubrique. Reposant sur l'infrastructure du premier exemple présenté dans cette rubrique, cet exemple ajoute un élément Grid en tant qu'enfant du Border du premier exemple. Padding est appliqué à l'élément Border parent. Le Grid est utilisé pour partitionner l'espace entre trois éléments StackPanel enfants. Les éléments Button sont encore utilisés pour afficher les différents effets de Margin et HorizontalAlignment. Des éléments TextBlock sont ajoutés à chaque ColumnDefinition pour mieux définir les différentes propriétés appliquées aux éléments Button dans chaque colonne.


            Dim myBorder As New Border
            myBorder.Background = Brushes.LightBlue
            myBorder.BorderBrush = Brushes.Black
            myBorder.BorderThickness = New Thickness(2)
            myBorder.CornerRadius = New CornerRadius(45)
            myBorder.Padding = New Thickness(25)

            'Define the Grid.
            Dim myGrid As New Grid
            myGrid.Background = Brushes.White
            myGrid.ShowGridLines = True

            'Define the Columns.
            Dim myColDef1 As New ColumnDefinition
            myColDef1.Width = New GridLength(1, GridUnitType.Auto)
            Dim myColDef2 As New ColumnDefinition
            myColDef2.Width = New GridLength(1, GridUnitType.Star)
            Dim myColDef3 As New ColumnDefinition
            myColDef3.Width = New GridLength(1, GridUnitType.Auto)

            'Add the ColumnDefinitions to the Grid
            myGrid.ColumnDefinitions.Add(myColDef1)
            myGrid.ColumnDefinitions.Add(myColDef2)
            myGrid.ColumnDefinitions.Add(myColDef3)

            'Add the first child StackPanel.
            Dim myStackPanel As New StackPanel
            myStackPanel.HorizontalAlignment = System.Windows.HorizontalAlignment.Left
            myStackPanel.VerticalAlignment = System.Windows.VerticalAlignment.Top
            Grid.SetColumn(myStackPanel, 0)
            Grid.SetRow(myStackPanel, 0)
            Dim myTextBlock1 As New TextBlock
            myTextBlock1.FontSize = 18
            myTextBlock1.HorizontalAlignment = System.Windows.HorizontalAlignment.Center
            myTextBlock1.Margin = New Thickness(0, 0, 0, 15)
            myTextBlock1.Text = "StackPanel 1"

            Dim myButton1 As New Button
            myButton1.Margin = New Thickness(0, 10, 0, 10)
            myButton1.Content = "Button 1"
            Dim myButton2 As New Button
            myButton2.Margin = New Thickness(0, 10, 0, 10)
            myButton2.Content = "Button 2"
            Dim myButton3 As New Button
            myButton3.Margin = New Thickness(0, 10, 0, 10)

            Dim myTextBlock2 As New TextBlock
            myTextBlock2.Text = "ColumnDefinition.Width = ""Auto"""
            Dim myTextBlock3 As New TextBlock
            myTextBlock3.Text = "StackPanel.HorizontalAlignment = ""Left"""
            Dim myTextBlock4 As New TextBlock
            myTextBlock4.Text = "StackPanel.VerticalAlignment = ""Top"""
            Dim myTextBlock5 As New TextBlock
            myTextBlock5.Text = "StackPanel.Orientation = ""Vertical"""
            Dim myTextBlock6 As New TextBlock
            myTextBlock6.Text = "Button.Margin = ""1,10,0,10"""
            myStackPanel.Children.Add(myTextBlock1)
            myStackPanel.Children.Add(myButton1)
            myStackPanel.Children.Add(myButton2)
            myStackPanel.Children.Add(myButton3)
            myStackPanel.Children.Add(myTextBlock2)
            myStackPanel.Children.Add(myTextBlock3)
            myStackPanel.Children.Add(myTextBlock4)
            myStackPanel.Children.Add(myTextBlock5)
            myStackPanel.Children.Add(myTextBlock6)

            'Add the second child StackPanel.
            Dim myStackPanel2 As New StackPanel
            myStackPanel2.HorizontalAlignment = System.Windows.HorizontalAlignment.Stretch
            myStackPanel2.VerticalAlignment = System.Windows.VerticalAlignment.Top
            myStackPanel2.Orientation = Orientation.Vertical
            Grid.SetColumn(myStackPanel2, 1)
            Grid.SetRow(myStackPanel2, 0)
            Dim myTextBlock7 As New TextBlock
            myTextBlock7.FontSize = 18
            myTextBlock7.HorizontalAlignment = System.Windows.HorizontalAlignment.Center
            myTextBlock7.Margin = New Thickness(0, 0, 0, 15)
            myTextBlock7.Text = "StackPanel 2"
            Dim myButton4 As New Button
            myButton4.Margin = New Thickness(10, 0, 10, 0)
            myButton4.Content = "Button 4"
            Dim myButton5 As New Button
            myButton5.Margin = New Thickness(10, 0, 10, 0)
            myButton5.Content = "Button 5"
            Dim myButton6 As New Button
            myButton6.Margin = New Thickness(10, 0, 10, 0)
            myButton6.Content = "Button 6"
            Dim myTextBlock8 As New TextBlock
            myTextBlock8.HorizontalAlignment = System.Windows.HorizontalAlignment.Center
            myTextBlock8.Text = "ColumnDefinition.Width = ""*"""
            Dim myTextBlock9 As New TextBlock
            myTextBlock9.HorizontalAlignment = System.Windows.HorizontalAlignment.Center
            myTextBlock9.Text = "StackPanel.HorizontalAlignment = ""Stretch"""
            Dim myTextBlock10 As New TextBlock
            myTextBlock10.HorizontalAlignment = System.Windows.HorizontalAlignment.Center
            myTextBlock10.Text = "StackPanel.VerticalAlignment = ""Top"""
            Dim myTextBlock11 As New TextBlock
            myTextBlock11.HorizontalAlignment = System.Windows.HorizontalAlignment.Center
            myTextBlock11.Text = "StackPanel.Orientation = ""Horizontal"""
            Dim myTextBlock12 As New TextBlock
            myTextBlock12.HorizontalAlignment = System.Windows.HorizontalAlignment.Center
            myTextBlock12.Text = "Button.Margin = ""10,0,10,0"""
            myStackPanel2.Children.Add(myTextBlock7)
            myStackPanel2.Children.Add(myButton4)
            myStackPanel2.Children.Add(myButton5)
            myStackPanel2.Children.Add(myButton6)
            myStackPanel2.Children.Add(myTextBlock8)
            myStackPanel2.Children.Add(myTextBlock9)
            myStackPanel2.Children.Add(myTextBlock10)
            myStackPanel2.Children.Add(myTextBlock11)
            myStackPanel2.Children.Add(myTextBlock12)

            'Add the final child StackPanel.
            Dim myStackPanel3 As New StackPanel
            myStackPanel3.HorizontalAlignment = System.Windows.HorizontalAlignment.Left
            myStackPanel3.VerticalAlignment = System.Windows.VerticalAlignment.Top
            Grid.SetColumn(myStackPanel3, 2)
            Grid.SetRow(myStackPanel3, 0)
            Dim myTextBlock13 As New TextBlock
            myTextBlock13.FontSize = 18
            myTextBlock13.HorizontalAlignment = System.Windows.HorizontalAlignment.Center
            myTextBlock13.Margin = New Thickness(0, 0, 0, 15)
            myTextBlock13.Text = "StackPanel 3"

            Dim myButton7 As New Button
            myButton7.Margin = New Thickness(10)
            myButton7.Content = "Button 7"
            Dim myButton8 As New Button
            myButton8.Margin = New Thickness(10)
            myButton8.Content = "Button 8"
            Dim myButton9 As New Button
            myButton9.Margin = New Thickness(10)
            myButton9.Content = "Button 9"
            Dim myTextBlock14 As New TextBlock
            myTextBlock14.Text = "ColumnDefinition.Width = ""Auto"""
            Dim myTextBlock15 As New TextBlock
            myTextBlock15.Text = "StackPanel.HorizontalAlignment = ""Left"""
            Dim myTextBlock16 As New TextBlock
            myTextBlock16.Text = "StackPanel.VerticalAlignment = ""Top"""
            Dim myTextBlock17 As New TextBlock
            myTextBlock17.Text = "StackPanel.Orientation = ""Vertical"""
            Dim myTextBlock18 As New TextBlock
            myTextBlock18.Text = "Button.Margin = ""10"""
            myStackPanel3.Children.Add(myTextBlock13)
            myStackPanel3.Children.Add(myButton7)
            myStackPanel3.Children.Add(myButton8)
            myStackPanel3.Children.Add(myButton9)
            myStackPanel3.Children.Add(myTextBlock14)
            myStackPanel3.Children.Add(myTextBlock15)
            myStackPanel3.Children.Add(myTextBlock16)
            myStackPanel3.Children.Add(myTextBlock17)
            myStackPanel3.Children.Add(myTextBlock18)

            'Add child content to the parent Grid.
            myGrid.Children.Add(myStackPanel)
            myGrid.Children.Add(myStackPanel2)
            myGrid.Children.Add(myStackPanel3)

            'Add the Grid as the lone child of the Border.
            myBorder.Child = myGrid


mainWindow = new Window();

myBorder = new Border();
myBorder.Background = Brushes.LightBlue;
myBorder.BorderBrush = Brushes.Black;
myBorder.BorderThickness = new Thickness(2);
myBorder.CornerRadius = new CornerRadius(45);
myBorder.Padding = new Thickness(25);

// Define the Grid.
myGrid = new Grid();
myGrid.Background = Brushes.White;
myGrid.ShowGridLines = true;

// Define the Columns.
ColumnDefinition myColDef1 = new ColumnDefinition();
myColDef1.Width = new GridLength(1, GridUnitType.Auto);
ColumnDefinition myColDef2 = new ColumnDefinition();
myColDef2.Width = new GridLength(1, GridUnitType.Star);
ColumnDefinition myColDef3 = new ColumnDefinition();
myColDef3.Width = new GridLength(1, GridUnitType.Auto);

// Add the ColumnDefinitions to the Grid.
myGrid.ColumnDefinitions.Add(myColDef1);
myGrid.ColumnDefinitions.Add(myColDef2);
myGrid.ColumnDefinitions.Add(myColDef3);

// Add the first child StackPanel.
StackPanel myStackPanel = new StackPanel();
myStackPanel.HorizontalAlignment = HorizontalAlignment.Left;
myStackPanel.VerticalAlignment = VerticalAlignment.Top;
Grid.SetColumn(myStackPanel, 0);
Grid.SetRow(myStackPanel, 0);
TextBlock myTextBlock1 = new TextBlock();
myTextBlock1.FontSize = 18;
myTextBlock1.HorizontalAlignment = HorizontalAlignment.Center;
myTextBlock1.Margin = new Thickness(0, 0, 0, 15);
myTextBlock1.Text = "StackPanel 1";
Button myButton1 = new Button();
myButton1.Margin = new Thickness(0, 10, 0, 10);
myButton1.Content = "Button 1";
Button myButton2 = new Button();
myButton2.Margin = new Thickness(0, 10, 0, 10);
myButton2.Content = "Button 2";
Button myButton3 = new Button();
myButton3.Margin = new Thickness(0, 10, 0, 10);
TextBlock myTextBlock2 = new TextBlock();
myTextBlock2.Text = @"ColumnDefinition.Width = ""Auto""";
TextBlock myTextBlock3 = new TextBlock();
myTextBlock3.Text = @"StackPanel.HorizontalAlignment = ""Left""";
TextBlock myTextBlock4 = new TextBlock();
myTextBlock4.Text = @"StackPanel.VerticalAlignment = ""Top""";
TextBlock myTextBlock5 = new TextBlock();
myTextBlock5.Text = @"StackPanel.Orientation = ""Vertical""";
TextBlock myTextBlock6 = new TextBlock();
myTextBlock6.Text = @"Button.Margin = ""1,10,0,10""";
myStackPanel.Children.Add(myTextBlock1);
myStackPanel.Children.Add(myButton1);
myStackPanel.Children.Add(myButton2);
myStackPanel.Children.Add(myButton3);
myStackPanel.Children.Add(myTextBlock2);
myStackPanel.Children.Add(myTextBlock3);
myStackPanel.Children.Add(myTextBlock4);
myStackPanel.Children.Add(myTextBlock5);
myStackPanel.Children.Add(myTextBlock6);

// Add the second child StackPanel.
StackPanel myStackPanel2 = new StackPanel();
myStackPanel2.HorizontalAlignment = HorizontalAlignment.Stretch;
myStackPanel2.VerticalAlignment = VerticalAlignment.Top;
myStackPanel2.Orientation = Orientation.Vertical;
Grid.SetColumn(myStackPanel2, 1);
Grid.SetRow(myStackPanel2, 0);
TextBlock myTextBlock7 = new TextBlock();
myTextBlock7.FontSize = 18;
myTextBlock7.HorizontalAlignment = HorizontalAlignment.Center;
myTextBlock7.Margin = new Thickness(0, 0, 0, 15);
myTextBlock7.Text = "StackPanel 2";
Button myButton4 = new Button();
myButton4.Margin = new Thickness(10, 0, 10, 0);
myButton4.Content = "Button 4";
Button myButton5 = new Button();
myButton5.Margin = new Thickness(10, 0, 10, 0);
myButton5.Content = "Button 5";
Button myButton6 = new Button();
myButton6.Margin = new Thickness(10, 0, 10, 0);
myButton6.Content = "Button 6";
TextBlock myTextBlock8 = new TextBlock();
myTextBlock8.HorizontalAlignment = HorizontalAlignment.Center;
myTextBlock8.Text = @"ColumnDefinition.Width = ""*""";
TextBlock myTextBlock9 = new TextBlock();
myTextBlock9.HorizontalAlignment = HorizontalAlignment.Center;
myTextBlock9.Text = @"StackPanel.HorizontalAlignment = ""Stretch""";
TextBlock myTextBlock10 = new TextBlock();
myTextBlock10.HorizontalAlignment = HorizontalAlignment.Center;
myTextBlock10.Text = @"StackPanel.VerticalAlignment = ""Top""";
TextBlock myTextBlock11 = new TextBlock();
myTextBlock11.HorizontalAlignment = HorizontalAlignment.Center;
myTextBlock11.Text = @"StackPanel.Orientation = ""Horizontal""";
TextBlock myTextBlock12 = new TextBlock();
myTextBlock12.HorizontalAlignment = HorizontalAlignment.Center;
myTextBlock12.Text = @"Button.Margin = ""10,0,10,0""";
myStackPanel2.Children.Add(myTextBlock7);
myStackPanel2.Children.Add(myButton4);
myStackPanel2.Children.Add(myButton5);
myStackPanel2.Children.Add(myButton6);
myStackPanel2.Children.Add(myTextBlock8);
myStackPanel2.Children.Add(myTextBlock9);
myStackPanel2.Children.Add(myTextBlock10);
myStackPanel2.Children.Add(myTextBlock11);
myStackPanel2.Children.Add(myTextBlock12);

// Add the final child StackPanel.
StackPanel myStackPanel3 = new StackPanel();
myStackPanel3.HorizontalAlignment = HorizontalAlignment.Left;
myStackPanel3.VerticalAlignment = VerticalAlignment.Top;
Grid.SetColumn(myStackPanel3, 2);
Grid.SetRow(myStackPanel3, 0);
TextBlock myTextBlock13 = new TextBlock();
myTextBlock13.FontSize = 18;
myTextBlock13.HorizontalAlignment = HorizontalAlignment.Center;
myTextBlock13.Margin = new Thickness(0, 0, 0, 15);
myTextBlock13.Text = "StackPanel 3";
Button myButton7 = new Button();
myButton7.Margin = new Thickness(10);
myButton7.Content = "Button 7";
Button myButton8 = new Button();
myButton8.Margin = new Thickness(10);
myButton8.Content = "Button 8";
Button myButton9 = new Button();
myButton9.Margin = new Thickness(10);
myButton9.Content = "Button 9";
TextBlock myTextBlock14 = new TextBlock();
myTextBlock14.Text = @"ColumnDefinition.Width = ""Auto""";
TextBlock myTextBlock15 = new TextBlock();
myTextBlock15.Text = @"StackPanel.HorizontalAlignment = ""Left""";
TextBlock myTextBlock16 = new TextBlock();
myTextBlock16.Text = @"StackPanel.VerticalAlignment = ""Top""";
TextBlock myTextBlock17 = new TextBlock();
myTextBlock17.Text = @"StackPanel.Orientation = ""Vertical""";
TextBlock myTextBlock18 = new TextBlock();
myTextBlock18.Text = @"Button.Margin = ""10""";
myStackPanel3.Children.Add(myTextBlock13);
myStackPanel3.Children.Add(myButton7);
myStackPanel3.Children.Add(myButton8);
myStackPanel3.Children.Add(myButton9);
myStackPanel3.Children.Add(myTextBlock14);
myStackPanel3.Children.Add(myTextBlock15);
myStackPanel3.Children.Add(myTextBlock16);
myStackPanel3.Children.Add(myTextBlock17);
myStackPanel3.Children.Add(myTextBlock18);

// Add child content to the parent Grid.
myGrid.Children.Add(myStackPanel);
myGrid.Children.Add(myStackPanel2);
myGrid.Children.Add(myStackPanel3);

// Add the Grid as the lone child of the Border.
myBorder.Child = myGrid;

// Add the Border to the Window as Content and show the Window.
mainWindow.Content = myBorder;
mainWindow.Title = "Margin, Padding, and Alignment Sample";
mainWindow.Show();

mainWindow = gcnew Window();

myBorder = gcnew Border();
myBorder->Background = Brushes::LightBlue;
myBorder->BorderBrush = Brushes::Black;
myBorder->BorderThickness = Thickness(2);
myBorder->CornerRadius = CornerRadius(45);
myBorder->Padding = Thickness(25);

// Define the Grid.
myGrid = gcnew Grid();
myGrid->Background = Brushes::White;
myGrid->ShowGridLines = true;

// Define the Columns.
ColumnDefinition^ myColDef1 = gcnew ColumnDefinition();
myColDef1->Width = GridLength(1, GridUnitType::Auto);
ColumnDefinition^ myColDef2 = gcnew ColumnDefinition();
myColDef2->Width = GridLength(1, GridUnitType::Star);
ColumnDefinition^ myColDef3 = gcnew ColumnDefinition();
myColDef3->Width = GridLength(1, GridUnitType::Auto);

// Add the ColumnDefinitions to the Grid.
myGrid->ColumnDefinitions->Add(myColDef1);
myGrid->ColumnDefinitions->Add(myColDef2);
myGrid->ColumnDefinitions->Add(myColDef3);

// Add the first child StackPanel.
StackPanel^ myStackPanel = gcnew StackPanel();
myStackPanel->HorizontalAlignment = HorizontalAlignment::Left;
myStackPanel->VerticalAlignment = VerticalAlignment::Top;
Grid::SetColumn(myStackPanel, 0);
Grid::SetRow(myStackPanel, 0);
TextBlock^ myTextBlock1 = gcnew TextBlock();
myTextBlock1->FontSize = 18;
myTextBlock1->HorizontalAlignment = HorizontalAlignment::Center;
myTextBlock1->Margin = Thickness(0, 0, 0, 15);
myTextBlock1->Text = "StackPanel 1";
Button^ myButton1 = gcnew Button();
myButton1->Margin = Thickness(0, 10, 0, 10);
myButton1->Content = "Button 1";
Button^ myButton2 = gcnew Button();
myButton2->Margin = Thickness(0, 10, 0, 10);
myButton2->Content = "Button 2";
Button^ myButton3 = gcnew Button();
myButton3->Margin = Thickness(0, 10, 0, 10);
TextBlock^ myTextBlock2 = gcnew TextBlock();
myTextBlock2->Text = "ColumnDefinition.Width = \"Auto\"";
TextBlock^ myTextBlock3 = gcnew TextBlock();
myTextBlock3->Text = "StackPanel.HorizontalAlignment = \"Left\"";
TextBlock^ myTextBlock4 = gcnew TextBlock();
myTextBlock4->Text = "StackPanel.VerticalAlignment = \"Top\"";
TextBlock^ myTextBlock5 = gcnew TextBlock();
myTextBlock5->Text = "StackPanel.Orientation = \"Vertical\"";
TextBlock^ myTextBlock6 = gcnew TextBlock();
myTextBlock6->Text = "Button.Margin = \"1,10,0,10\"";
myStackPanel->Children->Add(myTextBlock1);
myStackPanel->Children->Add(myButton1);
myStackPanel->Children->Add(myButton2);
myStackPanel->Children->Add(myButton3);
myStackPanel->Children->Add(myTextBlock2);
myStackPanel->Children->Add(myTextBlock3);
myStackPanel->Children->Add(myTextBlock4);
myStackPanel->Children->Add(myTextBlock5);
myStackPanel->Children->Add(myTextBlock6);

// Add the second child StackPanel.
StackPanel^ myStackPanel2 = gcnew StackPanel();
myStackPanel2->HorizontalAlignment = HorizontalAlignment::Stretch;
myStackPanel2->VerticalAlignment = VerticalAlignment::Top;
myStackPanel2->Orientation = Orientation::Vertical;
Grid::SetColumn(myStackPanel2, 1);
Grid::SetRow(myStackPanel2, 0);
TextBlock^ myTextBlock7 = gcnew TextBlock();
myTextBlock7->FontSize = 18;
myTextBlock7->HorizontalAlignment = HorizontalAlignment::Center;
myTextBlock7->Margin = Thickness(0, 0, 0, 15);
myTextBlock7->Text = "StackPanel 2";
Button^ myButton4 = gcnew Button();
myButton4->Margin = Thickness(10, 0, 10, 0);
myButton4->Content = "Button 4";
Button^ myButton5 = gcnew Button();
myButton5->Margin = Thickness(10, 0, 10, 0);
myButton5->Content = "Button 5";
Button^ myButton6 = gcnew Button();
myButton6->Margin = Thickness(10, 0, 10, 0);
myButton6->Content = "Button 6";
TextBlock^ myTextBlock8 = gcnew TextBlock();
myTextBlock8->HorizontalAlignment = HorizontalAlignment::Center;
myTextBlock8->Text = "ColumnDefinition.Width = \"*\"";
TextBlock^ myTextBlock9 = gcnew TextBlock();
myTextBlock9->HorizontalAlignment = HorizontalAlignment::Center;
myTextBlock9->Text = "StackPanel.HorizontalAlignment = \"Stretch\"";
TextBlock^ myTextBlock10 = gcnew TextBlock();
myTextBlock10->HorizontalAlignment = HorizontalAlignment::Center;
myTextBlock10->Text = "StackPanel.VerticalAlignment = \"Top\"";
TextBlock^ myTextBlock11 = gcnew TextBlock();
myTextBlock11->HorizontalAlignment = HorizontalAlignment::Center;
myTextBlock11->Text = "StackPanel.Orientation = \"Horizontal\"";
TextBlock^ myTextBlock12 = gcnew TextBlock();
myTextBlock12->HorizontalAlignment = HorizontalAlignment::Center;
myTextBlock12->Text = "Button.Margin = \"10,0,10,0\"";
myStackPanel2->Children->Add(myTextBlock7);
myStackPanel2->Children->Add(myButton4);
myStackPanel2->Children->Add(myButton5);
myStackPanel2->Children->Add(myButton6);
myStackPanel2->Children->Add(myTextBlock8);
myStackPanel2->Children->Add(myTextBlock9);
myStackPanel2->Children->Add(myTextBlock10);
myStackPanel2->Children->Add(myTextBlock11);
myStackPanel2->Children->Add(myTextBlock12);

// Add the final child StackPanel.
StackPanel^ myStackPanel3 = gcnew StackPanel();
myStackPanel3->HorizontalAlignment = HorizontalAlignment::Left;
myStackPanel3->VerticalAlignment = VerticalAlignment::Top;
Grid::SetColumn(myStackPanel3, 2);
Grid::SetRow(myStackPanel3, 0);
TextBlock^ myTextBlock13 = gcnew TextBlock();
myTextBlock13->FontSize = 18;
myTextBlock13->HorizontalAlignment = HorizontalAlignment::Center;
myTextBlock13->Margin = Thickness(0, 0, 0, 15);
myTextBlock13->Text = "StackPanel 3";
Button^ myButton7 = gcnew Button();
myButton7->Margin = Thickness(10);
myButton7->Content = "Button 7";
Button^ myButton8 = gcnew Button();
myButton8->Margin = Thickness(10);
myButton8->Content = "Button 8";
Button^ myButton9 = gcnew Button();
myButton9->Margin = Thickness(10);
myButton9->Content = "Button 9";
TextBlock^ myTextBlock14 = gcnew TextBlock();
myTextBlock14->Text = "ColumnDefinition.Width = \"Auto\"";
TextBlock^ myTextBlock15 = gcnew TextBlock();
myTextBlock15->Text = "StackPanel.HorizontalAlignment = \"Left\"";
TextBlock^ myTextBlock16 = gcnew TextBlock();
myTextBlock16->Text = "StackPanel.VerticalAlignment = \"Top\"";
TextBlock^ myTextBlock17 = gcnew TextBlock();
myTextBlock17->Text = "StackPanel.Orientation = \"Vertical\"";
TextBlock^ myTextBlock18 = gcnew TextBlock();
myTextBlock18->Text = "Button.Margin = \"10\"";
myStackPanel3->Children->Add(myTextBlock13);
myStackPanel3->Children->Add(myButton7);
myStackPanel3->Children->Add(myButton8);
myStackPanel3->Children->Add(myButton9);
myStackPanel3->Children->Add(myTextBlock14);
myStackPanel3->Children->Add(myTextBlock15);
myStackPanel3->Children->Add(myTextBlock16);
myStackPanel3->Children->Add(myTextBlock17);
myStackPanel3->Children->Add(myTextBlock18);

// Add child content to the parent Grid.
myGrid->Children->Add(myStackPanel);
myGrid->Children->Add(myStackPanel2);
myGrid->Children->Add(myStackPanel3);

// Add the Grid as the lone child of the Border.
myBorder->Child = myGrid;

// Add the Border to the Window as Content and show the Window.
mainWindow->Content = myBorder;
mainWindow->Title = "Margin, Padding, and Alignment Sample";
mainWindow->Show();

<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" WindowTitle="Margins, Padding and Alignment Sample">
  <Border Background="LightBlue" 
          BorderBrush="Black" 
          BorderThickness="2" 
          CornerRadius="45" 
          Padding="25">
    <Grid Background="White" ShowGridLines="True">
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="Auto"/>
      </Grid.ColumnDefinitions>

    <StackPanel Grid.Column="0" Grid.Row="0" HorizontalAlignment="Left" Name="StackPanel1" VerticalAlignment="Top">
        <TextBlock FontSize="18" HorizontalAlignment="Center" Margin="0,0,0,15">StackPanel1</TextBlock>
        <Button Margin="0,10,0,10">Button 1</Button>
        <Button Margin="0,10,0,10">Button 2</Button>
        <Button Margin="0,10,0,10">Button 3</Button>
        <TextBlock>ColumnDefinition.Width="Auto"</TextBlock>
        <TextBlock>StackPanel.HorizontalAlignment="Left"</TextBlock>
        <TextBlock>StackPanel.VerticalAlignment="Top"</TextBlock>
        <TextBlock>StackPanel.Orientation="Vertical"</TextBlock>
        <TextBlock>Button.Margin="0,10,0,10"</TextBlock>
    </StackPanel>

    <StackPanel Grid.Column="1" Grid.Row="0" HorizontalAlignment="Stretch" Name="StackPanel2" VerticalAlignment="Top" Orientation="Vertical">
        <TextBlock FontSize="18" HorizontalAlignment="Center" Margin="0,0,0,15">StackPanel2</TextBlock>
        <Button Margin="10,0,10,0">Button 4</Button>
        <Button Margin="10,0,10,0">Button 5</Button>
        <Button Margin="10,0,10,0">Button 6</Button>
        <TextBlock HorizontalAlignment="Center">ColumnDefinition.Width="*"</TextBlock>
        <TextBlock HorizontalAlignment="Center">StackPanel.HorizontalAlignment="Stretch"</TextBlock>
        <TextBlock HorizontalAlignment="Center">StackPanel.VerticalAlignment="Top"</TextBlock>
        <TextBlock HorizontalAlignment="Center">StackPanel.Orientation="Horizontal"</TextBlock>
        <TextBlock HorizontalAlignment="Center">Button.Margin="10,0,10,0"</TextBlock>
    </StackPanel>        

    <StackPanel Grid.Column="2" Grid.Row="0" HorizontalAlignment="Left" Name="StackPanel3" VerticalAlignment="Top">
        <TextBlock FontSize="18" HorizontalAlignment="Center" Margin="0,0,0,15">StackPanel3</TextBlock>
        <Button Margin="10">Button 7</Button>
        <Button Margin="10">Button 8</Button>
        <Button Margin="10">Button 9</Button>
        <TextBlock>ColumnDefinition.Width="Auto"</TextBlock>
        <TextBlock>StackPanel.HorizontalAlignment="Left"</TextBlock>
        <TextBlock>StackPanel.VerticalAlignment="Top"</TextBlock>
        <TextBlock>StackPanel.Orientation="Vertical"</TextBlock>
        <TextBlock>Button.Margin="10"</TextBlock>      
    </StackPanel>
  </Grid>
  </Border>    
</Page>

Une fois compilée, l'application précédente donne une UI qui ressemble à l'illustration suivante. Les effets des différentes valeurs de propriété sont évidents dans l'espacement entre les éléments. Les valeurs de propriété significatives pour les éléments de chaque colonne sont affichées dans des éléments TextBlock.

Plusieurs propriétés de positionnement dans une application

Quoi d'autre ?

Les propriétés de positionnement définies par la classe FrameworkElement permettent un contrôle précis du positionnement de l'élément dans des applications WPF. Vous disposez désormais de plusieurs techniques pour mieux positionner les éléments à l'aide de WPF.

Des ressources supplémentaires expliquent plus en détail la disposition WPF. La rubrique Vue d'ensemble de Panel contient plus de détails sur les différents éléments Panel. La rubrique Procédure pas à pas : mise en route de WPF présente des techniques avancées qui utilisent des éléments de disposition pour positionner des composants et lier leurs actions aux sources de données.

Voir aussi

Référence

FrameworkElement

HorizontalAlignment

VerticalAlignment

Margin

Concepts

Vue d'ensemble de Panel

Système de disposition

Autres ressources

Galerie de dispositions WPF, exemple (page éventuellement en anglais)