Tutorial de WPF para principiantes

โšก Resumen inteligente

WPF (Windows Presentaciรณn Foundation) es Microsoftmarco de trabajo para construir riqueza Windows Aplicaciones de escritorio. Los principiantes aprenderรกn cรณmo XAML, el enlace de datos y los grรกficos acelerados por hardware se combinan para crear interfaces de usuario escalables y visualmente atractivas con menos cรณdigo.

  • ๐Ÿงญ Zapata: WPF es un marco de interfaz de usuario basado en vectores y con tecnologรญa DirectX dentro de la plataforma .NET.
  • ???? Marcado XAML: La sintaxis XML declarativa separa el diseรฑo de la interfaz de la lรณgica de negocio de C#.
  • ๐Ÿงฑ Architectura: PresentationFramework, PresentationCore y Milcore cooperan por encima de DirectX para la renderizaciรณn.
  • ๐Ÿ”— El enlace de datos: El enlace integrado conecta los controles con las fuentes de datos y potencia el patrรณn MVVM.
  • ๐Ÿ› ๏ธ Inicio prรกctico: Las plantillas de Visual Studio te permiten crear y ejecutar tu primera aplicaciรณn WPF en siete pasos.
  • ๐Ÿš€ Relevancia moderna: WPF es de cรณdigo abierto y viene incluido con .NET 10 bajo soporte a largo plazo.

Tutorial de WPF para principiantes

ยฟQuรฉ es WPF?

WPF es un marco para construir Windows aplicaciones que permiten a los desarrolladores crear interfaces de usuario ricas con animaciones 3D y colores intensos utilizando una menor complejidad de cรณdigo. Es un motor de renderizado basado en vectores que utiliza la aceleraciรณn de hardware de las tarjetas grรกficas modernas, lo que hace que la interfaz de usuario sea mรกs rรกpida y altamente escalable. WPF significa Windows Presentaciรณn Foundation.

WPF puede considerarse una evoluciรณn de WinForms. Proporciona un sistema de visualizaciรณn grรกfica fรกcil de usar para Windows y ofrece una clara separaciรณn entre la interfaz de usuario y la lรณgica de negocio.

Las aplicaciones WPF se suelen implementar como programas de escritorio independientes, y tambiรฉn pueden alojarse como objetos integrados en otras aplicaciones.

ยฟPor quรฉ WPF?

Existen muchas razones para utilizar la plataforma WPF. Algunas de las mรกs destacadas son:

  • Una plataforma ideal para usar si necesita trabajar con varios tipos de medios
  • WPF te permite crear una interfaz de usuario con temas personalizados. Tambiรฉn te ayuda cuando necesitas cargar una parte de la interfaz de usuario o quieres vincular datos XML.
  • Le permite aprovechar la gran biblioteca de clases .NET tal como estรก construida .NET
  • Independencia de la resoluciรณn, por lo que las aplicaciones desarrolladas con WPF pueden ejecutarse en pantallas pequeรฑas de tabletas o en un monitor de 20 pulgadas.
  • WPF se basa en DirectX en lugar de WinAPI. Utiliza el sistema grรกfico del equipo cliente, ofreciendo asรญ una mayor potencia de renderizado grรกfico.
  • Admite un modelo de documento de flujo que permite una calidad de maquetaciรณn propia de la autoediciรณn.
  • La apariencia y el comportamiento estรกn dรฉbilmente acoplados. Esto permite a los diseรฑadores y desarrolladores trabajar en dos modelos separados.
  • En el entorno WPF, puedes diseรฑar herramientas grรกficamente utilizando documentos XML sencillos en lugar de analizar cรณdigo.
  • Le permite utilizar la aceleraciรณn de hardware para dibujar la GUI, para un mejor rendimiento

A continuaciรณn, veamos cรณmo ha evolucionado el marco a lo largo del tiempo.

Historia de WPF

