[WPF] Layout (2ª Parte)

Continuando con el anterior artículo, en éste último vamos a ver los paneles “Grid” , “WrapPanel” y “Canvas”

  • Grid

Éste panel permite situar los controles en una tabla de filas y columnas. En cada casilla, podemos colocar más de un control.

Grid

<Grid>

        <!--Definimos las columnas que vamos a usar-->

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="Auto"/>

            <ColumnDefinition Width="Auto"/>

            <ColumnDefinition Width="Auto"/>

        </Grid.ColumnDefinitions>

        

        <!--Definimos las filas que vamos a usar-->

        <Grid.RowDefinitions>

            <RowDefinition Height="Auto"/>

            <RowDefinition Height="Auto"/>

        </Grid.RowDefinitions>

        

        <Image Grid.Column="0" Grid.Row="0"

               Source="/WpfApplication1;component/Images/1.png"/>

        <Image Grid.Column="1" Grid.Row="0"

               Source="/WpfApplication1;component/Images/2.png"/>

        <Image Grid.Column="2" Grid.Row="0"

               Source="/WpfApplication1;component/Images/3.png"/>

    <Image Grid.Column="0" Grid.Row="1"

           Source="/WpfApplication1;component/Images/4.png"/>

    <Image Grid.Column="1" Grid.Row="1"

           Source="/WpfApplication1;component/Images/5.png"/>

    <Image Grid.Column="2" Grid.Row="1"

           Source="/WpfApplication1;component/Images/6.png"/>

</Grid>

  • WrapPanel

Agrupa los elementos de izquierda a derecha o de arriba abajo, pero a diferencia del StackPanel, al llegar al final cambia de fila.

WrapPanel

<WrapPanel Orientation="Horizontal">

    <Image Width="75" Source="/WpfApplication1;component/Images/1.png"/>

    <Image Width="75" Source="/WpfApplication1;component/Images/2.png"/>

    <Image Width="75" Source="/WpfApplication1;component/Images/3.png"/>

    <Image Width="75" Source="/WpfApplication1;component/Images/4.png"/>

    <Image Width="75" Source="/WpfApplication1;component/Images/5.png"/>

    <Image Width="75" Source="/WpfApplication1;component/Images/6.png"/>

</WrapPanel>

  • Canvas

En el panel Canvas, los elementos se sitúan según las coordenadas que se le indiquen

Canvas

<Canvas>

     <Image Source="/WpfApplication1;component/Images/1.png"

           Canvas.Top="0" Canvas.Left="0"/>

     <Image Source="/WpfApplication1;component/Images/2.png"

           Canvas.Top="100" Canvas.Left="100"/>

     <Image Source="/WpfApplication1;component/Images/3.png"

           Canvas.Top="0" Canvas.Left="200"/>

</Canvas>

 

Si queréis obtener más información sobre los distintos paneles de WPF os recomiendo que visitéis la web de tutoriales de Christian Mosers :

WPFTutorial.net –> Layout

 

<— [WPF] Layout (1ª Parte)

[WPF] Layout (1ª Parte)

Para muchos de los que estamos empezando con WPF, es interesante conocer los distintos tipos de paneles de diseño que existen para insertar elementos en dichos paneles.

  • StackPanel

El StackPanel es un panel de diseño simple y útil. Apila sus elementos de arriba a abajo / izquierda a derecha, según su orientación (horizontal y vertical). Si no se indica nada, la alineación por defecto será vertical.

StackPanelVertical

<StackPanel>

    <TextBlock FontSize="26" HorizontalAlignment="Center">

        1

    </TextBlock>

    <TextBlock FontSize="26" HorizontalAlignment="Center">

        2

    </TextBlock>

    <TextBlock FontSize="26" HorizontalAlignment="Center">

        3

    </TextBlock>

    <TextBlock FontSize="26" HorizontalAlignment="Center">

        4

    </TextBlock>

</StackPanel>

StackPanelHorizontal

<StackPanel Orientation="Horizontal">

    <TextBlock FontSize="26" HorizontalAlignment="Center">

        1

    </TextBlock>

    ...

</StackPanel>

  • DockPanel

El DockPanel proporciona que un elemento se acople a la izquierda, a la derecha, al centro, arriba o abajo.

DockPanel

<DockPanel>

    <Button Content="Arriba" DockPanel.Dock="Top"/>

    <Button Content="Abajo" DockPanel.Dock="Bottom"/>

    <Button Content="Izquierda" DockPanel.Dock="Left"/>

    <Button Content="Derecha" DockPanel.Dock="Right"/>

    <Button Content="Botón"/>

</DockPanel>
[WPF] Layout (2ª Parte) -->