Contenedores

DIFERENTES CONTENEDORES

  1. Canvas. Los objetos se van apilando uno encima del otro sino indicamos su posición absoluta.
  2. Grid: Contenedor estilo tabla con filas y columnas. Tiene la posibilidad de fundir tanto filas como columnas. Lo primero que se hará será definir las filas y las columnas, y una vez definidas colocamos los elementos a través de las propiedades Grid.Row y Grid.column. Si queremos hacer variable alguna columna o fila podemos utilizar el control GridSplitter.
  3. UniformGrid: Distribución de elementos en una matriz cuadrada uniforme, es decir según el tamaño de los objetos que contiene distribuye el espacio de forma proporcional a todos.
  4. Canvas: Define un área donde cada control hijo es posicionado en coordenadas absolutas. No se debería usar a no ser que tengas alguna necesidad especial. Se trata de una ubicación precisa de elementos.
  5. StackPanel: Un contenedor que apila los objetos de manera horizontal o vertical. Por defecto se apilan de forma vertical pero repartiéndose sobre toda la superficie, se puede apilar de forma horizontal modificando el atributo Orientation=”Horizontal”.
  6. DockPanel: La posición es relativa con respecto a otro objeto hijo dentro del contenedor, las posibles posiciones son Top, Right, Bottom y Left (puntos cardinales), con expansión del último al área sobrante.
  7. WrapPanel: La posición de los objetos hijos es secuencial horizontal de izquierda a derecha o vertical de arriba hacia abajo.Es similar al StackPanel pero sin ajustar los tamaños de los objetos.

Ejemplo de canvas, colocaría los 4 botones en cada esquina del contenedor:

	<Canvas>
		<Button Canvas.Left="10">Top izquierda</Button>
		<Button Canvas.Right="10">Top derecha</Button>
		<Button Canvas.Left="10" Canvas.Bottom="10">Bottom izquierda</Button>
		<Button Canvas.Right="10" Canvas.Bottom="10">Bottom derecha</Button>
	</Canvas>

Canvas + ZIndex (orden de apilamiento)

    <Canvas>
        <Ellipse Panel.ZIndex="2" Fill="Gainsboro" Canvas.Left="25" Canvas.Top="25" Width="200" Height="200" />
        <Rectangle Panel.ZIndex="3" Fill="LightBlue" Canvas.Left="25" Canvas.Top="25" Width="50" Height="50" />
        <Rectangle Panel.ZIndex="2" Fill="LightCoral" Canvas.Left="50" Canvas.Top="50" Width="50" Height="50" />
        <Rectangle Panel.ZIndex="4" Fill="LightCyan" Canvas.Left="75" Canvas.Top="75" Width="50" Height="50" />
    </Canvas>

Ejemplo de Grid.

<Grid>
 <Grid.RowDefinitions>
 <RowDefinition Height="Auto" />
 <RowDefinition Height="Auto" />
 <RowDefinition Height="*" />
 <RowDefinition Height="28" />
 </Grid.RowDefinitions>
 <Grid.ColumnDefinitions>
 <ColumnDefinition Width="Auto" />
 <ColumnDefinition Width="Auto" />
 <ColumnDefinition Width="*" />
 </Grid.ColumnDefinitions>
 <Label Grid.Row="0" Grid.Column="0" Content="Name:"/>
 <Label Grid.Row="1" Grid.Column="0" Content="E-Mail:"/>
 <Label Grid.Row="2" Grid.Column="0" Content="Comment:"/>
 <GridSplitter HorizontalAlignment="Right" 
 VerticalAlignment="Stretch" 
 Grid.RowSpan="3" Grid.Column="1" ResizeBehavior="PreviousAndNext"
 Width="5" Background="#FFBCBCBC"/>
 <TextBox Grid.Column="2" Grid.Row="0" Margin="3" />
 <TextBox Grid.Column="2" Grid.Row="1" Margin="3" />
 <TextBox Grid.Column="2" Grid.Row="2" Margin="3" />
 <Button Grid.Column="2" Grid.Row="3" HorizontalAlignment="Right" 
 MinWidth="80" Margin="3" Content="Send" />
 </Grid>

UniformGrid:

  
...
 <UniformGrid Background="Thistle">
 <Button Content="Button 1"/>
 <Button Content="Button 2"/>
 <Button Content="Button 3"/>
 <Button Content="Button 4"/>
 <Button Content="Button 5"/>
 </UniformGrid>
...

StackPanel:

<StackPanel>
  <TextBlock Margin="10" FontSize="20">¿Cómo quiere el café?</TextBlock>
  <Button Margin="10">Solo</Button>
  <Button Margin="10">Con leche</Button>
  <Button Margin="10">Cortado</Button>
  <Button Margin="10">Capichino</Button>
</StackPanel>

WrapPanel :

<WrapPanel Orientation="Horizontal">
    <Button Content="Botón 1" />
    <Button Content="Botón 2" />
    <Button Content="Botón 3" />
    <Button Content="Botón 4" />
    <Button Content="Botón 5" />
</WrapPanel>

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.