Información general sobre alineación, márgenes y relleno

  • Artículo

La clase FrameworkElement expone varias propiedades que se utilizan para colocar los elementos secundarios de forma precisa. En este tema se analizan cuatro de las propiedades más importantes: HorizontalAlignment, Margin, Padding y VerticalAlignment. Es importante comprender los efectos de estas propiedades, ya que proporcionan la base para controlar la posición de los elementos en las aplicaciones Windows Presentation Foundation (WPF).

Este tema contiene las secciones siguientes.

  • Introducción al posicionamiento de los elementos
  • Introducción a las propiedades de alineación
  • Introducción a las propiedades de margen
  • Introducción a la propiedad de relleno
  • Utilizar alineación, márgenes y relleno en una aplicación
  • Pasos adicionales
  • Temas relacionados

Introducción al posicionamiento de los elementos

Hay numerosas maneras de colocar los elementos mediante WPF. Sin embargo, lograr el diseño ideal va más allá de la simple elección del elemento Panel adecuado. El control preciso de la posición requiere estar familiarizado con las propiedades HorizontalAlignment, Margin, Padding y VerticalAlignment.

En la ilustración siguiente se muestra un escenario de diseño que utiliza varias propiedades de posición.

Ejemplo WPF Positioning Properties

A primera vista, podría parecer que los elementos Button de esta ilustración están colocados de forma aleatoria. Sin embargo, sus posiciones están controladas precisamente por medio de una combinación de márgenes, alineaciones y relleno.

En el ejemplo siguiente se describe cómo crear el diseño de la ilustración anterior. Un elemento Border encapsula un elemento StackPanelprimario, con un valor Padding de 15 píxeles independientes del dispositivo. Esto se debe a la banda LightBlue estrecha que rodea al elemento StackPanel secundario. Los elementos secundarios de StackPanel se utilizan para mostrar cada una de las diversas propiedades de posición que se detallan en este tema. Se usan tres elementos Button para demostrar las propiedades Margin y 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>

En el diagrama siguiente se proporciona una vista en primer plano de las distintas propiedades de posición que se utilizan en el ejemplo anterior. En las secciones siguientes de este tema se describe con mayor detalle cómo utilizar cada propiedad de posición.

Propiedades de posición con llamadas de pantalla

Introducción a las propiedades de alineación

Las propiedades HorizontalAlignment y VerticalAlignment describen cómo debería colocarse un elemento secundario dentro del espacio de diseño asignado del elemento primario. Al combinar estas propiedades, puede colocar los elementos secundarios de forma precisa. Por ejemplo, los elementos secundarios de DockPanel pueden especificar cuatro alineaciones horizontales diferentes: Left, Right, Center o Stretch para rellenar el espacio disponible. Para la posición vertical existen valores similares.

NotaNota

Las propiedades Height y Width establecidas explícitamente en un elemento tienen prioridad sobre el valor de propiedad Stretch.Al intentar establecer Height, Widthy HorizontalAlignment en un valor de Stretch, la solicitud de Stretch se pasa por alto.

Propiedad HorizontalAlignment

La propiedad HorizontalAlignment declara las características de alineación horizontal que se aplican a los elementos secundarios. En la tabla siguiente se muestra cada uno de los valores posibles de la propiedad HorizontalAlignment.

Miembro

Descripción

Left

Los elementos secundarios se alinean a la izquierda del espacio de diseño asignado del elemento primario.

Center

Los elementos secundarios se alinean al centro del espacio de diseño asignado del elemento primario.

Right

Los elementos secundarios se alinean a la derecha del espacio de diseño asignado del elemento primario.

Stretch (valor predeterminado)

Los elementos secundarios se ajustan para rellenar el espacio de diseño asignado del elemento primario. Los valores explícitos de las propiedades Width y Height tienen prioridad.

En el ejemplo siguiente se muestra cómo aplicar la propiedad HorizontalAlignment a elementos Button. Se muestra cada valor de atributo, para ilustrar mejor los distintos comportamientos de representación.

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>

El código anterior produce un diseño similar a la imagen siguiente. Los efectos de posicionamiento de cada valor de HorizontalAlignment se ven en la ilustración.

Ejemplo HorizontalAlignment

Propiedad VerticalAlignment

La propiedad VerticalAlignment describe las características de alineación vertical que se aplican a los elementos secundarios. En la tabla siguiente se muestra cada uno de los valores posibles para la propiedad VerticalAlignment.

Miembro

Descripción

Top

Los elementos secundarios se alinean con la parte superior del espacio de diseño asignado del elemento primario.

Center

Los elementos secundarios se alinean al centro del espacio de diseño asignado del elemento primario.

Bottom

Los elementos secundarios se alinean con la parte inferior del espacio de diseño asignado del elemento primario.

Stretch (valor predeterminado)

