Nota
El acceso a esta página requiere autorización. Puede intentar iniciar sesión o cambiar directorios.
El acceso a esta página requiere autorización. Puede intentar cambiar los directorios.
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:
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:
- En el cuadro Nombre del proyecto , escriba Nombres.
- Active la casilla Colocar solución y proyecto en el mismo directorio .
- Opcionalmente, elija otra ubicación para guardar el código.
- 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:
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, elxmlns:local
espacio de nombres declara el prefijolocal
y asigna a los objetos declarados en el espacio de nombres de códigoNames
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 claseNames.MainWindow
en C# y la claseMainWindow
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 laWindow.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
enNames
.Cambie el tamaño de la ventana estableciendo
Height
a180
yWidth
a260
.<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 deNames
:<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 contenidoNames
. Algunos controles comprenden cómo controlar el contenido, otros no. El contenido de un control se asigna a laContent
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 textoNames
.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*
aAuto
.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
en1
.Establezca la propiedad
x:Name
enlstNames
.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
en1
.Establezca la propiedad
Grid.Column
en1
.Establecer
Margin
en5,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 de5,0,0,0
, que es muy diferente de10
. La propiedad margin es unThickness
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 />
.- Establezca la propiedad
x:Name
entxtName
.
- Establezca la propiedad
Por último, después de
<TextBox>
, todavía dentro de<StackPanel>
, cree un<Button>
controlador.- Establezca la propiedad
x:Name
enbtnAdd
. - Establecer
Margin
en0,5,0,0
. - Establezca el contenido en
Add Name
.
- Establezca la propiedad
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 .
Click
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>
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.
Contenido relacionado
.NET Desktop feedback