El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

WPF (Windows Presentation Foundation)

Siguiente ►
►

Introducción a WPF

Windows Presentation Foundation (WPF) es una tecnología de Microsoft para la creación de aplicaciones de escritorio con interfaces de usuario enriquecidas. WPF permite a los desarrolladores crear aplicaciones con gráficos avanzados, animaciones y una experiencia de usuario moderna.

Conceptos Clave de WPF

  • XAML (Extensible Application Markup Language): Un lenguaje basado en XML utilizado para definir la interfaz de usuario en WPF.
  • Data Binding: Vinculación de datos entre la interfaz de usuario y el modelo de datos.
  • Control Templates: Personalización de la apariencia de los controles.
  • Styles: Definición de estilos reutilizables para controles.
  • Resources: Almacenamiento de recursos reutilizables como estilos, plantillas y otros objetos.

Configuración del Entorno de Desarrollo

Para desarrollar aplicaciones WPF, necesitas tener instalado Visual Studio. Asegúrate de seleccionar la carga de trabajo de desarrollo de escritorio .NET durante la instalación.

Pasos para Configurar el Entorno

  1. Instalar Visual Studio:

    • Descarga e instala Visual Studio desde visualstudio.microsoft.com.
    • Durante la instalación, selecciona la carga de trabajo "Desarrollo de escritorio con .NET".

  2. Crear un Proyecto WPF:

    • Abre Visual Studio.
    • Selecciona "Crear un nuevo proyecto".
    • Busca "WPF App (.NET Core)" o "WPF App (.NET Framework)".
    • Asigna un nombre al proyecto y selecciona la ubicación donde deseas guardarlo.
    • Haz clic en "Crear".

Estructura Básica de una Aplicación WPF

Una aplicación WPF típica consta de varios archivos XAML y archivos de código subyacente (C#). A continuación se muestra la estructura básica de una aplicación WPF:

MainWindow.xaml

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Button Content="Click Me" HorizontalAlignment="Center" VerticalAlignment="Center" Click="Button_Click"/>
    </Grid>
</Window>

MainWindow.xaml.cs

using System.Windows;

namespace WpfApp
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("Hello, WPF!");
        }
    }
}

Explicación del Código

  • MainWindow.xaml: Define la interfaz de usuario utilizando XAML. En este ejemplo, se define una ventana con un botón centrado.
  • MainWindow.xaml.cs: Contiene el código subyacente en C#. Aquí se maneja el evento Click del botón para mostrar un mensaje.

Data Binding en WPF

El data binding es una característica poderosa de WPF que permite vincular la interfaz de usuario a los datos. Esto facilita la actualización automática de la interfaz cuando los datos cambian.

Ejemplo de Data Binding

MainWindow.xaml

<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <TextBox Text="{Binding Name}" HorizontalAlignment="Center" VerticalAlignment="Center" Width="200"/>
    </Grid>
</Window>

MainWindow.xaml.cs

using System.ComponentModel;
using System.Windows;

namespace WpfApp
{
    public partial class MainWindow : Window, INotifyPropertyChanged
    {
        private string _name;

        public string Name
        {
            get { return _name; }
            set
            {
                _name = value;
                OnPropertyChanged("Name");
            }
        }

        public MainWindow()
        {
            InitializeComponent();
            DataContext = this;
        }

        public event PropertyChangedEventHandler PropertyChanged;

        protected void OnPropertyChanged(string propertyName)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

Explicación del Código

  • TextBox: El atributo Text está vinculado a la propiedad Name del DataContext.
  • INotifyPropertyChanged: Implementa la interfaz INotifyPropertyChanged para notificar a la interfaz de usuario cuando la propiedad Name cambia.
  • DataContext: Establece el DataContext de la ventana en sí misma (this), permitiendo que los controles en XAML accedan a las propiedades de la clase MainWindow.

Ejercicio Práctico

Ejercicio 1: Crear una Aplicación WPF con Data Binding

Objetivo: Crear una aplicación WPF que permita al usuario ingresar su nombre y mostrarlo en un TextBlock.

Pasos:

  1. Crear un nuevo proyecto WPF.
  2. Modificar MainWindow.xaml:
<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="200" Width="400">
    <Grid>
        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
            <TextBox Text="{Binding Name}" Width="200" Margin="10"/>
            <TextBlock Text="{Binding Name}" Width="200" Margin="10"/>
        </StackPanel>
    </Grid>
</Window>
  1. Modificar MainWindow.xaml.cs:
using System.ComponentModel;
using System.Windows;

namespace WpfApp
{
    public partial class MainWindow : Window, INotifyPropertyChanged
    {
        private string _name;

        public string Name
        {
            get { return _name; }
            set
            {
                _name = value;
                OnPropertyChanged("Name");
            }
        }

        public MainWindow()
        {
            InitializeComponent();
            DataContext = this;
        }

        public event PropertyChangedEventHandler PropertyChanged;

        protected void OnPropertyChanged(string propertyName)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

Solución del Ejercicio

Al ejecutar la aplicación, deberías poder ingresar tu nombre en el TextBox y verlo reflejado en el TextBlock automáticamente.

Conclusión

En esta sección, hemos cubierto los conceptos básicos de WPF, incluyendo la configuración del entorno de desarrollo, la estructura básica de una aplicación WPF y el data binding. Estos fundamentos te permitirán crear aplicaciones de escritorio con interfaces de usuario modernas y dinámicas. En la siguiente sección, profundizaremos en temas más avanzados como el uso de estilos, plantillas y recursos en WPF.

◄ Anterior
◄
Siguiente ►
►
El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados