El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

WPF (Windows Presentation Foundation)

Següent ►
►

Introducció a WPF

Windows Presentation Foundation (WPF) és una tecnologia de Microsoft per a la creació d'aplicacions d'escriptori amb interfícies d'usuari riques i interactives. WPF utilitza XAML (Extensible Application Markup Language) per definir la interfície d'usuari i permet la separació clara entre la lògica de la interfície i el codi de l'aplicació.

Objectius del Mòdul

  • Comprendre els conceptes bàsics de WPF.
  • Aprendre a crear interfícies d'usuari amb XAML.
  • Gestionar esdeveniments i dades en WPF.
  • Implementar estils i plantilles per a una millor experiència d'usuari.

Conceptes Bàsics de WPF

Arquitectura de WPF

WPF es basa en tres pilars principals:

  1. XAML: Llenguatge de marcat per definir la interfície d'usuari.
  2. Data Binding: Vinculació de dades entre la interfície d'usuari i el codi.
  3. Estils i Plantilles: Personalització de l'aparença i el comportament dels controls.

Estructura d'una Aplicació WPF

Una aplicació WPF típica consta de:

  • MainWindow.xaml: Defineix la interfície d'usuari principal.
  • MainWindow.xaml.cs: Conté la lògica de l'aplicació.

Exemple Bàsic

<!-- 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 Name="myButton" Content="Click Me" Width="100" Height="50" Click="myButton_Click"/>
    </Grid>
</Window>
// MainWindow.xaml.cs
using System.Windows;

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

        private void myButton_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("Button Clicked!");
        }
    }
}

Explicació del Codi

  • MainWindow.xaml: Defineix una finestra amb un botó.
  • MainWindow.xaml.cs: Conté la lògica per gestionar l'esdeveniment de clic del botó.

XAML: Llenguatge de Marcat

Elements Bàsics de XAML

  • Controls: Botons, etiquetes, caixes de text, etc.
  • Layouts: Grid, StackPanel, Canvas, etc.
  • Propietats: Atributs dels controls (Width, Height, Content, etc.).

Exemple de 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>
        <StackPanel>
            <TextBlock Text="Hello, WPF!" FontSize="24" Margin="10"/>
            <Button Content="Click Me" Width="100" Height="50" Margin="10"/>
        </StackPanel>
    </Grid>
</Window>

Explicació del Codi

  • TextBlock: Mostra text.
  • StackPanel: Organitza els elements en una pila vertical.
  • Button: Botó amb text "Click Me".

Data Binding

Conceptes de Data Binding

  • Source: Origen de les dades.
  • Target: Destí de les dades (control de la interfície d'usuari).
  • Binding Modes: OneWay, TwoWay, OneTime, etc.

Exemple de Data Binding

<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 Name="myTextBox" Width="200" Height="30" Margin="10"/>
        <TextBlock Text="{Binding ElementName=myTextBox, Path=Text}" FontSize="24" Margin="10,50,10,10"/>
    </Grid>
</Window>

Explicació del Codi

  • TextBox: Control d'entrada de text.
  • TextBlock: Mostra el text del TextBox mitjançant data binding.

Estils i Plantilles

Definició d'Estils

Els estils permeten definir l'aparença dels controls de manera centralitzada.

Exemple d'Estil

<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">
    <Window.Resources>
        <Style TargetType="Button">
            <Setter Property="Background" Value="LightBlue"/>
            <Setter Property="FontSize" Value="16"/>
        </Style>
    </Window.Resources>
    <Grid>
        <Button Content="Styled Button" Width="150" Height="50" Margin="10"/>
    </Grid>
</Window>

Explicació del Codi

  • Window.Resources: Defineix recursos compartits, com ara estils.
  • Style: Aplica un estil a tots els botons de la finestra.

Exercicis Pràctics

Exercici 1: Crear una Interfície d'Usuari Simple

Crea una aplicació WPF amb els següents requisits:

  • Una finestra amb un TextBox i un Button.
  • Quan es faci clic al botó, mostra el text del TextBox en un MessageBox.

Solució

<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>
        <StackPanel>
            <TextBox Name="inputTextBox" Width="200" Height="30" Margin="10"/>
            <Button Content="Show Text" Width="100" Height="50" Margin="10" Click="ShowTextButton_Click"/>
        </StackPanel>
    </Grid>
</Window>
using System.Windows;

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

        private void ShowTextButton_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show(inputTextBox.Text);
        }
    }
}

Exercici 2: Aplicar Estils a Controls

Crea una aplicació WPF amb els següents requisits:

  • Una finestra amb dos botons.
  • Aplica un estil que canviï el color de fons i la mida de la font dels botons.

Solució

<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">
    <Window.Resources>
        <Style TargetType="Button">
            <Setter Property="Background" Value="LightGreen"/>
            <Setter Property="FontSize" Value="18"/>
        </Style>
    </Window.Resources>
    <Grid>
        <StackPanel>
            <Button Content="Button 1" Width="150" Height="50" Margin="10"/>
            <Button Content="Button 2" Width="150" Height="50" Margin="10"/>
        </StackPanel>
    </Grid>
</Window>

Resum

En aquest mòdul, hem après els conceptes bàsics de WPF, incloent-hi la creació d'interfícies d'usuari amb XAML, la vinculació de dades, i l'aplicació d'estils i plantilles. Hem vist exemples pràctics i hem realitzat exercicis per reforçar els conceptes apresos. Amb aquests coneixements, estàs preparat per crear aplicacions d'escriptori riques i interactives amb WPF.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats