En este articulo aprenderemos a utilizar los controles más comunes en Windows Presentation Foundation

Controles en WPF

·         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

Tabla 1. Principales elementos del control Grid

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

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

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);

      }

<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

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"/>