Paneles de Diseño en WPF para Interfaces de Usuario

WPF (Windows Presentation Foundation) ofrece un potente sistema de diseño que permite la separación entre la interfaz de usuario (UI) y la lógica de negocio, facilitando el desarrollo de interfaces atractivas y flexibles mediante XAML. La clave de este sistema reside en sus paneles de diseño, que organizan y posicionan los elementos visuales de diversas maneras.

Paneles de Diseño Comunes en WPF

Canvas

El Canvas es un panel de diseño que permite posicionar elementos hijos mediante coordenadas explícitas, actuando como un lienzo. Los elementos se ubicen utilizando las propiedades adjuntas Canvas.Left, Canvas.Top, Canvas.Right y Canvas.Bottom. Si se definen Canvas.Left y Canvas.Right simultáneamente para un mismo elemento, Canvas.Left tendrá prioridad. De manera similar, Canvas.Top prevalecerá sobre Canvas.Bottom.


<Window x:Class="WPF_Layout.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Ejemplo de Canvas" Height="300" Width="450">
    <Grid>
        <Canvas Background="#F0F8FF">
            <Rectangle Canvas.Left="20" Canvas.Top="20" Width="100" Height="50" Fill="LightBlue" />
            <TextBlock Canvas.Left="25" Canvas.Top="30" Text="Elemento Izquierda-Arriba" FontWeight="Bold" />
            
            <Ellipse Canvas.Right="30" Canvas.Top="20" Width="80" Height="50" Fill="LightCoral" />
            <TextBlock Canvas.Right="35" Canvas.Top="30" Text="Elemento Derecha-Arriba" FontWeight="Bold" />
            
            <Rectangle Canvas.Left="20" Canvas.Bottom="20" Width="100" Height="50" Fill="LightGreen" />
            <TextBlock Canvas.Left="25" Canvas.Bottom="30" Text="Elemento Izquierda-Abajo" FontWeight="Bold" />
            
            <Ellipse Canvas.Right="30" Canvas.Bottom="20" Width="80" Height="50" Fill="LightSalmon" />
            <TextBlock Canvas.Right="35" Canvas.Bottom="30" Text="Elemento Derecha-Abajo" FontWeight="Bold" />
        </Canvas>
    </Grid>
</Window>

StackPanel

El StackPanel organiza sus elementos hijos en una única línea, ya sea horizontal o verticalmente, sin envolver el contenido. La dirección de apilamiento se controla con la propiedad Orientation, que puede ser Horizontal o Vertical (siendo Vertical el valor predeterminado). La propiedad FlowDirection también puede modificar el orden de apilamiento, por ejemplo, RightToLeft para una orientación horizontal.


<Window x:Class="WPF_Layout.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Ejemplo de StackPanel" Height="350" Width="525">
    <Grid>
        <StackPanel Background="#E6E6FA">
            <TextBlock Text="Apilamiento Horizontal (LeftToRight)" FontSize="14" Margin="5"/>
            <StackPanel Orientation="Horizontal" Background="#E0FFFF" Margin="5">
                <Label Content="Nombre:" Margin="5"/>
                <TextBox Width="120" Text="Juan Pérez" Margin="5"/>
                <CheckBox Content="Activo" Margin="5"/>
            </StackPanel>
            
            <TextBlock Text="Apilamiento Vertical" FontSize="14" Margin="5"/>
            <StackPanel Orientation="Vertical" Background="#FFF0F5" Margin="5">
                <Button Content="Guardar Datos" Margin="5" Padding="10,5"/>
                <Button Content="Cargar Archivo" Margin="5" Padding="10,5"/>
                <Button Content="Eliminar Selección" Margin="5" Padding="10,5"/>
            </StackPanel>
            
            <TextBlock Text="Apilamiento Horizontal (RightToLeft)" FontSize="14" Margin="5"/>
            <StackPanel Orientation="Horizontal" FlowDirection="RightToLeft" Background="#F0FFF0" Margin="5">
                <Ellipse Width="30" Height="30" Fill="Red" Margin="5"/>
                <Rectangle Width="40" Height="30" Fill="Blue" Margin="5"/>
                <Path Fill="Green" Data="M0,0 L10,20 L20,0 Z" Width="30" Height="30" Margin="5"/>
            </StackPanel>
        </StackPanel>
    </Grid>
</Window>

DockPanel

