Compartir a través de

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

En este tutorial, aprenderá a usar Visual Studio para crear una aplicación de Windows Presentation Foundation (WPF). Con Visual Studio, agregará controles a ventanas y controlará eventos. 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

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.

  1. Abre Visual Studio.

  2. Seleccione Crear un nuevo proyecto.

    Captura de pantalla del cuadro de diálogo de inicio de Visual Studio 2026. El botón

  3. En el cuadro Buscar plantillas , escriba wpf y espere a que aparezcan los resultados de búsqueda.

  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, 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 ha aplicado el filtro de lenguaje de código , se muestra la plantilla correspondiente.

    Captura de pantalla del cuadro de diálogo

  6. En la ventana Configurar el nuevo proyecto , establezca el nombre del proyecto en Nombres y seleccione Siguiente.

    También puede guardar su proyecto en otra carpeta ajustando la ruta de ubicación.

    Captura de pantalla del cuadro de diálogo

  7. Por último, en la ventana Información adicional , seleccione .NET 10.0 (Compatibilidad a largo plazo) para la configuración marco y, a continuación, seleccione Crear.

    Captura de pantalla del cuadro de diálogo

Una vez que Visual Studio genera la aplicación, abre 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 2026 debe saber al crear un proyecto de WPF para .NET.

  1. Explorador de soluciones

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

  2. Propiedades

    En esta ventana se muestran los valores de propiedad que puede configurar en función del contexto del elemento seleccionado. Por ejemplo, si selecciona un elemento en el Explorador de soluciones, se mostrará la configuración relacionada con el archivo. Si se selecciona un objeto en el Diseñador , se muestran las propiedades del control o ventana.

  3. 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 un control o arrastre y coloque el control en el diseñador. 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 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.

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

Después de crear el proyecto, se abre el editor de código XAML. Muestra 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. El archivo declara ocho atributos y, por lo general, pertenecen a tres categorías:

  • Espacios de nombres XML

    Un espacio de nombres XML proporciona estructura al XML. Determina el contenido XML que puede declarar en el archivo.

    El atributo principal xmlns importa el espacio de nombres XML para todo el archivo. 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 que declares 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.

  1. 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, sin ningún control y un título de MainWindow:

    Una aplicación WPF en blanco

  2. Cambie el título de la ventana configurando Title en Names.

  3. 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 proporcionado 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 agregar cualquier número de controles secundarios u otros controles de diseño 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. Esa configuración predeterminada no proporciona mucha flexibilidad en la colocación de 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 acerca la cuadrícula desde los bordes de la ventana y hace que se vea 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. El diseñador XAML muestra cada fila y columna:

    Una aplicación WPF con el margen establecido en una cuadrícula

Agregar el primer control

Ahora que la cuadrícula está configurada, puede empezar a agregar controles a ella. En primer lugar, agregue 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 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 . Si estableces el contenido a través de la sintaxis de atributo XAML, usa este formato: <Label Content="Names" />. Ambas maneras logran lo mismo, estableciendo el contenido de la etiqueta para mostrar el texto Names.

    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 la primera fila, no necesitas mucho espacio, porque solo vas a usarla para la etiqueta.

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

    El diseñador ahora muestra la etiqueta ocupando una pequeña parte de la altura disponible. Hay más espacio para que la siguiente fila se ocupe.

    Una aplicación WPF con el margen establecido en una cuadrícula y un control de etiqueta en la primera fila

Selección de ubicación del control

Hablemos de la disposición de los controles. La etiqueta que creó en la sección anterior se coloca 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 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 en realidad no existen en el control mismo, pero se vuelven 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 omite estas propiedades del control, los valores predeterminados son 0. Por lo tanto, 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 va a crear. 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.

  1. Declare el <ListBox /> control debajo del <Label> control.

  2. Establezca la propiedad Grid.Row en 1.

  3. Establezca la propiedad x:Name en lstNames.

    Una vez que se llama un control, puede hacer referencia a él en el código subyacente. Asigne el nombre al control mediante 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

Agregue un cuadro de texto y un botón. El usuario usa estos controles para escribir un nombre para agregar al cuadro de lista. En lugar de crear más filas y columnas en la cuadrícula para organizar estos controles, coloque estos controles en el <StackPanel> control de diseño.

El panel de pila difiere de la cuadrícula en la forma en que coloca los controles. Mientras usa las propiedades adjuntas Grid.Row y Grid.Column para indicar a la rejilla dónde desea los controles, el panel apilador funciona automáticamente. Organiza cada uno de sus controles secundarios secuencialmente. "Apila" cada control uno después del otro.

  1. Declare el <StackPanel> control debajo del <ListBox> control.

  2. Establezca la propiedad Grid.Row en 1.

  3. Establezca la propiedad Grid.Column en 1.

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

    Anteriormente usó el Margin atributo en la cuadrícula, pero solo introdujo un único 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.

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

    1. Establezca la propiedad x:Name en txtName.

  6. 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, la aplicación no tiene ninguna lógica para ser realmente funcional. A continuación, debes 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> objeto que creó tiene un Click evento que la aplicación genera cuando el usuario presiona el botón. Suscríbase a este evento y agregue código para agregar un nombre al cuadro de lista. Usa atributos XAML para suscribirse a eventos, al igual que los usas para establecer propiedades.

  1. Localice el control <Button>.

  2. Establezca el Click atributo ButtonAddName_Clicken .

    <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 que proporcionó.

    private void ButtonAddName_Click(object sender, RoutedEventArgs e)
{

}

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

End Sub

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

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

Después de controlar el evento, ejecute la aplicación. Aparece la ventana y puede escribir un nombre en el cuadro de texto. Para agregar el nombre, seleccione el botón .

Ejecución de una aplicación WPF para .NET en Visual Studio 2026.

Contenido relacionado

  • Last updated on