Windows 1.0 fue el primer entorno GUI de MicrosoftFuncionaba como una capa superpuesta a DOS, utilizando los sistemas GDI y USER para los grรกficos y la interfaz de usuario.

DirectX se presentรณ en 1995 como un sistema grรกfico de alto rendimiento destinado a juegos y otros entornos relacionados con los grรกficos. A lo largo de los aรฑos, se lanzaron muchas versiones, y DirectX 9 proporcionรณ una biblioteca que podรญa utilizarse con cรณdigo .NET administrado.

versiรณn WPF Aรฑo de lanzamiento Versiรณn .Net Versiรณn de Visual Studio Caracteristicas
3.0 2006 3.0 N/A Versiรณn inicial.
Sin embargo, el desarrollo de WPF se puede realizar con VS 2005.
3.5 2007 3.5 contra 2008 Modificaciรณn y mejoras en:
Modelo de aplicaciรณn, vinculaciรณn, controles, documentos, anotaciones y elementos de interfaz de usuario 3D.
3.5 SP1 2008 3.5 SP1 N/A Soporte de pantalla de presentaciรณn nativa. Nuevo control del navegador web, compatibilidad con sombreadores de pรญxeles DirectX.
4.0 2010 4.0 contra 2010 Nuevos controles: Calendario, DataGrid, DatePicker. Compatibilidad con multitรกctil y manipulaciรณn.
4.5 2012 4.5 contra 2012 Inicio mรกs rรกpido, rendimiento mejorado al mostrar grandes conjuntos de datos.
Nuevo control Ribbon e interfaz INotifyDataErrorInfo para la validaciรณn de datos.
4.5.1 2013 4.5.1 contra 2013 Pequeรฑas mejoras en el rendimiento y la fiabilidad.
4.5.2 2014 4.5.2 NA Sin cambios importantes
4.6 2015 4.6 contra 2015 Soporte de ventana infantil transparente
Mejoras HDPI y tรกctiles
4.8 2019 4.8 contra 2019 รšltima versiรณn principal de .NET Framework, con correcciones para pantallas de alta resoluciรณn y mejoras de accesibilidad.
.NET Core 3.0 en adelante 2019-presente .NET Core 3.0 a .NET 10 VS 2019/2022 WPF se convierte en cรณdigo abierto y se incluye con .NET moderno (las aplicaciones permanecen Windows-solo).

WPF ya no se versiona por separado de .NET. Desde 2019, se distribuye como un componente de cรณdigo abierto de la plataforma .NET moderna, y la versiรณn actual estรก incluida en .NET 10, que se lanzรณ en noviembre de 2025 como una versiรณn de soporte a largo plazo (LTS).

Caracterรญsticas de WPF

El diagrama que aparece a continuaciรณn agrupa las principales funcionalidades de WPF, que se detallan mรกs adelante.

Caracterรญsticas de WPF
Caracterรญsticas de WPF
  • Documentos e impresiรณn
  • Seguridad, accesibilidad y localizaciรณn
  • Ofrece interoperabilidad con Windows Controles de formularios
  • Direct3D se utiliza en aplicaciones grรกficas donde el rendimiento es importante
  • Utiliza el hardware de la tarjeta de video para renderizar.
  • Los grรกficos vectoriales permiten escalar la aplicaciรณn sin pรฉrdida de calidad.
  • WPF admite un sistema de pรญxeles lรณgicos de punto flotante y color ARGB de 32 bits.
  • Redefinir estilos y plantillas de control
  • Creaciรณn de fuentes internacionales a partir de fuentes compuestas
  • La representaciรณn de texto en WPF aprovecha la tecnologรญa ClearType.
  • Le permite utilizar la tรฉcnica de almacenamiento en cachรฉ de texto pre-renderizado en la memoria de video.
  • Enfoque basado en recursos para cada control.
  • Los temporizadores de presentaciรณn son inicializados y administrados por WPF
  • Tambiรฉn se admite la relaciรณn entre vรญdeo y animaciรณn.
  • En WPF, un estilo es un conjunto de propiedades que deben aplicarse al contenido utilizado para la representaciรณn visual.
  • Las plantillas en WPF te ayudan a cambiar la interfaz de usuario de tu documento.
  • Los comandos son mรกs absolutostract y versiรณn dรฉbilmente acoplada de eventos
  • La compatibilidad con comandos de WPF reduce la cantidad de cรณdigo que necesitamos escribir

Siguiente en este WPF Tutorial de C #Aprenderemos sobre los tipos principales y la infraestructura de WPF.

Tipos de nรบcleos e infraestructuras de WPF

Las clases en WPF se dividen en cuatro tipos diferentes:

  • Elemento de interfaz de usuario
  • MarcoElemento
  • elemento de contenido
  • Elemento de contenido del marco

Estas clases se conocen como clases de elementos base. Proporcionan la base para un modelo de composiciรณn de interfaces de usuario.

Las interfaces de usuario de WPF se componen de elementos que se organizan en una jerarquรญa de รกrbol denominada รกrbol de elementos. El รกrbol de elementos es una forma intuitiva de diseรฑar interfaces de usuario y es la estructura que permite obtener potentes servicios de interfaz de usuario.

XAML

El lenguaje de marcado de aplicaciones extensible, tambiรฉn conocido como "XAML" (que se pronuncia "zammel"), es una forma declarativa de definir interfaces de usuario.

Aquรญ estรก la definiciรณn XAML de un botรณn simple:

<Button
FontSize="16"
HorizontalAlignment="Center"
VerticalAlignment="Center"
>
Say Hello Guru99</Button>

Ventajas de utilizar el lenguaje XAML:

  • XAML separa la apariencia del front-end de la lรณgica del back-end.
  • XAML es el mรฉtodo mรกs sencillo para representar interfaces de usuario
  • XAML funciona eficazmente con herramientas de diseรฑo.

Controla

El marco de trabajo WPF admite muchos controles รบtiles como:

  • Editar controles como TextoBox, ChequeBox, Boton de radio
  • Controles de lista como ListaBox, Vista de lista, Vista de รกrbol
  • Informaciรณn de usuario como etiqueta, WPF ProgressBar, informaciรณn sobre herramientas
  • Acciones como menรบ, botรณn y barra de herramientas
  • Apariencias como borde, imagen WPF y cuadro de visualizaciรณn
  • Cuadros de diรกlogo comunes como OpenFileDialog e PrintDialog.
  • Contenedores como TabControl, ScrollBar y GroupBox
  • Diseรฑos como DockPanel, StackPanel y Grid
  • Navegaciรณn como marco e hipervรญnculo

La apariencia de los controles se puede personalizar con estilos y plantillas sin programaciรณn. Tambiรฉn puede crear un control personalizado derivando una nueva clase a partir de una clase base adecuada.

Apariencia

WPF proporciona una funciรณn para personalizar la apariencia de su aplicaciรณn. Le permite configurar objetos y valores para cosas como fuentes, fondos, etc.

La funciรณn de estilos le permite estandarizar una apariencia especรญfica para todo el producto. Le permite reemplazar la apariencia predeterminada manteniendo su comportamiento predeterminado.

Una plantilla de datos permite controlar la visualizaciรณn predeterminada de los datos vinculados. Mediante temas, se pueden aplicar fรกcilmente los estilos visuales del sistema operativo.

Diseรฑo y paneles

El diseรฑo ayuda a posicionar y dimensionar correctamente los controles. Forma parte del proceso de creaciรณn de la presentaciรณn para el usuario. El framework WPF facilita el proceso de diseรฑo y ofrece una mayor adaptabilidad a la apariencia de la interfaz de usuario.

