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

2025-05-07

En este tutorial, aprenderá a usar Visual Studio para crear una nueva aplicación de Windows Presentation Foundation (WPF). Con Visual Studio, agregará controles a ventanas para diseñar la interfaz de usuario de la aplicación y controlará los eventos de entrada de esos controles para interactuar con el usuario. Al final de este tutorial, tendréis una aplicación sencilla que añade nombres a un cuadro de lista.

En este tutorial, usted hará lo siguiente:

Cree una nueva aplicación WPF.
Agregar controles a una ventana.
Gestione los eventos para proporcionar la funcionalidad de la aplicación.
Ejecute la aplicación.

Esta es una vista previa de la aplicación creada mientras sigue este tutorial:

Aplicación de ejemplo finalizada para el tutorial de WPF

Prerrequisitos

Visual Studio 2022, versión 17.12 o versiones posteriores
- Selecciona la carga de trabajo de desarrollo de escritorio .NET
- Selección del componente individual de .NET 9

Creación de una aplicación WPF

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

Abre Visual Studio.
Seleccione Crear un nuevo proyecto.
En el cuadro Buscar plantillas , escriba wpf y presione Entrar.
En la lista desplegable lenguaje de código , elija C# o Visual Basic.
En la lista de plantillas, seleccione Aplicación WPF y, a continuación, seleccione Siguiente.

Importante

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

En la imagen siguiente se muestran las plantillas de proyecto de C# y Visual Basic .NET. Si aplicó el filtro de lenguaje de código , solo se muestra la plantilla de ese idioma.
En la ventana Configurar el nuevo proyecto , haga lo siguiente:
1. En el cuadro Nombre del proyecto , escriba Nombres.
2. Active la casilla Colocar solución y proyecto en el mismo directorio .
3. Opcionalmente, elija otra ubicación para guardar el código.
4. Haz clic en el botón Siguiente.
En la ventana Información adicional , seleccione .NET 9.0 (Compatibilidad con términos estándar) para La plataforma de destino. Seleccione el botón Crear.

Una vez generada la aplicación, Visual Studio debe abrir la ventana del diseñador XAML para la ventana predeterminada , MainWindow. Si el diseñador no está visible, haga doble clic en el archivo MainWindow.xaml en la ventana Explorador de soluciones para abrir el diseñador.

Partes importantes de Visual Studio

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

Los componentes importantes de Visual Studio que debe conocer al crear un proyecto de WPF para .NET

Explorador de soluciones

Todos los archivos del proyecto, código, ventanas, recursos, aparecen en esta ventana.
Propiedades

En esta ventana se muestran los valores de propiedad que puede configurar en función del elemento seleccionado. Por ejemplo, si selecciona un elemento en el Explorador de soluciones, verá la configuración de propiedades relacionada con el archivo. Si selecciona un objeto en el Diseñador, verá la configuración del elemento . Con respecto a la imagen anterior, se seleccionó la barra de título de la ventana en el diseñador.
Caja de herramientas

El cuadro de herramientas contiene todos los controles que puede agregar a una superficie de diseño. Para agregar un control a la superficie actual, haga doble clic en el control o arrastre y coloque el control en la superficie. En su lugar, es habitual usar la ventana del editor de código XAML para diseñar una interfaz de usuario (UI), mientras usa la ventana del diseñador XAML para obtener una vista previa de los resultados.
Diseñador XAML

Este es el diseñador de 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 componer visualmente la interfaz de usuario de la aplicación.

Cuando el diseñador y el editor están visibles, los cambios en uno se reflejan en el otro.

Al seleccionar elementos en el diseñador, la ventana Propiedades muestra las propiedades y atributos sobre ese objeto.
Editor de código XAML

Este es el editor de código XAML para un documento XAML. El editor de código XAML es una manera de crear la interfaz de usuario a mano sin un diseñador. El diseñador puede establecer automáticamente las propiedades en un control cuando se agrega el control en el diseñador. El editor de código XAML proporciona mucho más control.

Cuando el diseñador y el editor están visibles, los cambios en uno se reflejan en el otro. A medida que mueve el cursor en el editor de código, la ventana Propiedades muestra las propiedades y atributos de ese objeto.

Examen del XAML

Una vez creado el proyecto, el editor de código XAML es visible 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 la ventana 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>

Importante

Si estás codificando en Visual Basic, el XAML es ligeramente diferente, específicamente el x:Class=".." atributo . XAML en Visual Basic utiliza el nombre de la clase del objeto y omite el espacio de nombres de la clase.

Para comprender mejor el XAML, vamos a desglosarlo. XAML es simplemente XML que WPF procesa para crear una interfaz de usuario. Para comprender XAML, debe estar familiarizado, como mínimo, con los conceptos básicos de XML.

La raíz <Window> del documento representa el tipo de objeto descrito por el archivo XAML. Hay ocho atributos declarados y, por lo general, pertenecen a tres categorías:

Espacios de nombres XML

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

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

Este atributo asigna el <Window> al tipo definido por su código: el archivo MainWindow.xaml.cs o MainWindow.xaml.vb, que es la clase Names.MainWindow en C# y la clase MainWindow en Visual Basic.
atributo Title

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

Cambiar la ventana

En nuestra aplicación de ejemplo, esta ventana es demasiado grande y la barra de título no es descriptiva. Vamos a solucionarlo.

En primer lugar, ejecute la aplicación presionando la tecla F5 o seleccionando Depurar> en el menú.

Verá la ventana predeterminada generada por la plantilla mostrada, sin ningún control y un título de MainWindow:
Cambie el título de la ventana configurando Title en Names.

Cambie el tamaño de la ventana estableciendo Height a 180 y Width a 260.

<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 sistema de diseño eficaz con muchos controles de diseño diferentes. Los controles de diseño ayudan a colocar y ajustar el tamaño de los controles secundarios, e incluso pueden hacerlo automáticamente. El control de diseño predeterminado que se proporciona en este XAML es el <Grid> control.

El control de cuadrícula permite definir filas y columnas, como una tabla, y colocar controles dentro de los límites de una combinación específica de fila y columna. Puede tener tantos controles secundarios u otros controles de diseño como desee añadir a la cuadrícula. Por ejemplo, puede colocar otro <Grid> control en una combinación específica de filas y columnas, y esa nueva cuadrícula puede definir más filas y columnas y tener sus propios elementos secundarios.

El control de cuadrícula coloca sus controles secundarios en filas y columnas. Una cuadrícula siempre tiene declarada una sola fila y columna, lo que significa que la cuadrícula de forma predeterminada es una sola celda. Eso no te da mucha flexibilidad al colocar controles.

Ajuste el diseño de la cuadrícula para los controles necesarios para esta aplicación.

Agregue un nuevo atributo al <Grid> elemento : Margin="10".

Esta configuración acerca la cuadrícula desde los bordes de la ventana y hace que se vea un poco más agradable.

Defina dos filas y dos columnas, dividiendo 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:

Agregar el primer control

Ahora que se ha configurado la cuadrícula, podemos empezar a agregar controles a ella. Primero, comience con el control de etiquetas.

Cree un nuevo <Label> elemento dentro del <Grid> elemento , después de las definiciones de fila y columna. Establezca el contenido del elemento en el 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 comprenden cómo controlar el contenido, otros no. El contenido de un control se asigna a la Content propiedad . Configurando el contenido mediante la sintaxis de atributos XAML, usaría este formato: <Label Content="Names" />. Ambas maneras logran lo mismo, estableciendo el contenido de la etiqueta para mostrar el texto Names.

Observe que la etiqueta ocupa la mitad de la ventana, ya que se colocó automáticamente en la primera fila y columna de la cuadrícula. Para nuestra primera fila, no necesitamos tanto espacio porque solo vamos a usar esa fila para la etiqueta.
Cambie el Height atributo del primero <RowDefinition> de * a Auto.

El Auto valor ajusta automáticamente el tamaño de 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 que el diseñador muestra ahora la etiqueta que ocupa una pequeña cantidad del alto disponible. Ahora hay más espacio para alojar la siguiente fila.

Selección de ubicación del control

Hablemos de la disposición de los controles. La etiqueta creada 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 filas y columnas comienza en 0 e incrementa en 1. El control no sabe nada sobre la cuadrícula y el control no define ninguna propiedad para controlar su colocación dentro de la cuadrícula.

