11 - Layout (RelativePanel)


El tercer control para administrar el layout de nuestra aplicación que veremos es el RelativePanel.

El control RelativePanel nos permite disponer controles visuales (Button, TextBlock, TextBox etc.) en relación a otro control visual (por ejemplo el Button1 a la derecha del objeto TextBox1)
También los podemos disponer a los controles relativo a los bordes del RelativePanel.

Relativo a los bordes del RelativePanel.

Crearemos una interfaz visual con 8 botones ubicados como muestra la imagen utilizando un RelativePanel:

RelativePanel

Como primer paso creamos un nuevo proyecto llamado "Proyecto12" seleccionando desde el menú de opciones del Visual Studio: Archivo -> Nuevo -> Proyecto.

El código fuente del archivo MainPage.xaml es:

<Page
    x:Class="Proyecto12.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Proyecto12"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <RelativePanel>
        <Button x:Name="boton1" Content="boton 1" RelativePanel.AlignLeftWithPanel="True" />
        <Button x:Name="boton2" Content="boton 2" RelativePanel.AlignHorizontalCenterWithPanel="True" />
        <Button x:Name="boton3" Content="boton 3" RelativePanel.AlignRightWithPanel="True" />
        <Button x:Name="boton4" Content="boton 4" RelativePanel.AlignRightWithPanel="True"  
            RelativePanel.AlignVerticalCenterWithPanel="True" />
        <Button x:Name="boton5" Content="boton 5" RelativePanel.AlignRightWithPanel="True" RelativePanel.AlignBottomWithPanel="True" />
        <Button x:Name="boton6" Content="botno 6" RelativePanel.AlignBottomWithPanel="True" 
            RelativePanel.AlignHorizontalCenterWithPanel="True" />
        <Button x:Name="boton7" Content="boton 7" RelativePanel.AlignBottomWithPanel="True" RelativePanel.AlignLeftWithPanel="True"/>
        <Button x:Name="boton8" Content="boton 8" RelativePanel.AlignLeftWithPanel="True" 
            RelativePanel.AlignVerticalCenterWithPanel="True"/>
    </RelativePanel>

</Page>

Como vemos disponemos un RelativePanel y en su interior definimos los objetos contenidos en el mismo:

    <RelativePanel>

    </RelativePanel>

Para ubicarlo en el vértice superior izquierdo al botón cargamos en la propiedad AlignLeftWithPanel del RelativePanel con el valor True:

        <Button x:Name="boton1" Content="boton 1" RelativePanel.AlignLeftWithPanel="True" />

Para disponerlo en la parte superior y centrado cargamos en la propiedad AlignHorizontalCenterWithPanel el valor True:

        <Button x:Name="boton2" Content="boton 2" RelativePanel.AlignHorizontalCenterWithPanel="True" />

Para disponerlo en la parte superior derecha cargamos en la propiedad AlignRightWithPanel el valor True:

        <Button x:Name="boton3" Content="boton 3" RelativePanel.AlignRightWithPanel="True" />

Para disponerlo en la parte derecha a mitad de altura debemos cargar en las propiedades AlignRightWithPanel y AlignVerticalCenterWithPanel el valor True:

        <Button x:Name="boton4" Content="boton 4" RelativePanel.AlignRightWithPanel="True" 
            RelativePanel.AlignVerticalCenterWithPanel="True" />

Para disponerlo en la parte inferior derecha debemos cargar en las propiedades AlignRightWithPanel y AlignBottomWithPanel el valor True:

        <Button x:Name="boton5" Content="boton 5" RelativePanel.AlignRightWithPanel="True" RelativePanel.AlignBottomWithPanel="True" />

Para disponerlo en la parte inferior centrado debemos cargar en las propiedades AlignBottomWithPanel y AlignHorizontalCenterWithPanel el valor True:

        <Button x:Name="boton6" Content="botno 6" RelativePanel.AlignBottomWithPanel="True" 
            RelativePanel.AlignHorizontalCenterWithPanel="True" />

