Tutorial: Creación de una nueva aplicación WPF con .NET

En este breve tutorial, aprenderá a crear una aplicación Windows Presentation Foundation (WPF) con Visual Studio. Una vez que se haya generado la aplicación inicial, aprenderá a agregar controles y a controlar eventos. Al final de este tutorial, tendrá una aplicación sencilla que agrega nombres a un cuadro de lista.

En este tutorial, aprenderá a:

• Crear una aplicación WPF
• Agregar controles a un formulario
• Controlar los eventos de control para proporcionar la funcionalidad de la aplicación
• Ejecución la aplicación

Esta es una vista previa de la aplicación que compilará a medida que siga este tutorial:

Prerrequisitos

• Visual Studio 2022, versión 17.0 o posterior
  • Selección de la carga de trabajo de desarrollo para el escritorio de .NET
  • Selección del componente individual de .NET 6

• Visual Studio 2022, versión 17.4 o posteriores
  • Selección de la carga de trabajo de desarrollo para el escritorio de .NET
  • Selección del componente individual .NET 7

Sugerencia

Use Visual Studio 2022, versión 17.4 o posteriores, e instale los componentes individuales .NET 7 y .NET 6. Se ha agregado compatibilidad con .NET 7 en Visual Studio 2022, versión 17.4.

Crear una aplicación WPF

El primer paso para crear una aplicación consiste en abrir Visual Studio y generar la aplicación a partir de una plantilla.

1. Abra Visual Studio.

2. Seleccione Crear un proyecto.

   

3. En el cuadro Buscar plantillas, escriba wpf y presione ENTRAR.

4. En la lista desplegable Lenguaje de código, elija C# o Visual Basic.

5. En la lista de plantillas, seleccione Aplicación WPF y Siguiente.

   Importante

   No seleccione la plantilla Aplicación WPF (.NET Framework) .

   En la imagen siguiente se muestran plantillas de proyecto, tanto de C#, como de Visual Basic .NET. Si ha aplicado el filtro de lenguaje de código, verá la plantilla correspondiente.

   

6. En la ventana Configurar el nuevo proyecto, haga lo siguiente:

   1. En el cuadro Nombre de proyecto, escriba Names.
   2. Active la casilla Colocar la solución y el proyecto en el mismo directorio.
   3. Opcionalmente, puede elegir una ubicación diferente para guardar el código.
   4. Haga clic en el botón Siguiente.

   

7. En la ventana Información adicional seleccione .NET 6.0 (compatibilidad a largo plazo) para Plataforma de destino. Seleccione el botón Crear.

   

1. Abra Visual Studio.

2. Seleccione Crear un proyecto.

   

3. En el cuadro Buscar plantillas, escriba wpf y presione ENTRAR.

4. En la lista desplegable Lenguaje de código, elija C# o Visual Basic.

5. En la lista de plantillas, seleccione Aplicación WPF y Siguiente.

   Importante

   No seleccione la plantilla Aplicación WPF (.NET Framework) .

   En la imagen siguiente se muestran plantillas de proyecto, tanto de C#, como de Visual Basic .NET. Si ha aplicado el filtro de lenguaje de código, verá la plantilla correspondiente.

   

6. En la ventana Configurar el nuevo proyecto, haga lo siguiente:

   1. En el cuadro Nombre de proyecto, escriba Names.
   2. Active la casilla Colocar la solución y el proyecto en el mismo directorio.
   3. Opcionalmente, puede elegir una ubicación diferente para guardar el código.
   4. Haga clic en el botón Siguiente.

   

7. En la ventana Información adicional seleccione .NET 7.0 (soporte técnico de términos estándar) para Plataforma de destino. Seleccione el botón Crear.

   

Una vez que se ha generado la aplicación, Visual Studio abrirá el panel del diseñador XAML para la ventana predeterminada, MainWindow. Si el diseñador no es visible, haga doble clic en el archivo MainWindow.xaml en el panel Explorador de soluciones para abrir el diseñador.

Elementos importantes de Visual Studio

La compatibilidad con WPF en Visual Studio tiene cinco componentes importantes con los que interactuará a medida que crea una aplicación:

1. Explorador de soluciones

   En este panel aparecerán todos los archivos del proyecto, el código, las ventanas y los recursos.

2. Propiedades

   En este panel se muestran los valores de propiedades que puede configurar en función del elemento seleccionado. Por ejemplo, si selecciona un elemento en el Explorador de soluciones, verá los valores de las propiedades relacionadas con el archivo. Si selecciona un objeto en el Diseñador, verá sus valores correspondientes.