¿Cómo se indica a un control que use una fila o columna diferente cuando el control no tenga conocimiento de la cuadrícula? ¡Propiedades adjuntas! La cuadrícula aprovecha el potente sistema de propiedades proporcionado por WPF.

El control de cuadrícula define nuevas propiedades que los controles secundarios pueden asociarse a sí mismos. Las propiedades no existen realmente en el propio control, están disponibles para el control una vez que se agrega a la cuadrícula.

La cuadrícula define dos propiedades para determinar la posición de fila y columna de un control secundario: Grid.Row y Grid.Column. Si se omiten estas propiedades del control, se supone que tienen los valores predeterminados de 0, por lo que el control se coloca en fila 0 y columna 0 de la cuadrícula. Intente cambiar la ubicación del control <Label> estableciendo el atributo Grid.Column a 1:

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

Observe que la etiqueta se movió a la segunda columna. Puede usar las Grid.Row propiedades adjuntas y Grid.Column para colocar los controles siguientes que crearemos. Por ahora, restaure la etiqueta en la columna 0.

Crear el cuadro de lista de nombres

Ahora que la cuadrícula tiene el tamaño correcto y la etiqueta está creada, añade un control de cuadro de lista en la fila debajo de la etiqueta.

Declare el <ListBox /> control debajo del <Label> control.
Establezca la propiedad Grid.Row en 1.
Establezca la propiedad x:Name en lstNames.

Una vez que se llama un control, se puede hacer referencia a él en el código subyacente. El nombre se asigna al control con el x:Name atributo .

Este es el aspecto que debe tener el XAML:

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

Adición de los controles restantes

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

El panel de pila difiere de la cuadrícula en la forma en que se colocan los controles. Aunque se le dice a la cuadrícula dónde desea que los controles estén con las propiedades adjuntas Grid.Row y Grid.Column, el Panel apilador funciona automáticamente mediante la distribución secuencial de cada uno de sus controles secundarios. "Apila" cada control uno después del otro.

Declare el <StackPanel> control debajo del <ListBox> control.
Establezca la propiedad Grid.Row en 1.
Establezca la propiedad Grid.Column en 1.
Establecer Margin en 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 Margin atributo se usó anteriormente en la cuadrícula, pero solo se coloca en un solo valor, 10. Este margen tiene un valor de 5,0,0,0, que es muy diferente de 10. La propiedad margin es un Thickness tipo y puede interpretar ambos valores. Un grosor define el espacio alrededor de cada lado de un marco rectangular, izquierdo, superior, derecho, inferior, respectivamente. Si el valor del margen es un valor único, usa ese valor para los cuatro lados.
Dentro del control <StackPanel>, cree un control <TextBox />.
1. Establezca la propiedad x:Name en txtName.
Por último, después de <TextBox>, todavía dentro de <StackPanel>, cree un <Button> controlador.
1. Establezca la propiedad x:Name en btnAdd.
2. Establecer Margin en 0,5,0,0.
3. Establezca el contenido en Add Name.

Este es el aspecto que debe tener el XAML:

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

El diseño de la ventana está completo. Sin embargo, nuestra aplicación no tiene ninguna lógica en ella para ser realmente funcional. A continuación, necesitamos enlazar los eventos de control para codificar y obtener que la aplicación haga algo realmente.

Adición de código para el evento Click

El <Button> que creamos tiene un Click evento que se genera cuando el usuario presiona el botón. Puede suscribirse a este evento y agregar código para agregar un nombre al cuadro de lista. Los atributos XAML se usan para suscribirse a eventos igual que se usan para establecer propiedades.

Localice el control <Button>.

Establezca el atributo en .ClickButtonAddName_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>

Genere el código del controlador de eventos. 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 proporcionado.
```
private void ButtonAddName_Click(object sender, RoutedEventArgs e)
{

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

End Sub
```

A continuación, agregue el código siguiente para realizar estos tres pasos:

Asegúrese de que el cuadro de texto contiene un nombre.
Compruebe que el nombre especificado en el cuadro de texto aún no existe.
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

Ejecución de la aplicación

Ahora que se controla el evento, ejecute la aplicación. Se muestra la ventana y puede escribir un nombre en el cuadro de texto y, a continuación, agregarlo haciendo clic en el botón.

Ejecución de una aplicación de Windows Presentation Foundation (WPF) para .NET.

Compartir a través de