Para disponerlo en la parte inferior izquierda debemos cargar en las propiedades AlignBottomWithPanel y AlignLeftWithPanel el valor True:

        <Button x:Name="boton7" Content="boton 7" RelativePanel.AlignBottomWithPanel="True" RelativePanel.AlignLeftWithPanel="True"/>

Para disponerlo en la parte izquierda a mitad de atura debemos cargar en las propiedades AlignLeftWithPanel y AlignVerticalCenterWithPanel el valor True:

        <Button x:Name="boton8" Content="boton 8" RelativePanel.AlignLeftWithPanel="True" 
            RelativePanel.AlignVerticalCenterWithPanel="True"/>

Este proyecto lo puede descargar en un zip desde este enlace :Proyecto12.zip

Relativo a otro control.

Crearemos una interfaz visual como muestra la imagen utilizando entre otros controles de layout los RelativePanel:

RelativePanel

Como podemos ver dispondremos dos RelativePanel, uno en la parte superior y otro en la parte inferior.

Como primer paso creamos un nuevo proyecto llamado "Proyecto13" seleccionando desde el menú de opciones del Visual Studio: Archivo -> Nuevo -> Proyecto.

El código fuente del archivo MainPage.xaml es:

<Page
    x:Class="Proyecto13.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Proyecto13"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="auto" />
        </Grid.RowDefinitions>
        <RelativePanel Grid.Row="0" Background="AliceBlue">
            <Button x:Name="boton1" Content="Confirmar" RelativePanel.AlignRightWithPanel="True"/>
            <TextBox x:Name="textBox1" RelativePanel.LeftOf="boton1" Width="100" />
            <TextBlock x:Name="textBlock1" Text="Buscar:" RelativePanel.LeftOf="textBox1" />
        </RelativePanel>
        <RelativePanel Grid.Row="2" Background="AliceBlue">
            <TextBlock x:Name="textBlock2" Text="Enviar comentarios:" />
            <TextBox x:Name="textBox2" RelativePanel.RightOf="textBlock2" Width="100"/>
            <Button x:Name="boton2" Content="Enviar" RelativePanel.RightOf="textBox2" />
        </RelativePanel>

    </Grid>
</Page>

Definimos un Grid con tres filas donde ubicaremos en la primera y última fila los controles RelativePane:

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="auto" />
            <RowDefinition Height="*" />
            <RowDefinition Height="auto" />
        </Grid.RowDefinitions>

El primer RelativePanel lo ubicamos en la fila 0 del Grid:

        <RelativePanel Grid.Row="0" Background="AliceBlue">

Dentro del RelativePanel disponemos un botón alienado a la derecha del RelativePanel como vimos en el ejemplo anterior:

            <Button x:Name="boton1" Content="Confirmar" RelativePanel.AlignRightWithPanel="True"/>

El TextBox lo ubicamos a la izquierda del boton iniciando la propiedad LeftOf:

            <TextBox x:Name="textBox1" RelativePanel.LeftOf="boton1" Width="100" />

Finalmente el TextBlock lo ubicamos a la izquierda del TextBox:

            <TextBlock x:Name="textBlock1" Text="Buscar:" RelativePanel.LeftOf="textBox1" />

Por otro lado el RelativePanel ubicado al final de la página lo agregamos en la fila 2 del Grid:

        <RelativePanel Grid.Row="2" Background="AliceBlue">

Dentro del RelativePanel ubicamos primero un TextBlock:

            <TextBlock x:Name="textBlock2" Text="Enviar comentarios:" />

Seguidamente disponemos un TextBox a la defecha del TextBlock:

            <TextBox x:Name="textBox2" RelativePanel.RightOf="textBlock2" Width="100"/>

Y por último agregamos un Button a la derecha del TextBox:

            <Button x:Name="boton2" Content="Enviar" RelativePanel.RightOf="textBox2" />

Hemos visto dos nuevas propiedades de los RelativePanel llamadas LeftOf y RightOf. Existen otras dos propiedades llamadas Above y Below que disponen los controles arriba o abajo con respecto a otro control.

Este proyecto lo puede descargar en un zip desde este enlace :Proyecto13.zip

Resumen de propiedades.

Propiedades en relación al borde del RelativePanel:

RelativePanel.AlignTopWithPanel
RelativePanel.AlignBottomWithPanel
RelativePanel.AlignLeftWithPanel
RelativePanel.AlignRightWithPanel
RelativePanel.AlignVerticalCenterWithPanel
RelativePanel.AlignHorizontalCenterWithPanel

El verdadero poder de la RelativePanel proviene de la combinación de las propiedades anteriores junto a las propiedades:

Above
Below
LeftOf
RightOf

Finalmente existen otras propiedades que nos permiten alinear los controles contenidos en un ReletivePanel con respecto a otros controles:

AlignLeftWith
AlignRightWith
AlignTopWith
AlignBottomWith
AlignVerticalCenterWith
AlignHorizontalCenterWith

Problema.

Desarrollar el siguiente formulario utilizando un RelativePanel:

RelativePanel

Como primer paso creamos un nuevo proyecto llamado "Proyecto14" seleccionando desde el menú de opciones del Visual Studio: Archivo -> Nuevo -> Proyecto.

El código fuente del archivo MainPage.xaml es:

<Page
    x:Class="Proyecto14.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Proyecto14"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <RelativePanel BorderThickness="3" BorderBrush="Aqua" HorizontalAlignment="Center" VerticalAlignment="Center">
        <TextBlock x:Name="textBlock1" 
                   Text="Nombre de usuario:" 
                   Margin="10,10,10,10"/>
        <TextBox x:Name="textBox1" 
                 RelativePanel.RightOf="textBlock1" 
                 Width="100" 
                 Margin="10,10,10,10"/>
        <TextBlock x:Name="textBlock2" 
                   Text="Ingrese clave:" 
                   RelativePanel.Below="textBlock1" 
                   RelativePanel.AlignTopWith="passwordBox1" 
                   Margin="10,10,10,10"/>
        <PasswordBox x:Name="passwordBox1" 
                     RelativePanel.Below="textBox1" 
                     RelativePanel.AlignLeftWith="textBox1" 
                     Width="100" 
                     Margin="10,10,10,10"/>
        <Button x:Name="boton1" 
                Content="Confirmar" 
                RelativePanel.Below="passwordBox1" 
                RelativePanel.AlignLeftWith="passwordBox1"  
                Margin="10,10,10,10"/>
    </RelativePanel>

</Page>

Definimos un RelativePanel con un borde de 3 píxeles de color "Agua" y lo centramos en forma horizontal y vertical:

    <RelativePanel BorderThickness="3" BorderBrush="Aqua" HorizontalAlignment="Center" VerticalAlignment="Center">

    </RelativePanel>

Definimos un TextBlock:

        <TextBlock x:Name="textBlock1" 
                   Text="Nombre de usuario:" 
                   Margin="10,10,10,10"/>

Luego Definimos un TextBox a la derecha del TextBlock:

        <TextBox x:Name="textBox1" 
                 RelativePanel.RightOf="textBlock1" 
                 Width="100" 
                 Margin="10,10,10,10"/>

ahora definimos otro TextBlock debajo del TextBlock anterior y alineado a la parte superior al contol PasswordBox que se puestra a la derecha:

        <TextBlock x:Name="textBlock2" 
                   Text="Ingrese clave:" 
                   RelativePanel.Below="textBlock1" 
                   RelativePanel.AlignTopWith="passwordBox1" 
                   Margin="10,10,10,10"/>

El control PasswordBox se encuentra debajo del TextBox donde se ingresa el nombre y se alinea con respecto a la izquierda de dicho control:

        <PasswordBox x:Name="passwordBox1" 
                     RelativePanel.Below="textBox1" 
                     RelativePanel.AlignLeftWith="textBox1" 
                     Width="100" 
                     Margin="10,10,10,10"/>

Finalmente el botón se encuentra debajo del PaswordBox y alineado a la izquierda de este mismo:

        <Button x:Name="boton1" 
                Content="Confirmar" 
                RelativePanel.Below="passwordBox1" 
                RelativePanel.AlignLeftWith="passwordBox1"  
                Margin="10,10,10,10"/>

Este proyecto lo puede descargar en un zip desde este enlace :Proyecto14.zip

Retornar