Windows Presentation Foundation Layout

Para hacer un uso eficiente del WPF (Windows Presentation Foundation) se debe empezar por conocer las opciones que con que contamos para colocar los controles (botones, etiquetas, etc.). Layout es el proceso mediante el cual se define la forma de colocar y organizar los objetos dentro de la ventana. WPF utiliza contenedores llamados paneles, existen varios tipos, cada uno nos da una diferente funcionalidad, es importante utilizar el que mejor nos convenga dependiendo de la ventana que estemos diseñando. Los principales paneles se definen a continuación:

Ø Canvas : Define un espacio en el cual los controles son posicionados mediante coordenadas relativas al panel contenedor.

Ø DockPanel: Define un espacio en el cual los controles son organizados vertical o horizontalmente basados en los controles mismos.

Ø StackPanel: Organiza los controles de manera lineal uno tras otro, horizontal o verticalmente.

Ø GridPanel: Organiza el espacio mediante filas y columnas en el cual se colocan los controles.

Ø WarpPanel: Posiciona los elementos de izquierda a derecha, cambiando la línea cuando el ancho del contenedor no es suficiente para contener todos los controles en un única línea.

Veamos algunos ejemplos,

1. Utilizando Canvas:

<Page WindowTitle="Ejemplo utilizando canvas" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">

<Canvas Height="400" Width="400">

<Canvas Height="100" Width="100" Top="0" Left="0" Background="Red"/>

<Canvas Height="100" Width="100" Top="100" Left="100" Background="Green"/>

<Canvas Height="100" Width="100" Top="50" Left="50" Background="Blue"/>

</Canvas>

</Page>

2. Utilizando GridPanel

<Page WindowTitle="Ejemplo utilizando Grid" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">

<Grid Name="myGrid" Background="LightSteelBlue" Height="150">

<Grid.ColumnDefinitions>

<ColumnDefinition/>

<ColumnDefinition/>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

<RowDefinition />

<RowDefinition />

<RowDefinition />

</Grid.RowDefinitions>

<TextBlock Grid.Column="0" Grid.Row="0">Celda 0,0 </TextBlock>

<TextBlock Grid.Column="0" Grid.Row="1">Celda 0,1 </TextBlock>

<TextBlock Grid.Column="0" Grid.Row="2">Celda 0,2 </TextBlock>

<TextBlock Grid.Column="1" Grid.Row="0">Celda 1,0 </TextBlock>

<TextBlock Grid.Column="1" Grid.Row="1">Celda 1,1 </TextBlock>

<TextBlock Grid.Column="1" Grid.Row="2">Celda 1,2 </TextBlock>

</Grid>

</Page>

Como podemos observar en el ejemplo usando canvas los controles son ubicados mediante coordenadas específicas utilizando Top y Left, en el segundo ejemplo los controles son ubicados indicando el column y el row en el cual se requieren colocar.

3. Utilizando Grid y Canvas combinado

<Page WindowTitle="Ejemplo utilizando Grid y Canvas" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">

<Grid Name="myGrid" Background="LightSteelBlue" Height="150">

<Grid.ColumnDefinitions>

<ColumnDefinition/>

<ColumnDefinition/>

</Grid.ColumnDefinitions>

<Grid.RowDefinitions>

<RowDefinition />

<RowDefinition />

<RowDefinition />

</Grid.RowDefinitions>

<TextBlock Grid.Column="0" Grid.Row="0">Celda 0,0 </TextBlock>

<TextBlock Grid.Column="0" Grid.Row="1">Celda 0,1 </TextBlock>

<TextBlock Grid.Column="0" Grid.Row="2">Celda 0,2 </TextBlock>

<TextBlock Grid.Column="1" Grid.Row="0">Celda 1,0 </TextBlock>

<Canvas Height="400" Width="400" Grid.Column = "1" Grid.Row="1" >

<Canvas Height="20" Width="20" Top="0" Left="0" Background="Red"/>

<Canvas Height="20" Width="20" Top="20" Left="20" Background="Green"/>

<Canvas Height="20" Width="20" Top="10" Left="10" Background="Blue"/>

</Canvas>

<TextBlock Grid.Column="1" Grid.Row="2">Celda 1,2 </TextBlock>

</Grid>

</Page>

En el ejemplo 3 podemos observar, que además de la funcionalidad que nos da cada tipo de panel, tenemos la posibilidad de usar estos paneles dentro de otros paneles, logrando de esta manera ampliar aún más las posibilidades con que contamos para el diseño de las aplicaciones que construimos.

WPF - Introducción

En estos días he estado leyendo un poco de Windows Presentation Foundation. Y considero importante comentar un poco de WPF.

WPF es parte del nuevo Microsoft .NET Framework 3.0, anteriormente conocido como WinFX, presenta una forma más eficiente para el manejo de la interfaz gráfica, podríamos decir que WPF es una máquina gráfica de dos y tres dimensiones, para lograr esto interactúa con el sistema operativo y hace un mejor uso del procesador gráfico de la tarjeta de video.

Esto nos permite a los que creamos aplicaciones hacer interfaces mucho más ricas gráficamente, aplicaciones visualmente más eficientes y atractivas. Para esto WPF nos proporciona una serie de namespaces, entre los más importantes tenemos:

System.Windows. Este namespace contiene las clases e interfaces que son utilizadas para crear aplicaciones. Define varias interfaces y estructuras comunes usadas a través de la API, como la clase Application, la clase Window, styling, dependency, y clases base comunes.

System.Windows.Controls. El namespace de controles está asociado a la interfaz de usuario de la aplicación. Éste incluye menús, hyperlinks, edit boxes (text, check, combo y list boxes), buttons, panels, borders, y sliders para audio y video. La Viewport3D está también localizado en este namespace para controlar todo el contenido 3D y el contenido con interacción.

System.Windows.Data. El namespace de datos controla todas las propiedades para enlace a datos. Éste es usado específicamente para la fuente, para estas clases y para cualquier otra asociada a la implementación de datos y colecciones.

System.Windows.Input. Este namespace controla todos los modos de entrada, como el mouse, el teclado o Tablet, con los cuales interactúa el usuario cuando usa la aplicación.

System.Windows.Media. El namespace Media controla todas las clases de gráficos tanto para 2D como para 3D. Éste también define el camino para las clases de segmento, brochas, colores, efectos de imágenes, clases geométricas, colecciones, audio, video, enumeraciones y estructuras.

System.Windows.Media.Animation. Este namespace contiene las clases utilizadas para animación 2D y 3D. Esta área incluye tipos para Timelines, KeyFrames y Animation.

System.Windows.Media.Media3D. Contiene una variedad de clases específicas para gráficos en 3D.

Estas clases son utilizadas para definir cómo los gráficos van a ser presentados dentro de la aplicación.

System.Windows.Navigation. Este namespace está dedicado a las clases e interfaces utilizadas para la navegación de aplicaciones, donde la navegación puede ser entre ventanas, paneles o journaling.

System.Windows.Shapes. Este namespace es para todas las formas primitivas 2D usadas dentro de la API. Éstas son ellipse, glyphs, line, path, polygon, polyline y rectangle. Estas clases con similares a las encontradas en Scalable Vector Graphics (SVG).

System.Windows.Resources. Este namespace contiene todas las clases que usan recursos, que podrían definir propiedades para estilos de animación y localización, y que pueden ser accedidas por un objeto referenciando el nombre como Style=”{StaticResource ResourceName}” dentro de la aplicación.

System.Windows.Serialization. Este namespace soporta la conversión de objetos Avalon al modelo XAML y viceversa.

El WPF es totalmente funcional en Windows Vista, además puede correr en Windows XP service pack 2 aunque con algunas funcionalidades reducidas.

Ejemplo:

Sub Crea_Ventana()

Dim l_ventana As New Window()

Dim l_canvas As New Canvas()

Dim tb_etiqueta As New TextBlock()

'Se definen las propiedades del texto

tb_etiqueta.Text = "Esto es un textBlock"

tb_etiqueta.FontSize = 16

Canvas.SetTop(tb_etiqueta, 100)

Canvas.SetLeft(tb_etiqueta, 10)

'Se agrega el texto a l_canvas

l_canvas.Children.Add(tb_etiqueta)

'Se crea un nuevo Botón

Dim l_button As New Button

'Se asignan las propiedades del botón

l_button.FontSize = 22

l_button.Width = 100

l_button.Height = 40

l_button.ToolTip = "Este botón es de Prueba"

l_button.Content = "De click aquí"

Canvas.SetTop(l_button, 200)

Canvas.SetLeft(l_button, 75)

l_canvas.Children.Add(l_button)

'Asignamos l_canvas a la ventana

l_ventana.Content = l_canvas

l_ventana.Title = "Ejemplo de ventana con WPF"

l_ventana.Show()

End Sub

El ejemplo anterior muestra cómo crear una ventana de manera dinámica desde Visual Basic, esta ventana tiene un contenedor “canvas” que contiene una etiqueta y un botón, sin embargo, para el máximo aprovechamiento del WPF tenemos un nuevo lenguaje declarativo para la creación de interfaces llamado Xaml (Se pronuncia Xammel).

El siguiente ejemplo es el equivalente al anterior pero en Xaml.

<Window

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="800" Height="600">

<Canvas>

<!--Se crea y personaliza el textbox-->

<TextBlock FontSize="16" Canvas.Top="100" Canvas.Left="10">Esto es un text block</TextBlock>

<!--Se crea y personaliza el Botón-->

<Button Name="button1" FontSize="12" Width = "100" Height = "40" Content="De click aquí" Canvas.Top="200" Canvas.Left="75" ToolTip="Este botón es de Prueba" />

</Canvas>

</Window>

El Xaml nos da serie de ventajas pero eso lo trataremos en detalle más adelante.