El DockPanel organiza los elementos anclándolos a uno de sus lados (izquierda, arriba, derecha o abajo) mediante la propiedad adjunta DockPanel.Dock. Los elementos se estiran para ocupar todo el espacio disponible en la dirección de anclaje. El último elemento hijo en el DockPanel tiene la particularidad de ocupar el espacio restante, a menos que la propiedad LastChildFill se establezca en false.


<Window x:Class="WPF_Layout.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Ejemplo de DockPanel" Height="350" Width="525">
    <Grid>
        <DockPanel Background="#ADD8E6">
            <Button Content="Encabezado Superior" DockPanel.Dock="Top" Height="40" Background="LightSkyBlue"/>
            <Button Content="Pie de Página" DockPanel.Dock="Bottom" Height="40" Background="LightSteelBlue"/>
            <Button Content="Menú Lateral Izquierdo" DockPanel.Dock="Left" Width="120" Background="LightCyan"/>
            <Button Content="Panel de Acciones Derecho" DockPanel.Dock="Right" Width="100" Background="PaleTurquoise"/>
            <TextBlock Text="Área de Contenido Principal (rellena el espacio restante)" 
                       FontSize="20" HorizontalAlignment="Center" VerticalAlignment="Center" 
                       Background="WhiteSmoke" TextWrapping="Wrap" Margin="10"/>
        </DockPanel>
    </Grid>
</Window>

Si se desea que el último elemento no rellene el espacio, se debe configurar LastChildFill="False":


<Window x:Class="WPF_Layout.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Ejemplo de DockPanel (LastChildFill=False)" Height="350" Width="525">
    <Grid>
        <DockPanel LastChildFill="False" Background="#ADD8E6">
            <Border DockPanel.Dock="Top" Height="40" Background="LightSkyBlue" BorderBrush="DarkBlue" BorderThickness="1">
                <TextBlock Text="Elemento Anclado Arriba" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Border>
            <Border DockPanel.Dock="Bottom" Height="40" Background="LightSteelBlue" BorderBrush="DarkBlue" BorderThickness="1">
                <TextBlock Text="Elemento Anclado Abajo" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Border>
            <Border DockPanel.Dock="Left" Width="120" Background="LightCyan" BorderBrush="DarkBlue" BorderThickness="1">
                <TextBlock Text="Elemento Anclado Izquierda" TextWrapping="Wrap" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Border>
            <Border DockPanel.Dock="Right" Width="100" Background="PaleTurquoise" BorderBrush="DarkBlue" BorderThickness="1">
                <TextBlock Text="Elemento Anclado Derecha" TextWrapping="Wrap" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Border>
            <!-- Si LastChildFill="False", este elemento no se expandirá para llenar el centro -->
            <Ellipse Width="100" Height="100" Fill="Gold" HorizontalAlignment="Center" VerticalAlignment="Center" />
        </DockPanel>
    </Grid>
</Window>

WrapPanel

El WrapPanel organiza los elementos hijos secuencialmente en la dirección especificada por su propiedad Orientation. Cuando el espacio disponible en esa dirección es insuficiente, los elementos automáticamente 'envuelven' (wrap) y continúan en la siguiente línea o columna. Si Orientation es Horizontal, los elementos se disponen de izquierda a derecha y saltan a la siguiente fila cuando no hay espacio. Si es Vertical, se disponen de arriba abajo y saltan a la siguiente columna.


<Window x:Class="WPF_Layout.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Ejemplo de WrapPanel" Height="350" Width="525">
    <Grid>
        <WrapPanel Orientation="Horizontal" Background="#F5DEB3" Margin="10">
            <Button Content="Ítem A" Width="120" Height="40" Margin="5" Background="LightCyan"/>
            <TextBlock Text="Descripción Corta B para un elemento" Margin="5" Width="150" TextWrapping="Wrap"/>
            <Border BorderBrush="DarkGray" BorderThickness="1" CornerRadius="5" Width="100" Height="30" Margin="5" Background="LightGreen">
                <TextBlock Text="Etiqueta C" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Border>
            <Button Content="Elemento Largo D" Width="180" Height="40" Margin="5" Background="LightCyan"/>
            <Label Content="Campo E" Width="80" Margin="5"/>
            <Rectangle Fill="Orange" Width="70" Height="30" Margin="5"/>
            <Button Content="Otra Opción F" Width="130" Height="40" Margin="5" Background="LightCyan"/>
            <TextBlock Text="Texto Adicional G" Margin="5" Width="100" TextWrapping="Wrap"/>
        </WrapPanel>
    </Grid>
</Window>

Grid

El Grid es uno de los paneles más versátiles, permitiendo organizar los elementos en una estructura de filas y columnas, similar a una tabla. Las dimensiones de las filas se definen en Grid.RowDefinitions y las de las columnas en Grid.ColumnDefinitions. Cada elemento hijo se posiciona en una celda específica utilizando las propiedades adjuntas Grid.Row y Grid.Column.

Las dimensiones de filas y columnas pueden ser:

  • Fijas: Un valor numérico específico (ej., Height="50" o Width="100").
  • Automáticas: Auto, que ajusta el tamaño a la necesidad mínima del contenido.
  • Proporcionales (Star): * o N*, que distribuyen el espacio restante de forma proporcional. * significa una unidad, 2* significa dos unidades, etc.

<Window x:Class="WPF_Layout.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Ejemplo de Grid (Filas)" Height="350" Width="525">
    <Grid Background="#E6E6FA">
        <Grid.RowDefinitions>
            <RowDefinition Height="60"/> <!-- Altura Fija -->
            <RowDefinition Height="Auto"/> <!-- Altura Automática -->
            <RowDefinition Height="3*"/> <!-- 3 partes del espacio restante -->
            <RowDefinition Height="*"/>   <!-- 1 parte del espacio restante -->
        </Grid.RowDefinitions>
        <Border Grid.Row="0" Background="Lavender" BorderBrush="Gray" BorderThickness="1">
            <TextBlock Text="Encabezado Fijo" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="16"/>
        </Border>
        <Border Grid.Row="1" Background="Thistle" BorderBrush="Gray" BorderThickness="1">
            <TextBlock Text="Contenido adaptable con 'Auto'" HorizontalAlignment="Center" VerticalAlignment="Center" Padding="10"/>
        </Border>
        <Border Grid.Row="2" Background="Plum" BorderBrush="Gray" BorderThickness="1">
            <TextBlock Text="Área Principal (3*)" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="24"/>
        </Border>
        <Border Grid.Row="3" Background="Violet" BorderBrush="Gray" BorderThickness="1">
            <TextBlock Text="Pie de Página (1*)" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="12"/>
        </Border>
    </Grid>
</Window>

Los elementos también pueden ocupar múltiples filas o columnas utilizando Grid.RowSpan y Grid.ColumnSpan:


<Window x:Class="WPF_Layout.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Ejemplo de Grid (Span)" Height="350" Width="525">
    <Grid Background="#F0F8FF">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="2*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="50"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <Border Grid.Column="0" Grid.Row="0" Background="CornflowerBlue" BorderBrush="DarkBlue" BorderThickness="1">
            <TextBlock Text="Celda (0,0)" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White"/>
        </Border>
        <Border Grid.Column="1" Grid.Row="0" Background="RoyalBlue" BorderBrush="DarkBlue" BorderThickness="1">
            <TextBlock Text="Celda (0,1)" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="White"/>
        </Border>

        <Border Grid.Column="0" Grid.Row="1" Grid.RowSpan="2" Background="LightGreen" BorderBrush="DarkGreen" BorderThickness="1">
            <TextBlock Text="Elemento que abarca dos filas (1,0) a (2,0)" TextWrapping="Wrap" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </Border>

        <Border Grid.Column="1" Grid.Row="1" Background="LightCoral" BorderBrush="DarkRed" BorderThickness="1">
            <TextBlock Text="Celda (1,1)" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </Border>
        <Border Grid.Column="1" Grid.Row="2" Background="LightSalmon" BorderBrush="DarkRed" BorderThickness="1">
            <TextBlock Text="Celda (2,1)" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </Border>
    </Grid>
</Window>

Para permitir que el usuario redimensione filas o columnas en tiempo de ejecución, se utiliza el control GridSplitter:


<Window x:Class="WPF_Layout.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Ejemplo de GridSplitter" Height="350" Width="525">
    <Grid Background="#F0FFFF">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="2*"/>
            <ColumnDefinition Width="5"/> <!-- Espacio para el splitter -->
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <Border Grid.Column="0" Background="PaleVioletRed" BorderBrush="Crimson" BorderThickness="1">
            <TextBlock Text="Panel Izquierdo Redimensionable" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20" Foreground="White" TextWrapping="Wrap"/>
        </Border>
        <GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Gray" ResizeBehavior="PreviousAndNext" ResizeDirection="Columns"/>
        <Border Grid.Column="2" Background="LightSkyBlue" BorderBrush="SteelBlue" BorderThickness="1">
            <TextBlock Text="Panel Derecho" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="20" Foreground="White"/>
        </Border>
    </Grid>
</Window>

UniformGrid

El UniformGrid es una variante simplificada del Grid donde todas las celdas tienen el mismo tamaño. No requiere la definición explícita de RowDefinitions o ColumnDefinitions y cada celda puede contener un único elemento. Si no se especifican Rows o Columns, el UniformGrid intenta crear un diseño cuadrado (misma cantidad de filas y columnas) basado en el número de elementos hijos. Se pueden fijar el número de filas o columnas, y la otra dimensión se ajustará automáticamente. No utiliza propiedades adjuntas como Grid.Row o Grid.Column.


<Window x:Class="WPF_Layout.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Ejemplo de UniformGrid (Auto)" Height="300" Width="400">
    <Grid>
        <UniformGrid Background="#F8F8FF" Margin="5">
            <Border Background="LightGray" BorderBrush="DarkGray" BorderThickness="1" Margin="2">
                <TextBlock Text="Ítem 1" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Border>
            <Border Background="LightBlue" BorderBrush="DarkBlue" BorderThickness="1" Margin="2">
                <TextBlock Text="Ítem 2" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Border>
            <Border Background="LightGreen" BorderBrush="DarkGreen" BorderThickness="1" Margin="2">
                <TextBlock Text="Ítem 3" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Border>
            <Border Background="LightCoral" BorderBrush="DarkRed" BorderThickness="1" Margin="2">
                <TextBlock Text="Ítem 4" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Border>
            <Border Background="LightSalmon" BorderBrush="DarkOrange" BorderThickness="1" Margin="2">
                <TextBlock Text="Ítem 5" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Border>
            <Border Background="LightSeaGreen" BorderBrush="DarkCyan" BorderThickness="1" Margin="2">
                <TextBlock Text="Ítem 6" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Border>
            <Border Background="LightGoldenrodYellow" BorderBrush="DarkKhaki" BorderThickness="1" Margin="2">
                <TextBlock Text="Ítem 7" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Border>
        </UniformGrid>
    </Grid>
</Window>



<Window x:Class="WPF_Layout.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Ejemplo de UniformGrid (Columnas Fijas)" Height="300" Width="400">
    <Grid>
        <UniformGrid Columns="3" Background="#E0FFFF" Margin="5">
            <Border Background="AliceBlue" BorderBrush="CadetBlue" BorderThickness="1" Margin="2">
                <TextBlock Text="Dato A" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Border>
            <Border Background="Lavender" BorderBrush="DarkSlateBlue" BorderThickness="1" Margin="2">
                <TextBlock Text="Dato B" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Border>
            <Border Background="LightCyan" BorderBrush="DarkCyan" BorderThickness="1" Margin="2">
                <TextBlock Text="Dato C" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Border>
            <Border Background="PaleTurquoise" BorderBrush="Teal" BorderThickness="1" Margin="2">
                <TextBlock Text="Dato D" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Border>
            <Border Background="Azure" BorderBrush="MidnightBlue" BorderThickness="1" Margin="2">
                <TextBlock Text="Dato E" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Border>
            <Border Background="LightSteelBlue" BorderBrush="Navy" BorderThickness="1" Margin="2">
                <TextBlock Text="Dato F" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Border>
            <Border Background="MintCream" BorderBrush="SeaGreen" BorderThickness="1" Margin="2">
                <TextBlock Text="Dato G" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Border>
        </UniformGrid>
    </Grid>
</Window>

ScrollViewer

El ScrollViewer es un contenedor que proporciona barras de desplazamiento a su contenido cuando este excede las dimensiones visibles. Permite un único elemento hijo directo; para albergar múltiples controles, estos deben estar contenidos dentro de un Panel (como StackPanel o Grid), que a su vez es el único hijo del ScrollViewer. Las propiedades HorizontalScrollBarVisibility y VerticalScrollBarVisibility controlan la aparición de las barras de desplazamiento (los valores comunes son Auto, que las muestra solo cuando es necesario, o Visible para siempre mostrarlas).


