Compartir a través de

Tutorial: Creación de una aplicación de 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 de 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 tutorial de WPF

Prerrequisitos

  • Visual Studio 2026
    • Seleccione la carga de trabajo de desarrollo de escritorio .NET
    • Seleccione el componente individual .NET 10

Creación de una aplicación de 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. Abra Visual Studio.

  2. Seleccione Crear un nuevo proyecto.

    captura de pantalla A 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 code language, elija C# o Visual Basic.

  5. En la lista de plantillas, seleccione WPF Application y, a continuación, seleccione Next.

    Importante

    No seleccione la plantilla WPF Application (.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 A del cuadro de diálogo

  7. Por último, en la ventana Adicional, Seleccione .NET 10.0 (Soporte técnico a largo plazo) para la configuración Framework y, a continuación, seleccione Crear.

    A captura de pantalla del cuadro de diálogo

Después de 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 que debe conocer cuando crea 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 de Explorador de soluciones, se muestran las opciones relacionadas 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 CÓDIGO XAML es ligeramente diferente, específicamente el atributo x:Class="..". XAML en Visual Basic usa el nombre de 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 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 importa el espacio de nombres XML para todo el archivo. En este caso, se corresponde con 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 espacio de nombres declara el prefijo y asigna a los objetos declarados en el espacio de nombres de código por su proyecto.

  • atributo

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

  • atributo

    Cualquier atributo normal que declares en el objeto XAML establece una propiedad de ese objeto. En este caso, el atributo establece la 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 vacía

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

  3. Cambie el tamaño de la ventana estableciendo a y a .

    <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 potente sistema de diseño 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 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 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 elemento : .

    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 definido 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 elemento dentro del elemento , después de las definiciones de fila y columna. Establezca el contenido del elemento en el valor de cadena 

    <Grid Margin="10">

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

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

    <Label>Names</Label>

</Grid>

    define el contenido . Algunos controles comprenden cómo controlar el contenido, otros no. El contenido de un control se asigna a la propiedad . Si estableces el contenido a través de la sintaxis de atributo XAML, usa este formato: . Ambas maneras logran lo mismo, estableciendo el contenido de la etiqueta para mostrar el texto .

    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 atributo del primero de a .

    El 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: y . Si omite estas propiedades del control, los valores predeterminados son 0. Por lo tanto, el control se coloca en fila y columna de la cuadrícula. Intente cambiar la ubicación del control estableciendo el atributo a :

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

Observe que la etiqueta se movió a la segunda columna. Puede usar las propiedades adjuntas y 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 control debajo del control.

  2. Establezca la propiedad en .

  3. Establezca la propiedad en .

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

  2. Establezca la propiedad en .

  3. Establezca la propiedad en .

  4. Establecer en .

    <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 atributo en la cuadrícula, pero solo introdujo un único valor, . Este margen tiene un valor de , que es muy diferente de . La propiedad margin es un 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 , cree un control .

    1. Establezca la propiedad en .

  6. Por último, después de , todavía dentro de , cree un controlador.

    1. Establezca la propiedad en .
    2. Establecer en .
    3. Establezca el contenido en .

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 objeto que creó tiene un 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 .

  2. Establezca el atributo en .

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