3. Cuadro de herramientas

   El Cuadro de herramientas contiene todos los controles que se pueden agregar a un formulario. Para agregar un control al formulario actual, haga doble clic en un control, o bien arrástrelo y colóquelo.

4. Diseñador XAML

   Este es el diseñador para un documento XAML. Es interactivo y puede arrastrar y colocar objetos desde el Cuadro de herramientas. Al seleccionar y mover elementos en el diseñador, puede crear visualmente la interfaz de usuario (IU) de la aplicación.

   Cuando el diseñador y el editor están visibles, los cambios que se realicen en uno se reflejarán en el otro. Al seleccionar elementos en el diseñador, en el panel Propiedades se muestran las propiedades y los atributos de ese objeto.

5. Editor de código XAML

   Se trata del editor de código XAML para un documento XAML. El editor de código XAML es un medio que permite crear la interfaz de usuario a mano sin un diseñador. El diseñador puede deducir los valores de las propiedades de un control cuando se agrega dicho control en el diseñador. El editor de código XAML permite tener mucho más control.

   Cuando el diseñador y el editor están visibles, los cambios que se realicen en uno se reflejarán en el otro. Al navegar por el símbolo de intercalación de texto en el editor de texto, en el panel Propiedades se muestran las propiedades y los atributos de ese objeto.

Examen del XAML

Una vez que se haya creado el proyecto, aparecerá el editor de código XAML con una cantidad mínima de código XAML para mostrar la ventana. Si el editor no está abierto, haga doble clic en el elemento MainWindow.xaml en el Explorador de soluciones. Debería ver XAML similar al ejemplo siguiente:

<Window x:Class="Names.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:Names"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>

    </Grid>
</Window>

Vamos a desglosar este código XAML para comprenderlo mejor. XAML es simplemente código XML que se puede procesar mediante los compiladores que usa WPF. Describe la interfaz de usuario de WPF e interactúa con el código .NET. Para entender XAML, debe estar familiarizado como mínimo con los conceptos básicos de XML.

El objeto <Window> raíz del documento representa el tipo de objeto que se describe en el archivo XAML. Hay ocho atributos declarados, que por lo general pertenecen a tres categorías:

• Espacios de nombres

  Un espacio de nombres XML proporciona estructura al XML, determinando qué contenido XML se puede declarar en el archivo.

  El atributo xmlns principal importa el espacio de nombres XML para todo el archivo y, en este caso, se asigna a los tipos que declara WPF. Los otros espacios de nombres XML declaran un prefijo, e importan otros tipos y objetos para el archivo XAML. Por ejemplo, el espacio de nombres xmlns:local declara el prefijo local y se asigna a los objetos que declara el proyecto, es decir, los que se declaran en el espacio de nombres de código Names.

• Atributo x:Class

  Este atributo asigna <Window> al tipo definido por el código: el archivo MainWindow.xaml.cs o MainWindow.xaml.vb, que es la clase Names.MainWindow.

• Atributo Title

  Cualquier atributo normal declarado en el objeto XAML establece una propiedad de ese objeto. En este caso el atributo Title establece la propiedad Window.Title.

Cambio de la ventana

En primer lugar ejecute el proyecto y vea la salida predeterminada. Verá aparecer una ventana, sin ningún control, y con un título de MainWindow:

Para nuestra aplicación de ejemplo, esta ventana es demasiado grande, y la barra de título no es descriptiva. Modifique el título y el tamaño de la ventana. Para ello, cambie los atributos pertinentes del código XAML a los valores siguientes:

<Window x:Class="Names.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:Names"
        mc:Ignorable="d"
        Title="Names" Height="180" Width="260">
    <Grid>
        
    </Grid>
</Window>

Preparación del diseño

WPF proporciona un eficaz sistema de diseño con muchos controles de diseño diferentes. Los controles de diseño ayudan a colocar controles secundarios y a ajustar su tamaño, incluso de forma automática. El control de diseño predeterminado que se le proporciona en este XAML es el control <Grid>.

El control Grid permite definir filas y columnas, de forma muy parecida a una tabla, y colocar controles dentro de los límites de una combinación específica de filas y columnas. Puede agregar a Grid cualquier número de controles secundarios u otros controles de diseño. Por ejemplo, puede colocar otro control Grid en una combinación específica de filas y columnas. Ese nuevo control Grid, a su vez, puede definir más filas y columnas, y tener elementos secundarios propios.

El control <Grid> define las filas y las columnas en las que estarán los controles. Una cuadrícula siempre tiene declarada una sola fila y columna, lo que significa que, de forma predeterminada, la cuadrícula es una sola celda. Esto no ofrece mucha flexibilidad a la hora de colocar controles.