La infraestructura de diseรฑo se ofrece mediante cinco clases principales: 1) StackPanel 2) DockPanel 3) WrapPanel 4) Grid y 5) Canvas

DISEร‘O

WPF proporciona un sistema grรกfico mejorado:

  • WPF utiliza unidades independientes del dispositivo, lo que permite la independencia de la resoluciรณn y del dispositivo. Cada pรญxel independiente del dispositivo se escala automรกticamente con la configuraciรณn de puntos por pulgada del sistema.
  • WPF utiliza double en lugar de float y admite una gama mรกs amplia de colores
  • El motor de grรกficos WPF estรก diseรฑado de tal manera que puede aprovechar el hardware de grรกficos cuando estรฉ disponible.

Documentos e impresiรณn

El marco WPF ofrece tres tipos de documentos:

  • Documentos fijos: Este tipo de documento admite WYSIWPresentaciรณn de YG.
  • Documentos de flujo: Le permite ajustar y redistribuir el contenido en funciรณn de variables de tiempo de ejecuciรณn, como el tamaรฑo de la ventana y la resoluciรณn del dispositivo.
  • Documentos XPS: Representaciรณn paginada de un documento electrรณnico en formato XML. XPS es un formato de documento abierto y estandarizado.

WPF permite un mejor control del sistema de impresiรณn, incluyendo la impresiรณn remota y las colas de impresiรณn. Ademรกs, los documentos XPS se pueden imprimir directamente sin necesidad de convertirlos a un formato de impresiรณn.

Una vez explicados los elementos bรกsicos, veamos cรณmo encajan estas piezas internamente.

WPF Architectura

WPF forma parte del framework .NET. Contiene cรณdigo tanto administrado como no administrado. Los componentes importantes de la arquitectura WPF se explican en la siguiente figura:

WPF Architectura

WPF Architectura

Componentes de la arquitectura WPF

  • PresentaciรณnMarco: Te ayuda a crear elementos de nivel superior como controles, estilos, diseรฑo, ventanas, etc.
  • PresentaciรณnCoreContiene tipos base como UIElement y Visual, de los cuales se derivan todos los controles y formas en PresentationFramework.dll.
  • CLR: Hace que el proceso de desarrollo sea productivo al ofrecer caracterรญsticas como gestiรณn de la memoria, manejo de errores, etc.
  • Milcore: Milcore es parte del cรณdigo no administrado que ofrece una estrecha integraciรณn con DirectX.
  • DirectX: Es la API de bajo nivel la que renderiza los grรกficos de WPF. DirectX interactรบa con los controladores y renderiza el contenido.
  • Usuario32: Es una API fundamental ampliamente utilizada por muchos programas. Gestiona la memoria y la separaciรณn de procesos. User32 te ayuda a decidir quรฉ elemento se colocarรก en quรฉ lugar de la pantalla.
  • kernel: La entrada se origina como una seรฑal en un controlador de dispositivo en modo kernel y se enruta al proceso correcto conectรกndose con el Windows kernel y Usuario32.

Enlace de datos WPF

El enlace de datos es uno de los conceptos mรกs potentes de WPF. En lugar de escribir cรณdigo que copie manualmente valores entre controles y objetos, se declara una conexiรณn en XAML y WPF mantiene ambos lados sincronizados automรกticamente. Por ejemplo:

<TextBox Text="{Binding Path=StudentName, Mode=TwoWay}" />

WPF admite cuatro modos de enlace:

  • De una sola mano: El control se actualiza cuando cambian los datos de origen.
  • Bidireccional: Los cambios fluyen en ambas direcciones entre el control y la fuente.
  • Una sola vez: El control lee el valor de origen solo una vez, en el momento de la carga.
  • Una forma de obtener la fuente: El control envรญa su valor a la fuente, nunca al revรฉs.

