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)