Antes de agregar las nuevas filas y columnas, agregue un nuevo atributo al elemento <Grid>: Margin="10". Esto inserta la cuadrícula desde la ventana y hace que tenga un aspecto un poco más agradable.

Después, defina dos filas y dos columnas, lo que divide la cuadrícula en cuatro celdas:

<Grid Margin="10">
    
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    
</Grid>

Seleccione la cuadrícula en el editor de código XAML o en el diseñador XAML. Verá que el diseñador XAML muestra cada fila y columna:

Incorporación del primer control

Ahora que se ha creado la cuadrícula, podemos empezar a agregarle controles. Empiece por el control de etiqueta. Cree un elemento <Label> dentro del elemento <Grid>, después de las definiciones de fila y columna, y asígnele un valor de cadena de Names:

<Grid Margin="10">

    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Label>Names</Label>

</Grid>

<Label>Names</Label> define el contenido Names. Algunos controles entienden cómo controlar el contenido, pero otros, no. El contenido de un control se asigna a la propiedad Content. Al establecer el contenido mediante la sintaxis de atributo de XAML, se usaría este formato: <Label Content="Names" />. Ambos métodos hacen lo mismo: establecer el contenido de la etiqueta para mostrar el texto Names.

Aun así, tenemos un problema. La etiqueta ocupa la mitad de la ventana, ya que se asignó automáticamente a la primera fila y columna de la cuadrícula. Pero no necesitamos tanto espacio para la primera fila porque solo vamos a usarla para la etiqueta. Cambie el atributo Height del primer objeto <RowDefinition> de * a Auto. El valor Auto ajusta automáticamente la fila de la cuadrícula al tamaño de su contenido (en este caso, el control de etiqueta).

<Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
</Grid.RowDefinitions>

Observe ahora que la etiqueta ocupa una pequeña porción de la altura disponible en el diseñador. Ahora hay más espacio para que lo ocupe la fila siguiente. La mayoría de los controles definen el tipo de valor de alto y ancho que deben ocupar más adecuado para ellos. Por ejemplo, el control de etiqueta tiene un valor de altura que garantiza que pueda leerlo.

Colocación de controles

Vamos a hablar ahora sobre la colocación de controles. La etiqueta que creó en la sección anterior se colocó automáticamente en la fila 0 y la columna 0 de la cuadrícula. La numeración de las filas y las columnas empieza en 0 y se incrementa en 1 para cada fila o columna nueva. El control no tiene información sobre la cuadrícula y no define ninguna propiedad para controlar su colocación en la cuadrícula. El control se podría haber colocado incluso dentro de algún otro control de diseño que tenga su propio conjunto de reglas para definir cómo colocar controles.

Puesto que el control no tiene información sobre la cuadrícula, ¿cómo se le indica que use una fila o columna diferente? Mediante el uso de propiedades asociadas. La cuadrícula aprovecha el eficaz sistema de propiedades que ofrece WPF. La cuadrícula define propiedades nuevas que los controles secundarios pueden declarar y usar. Las propiedades no existen realmente en el control en sí mismo, sino que las asocia la cuadrícula cuando el control se agrega a esta.

La cuadrícula define dos propiedades para determinar la colocación en la fila y la columna de un control secundario: Grid.Row y Grid.Column. Si estas propiedades se omiten en el control, se supone que tienen 0 como valor predeterminado, por lo que el control se coloca en la fila 0 y la columna 0 de la cuadrícula. Pruebe a cambiar la colocación del control <Label> mediante el establecimiento del atributo Grid.Column en 1:

<Label Grid.Column="1">Names</Label>

Observe que la etiqueta se mueve ahora a la segunda columna. Puede usar las propiedades asociadas Grid.Row y Grid.Column para colocar los siguientes controles que crearemos. Por el momento, restaure la etiqueta a la columna 0.

Creación del cuadro de lista de nombre

Ahora que la cuadrícula tiene el tamaño correcto y que se ha creado la etiqueta, agregue un control de cuadro de lista a la fila situada debajo de la etiqueta. El cuadro de lista estará en la fila 1 y la columna 0. Le asignaremos a este control el nombre lstNames. Una vez que se proporciona un nombre a un control, se puede hacer referencia a él en el código subyacente. El nombre se asigna al control con el atributo x:Name.

<Grid Margin="10">

    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Label>Names</Label>
    <ListBox Grid.Row="1" x:Name="lstNames" />

</Grid>

Incorporación de los controles restantes