El enlace de datos es tambiรฉn el motor que impulsa el patrรณn MVVM (Modelo-Vista-ViewModel), la arquitectura mรกs comรบn para aplicaciones WPF profesionales, porque permite que la vista permanezca en XAML mientras que la lรณgica reside en clases C# que se pueden probar.

๐Ÿ’ก Consejo: Implementa la interfaz INotifyPropertyChanged en tus clases de datos. Sin ella, la interfaz de usuario no se actualizarรก cuando cambien los valores de las propiedades en el cรณdigo.

Instalaciรณn de WPF

Consulte este enlace para instalar WPF: https://www.guru99.com/download-install-visual-studio.html

A continuaciรณn, en este tutorial sobre aplicaciones WPF, crearemos nuestra primera aplicaciรณn WPF.

ยฟCรณmo crear su primera aplicaciรณn WPF?

En este ejemplo de WPF, desarrollaremos una aplicaciรณn bรกsica. Para ello, comencemos con la implementaciรณn siguiendo los pasos que se muestran en el ejemplo de aplicaciรณn WPF a continuaciรณn.

Paso 1) En Visual Studio, ve a Archivo > Nuevo > Proyecto

Menรบ Archivo de Visual Studio que muestra la opciรณn Nuevo proyecto

Paso 2) En la ventana del nuevo proyecto

  1. Seleccione la aplicaciรณn WPF
  2. Ingrese el nombre como "MyWPF"
  3. haga clic en Aceptar

Nueva ventana de proyecto con la plantilla de aplicaciรณn WPF seleccionada.

Paso 3) Visual Studio crea dos archivos de forma predeterminada

  • Archivo XAML (MainWindow.xaml)
  • Archivo CS (MainWindow.xaml.cs)

Explorador de soluciones que muestra los archivos MainWindow.xaml y MainWindow.xaml.cs

El MainWindow.xaml tiene

  1. Una ventana de diseรฑo
  2. Archivo XAML

Ventana de diseรฑo MainWindow.xaml y editor XAML en Visual Studio

En la ventana XAML, las siguientes etiquetas se escriben de forma predeterminada:

Etiquetas XAML predeterminadas generadas para una nueva ventana WPF

La Cuadrรญcula es el primer elemento por defecto.

El archivo MainWindow.xaml.cs contiene el cรณdigo subyacente correspondiente al archivo de diseรฑo XAML:

Archivo de cรณdigo subyacente MainWindow.xaml.cs para la ventana WPF

Paso 4) En la caja de herramientas,

  1. Arrastra el textoBox elemento a la ventana de diseรฑo
  2. Un textoBox aparecerรก en la ventana de diseรฑo
  3. Verรกs el cรณdigo XAML para el texto.Box adicional

Arrastrar un textoBox desde la caja de herramientas a la ventana de diseรฑo de WPF

Paso 5) Cambia el texto a โ€œPrimer programa WPFโ€.

Editar textoBox Propiedad de texto para el primer programa WPF

Paso 6) Haga clic en el botรณn de Inicio

Botรณn de inicio de Visual Studio para ejecutar la aplicaciรณn WPF.

Paso 7) Verรกs una ventana en la salida.

Se estรก ejecutando la ventana de la aplicaciรณn WPF mostrando el texto del primer programa WPF.

ยกFelicidades! Ha diseรฑado y creado su primera aplicaciรณn WPF. A continuaciรณn, en este tutorial de WPF para principiantes, veremos la diferencia entre WPF y WinForms.

WPF frente a WinForms

