Übersicht über Alignment, Margin und Padding

Artikel
08/10/2011

Von der FrameworkElement-Klasse werden verschiedene Eigenschaften verfügbar gemacht, die verwendet werden können, um untergeordnete Elemente genau zu positionieren. In diesem Thema werden vier der wichtigsten Eigenschaften erläutert: HorizontalAlignment, Margin, Padding und VerticalAlignment. Es ist wichtig, die Auswirkungen dieser Eigenschaften zu verstehen, da sie die Grundlage zur Steuerung der Elementpositionierung in Windows Presentation Foundation (WPF)-Anwendungen darstellen.

Dieses Thema enthält folgende Abschnitte.

Einführung in die Elementpositionierung
Alignment-Eigenschaften
Margin-Eigenschaften
Padding-Eigenschaft
Verwenden von Alignment, Margin und Padding in einer Anwendung
Weitere Informationen
Verwandte Abschnitte

Einführung in die Elementpositionierung

Es gibt zahlreiche Möglichkeiten, Elemente mit WPF zu positionieren. Zur Erstellung eines idealen Layouts ist es jedoch nicht ausreichend, einfach nur die richtigen Panel-Elemente auszuwählen. Zur Feinsteuerung der Positionierung sollten Sie die Eigenschaften HorizontalAlignment, Margin, Padding und VerticalAlignment verstehen.

In der folgenden Abbildung ist ein Layoutszenario dargestellt, in dem verschiedene Positionierungseigenschaften verwendet werden.

Beispiel für WPF-Positionierungseigenschaften

Auf den ersten Blick erscheint die Positionierung der Button-Elemente in dieser Abbildung zufällig. Tatsächlich sind ihre Positionen jedoch durch eine Kombination von Rändern, Ausrichtungen und Abständen exakt festgelegt.

Im folgenden Beispiel wird das Erstellen des Layouts für die oben dargestellte Abbildung beschrieben. Ein Border-Element kapselt einen übergeordneten StackPanel mit einem Padding-Wert von 15 geräteunabhängigen Pixeln. Hieraus ergibt sich, dass der schmale LightBlue-Streifen, das untergeordnete Element StackPanel umgibt. Die untergeordneten Elemente des StackPanel werden verwendet, um alle der verschiedenen in diesem Thema ausführlich beschriebenen Positionierungseigenschaften darzustellen. Drei Button-Elemente werden verwendet, um die Eigenschaften Margin und HorizontalAlignment zu veranschaulichen.

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>

Die folgende Abbildung enthält eine vergrößerte Ansicht der verschiedenen Positionierungseigenschaften, die im vorherigen Beispiel verwendet werden. In den folgenden Abschnitten dieses Themas wird die Verwendung jeder Positionierungseigenschaft ausführlich beschrieben.

Positionierungseigenschaften mit Bildschirmbeschriftungen

Alignment-Eigenschaften

Von den Eigenschaften HorizontalAlignment und VerticalAlignment wird festgelegt, an welcher Stelle im zugewiesenen Layoutbereich eines übergeordneten Elements ein untergeordnetes Element positioniert wird. Untergeordnete Elemente können mit diesen beiden Eigenschaften exakt positioniert werden. Von den untergeordneten Elementen eines DockPanel können beispielsweise vier verschiedene horizontale Ausrichtungen festgelegt werden: Left, Right, Center sowie Stretch, um den verfügbaren Platz auszufüllen. Ähnliche Werte sind für die vertikale Positionierung verfügbar.

Hinweis
Explizit festgelegte Eigenschaften Height und Width haben in einem Element Vorrang vor dem Stretch-Eigenschaftswert.Wenn die Werte für Height, Width und HorizontalAlignment auf Stretch festgelegt werden, wird die Stretch-Anforderung ignoriert.

HorizontalAlignment-Eigenschaft

Von der HorizontalAlignment-Eigenschaft werden die horizontalen Ausrichtungscharakteristiken deklariert, die auf untergeordnete Elemente angewendet werden. In der folgenden Tabelle ist jeder mögliche Wert für die HorizontalAlignment-Eigenschaft aufgeführt.