Los elementos secundarios se ajustan para rellenar el espacio de diseño asignado del elemento primario. Los valores explícitos de las propiedades Width y Height tienen prioridad.

En el ejemplo siguiente se muestra cómo aplicar la propiedad VerticalAlignment a elementos Button. Se muestra cada valor de atributo, para ilustrar mejor los distintos comportamientos de representación. En este ejemplo, se usa como elemento primario un elemento Grid con líneas de cuadrícula visibles, para ilustrar mejor el comportamiento de cada valor de propiedad en el diseño.

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>

El código anterior produce un diseño similar a la imagen siguiente. Los efectos de posicionamiento de cada valor de VerticalAlignment se ven en la ilustración.

Ejemplo de propiedad VerticalAlignment

Introducción a las propiedades de margen

La propiedad Margin describe la distancia entre un elemento y su elemento secundario o del mismo nivel. Los valores de Margin pueden ser uniformes, mediante el uso de sintaxis como Margin="20". Con esta sintaxis, se aplicaría al elemento un valor de Margin uniforme de 20 píxeles independientes del dispositivo. Los valores de Margin también pueden adoptar la forma de cuatro valores distintos, cada uno de los cuales describiría un margen distinto para aplicar a la izquierda, a la parte superior, a la derecha y a la parte inferior (en ese orden), como Margin="0,10,5,25". El uso apropiado de la propiedad Margin permite obtener un control muy preciso de la posición de representación de un elemento y la posición de representación de sus elementos contiguos y secundarios.

NotaNota

Un margen distinto de cero aplica espacio fuera del ActualWidth y ActualHeight del elemento.

En el ejemplo siguiente se muestra cómo aplicar márgenes uniformes alrededor de un grupo de elementos Button. La separación de los elementos Button es uniforme, con un búfer de margen de diez píxeles en cada dirección.

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>

En muchos casos no es apropiado un margen uniforme. Si es así, se puede aplicar un espacio no uniforme. En el ejemplo siguiente se muestra cómo aplicar un espacio de margen no uniforme a los elementos secundarios. Los márgenes se describen por este orden: izquierdo, superior, derecho, inferior.

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>

Introducción a la propiedad de relleno

El relleno es similar a Margin en muchos aspectos. La propiedad Padding se expone sólo en algunas clases, principalmente por comodidad: Block, Border, Control y TextBlock son ejemplos de clases que exponen una propiedad Padding. La propiedad Padding amplia el tamaño eficaz de un elemento secundario según el valor Thickness especificado.

En el ejemplo siguiente se muestra cómo aplicar Padding a un elemento Border primario.

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

Utilizar alineación, márgenes y relleno en una aplicación

HorizontalAlignment, Margin, Padding y VerticalAlignment ofrecen el control de posicionamiento necesario para crear una user interface (UI) compleja. Puede utilizar los efectos de cada propiedad para cambiar la posición de los elementos secundarios, lo que proporciona flexibilidad para lograr aplicaciones y experiencias de usuario dinámicas.

En el ejemplo siguiente se muestra cada uno de los conceptos que se detallan en este tema. Partiendo de la infraestructura del primer ejemplo de este tema, en este ejemplo se agrega un elemento Grid como elemento secundario del elemento Border que veíamos en el primer ejemplo. La propiedad Padding se aplica al elemento primario Border. Se usa Grid para dividir el espacio entre tres elementos StackPanel secundarios. Se vuelven a usar elementos Button para mostrar los distintos efectos de Margin y HorizontalAlignment. Se agregan elementos TextBlock a cada ColumnDefinition para mejorar la definición de las distintas propiedades aplicadas a los elementos Button en cada columna.


            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>

Cuando se compila, la aplicación anterior produce una UI similar a la de la ilustración siguiente. Los efectos de los distintos valores de propiedad son evidentes en el espacio entre los elementos y los valores de propiedad significativos para los elementos de cada columna se muestran dentro de elementos TextBlock.

Varias propiedades de posición en una aplicación

Pasos adicionales

Las propiedades de posición definidas por la clase FrameworkElement proporcionan un control preciso de la posición de los elementos en las aplicaciones WPF. Ahora dispone de varias técnicas que puede utilizar para colocar mejor los elementos mediante WPF.

Existen recursos adicionales que explican con mayor detalle el diseño en WPF. El tema Información general sobre elementos Panel contiene información más detallada sobre los diversos elementos Panel. El tema Tutorial: Introducción a WPF presenta técnicas avanzadas que recurren a elementos de diseño para colocar los componentes y enlazar sus acciones a orígenes de datos.

Vea también

Referencia

FrameworkElement

HorizontalAlignment

VerticalAlignment

Margin

Conceptos

Información general sobre elementos Panel

Sistema de diseño

Otros recursos

Ejemplo WPF Layout Gallery