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

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, tiene una aplicación sencilla que agrega nombres a un cuadro de lista.

En este tutorial ha:

• Cree una nueva aplicación WPF.
• Agregar controles a una ventana.
• Controle los eventos de control para proporcionar funcionalidad de la aplicación.
• Ejecutar la aplicación.

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

Requisitos previos

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

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 aplicó el filtro de lenguaje de código, solo se muestra la plantilla de ese idioma.

   

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

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

1. Explorador de soluciones

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

2. 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á los valores de las propiedades relacionadas con el archivo. Si selecciona un objeto en el Diseñador, verá la configuración del elemento . Con respecto a la imagen anterior, la barra de título de la ventana se seleccionó en el diseñador.

3. Cuadro 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.

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 componer visualmente la interfaz de usuario 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, la ventana Propiedades muestra las propiedades y atributos sobre 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 establecer automáticamente las propiedades en un control cuando se agrega el 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. A medida que navega por el símbolo de intercalación de texto en el editor de código, la ventana Propiedades muestra las propiedades y atributos sobre 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 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 usa el nombre de clase del objeto y omite el espacio de nombres en la clase .

Para comprender mejor el XAML, vamos a desglosarlo. XAML es simplemente XML que WPF procesa para crear una interfaz de usuario. Para entender 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, que por lo general pertenecen a tres categorías:

• espacios de nombres XML

  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 al <Window> tipo definido por el código: el archivo MainWindow.xaml.cs o MainWindow.xaml.vb , que es la Names.MainWindow clase en C# y MainWindow en Visual Basic.

• 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

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

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

   Verá la ventana predeterminada generada por la plantilla mostrada, sin ningún control y un título de MainWindow:

   

2. Cambie el título de la ventana estableciendo en TitleNames.

3. Cambie el tamaño de la ventana estableciendo en Width180 y Height en 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 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 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 cualquier número de controles secundarios u otros controles de diseño agregados 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, de forma predeterminada, la cuadrícula es una sola celda. Esto no ofrece mucha flexibilidad a la hora de colocar controles.

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

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

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

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

3. 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 configurado la cuadrícula, podemos empezar a agregar controles a ella. Empiece por el control de etiqueta.

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

   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. Pero no necesitamos tanto espacio para la primera fila porque solo vamos a usarla para la etiqueta.

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

   

Colocación de controles

Vamos a hablar ahora sobre la colocación de 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 tiene información sobre la cuadrícula y no define ninguna propiedad para controlar su colocación en la cuadrícula.

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.

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 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 movió 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.

1. Declare el <ListBox /> control bajo el <Label> control .

2. Establezca la propiedad Grid.Row en 1.

3. Establezca la propiedad x:Name en 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.

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>

Incorporació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 StackPanel difiere de la cuadrícula en la forma en la que se colocan los controles. Aunque se indica a la cuadrícula dónde desea que los controles estén con las Grid.Row propiedades adjuntas y Grid.Column , el panel de pila funciona automáticamente mediante la distribución secuencial de cada uno de sus controles secundarios. Cada control "apila" después del otro.

1. Declare el <StackPanel> control bajo el <ListBox> control .

2. Establezca la propiedad Grid.Row en 1.

3. Establezca la propiedad Grid.Column en 1.

4. Establezca la Margin como 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). 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. 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.

5. Dentro del <StackPanel> control, cree un <TextBox /> control .

   1. Establezca la propiedad x:Name en txtName.

6. Por último, después de , <TextBox>todavía dentro de <StackPanel>, cree un <Button> control .

   1. Establezca la propiedad x:Name en btnAdd.
   2. Establezca la Margin como 0,5,0,0.
   3. Establezca el contenido Add Nameen .

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>

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. Los atributos XAML se usan para suscribirse a eventos igual que se usan para establecer propiedades.

1. Busque el <Button> control .

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

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

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

Ejecución de la aplicación

Ahora que se controla el evento, ejecute la aplicación. 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.

Contenido relacionado

• Más información sobre Windows Presentation Foundation
• Introducción a XAML