Los dos últimos controles que agregaremos son un cuadro de texto y un botón, que el usuario empleará para escribir un nombre y agregarlo al cuadro de lista. En lugar de intentar crear más filas y columnas para la cuadrícula, colocaremos estos controles en el control de diseño <StackPanel>.

El panel StackPanel difiere de la cuadrícula en la forma en la que se colocan los controles. Mientras que las propiedades asociadas Grid.Row y Grid.Column se usan para indicarle a la cuadrícula dónde quiere que estén los controles, el panel StackPanel coloca de manera automática el primer control, el siguiente después de este y así sucesivamente hasta que todos los controles se hayan colocado. Lo que hace es "apilar" cada control uno debajo del otro.

Cree el control <StackPanel> después del cuadro de lista y colóquelo en la fila 1 y la columna 1 de la cuadrícula. Agregue otro atributo denominado Margin con un valor de 5,0,0,0:

<Grid.RowDefinitions>
    <RowDefinition Height="Auto" />
    <RowDefinition Height="*" />
</Grid.RowDefinitions>

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

<Label>Names</Label>
<ListBox Grid.Row="1" x:Name="lstNames" />

<StackPanel Grid.Row="1" Grid.Column="1" Margin="5,0,0,0">
    
</StackPanel>

El atributo Margin se usó anteriormente en la cuadrícula, pero solo colocamos un valor (10). Ahora hemos usado un valor de 5,0,0,0 en el panel StackPanel. El margen es un tipo Thickness y puede interpretar ambos valores. El grosor define el espacio alrededor de cada lado de un marco rectangular (a la izquierda, arriba, a la derecha y abajo, respectivamente). Si el valor del margen es único, se usa para los cuatro lados.

Ahora, cree un control <TextBox> y <Button> en <StackPanel>.

<StackPanel Grid.Row="1" Grid.Column="1" Margin="5,0,0,0">
    <TextBox x:Name="txtName" />
    <Button x:Name="btnAdd" Margin="0,5,0,0">Add Name</Button>
</StackPanel>

Se ha completado el diseño de la ventana, pero la aplicación no tiene ninguna lógica que le permita ser funcional. Ahora debemos enlazar los eventos de control al código y conseguir que la aplicación haga algo.

Adición de código para el evento de clic

El objeto <Button> que creamos tiene un evento Click que se genera cuando el usuario presiona el botón. Puede suscribirse a este evento y agregar código para incluir un nombre en el cuadro de lista. Al igual que puede establecer una propiedad en un control mediante la adición de un atributo XAML, puede emplear un atributo XAML para suscribirse a un evento. Establezca el atributo Click en ButtonAddName_Click.

<StackPanel Grid.Row="1" Grid.Column="1" Margin="5,0,0,0">
    <TextBox x:Name="txtName" />
    <Button x:Name="btnAdd" Margin="0,5,0,0" Click="ButtonAddName_Click">Add Name</Button>
</StackPanel>

Ahora debe generar el código del controlador. Haga clic con el botón derecho en ButtonAddName_Click y seleccione Ir a definición. Esta acción genera un método en el código subyacente que coincide con el nombre del controlador especificado.

private void ButtonAddName_Click(object sender, RoutedEventArgs e)
{

}

Private Sub ButtonAddName_Click(sender As Object, e As RoutedEventArgs)

End Sub

Agregue el código siguiente para llevar a cabo estos tres pasos:

1. Asegúrese de que el cuadro de texto contiene un nombre.
2. Valide que el nombre especificado en el cuadro de texto no existe todavía.
3. Agregue el nombre al cuadro de lista.

private void ButtonAddName_Click(object sender, RoutedEventArgs e)
{
    if (!string.IsNullOrWhiteSpace(txtName.Text) && !lstNames.Items.Contains(txtName.Text))
    {
        lstNames.Items.Add(txtName.Text);
        txtName.Clear();
    }
}

Private Sub ButtonAddName_Click(sender As Object, e As RoutedEventArgs)
    If Not String.IsNullOrWhiteSpace(txtName.Text) And Not lstNames.Items.Contains(txtName.Text) Then
        lstNames.Items.Add(txtName.Text)
        txtName.Clear()
    End If
End Sub

Ejecutar la aplicación

Ahora que el evento se ha codificado, puede ejecutar la aplicación si presiona la tecla F5, o bien selecciona Depurar>Iniciar depuración en el menú. Se mostrará la ventana y podrá escribir un nombre en el cuadro de texto y, después, agregarlo si hace clic en el botón.

Pasos siguientes

Más información sobre Windows Presentation Foundation