Vale, qué tal? Una disculpa por haberme ausentado un tiempo, pero es que la escuela es muy absorbente a final de semestre jeje, pero bien, aquí estamos para continuar con los principios de WPF y con la creación de nuestra aplicación.
Bien, pues hoy hablaremos acerca de algo por lo que muchos preguntan, y es acerca de los contenedores disponibles en WPF, asimismo haremos una entrada con Expression Blend y la creación de nuestra aplicación.
TIPOS DE CONTENEDORES EN WPF
Existen 5 tipos principales de contenedores en WPF:
- StackPanel
- DockPanel
- Grid
- WrapPanel
- Canvas
Vale, pasemos a explicar un poco cada uno de ellos, para esta ocasión, he creado una aplicación WPF, con la cual demostraré cada uno de estos elementos, y el cual puedes descargar al final de esta entrada.
STACKPANEL
Bien, como su nombre lo indica: Panel Apilado, es decir, ubica los elementos en forma de una pila, va poniendo uno tras de otro, de forma apilada, ya sea de forma vertical u horizontal:
El ejemplo anterior fue hecho con el codigo:
<StackPanel Orientation=«Horizontal»>
<Button Width=»100″ Height=»50″
Background =»AliceBlue» FontFamily=»Arial»
FontSize=»20″ FontWeight=»Bold»>
Aceptar
</Button>
<Button Width=»100″ Height=»50″
Background =»AliceBlue» FontFamily=»Arial»
FontSize=»20″ FontWeight=»Bold»>
Cancelar
</Button>
<Button Width=»100″ Height=»50″
Background =»AliceBlue» FontFamily=»Arial»
FontSize=»20″ FontWeight=»Bold»>
Omitir
</Button>
</StackPanel>
Como podemos observar, el contenedor agrupa varios objetos, y los ubica de forma horizontal porque asi lo hemos especificado con la propiedad Orientation=»Horizontal», cambiando el atributo a «Vertical», los elementos automaticamente se distribuirian verticalmente (de arriba hacia abajo).
DOCKPANEL
O bien podría ser llamado «Panel de acoplamiento», y es que este panel lo que hace es ubicar a los elementos hacia donde queremos que se mantenga, por ejemplo si decimos a la derecha, el elemento especificado se mantendrá a la derecha.
El cual fue creado con el código
<DockPanel LastChildFill=«True» Background=»AliceBlue»>
<Button DockPanel.Dock=«Left» Width=»50″ Height=»50″
Background =»CornflowerBlue» FontFamily=»Webdings»
FontSize=»20″ FontWeight=»Bold»
Foreground=»White» Margin=»10,0,0,0″>
9
</Button>
<Button DockPanel.Dock=«Right» Width=»50″ Height=»50″
Background =»CornflowerBlue» FontFamily=»Webdings»
FontSize=»20″ FontWeight=»Bold»
Foreground=»White» Margin=»0,0,10,0″>
:
</Button>
<Image Source=»Foto.jpg» Margin=»10″></Image>
</DockPanel>
Aquí hay varias cosas que debemos destacar, la primera es que estamos aplicando lo que mencionamos anteriormente, estamos ubicando los elementos hacia donde queremos que se mantengan constantes, en el primer caso del botón, estamos aplicando <Button DockPanel.Dock=»Left»; lo cual indica que el primer botón va a ser ubicado a la izquierda, note que le estamos dando un ancho y un alto, con lo cual mantendrá esos valores constantes. De igual forma pasa con el botón <Button DockPanel.Dock=»Right».
Ah pero no sucede lo mismo con la imagen del final: <Image Source=»Foto.jpg» Margin=»10″></Image>; note como no se le está asignando ni un anchor, ni caracteristicas de ancho y alto, entonces, esta imagen pasa a ocupar todo el espacio que queda libre. Pero esto sucede gracias al atributo LastChildFill=»True».
GRID
La grilla, es el tipo de contenedor mas poderoso en WPF, con el que puede lograrse cualquier distribución visual de una cantidad cualquiera de elementos. Pero porqué se le llama grilla? Pues porque los elementos pueden «enrejillarse», vale, puedes dividir la grilla en celdas y columnas para luego ubicar los elementos dentro de estos.
Esto se hace con las propiedades ColumnDefinition y RowDefinition.
El código a continuación define un Grid de dos filas y tres columnas.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition>
<ColumnDefinition>
<ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
</Grid >
Las dimensiones de las celdas de un Grid pueden ser modificadas, si queremos que una celda del Grid se ajuste al tamaño del elemento que contiene se debe dar el valor «Auto» al Width de la columna, o al Height de la fila. Para referirse al espacio que quede disponible dentro de una celda se usará «*» con lo que se estará indicando que este espacio sea utilizado proporcionalmente.
Esto tiene que quedar claro, por ejemplo, si tuvieramos el código:
<Grid ShowGridLines=»True» HorizontalAlignment=»Center»
VerticalAlignment=»Center» Background=»AliceBlue»
Height=»300″ Width=»300″>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=«Auto»/>
<ColumnDefinition Width=«*»/>
<ColumnDefinition Width=«2*»/>
</Grid.ColumnDefinitions>
<Image Height=»150″ Grid.Column=»0″ Source=»ContenidoX»/>
<Button Height=»150″ Grid.Column=»1″/>
<Button Height=»150″ Grid.Column=»2″/>
Esto provocaría que en primer lugar, suponiendo que la imágen midiera 150 de ancho, que la primera columna midiera 150, ya que se está ajustando con Auto al contenido del elemento que contiene, en segundo lugar, la columna que se definió despues midiera 50 de ancho(* o 1/3 parte de lo que nos queda), y el tercero 100(2* o 2/3 partes de lo que nos queda).
Esta calculadora ha sido hecha a partir de definición de columnas y filas, y cada botón ha sido ubicado de forma ordenada en cada una de las celdas. Aquí el código:
<Grid HorizontalAlignment=«Center»
VerticalAlignment=«Center»
Background=«AliceBlue»>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=«Auto»/>
<ColumnDefinition Width=«Auto»/>
<ColumnDefinition Width=«Auto»/>
<ColumnDefinition Width=«Auto»/>
<ColumnDefinition Width=«Auto»/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height=«Auto»/>
<RowDefinition Height=«Auto»/>
<RowDefinition Height=«Auto»/>
<RowDefinition Height=«Auto»/>
<RowDefinition Height=«Auto»/>
</Grid.RowDefinitions>
<TextBlock Grid.Column=«0» Grid.Row=»0″ Grid.ColumnSpan=»5″
Background =»Black» FontFamily=»Arial» FontSize=»30″
FontWeight=»Bold» Foreground=»White» Margin=»5″>
0
</TextBlock>
<Button Grid.Column=«0» Grid.Row=»1″ Height=»50″ Width=»50″
Background =»CornflowerBlue» FontFamily=»Arial»
FontSize=»20″ FontWeight=»Bold» Foreground=»White»>
7
</Button>
<Button Grid.Column=«1» Grid.Row=»1» Height=»50″ Width=»50″
Background =»CornflowerBlue» FontFamily=»Arial»
FontSize=»20″ FontWeight=»Bold» Foreground=»White»>
8
</Button>
<Button Grid.Column=«2» Grid.Row=»1″ Height=»50″ Width=»50″
Background =»CornflowerBlue» FontFamily=»Arial»
FontSize=»20″ FontWeight=»Bold» Foreground=»White»>
9
</Button>
<Button Grid.Column=«0» Grid.Row=»2″ Height=»50″ Width=»50″
Background =»CornflowerBlue» FontFamily=»Arial»
FontSize=»20″ FontWeight=»Bold» Foreground=»White»>
4
</Button>
<Button Grid.Column=«1» Grid.Row=»2″ Height=»50″ Width=»50″
Background =»CornflowerBlue» FontFamily=»Arial»
FontSize=»20″ FontWeight=»Bold» Foreground=»White»>
5
</Button>
<Button Grid.Column=«2» Grid.Row=»2″ Height=»50″ Width=»50″
Background =»CornflowerBlue» FontFamily=»Arial»
FontSize=»20″ FontWeight=»Bold» Foreground=»White»>
6
</Button>
<Button Grid.Column=«0» Grid.Row=»3» Height=»50″ Width=»50″
Background =»CornflowerBlue» FontFamily=»Arial»
FontSize=»20″ FontWeight=»Bold» Foreground=»White»>
1
</Button>
<Button Grid.Column=«1» Grid.Row=»3″ Height=»50″ Width=»50″
Background =»CornflowerBlue» FontFamily=»Arial»
FontSize=»20″ FontWeight=»Bold» Foreground=»White»>
2
</Button>
<Button Grid.Column=«2» Grid.Row=»3″ Height=»50″ Width=»50″
Background =»CornflowerBlue» FontFamily=»Arial»
FontSize=»20″ FontWeight=»Bold» Foreground=»White»>
3
</Button>
<Button Grid.Column=«0» Grid.Row=»4″ Height=»50″ Width=»50″
Background =»CornflowerBlue» FontFamily=»Arial»
FontSize=»20″ FontWeight=»Bold» Foreground=»White»>
0
</Button>
<Button Grid.Column=«1» Grid.Row=»4″ Height=»50″ Width=»50″
Background =»CornflowerBlue» FontFamily=»Arial»
FontSize=»20″ FontWeight=»Bold» Foreground=»White»>
+/-
</Button>
<Button Grid.Column=«2» Grid.Row=»4″ Height=»50″ Width=»50″
Background =»CornflowerBlue» FontFamily=»Arial»
FontSize=»20″ FontWeight=»Bold» Foreground=»White»>
.
</Button>
<Button Grid.Column=«3» Grid.Row=»1″ Height=»50″ Width=»50″
Background =»CornflowerBlue» FontFamily=»Arial»
FontSize=»20″ FontWeight=»Bold» Foreground=»White»>
/
</Button>
<Button Grid.Column=«3» Grid.Row=»2″ Height=»50″ Width=»50″
Background =»CornflowerBlue» FontFamily=»Arial»
FontSize=»20″ FontWeight=»Bold» Foreground=»White»>
*
</Button>
<Button Grid.Column=«3» Grid.Row=»3″ Height=»50″ Width=»50″
Background =»CornflowerBlue» FontFamily=»Arial»
FontSize=»20″ FontWeight=»Bold» Foreground=»White»>
–
</Button>
<Button Grid.Column=«3» Grid.Row=»4″ Height=»50″ Width=»50″
Background =»CornflowerBlue» FontFamily=»Arial»
FontSize=»20″ FontWeight=»Bold» Foreground=»White»>
=
</Button>
<Button Grid.Column=«4» Grid.Row=»3″ Grid.RowSpan=»2″ Width=»50″
Background =»CornflowerBlue» FontFamily=»Arial»
FontSize=»20″ FontWeight=»Bold» Foreground=»White»>
+
</Button>
<Button Grid.Column=«4» Grid.Row=»1″ Height=»50″ Width=»50″
Background =»CornflowerBlue» FontFamily=»Arial»
FontSize=»20″ FontWeight=»Bold» Foreground=»White»>
C
</Button>
<Button Grid.Column=«4» Grid.Row=»2″ Height=»50″ Width=»50″
Background =»CornflowerBlue» FontFamily=»Symbol»
FontSize=»20″ FontWeight=»Bold» Foreground=»White»>
Ö
</Button>
</Grid>
WRAPPANEL
Bueno, este es uno de los paneles que mas me gusta, y es que te permite agrupar los elementos de forma ordenada y que siempre sean visibles. Es decir, reacomoda los elementos cuando ya no caben en la superficie. Para este ejemplo quiero agradecer de manera muy especial a mi amiga MELISA LEON por haberme prestado sus dibujos para la demo :D, gracias amiga MEL. Por ejemplo:
SLIDER CON VALOR 50
SLIDER CON VALOR 200
Como podemos observar, los elementos se han redistribuidos de tal forma que se vean todos, en otro tipo de contenedor, probablemente se hubieran salido fuera de la vista de nosotros.
CANVAS
El contenedor mas sencillo de todos, ya que permite ubicar los elementos a partir de la posición que le especifiquemos.
Por ejemplo:
<Canvas>
<Image Source=»Nevera.jpg» Height=»700″/>
<TextBox Canvas.Top=«10» Canvas.Left=»10″
Background=»LightYellow» FontWeight=»Bold»
Foreground=»Blue» FontSize=»20″
FontFamily=»Bradley Hand ITC» AcceptsReturn=»True»/>
<TextBox Canvas.Bottom=«550» Canvas.Right=»10″
Background=»LightYellow» FontWeight=»Bold»
Foreground=»Blue» FontSize=»20″
FontFamily=»Bradley Hand ITC» AcceptsReturn=»True»/>
<TextBox Canvas.Top=«100» Canvas.Left=»25″
Background=»LightYellow» FontWeight=»Bold»
Foreground=»Blue» FontSize=»20″
FontFamily=»Bradley Hand ITC» AcceptsReturn=»True»/>
<TextBox Canvas.Bottom=«450» Canvas.Left=»250″
Background=»LightYellow» FontWeight=»Bold»
Foreground=»Blue» FontSize=»20″
FontFamily=»Bradley Hand ITC» AcceptsReturn=»True»/>
</Canvas>
Aquí estamos ubicando elementos a cierta distancia del Canvas, ya sea con Canvas.Left, Canvas.Right, Canvas.Bottom o Canvas.Top. y especificando la distancia propiamente. El ejemplo anterior nos arrojaría lo siguiente:
Vale, pues me he tomado tiempo para escribir acerca de los contenedores en WPF, ya que mucha gente había estado preguntando por ellos y creí necesario explicarlo, les prometo para la próxima ocasión empezar realmente con la aplicación en 3d, si tienen dudas o comentarios, ya sea sobre esto mismo o sobre otra cosa, díganmelos y trataré de ayudarlos en lo que pueda.
P. D. De nuevo gracias a mi amiga super chida Mel, por los dibujos que me han servido para la demo, gracias por tu amistad amiga y por todo tu apoyo 😉 TKM y mucho éxitoooo…
LINK DEL PROGRAMA DEMO: Contenedores.zip-download
Salu2
Héctor Pérez
Héctor Uriel Pérez Rojas Weblog 