En este articulo aprenderemos a utilizar los controles más comunes en Windows Presentation Foundation
Controles en WPF
Existen diferentes tipos de controles en WPF y aún cuando la mayoría son utilizados para tener interacción con el usuario, existen algunos que permiten organizar el posicionamiento de los controles, realizar tareas en segundo plano, incrustar video, etc. Cuando creamos un nuevo proyecto del tipo “Windows Application (WPF)” Visual Studio 2008 nos presentara en la barra de herramientas los diferentes controles de WPF agrupados por las siguientes categorías: · Controles comunes
· Contenedores comunes
· Menús y Barras de herramientas
· Todos los controles
· Todos los contenedores
Controles Comunes
Como su nombre lo indica, son los controles que comúnmente son más utilizados al momento de desarrollar una aplicación:
· Grid
· Button
· CheckBox
· ComboBox
· Image
· InkCanvas
· InkPresenter
· Label
· ListBox
· PasswordBox
· RadioButton
· Slider
· TextBox
En este capítulo solo haremos referencia a los controles Grid, Label, Textbox, ComboBox,RadioButton e Image ya que son los controles que exponen una funcionalidad típica en una aplicación.
Grid
El control Grid pertenece a la categoría Contenedores Comunes y como cualquier control de su misma categoría, permite definir el posicionamiento de los diferentes controles que se encuentren dentro de elemento Window. Si no definiéramos un control de LayOut perderíamos la posibilidad de representar gráficamente varios controles como lo demuestra el siguiente ejemplo.
XAML
<Window x:Class="Users_SimpleControls.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Users_SimpleControls" Height="300" Width="300"
>
<Button Height="200" Width="200">Hola</Button>
</Window>
En el ejemplo anterior, se está creando una ventana con un alto y ancho de 300 pixeles y directamente como un elemento hijo, se le está agregando un control del tipo Button.
Sin embargo si quisiéramos agregar un segundo botón, el diseñador marcaría un error ya que el elemento Window no está preparado para poder posicionar dos controles diferentes a ese mismo nivel.
Imagen 1. Error en el diseñador de Visual Studio 2008
El control Grid como mencionamos anteriormente nos permitirá organizar y desplegar nuestros controles pero en formato de cuadricula (Filas y columnas). La tabla 1 muestra los principales elementos del control Grid
|
Elemento |
Descripción |
|
ColumDefinition |
Permite definir las diferentes columnas que contendrá el grid, asi como las propiedades de cada columna, alto, ancho etc. |
|
RowDefinition |
Cada elemento RowDefinition creado, especifica una fila dentro del Grid, también permite especificar el comportamiento de cada fila como, el tamaño máximo, tamaño mínimo etc. |
| |
|
Tabla 1. Principales elementos del control Grid
|
Elemento |
Descripción |
|
ShowGridLines |
Indica si las líneas del grid serán mostradas, de manera predeterminada es false. |
|
BackGround |
Especifica un color de fondo |
| |
|
Tabla 2. Principales propiedades del control Grid
En el siguiente ejemplo, crearemos un control Grid que contenga 2 columnas de 150 pixeles de ancho cada una y 12 filas, el grid mostrara las líneas de división así como un color de fondo blanco.
<Window x:Class="Users_SimpleControls.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Users_SimpleControls" Height="400" Width="300"
>
<Grid ShowGridLines="True" Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="150"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
</Grid>
</Window>
Con las creación de las filas y columnas especificamos el layout que deberá de cumplir nuestra ventana que estamos diseñando, lo que haremos a continuación será indicarle a los controles en qué posición de nuestro grid serán ubicados, es decir en que fila y columna serán desplegados, todos los controles cuentan que la propiedad Grid.Colum y Grid.Row que indican en que columna y que fila será posicionado el control. Partiendo del ejemplo anterior, crearemos un elemento Label (el control será explicando más adelante) el cual será posicionado en la columna 0 fila 2
<Label Grid.Column="0" Grid.Row="2">Apellido Materno</Label>
Imagen 2. Control Label posicionado dentro del grid
El control Grid podría ser el control más utilizado al momento de realizar el LayOut de nuestra ventana ya que permite posicionar los controles como si se tratara de una tabla
Si no se especifica ningún valor de dimensión (Height o Width) en el control de Grid ni en su elemento Grid.ColumnDefinitions entonces el control ocupara el 100% del tamaño de la ventana. En caso de las dimensiones de la ventana sean actualizadas entonces de manera automática el control Grid reajustara su tamaño para adaptarse de manera automática al nuevo tamaño
Label
El control label permite desplegar texto y posicionarlo en la región que especifiquemos para ello. Las principales propiedades son descritas en la tabla 3
|
Propiedad |
Descripción |
|
Content |
Asigna el texto que será mostrado dentro del control |
|
Background |
Especifica un color de fondo |
|
Label.BorderThickness |
Asigna el ancho del borde de la etiqueta |
|
BorderBrush |
Especifica el tipo de brocha a utilizar para dibujar el borde |
|
Height |
Especifica el alto de la etiqueta |
|
Width |
Asigna el ancho de la etiqueta |
Tabla 3. Principales propiedades del control Label
En el siguiente ejemplo crearemos una etiqueta que desplegara el texto “Apellido Materno” y le especificaremos un borde de 2 puntos de ancho de color rojo
<Label Grid.Column="0" Grid.Row="2" Content="Apellido Materno" BorderBrush="Red">
<Label.BorderThickness>2</Label.BorderThickness>
</Label>
Imagen 3. Label con las propiedades configuradas
TexBox
Permite la captura de información en texto plano por parte del usuario, las principales propiedades son descritas en la tabla 4
|
Propiedad |
Descripción |
|
Content |
Asigna u obtiene el texto mostrado dentro del control |
|
Background |
Especifica un color de fondo |
|
SpellCheck.IsEnabled |
Permite la comprobación de errores gramaticales dentro del control |
|
ContextMenu |
Asigna un menú contextual personalizado |
|
Height |
Especifica el alto de la etiqueta |
|
Width |
Asigna el ancho de la etiqueta |
Tabla 4. Principales propiedades del control TextBox
En el siguiente ejemplo se crea un control Texbox con un color de fondo “Azure” el texto “Casador” y con la comprobación gramatical activada
<TextBox Grid.Column="1" Grid.Row="2" SpellCheck.IsEnabled="True" Background="Azure">Casador</TextBox>
En la siguiente imagen muestra como el corrector gramatical marca con una línea en rojo la palabra “Casador” al dar un clic con el botón derecho, se muestra un menú contextual sugiriendo la palabra correcta “Cazador”
Imagen 4. Texbox con la comprobación gramatical activada
ComboBox
Permite desplegar información en forma de lista seleccionable, cada uno de estos elementos tiene un nombre asignado el cual permite conocer cuál es el valor que el usuario ha seleccionado.
En el siguiente ejemplo, crearemos un ComboBox con el nombre “cboRangoEdad” que contendrá 3 elementos del tipo ComboBoxItem, cada uno de ellos corresponde a un rango de edad, al último elemento se le asignara un color de fondo verde.
<ComboBox Grid.Column="1" Grid.Row="3" Name="cboRangoEdad">
<ComboBoxItem Name="Rango1">18 a 30 años</ComboBoxItem>
<ComboBoxItem Name="Rango2">31 a 50 años</ComboBoxItem>
<ComboBoxItem Name="Rango3" Background="Green">50 en adelante</ComboBoxItem>
</ComboBox>
En tiempo de diseño, nos asociaremos al evento “SelectionChanged” el cual se ejecutara cuando el usuario seleccione un elemento dentro del combobox. Primero, crearemos el código que se ejecutara cuando el usuario seleccione un elemento
void cboRangoEdad_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
ComboBoxItem elementoSeleccionado = cboRangoEdad.SelectedItem as ComboBoxItem;
string mensaje = string.Format("El valor seleccionado es '{0}' con el texto '{1}'",elementoSeleccionado.Name,elementoSeleccionado.Content);
MessageBox.Show(mensaje);
}
El código anterior, mostrara un mensaje con el nombre y el valor del elemento seleccionado, la propiedad “SelectItem” es del tipo object por lo cual es necesario convertirlo al tipo ComboBoxItem y de esa manera, obtener la información de dicho objeto. Lo único que hace falta, es asociar la función “cboRangoEdad_SelectionChanged” con el evento “SelectionChanged”
<ComboBox Grid.Column="1" Grid.Row="3" Name="cboRangoEdad" SelectionChanged="cboRangoEdad_SelectionChanged">
Imagen 5. Aplicación en ejecución, dar un clic sobre el ComboBox para desplegar la información
Imagen 6. Cuando se selecciona un elemento, el evento SelectionChanged es lanzado.
RadioButton
El control RadioButton permite al usuario seleccionar un valor de manera excluyente dentro de un grupo de elementos, es decir, solo permite la selección de un valor dentro de un determinado grupo. El ComboBox y el RadioButton comparten el mismo objetivo, sin embargo, el primero se presenta como una lista desplegable y el segundo se muestra con el comportamiento de un botón, con lo cual se logra una experiencia de usuario diferente.
En el siguiente ejemplo crearemos dos controles del tipo RadioButton los cuales estarán asociados utilizando la propiedad “GroupName”, si el nombre del grupo no es establecido o el nombre del grupo es diferente entonces los controles no quedarían asociados permitiendo al usuario seleccionar ambos controles a la vez.
El corrector de ortografía es soportado en los controles TextBox y RichTextBox
El control ComboBox permite crear sus elementos a partir la información almacenada en la base de datos, para mayor referencia puede buscar la utilización de las propiedades ItemsSource, DataContext, DisplayMemberPath y SelectedValuePath
<RadioButton Grid.Column="1" Grid.Row="4" Name="rdEstadoCivilSoltero" GroupName="EstadoCivil">Soltero</RadioButton>
<RadioButton Grid.Column="1" Grid.Row="5" Name="rdEstadoCivilCasado" GroupName="EstadoCivil">Casado</RadioButton>
En caso de que necesitemos conocer cuál fue el control radiobutton que selecciono el usuario podemos asociarnos al evento “Checked” el cual es ejecutado en el momento en que el usuario selecciona un valor, para implementarlo podernos realizar el siguiente procedimiento.
Crearemos una función que será llamada por ambos radiobuttons (rdEstadoCivilSoltero y rdEstadoCivilCasado), está función recibe como parámetro el sender, el cual, es el objeto que fue seleccionado, como es del tipo object es necesario convertirlo al tipo RadioButton para poder acceder a su información
void EstadoCivilSeleccionado(object sender, RoutedEventArgs e)
{ RadioButton objetoSeleccionado = sender as RadioButton;
MessageBox.Show(" El valor seleccionado fue " + objetoSeleccionado.Content); }
El siguiente paso, será asociar la función “EstadoCivilSeleccionado” al evento “Checked” de ambos controles
<RadioButton Grid.Column="1" Grid.Row="4" Name="rdEstadoCivilSoltero" GroupName="EstadoCivil" Checked="EstadoCivilSeleccionado">Soltero</RadioButton> <RadioButton Grid.Column="1" Grid.Row="5" Name="rdEstadoCivilCasado" GroupName="EstadoCivil" Checked="EstadoCivilSeleccionado">Casado</RadioButton>
Imagen 8. Cuando un valor es seleccionado, se mostrara un mensaje con la información del mismo.
Image
El control image permite visualizar imágenes que se encuentren en cualquiera de los siguientes formatos:
· BMP
· JPEG
· PNG
· TIFF
· Windows Media Photo
· GIF
· ICON
Las principales propiedades son descritas en la tabla 5
|
Propiedad |
Descripción |
|
Source |
Especifica la ruta en donde se encuentra la imagen a desplegar, incluso podría utilizarse una dirección de internet que contiene la url de la imagen a desplegar |
|
Height |
Especifica el alto de la imagen |
|
Width |
Asigna el ancho de la imagen |
Tabla 5. Principales propiedades del control Image
En el siguiente ejemplo mostraremos una imagen gif que tiene transparencia.
<Label Grid.Column="0" Grid.Row="6" >Imagen</Label>
<Image Grid.Column="1" Grid.Row="6" Source="logoMS.gif" Width="300" Height="35"/>
Imagen 9. La imagen es visualizada sin embargo, solo los bordes son visualizados ya que la mayoría del cuerpo de la imagen tiene aplicada transparencia
Para que la imagen sea visualizada de manera correcta es necesario aplicar un color de fondo, para ello utilizaremos un control de tipo Canvas al cual le aplicaremos un color de fondo azul y por ultimo agregaremos el control Image como un control hijo del control canvas.
<Label Grid.Column="0" Grid.Row="6" >Imagen</Label>
<Image Grid.Column="1" Grid.Row="6" Source="logoMS.gif" Width="300" Height="35"/>
Articulo Publicado en http://desarrollador.redusers.com/