WPF WinForms
Es un marco mรกs nuevo, por lo que estรก mรกs en sintonรญa con los estรกndares actuales. Es mรกs antiguo, por lo que estรก mรกs probado y comprobado.
Es flexible y cuenta con numerosas funciones. Permite diseรฑar aplicaciones muy completas sin necesidad de programar ni comprar controles. No es muy completo en cuanto a funciones.
Desarrolladores de 3rd Los controles para fiestas se centran en la compatibilidad con WPF, ya que es el futuro. Hay muchos controles de terceros que puedes comprar u obtener de forma gratuita.
XAML permite crear y editar interfaces grรกficas de usuario fรกcilmente. Permite dividir el trabajo entre un diseรฑador (XAML) y un programador (C#, VB.NET, etc.). In Windows En los formularios, todo el cรณdigo estรก escrito en un solo lugar.
Las habilidades adquiridas con XAML se transfieren directamente a marcos de trabajo mรกs recientes, como WinUI 3, .NET MAUI y Avalonia UI. Las habilidades de WinForms se aplican principalmente a la versiรณn clรกsica. Windows desarrollo de escritorio.
El conjunto de controles integrados de WPF es limitado Los controles integrados son muy potentes

Tipo de aplicaciones creadas con WPF

  • WPF se utiliza para aplicaciones independientes. Windows aplicaciones de escritorio como herramientas empresariales para lรญneas de negocio, paneles de control, terminales de negociaciรณn y software de diseรฑo
  • Windows Los formularios y las pรกginas WPF pueden coexistir en la misma aplicaciรณn
  • Puedes desarrollar aplicaciones con navegaciรณn de pรกgina/ventana.

WPF en .NET moderno

Microsoft WPF se convirtiรณ en cรณdigo abierto en diciembre de 2018, y desde .NET Core 3.0 (2019), el framework se ha incluido en todas las versiones modernas de .NET, hasta .NET 10 inclusive. Migrar una aplicaciรณn a una versiรณn moderna de .NET ofrece un inicio mรกs rรกpido, una implementaciรณn mรกs sencilla mediante la publicaciรณn autรณnoma y acceso a las caracterรญsticas actuales del lenguaje C#, mientras que el modelo de programaciรณn de WPF permanece inalterado.

WPF permanece Windows-solamente. Si estรกs eligiendo un framework de escritorio hoy, esta comparaciรณn te serรก รบtil:

Marco conceptual Mejores para
WPF Maduro y con muchas funciones Windows aplicaciones de escritorio con un enorme ecosistema
Interfaz de usuario de Windows 3 Nuevas aplicaciones dirigidas a los usuarios modernos Windows 11 aspecto y sensaciรณn
.NET MAUI Aplicaciones multiplataforma que abarcan Windows, macOS, Androidy iOS

Debido a que WPF se mantiene activamente y estรก profundamente integrado en el software empresarial, aprenderlo sigue siendo una inversiรณn prรกctica. Una vez que te sientas cรณmodo creando estas aplicaciones, vale la pena practicar las mรกs comunes. Preguntas de entrevista sobre WPF para consolidar conceptos como XAML, el enlace de datos y el รกrbol visual.

Preguntas Frecuentes

Necesitas XAML para diseรฑar la interfaz y C# (o VB.NET) para la lรณgica de la aplicaciรณn. Un conocimiento bรกsico de la programaciรณn orientada a objetos y de la biblioteca de clases .NET facilita enormemente el aprendizaje de WPF.

No. WPF depende de DirectX y Windows API, por lo que solo se ejecuta en WindowsPara el desarrollo de XAML multiplataforma, considere Interfaz de usuario de Avalonia or .NET MAUI.

Sรญ. Herramientas como Copiloto de GitHub Puede generar diseรฑos XAML, expresiones de enlace y estilos a partir de comentarios, lo que acelera el aprendizaje y reduce el marcado repetitivo para los principiantes.

Puede integrar ML.NET para el aprendizaje automรกtico local o llamar a servicios de IA en la nube como Azure Abra OpenAI desde su cรณdigo C# y luego muestre los resultados a travรฉs del enlace de datos estรกndar de WPF.

Sรญ. WPF es de cรณdigo abierto bajo la licencia MIT, y puedes crear aplicaciones de forma gratuita con Visual Studio Community Edition.

Resumir este post con: