Roberto Sánchez Programador/Desarrollador .NET

Controles comunes.

Son una gran variedad los controles contenidos dentro de WPF. Sin embargo, con el tiempò irás viendo que sólo con unos pocos consigues hacer casi cualquier cosa. En este apartado vamos a ver los controles más comunes en las aplicaciones WPF.

Control 'Window', o ventana.

Las ventanas son los elementos principales de una aplicación WPF. Actúan como elemento principal que contiene todos y cada uno de los demás controles que forman parte de la aplicación y son el elemento principal de visualización de la misma. Recordemos la apariencia inicial en cósigo XAML de una ventana recién creada:

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>

    </Grid>
</Window>

Como ya comentamos anteriormente, podemos eliminar unas líneas dé códigoque, de momento, no nos van a ser necesarias, quedando el código con el mínimo imprescindible para su funcionamiento:

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid>

    </Grid>
</Window>

Ahora vamos a añadir propiedades para personalizar la ventana a nuestra voluntad:

<Window x:Name="mainWindow"
        x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Height="300" Width="400" ResizeMode="CanResize" ShowInTaskbar="True" WindowStartupLocation="CenterScreen">
    <Grid>

    </Grid>
</Window>

Ahora nuestra ventana tendrá las siguientes propiedades: alto 300 píxeles, ancho 400 píxeles, se podrá modificar sus dimensiones, será visible en la barra de tareas y su colocación inicial será en el centro de la ventana. Prueba a modificar estas y otras propiedades y comprueba los cambios.

Control 'Label', o etiqueta.

Es uno de los controles más simples. Se trata de un control que actúa a modo de etiqueta, es decir, cuyo contenido es simplemente una cadena de texto. Representa, pues, la mejor manera de volcar texto a la ventana.

<Label x:Name="labelTitle" Content="ETIQUETA TÍTULO" HorizontalAlignment="Center" Margin="50,20,10,0"/>

Hemos declarado una etiqueta con nombre 'labelTitle' y cuyo contenido será el texto "ETIQUETA TÍTULO". Pero además hemos modificado dos propiedades más: el contenido tendrá una alineación horizontal centrada y guardará con los controles aledaños 50 píxeles de margen izquierdo, 20 píxeles de margen superior, 10 píxeles de margen derecho y ningún margen inferior.

Es importante que te vayas familiarizando con estas y otras importantes propiedades que son comunes a la mayor parte de los controles de WPF. Gracias a la amplia gama de propiedades de los controles conseguirás un diseño perfecto en tus ventanas. No es necesario que las vayas memorizando una a una, pues ya habrás comprobado que Visual Studio facilita enormemente la tarea de la escritura de estas propiedades y otros elementos de WPF.

Control 'Button', o botón.

<Button x:Name="buttonAccept" Content="ACEPTAR" HorizontalAlignment="Center" Margin="50,20,10,0" FontSize="30" Width="200" Height="100"/>

A este botón le hemos añadido las mismas propiedades que tenía la etiqueta anterior. Como ves, son propiedades comunes. Además, hemos añadido unos cambios más: el tamaño de la fuente de la letra de su contenido será de 30, el ancho será de 200 píxeles y el alto será de 100 píxeles.

Te animo a cambiar estas y otras propiedades para que veas el comportamiento de las mismas. También, añade nuevas propiedades a cada control y observa los cambios que se producen; de esta manera aprenderás más que si yo te voy explicando las propiedades una a una, lo cual me llevará muchas líneas y mucho tiempo. La mejor manera de aprender es experimentar.

Control 'TextBox', o caja de texto.

Muy utilizados también en los formularios. Ten presente que serán los responsablesd e recoger información tecleada por el usuario sobre una ventana que, por ejemplo solicite el nombre de usuario para un acceso, o un formulario de datos de un nuevo cliente en una aplicación de gestión, etc.

<TextBox Text="esto es una caja de texto"/>

Ahora no tenemos la propiedad 'Content', sino la propiedad 'Text'. No te preocupes por estas diferencias entre controles. Como son de uso tan frecuente, pronto recordarás las diferencias principales. Con el tiempo incluso recordarás de memoria la mayoría de las propiedades de cada control.

Control 'TextBlock', o bloque de texto.

Muy usada para la misma tarea del control 'Label', pero difiere de esta en algunas propiedades. Tú mismo te decantarás por el uso de unou otra. Yo, personalmente, prefiero el uso del control 'Label'. Tú decides. Explora con Visual Studio las posibilidades de cada una.

<TextBlock Text="esto es un bloque de texto"/>

Control 'Border', o borde.

Es un control que como contenido siempre tendrá otro control, mostrando el border alrededor de éste. Un borde sin un control como contenido no tiene sentido.

<Border BorderBrush="Red" BorderThickness="5" CornerRadius="10">
    <TextBlock Text="esto es un bloque de texto con borde rojo"/>
</Border>

El border es rojo, tiene 10 píxeles de grosor y, además, le hemos añadido la propiedad 'CornerRadius' que redondea los bordes a nuestra voluntad.

Control 'CheckBox', o casilla de verificación.

<CheckBox Content="Casilla de verificación" IsChecked="True"/>

Cambia la propiedad 'IsChecked' y verás su funcionamiento principal. En este control también es un recurso interesante la propiedad 'IsThreeState', que tiene de valor por defecto 'false'. Ejecuta la aplicación y comprueba su comportamiento.

Control 'RadioButton', o botón de opción.

Es similar al control anterior, pero permite una selección excluyente entre dos o más controles de este tipo.

<RadioButton Content="Botón de opción 1"/>
<RadioButton Content="Botón de opción 2" Margin="150,0,0,0"/>

Ejecuta la aplicación y comrpueba que solamente uno de los dos controles puede estar en estado activado. De esta manera, este control te será muy útil en multitud de formularios en los que el usuario deba ejegir entre dos o más opciones.

Control 'ComboBox', o desplegable.

Permite la selección de una de las opciones previamente configuradas por el programador mediante un desplegable vertical.

<ComboBox Width="150" Height="20">
    <ComboBox.Items>
        <ComboBoxItem Content="opción 1"/>
        <ComboBoxItem Content="opción 2"/>
        <ComboBoxItem Content="opción 3"/>
    </ComboBox.Items>
</ComboBox>

Prueba a modificar la propiedad 'SelectedIndex' para seleccionar por defecto una de las opciones; ten presente que el índice numérico del item seleccionado comienza por cero, es decir, para seleccionar por defecto 'opción 1' deberás establecer el valor de la propiedad en '0'.