Member	Beschreibung
Left	Untergeordnete Elemente werden im übergeordneten Element am linken Rand des zugewiesenen Layoutbereichs ausgerichtet.
Center	Untergeordnete Elemente werden im zugewiesenen Layoutbereich des übergeordneten Elements zentriert ausgerichtet.
Right	Untergeordnete Elemente werden im übergeordneten Element am rechten Rand des zugewiesenen Layoutbereichs ausgerichtet.
Stretch (Standard)	Untergeordnete Elemente werden gestreckt, sodass sie den zugewiesenen Layoutbereich des übergeordneten Elements ausfüllen. Explizite Werte für Width und Height haben Vorrang.

Im folgenden Beispiel ist dargestellt, wie die HorizontalAlignment-Eigenschaft auf Button-Elemente angewendet wird. Jeder Attributwert wird angezeigt, um die verschiedenen Renderingverhalten besser zu veranschaulichen.

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>

Das durch den obigen Code erstellte Layout ähnelt dem folgenden Bild. In der Abbildung werden die Auswirkungen der einzelnen HorizontalAlignment-Werte auf die Positionierung dargestellt.

HorizontalAlignment-Beispiel

VerticalAlignment-Eigenschaft

Von der VerticalAlignment-Eigenschaft werden die vertikalen Ausrichtungscharakteristiken festgelegt, die auf untergeordnete Elemente angewendet werden. In der folgenden Tabelle ist jeder mögliche Wert für die VerticalAlignment-Eigenschaft aufgeführt.

Member	Beschreibung
Top	Untergeordnete Elemente werden im übergeordneten Element am oberen Rand des zugewiesenen Layoutbereichs ausgerichtet.
Center	Untergeordnete Elemente werden im zugewiesenen Layoutbereich des übergeordneten Elements zentriert ausgerichtet.
Bottom	Untergeordnete Elemente werden im übergeordneten Element am unteren Rand des zugewiesenen Layoutbereichs ausgerichtet.
Stretch (Standard)	Untergeordnete Elemente werden gestreckt, sodass sie den zugewiesenen Layoutbereich des übergeordneten Elements ausfüllen. Explizite Werte für Width und Height haben Vorrang.

Im folgenden Beispiel ist dargestellt, wie die VerticalAlignment-Eigenschaft auf Button-Elemente angewendet wird. Jeder Attributwert wird angezeigt, um die verschiedenen Renderingverhalten besser zu veranschaulichen. Für dieses Beispiel wird als übergeordnetes Element ein Grid-Element mit sichtbaren Rasterlinien verwendet, um das Layoutverhalten für jeden Eigenschaftswert besser zu veranschaulichen.

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>

Das durch den vorherigen Code erstellte Layout ähnelt der folgenden Abbildung. In der Abbildung werden die Auswirkungen der einzelnen VerticalAlignment-Werte auf die Positionierung dargestellt.

Beispiel für VerticalAlignment-Eigenschaft

Margin-Eigenschaften

Die Margin-Eigenschaft beschreibt die Entfernung zwischen einem Element und seinem untergeordneten Element oder Peers. Margin-Werte können einheitlich sein, mit Syntax wie Margin="20". Mit dieser Syntax wird ein einheitlicher Margin-Wert von 20 geräteunabhängigen Pixeln auf das Element angewendet. Sie können auch vier verschiedene Margin-Werte festlegen, von denen jeder einen unterschiedlichen Abstand für den linken, oberen, rechten und unteren Rand (in dieser Reihenfolge) darstellt, beispielsweise Margin="0,10,5,25". Wenn Sie die Margin-Eigenschaft ordnungsgemäß verwenden, können Sie die Renderingposition eines Elements und dessen unter- und nebengeordneten Elementen sehr präzise steuern.

Hinweis
Wenn der Wert für den Rand ungleich Null ist, wird der entsprechende Abstand außerhalb der ActualWidth und ActualHeight des Elements hinzugefügt.