<Window x:Class="WPF_Layout.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Ejemplo de ScrollViewer" Height="350" Width="525">
    <Grid>
        <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" Background="#F5F5DC">
            <StackPanel Width="600" Height="800" Background="White" Margin="10">
                <TextBlock Text="Contenido Superior Largo" FontSize="24" Margin="10"/>
                <Border Height="150" Background="LightGray" Margin="10">
                    <TextBlock Text="Bloque de Texto 1" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Border>
                <Border Height="150" Background="LightBlue" Margin="10">
                    <TextBlock Text="Bloque de Texto 2" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Border>
                <Border Height="150" Background="LightGreen" Margin="10">
                    <TextBlock Text="Bloque de Texto 3" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Border>
                <Border Height="150" Background="LightCoral" Margin="10">
                    <TextBlock Text="Bloque de Texto 4" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Border>
                <TextBlock Text="Fin del Contenido Largo" FontSize="24" Margin="10"/>
            </StackPanel>
        </ScrollViewer>
    </Grid>
</Window>

Viewbox

El Viewbox es un control que escala o estira su contenido para que encaje en el espacio disponible. Al igual que otros paneles decorativos, solo puede tener un único elemento hijo directo; si se necesita escalar múltiples elementos, estos deben agruparse en un Panel y este Panel ser el hijo del Viewbox. La propiedad clave es Stretch, que define cómo se ajusta el contenido:

  • None: El contenido no se estira y mantiene su tamaño original.
  • Uniform: Escala el contenido para que se ajuste completamente sin distorsionar la relación de aspecto, ocupando el máximo espacio posible. (Valor predeterminado)
  • Fill: Estira el contenido para que ocupe todo el espacio disponible, lo que puede distorsionar su relación de aspecto.
  • UniformToFill: Escala el contenido para llenar completamente el espacio manteniendo la relación de aspecto, pero puede recortar partes del contenido si no coinciden las proporciones.

<Window x:Class="WPF_Layout.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Ejemplo de Viewbox" Height="450" Width="600">
    <Grid Background="#FAFAD2">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <Border Grid.Row="0" Grid.Column="0" BorderBrush="DarkBlue" BorderThickness="1" Margin="5">
            <Viewbox Stretch="None" Background="AliceBlue">
                <StackPanel Orientation="Horizontal" Width="200" Height="50">
                    <Rectangle Width="20" Height="20" Fill="Red"/>
                    <TextBlock Text="None" Margin="5" FontSize="20"/>
                </StackPanel>
            </Viewbox>
        </Border>

        <Border Grid.Row="0" Grid.Column="1" BorderBrush="DarkGreen" BorderThickness="1" Margin="5">
            <Viewbox Stretch="Uniform" Background="LightGreen">
                <StackPanel Orientation="Horizontal" Width="200" Height="50">
                    <Rectangle Width="20" Height="20" Fill="Red"/>
                    <TextBlock Text="Uniform" Margin="5" FontSize="20"/>
                </StackPanel>
            </Viewbox>
        </Border>

        <Border Grid.Row="1" Grid.Column="0" BorderBrush="DarkRed" BorderThickness="1" Margin="5">
            <Viewbox Stretch="Fill" Background="LightCoral">
                <StackPanel Orientation="Horizontal" Width="200" Height="50">
                    <Rectangle Width="20" Height="20" Fill="Red"/>
                    <TextBlock Text="Fill" Margin="5" FontSize="20"/>
                </StackPanel>
            </Viewbox>
        </Border>

        <Border Grid.Row="1" Grid.Column="1" BorderBrush="DarkOrange" BorderThickness="1" Margin="5">
            <Viewbox Stretch="UniformToFill" Background="LightSalmon">
                <StackPanel Orientation="Horizontal" Width="200" Height="50">
                    <Rectangle Width="20" Height="20" Fill="Red"/>
                    <TextBlock Text="UniformToFill" Margin="5" FontSize="20"/>
                </StackPanel>
            </Viewbox>
        </Border>
    </Grid>
</Window>

Border

El Border es un control decorativo que se usa para dibujar un borde, un fondo y una esquina redondeada alrededor de otro elemento. Similar a ScrollViewer o Viewbox, solo puede contener un único elemanto hijo. Para aplicar un borde o fondo a múltiples elementos, estos deben agruparse dentro de un Panel que, a su vez, será el hijo del Border. Sus propiedades principales son:

  • Background: Define el color de fondo.
  • BorderBrush: Define el color del borde.
  • BorderThickness: Define el grosor del borde (puede ser uniforme o por lado: Left,Top,Right,Bottom).
  • CornerRadius: Define el radio de las esquinas redondeadas (puede ser uniforme o por esquina: TopLeft,TopRight,BottomRight,BottomLeft).

<Window x:Class="WPF_Layout.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Ejemplo de Border" Height="300" Width="400">
    <Grid Background="#F0FFFF">
        <Border Background="LightSteelBlue" BorderBrush="DarkBlue" BorderThickness="2, 5, 0, 8" CornerRadius="15, 0, 25, 5"
                HorizontalAlignment="Center" VerticalAlignment="Center" Width="300" Height="150">
            <TextBlock Text="Contenido dentro del Borde con estilos" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="18" Foreground="White" TextWrapping="Wrap"/>
        </Border>
    </Grid>
</Window&gt>

Propiedades para Posicionamiento Preciso

Para un control preciso del posicionamiento y la separación de elementos en WPF, se utilizan comúnmente las siguientes propiedades:

  • HorizontalAlignment: Controla la alineación horizontal de un elemento dentro de su contenedor (Left, Center, Right, Stretch).
  • VerticalAlignment: Controla la alineación vertical de un elemento dentro de su contenedor (Top, Center, Bottom, Stretch).
  • Margin: Define el espacio exterior entre un elemento y sus elementos adyacentes o su contenedor padre. Se puede especificar un valor uniforme (ej., Margin="10") o valores para cada lado (ej., Margin="Izquierda, Arriba, Derecha, Abajo").
  • Padding: Define el espacio interior entre el contenido de un elemento y sus propios bordes. Similar a Margin, se puede especificar un valor uniforme o por lado.

<Window x:Class="WPF_Layout.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Ejemplo de Alineación" Height="350" Width="525">
    <Grid Background="#F0FFF0">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Border Grid.Row="0" Background="LightBlue" Margin="5" BorderBrush="DarkBlue" BorderThickness="1">
            <TextBlock Text="Alineación Horizontal: Centro" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </Border>
        <Border Grid.Row="1" Background="LightGreen" Margin="5" BorderBrush="DarkGreen" BorderThickness="1">
            <TextBlock Text="Alineación Horizontal: Izquierda" HorizontalAlignment="Left" VerticalAlignment="Center"/>
        </Border>
        <Border Grid.Row="2" Background="LightCoral" Margin="5" BorderBrush="DarkRed" BorderThickness="1">
            <TextBlock Text="Alineación Horizontal: Derecha" HorizontalAlignment="Right" VerticalAlignment="Center"/>
        </Border>
        <Border Grid.Row="3" Background="LightSalmon" Margin="5" BorderBrush="DarkOrange" BorderThickness="1">
            <TextBlock Text="Alineación Horizontal: Estirar (Stretch)" HorizontalAlignment="Stretch" VerticalAlignment="Center"/>
        </Border>
    </Grid>
</Window>



<Window x:Class="WPF_Layout.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Ejemplo de Margin" Height="250" Width="400">
    <Grid Background="#E0FFFF">
        <Rectangle Fill="LightGoldenrodYellow" Margin="50, 20, 100, 70" Stroke="DarkGoldenrod" StrokeThickness="2"/>
        <TextBlock Text="Este rectángulo tiene un Margin diferente en cada lado." 
                   HorizontalAlignment="Center" VerticalAlignment="Center" 
                   Margin="50, 20, 100, 70" FontSize="14" TextWrapping="Wrap"/>
    </Grid>
</Window>



<Window x:Class="WPF_Layout.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Ejemplo de Padding" Height="250" Width="400">
    <Grid Background="#FFFACD">
        <Border Background="LightCyan" BorderBrush="DarkCyan" BorderThickness="1" Padding="40, 10, 80, 20"
                HorizontalAlignment="Center" VerticalAlignment="Center">
            <TextBlock Text="Este texto está dentro de un Border con Padding irregular en cada lado, empujando el contenido." 
                       TextWrapping="Wrap" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="14"/>
        </Border>
    </Grid>
</Window>

Etiquetas: WPF XAML layout canvas StackPanel

Publicado el 6-21 19:54

Etiquetas populares

©2026 Friki Work