Im folgenden Beispiel wird dargestellt, wie einheitliche Ränder um eine Gruppe von Button-Elementen hinzugefügt werden. Die Button-Elemente werden gleichmäßig mit einem Randpuffer von zehn Pixel in jeder Richtung platziert.

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>

In vielen Fällen ist ein einheitlicher Rand nicht geeignet. In diesen Fällen kann ein ungleichmäßiger Abstand angewendet werden. Im folgenden Beispiel wird dargestellt, wie ein ungleichmäßiger Abstand auf untergeordnete Elemente angewendet wird. Die Ränder werden in folgender Reihenfolge festgelegt: links, oben, rechts, unten.

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>

Padding-Eigenschaft

Padding entspricht Margin in nahezu jeder Hinsicht. Die Padding-Eigenschaft ist vor allem aus Gründen der Einfachheit nur in wenigen Klassen verfügbar: Block, Border, Control, und TextBlock sind Beispiele für Klassen, in denen die Padding-Eigenschaft verfügbar ist. Die Padding-Eigenschaft vergrößert die effektive Größe eines untergeordneten Elements um den festgelegten Thickness-Wert.

Im folgenden Beispiel wird dargestellt, wie die Padding-Eigenschaft auf ein übergeordnetes Border-Element angewendet wird.

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

Verwenden von Alignment, Margin und Padding in einer Anwendung

Mithilfe von HorizontalAlignment, Margin, Padding und VerticalAlignment kann die Positionierung zum Erstellen einer komplexen user interface (UI) gesteuert werden. Sie können diese Eigenschaften verwenden, um die Positionierung untergeordneter Elemente zu ändern und beim Erstellen dynamischer Anwendungen die Flexibilität und Benutzerfreundlichkeit zu erhöhen.

Im folgenden Beispiel werden alle in diesem Thema beschriebenen Konzepte veranschaulicht. Ausgehend von der im ersten Beispiel dieses Themas dargestellten Infrastruktur wird in diesem Beispiel ein Grid-Element als untergeordnetes Element des Border-Objekts im ersten Beispiel hinzugefügt. Padding wird auf das übergeordnete Border-Element angewendet. Das Grid-Element wird verwendet, um den Bereich zwischen drei untergeordneten StackPanel-Elementen aufzuteilen. Die Button-Elemente werden auch hier verwendet, um die verschiedenen Auswirkungen der Eigenschaften Margin und HorizontalAlignment darzustellen. TextBlock-Elemente werden jedem ColumnDefinition-Element hinzugefügt, um die unterschiedlichen Eigenschaften genauer festzulegen, die auf die Button-Elemente in jeder Spalte angewendet werden.


            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>

In der folgenden Abbildung ist die UI der Anwendung nach der Kompilierung dargestellt. Die Auswirkungen der unterschiedlichen Eigenschaftswerte sind an den Abständen zwischen den Elementen erkennbar, und wichtige Eigenschaftswerte für die Elemente in jeder Spalte werden in TextBlock angezeigt.

Mehrere Positionierungseigenschaften in einer Anwendung

Weitere Informationen

Mithilfe der durch die FrameworkElement-Klasse festgelegten Positionierungseigenschaften können Sie die Platzierung von Elementen innerhalb von -Anwendungen genau steuern. Es stehen Ihnen nun mehrere Verfahren zur Verfügung, mit denen Sie unter Verwendung von WPF Elemente besser positionieren können.

Zusätzliche Ressourcen sind verfügbar, in denen das WPF-Layout ausführlicher beschrieben wird. Im Thema Übersicht über Panel-Elemente finden Sie weitere Informationen zu den verschiedenen Panel-Elementen. Im Thema Exemplarische Vorgehensweise: Erste Schritte mit WPF werden fortgeschrittene Techniken eingeführt, in denen Layoutelemente verwendet werden, um Komponenten zu positionieren und ihre Aktionen an Datenquellen zu binden.

Siehe auch

Freigeben über