Wprowadzenie do WPF – twoje pierwsze okno

Czym jest WPF?

Aplikacja okienkowa vs konsolowa

Do tej pory tworzyłeś aplikacje konsolowe – program uruchamiał się w czarnym oknie terminala i komunikował z użytkownikiem przez wpisywanie tekstu.

Console.Write("Podaj imię: ");
string imie = Console.ReadLine();
Console.WriteLine($"Cześć, {imie}!");

// Użytkownik klika przyciski,
// wypełnia pola tekstowe,
// widzi listy, obrazki, kolory...
// Tak jak każdy program w Windows.

WPF (ang. Windows Presentation Foundation) to technologia firmy Microsoft do tworzenia aplikacji okienkowych dla systemu Windows. Używasz C# jako języka programowania, a wygląd okna opisujesz w specjalnym języku o nazwie XAML.

Co potrafi WPF?

WPF pozwala tworzyć aplikacje z pełnym interfejsem graficznym:

Tworzenie projektu WPF

Krok po kroku – Visual Studio

W Visual Studio kliknij „Utwórz nowy projekt”. W polu wyszukiwania wpisz WPF i wybierz szablon „Aplikacja WPF” (nie mylić z „Aplikacja WPF Framework” – ta starsza wersja).

Nadaj projektowi sensowną nazwę, np. MojaAplikacjaWPF. Unikaj polskich liter i spacji w nazwie projektu.

Pierwsze uruchomienie

Po utworzeniu projektu naciśnij F5 (lub zielony przycisk ▶). Powinno pojawić się puste, szare okno – to Twoja pierwsza aplikacja WPF!

Struktura projektu

Pliki w projekcie

Po utworzeniu projektu w panelu Eksplorator rozwiązań po prawej stronie zobaczysz kilka plików. Oto co każdy z nich oznacza:

App.xaml – punkt startowy

<Application x:Class="MojaAplikacjaWPF.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="MainWindow.xaml">
  <Application.Resources>
    <!-- Tutaj będą wspólne zasoby dla całej aplikacji -->
  </Application.Resources>
</Application>

Najważniejsza tu jest właściwość StartupUri – mówi WPF które okno otworzyć jako pierwsze po uruchomieniu programu. Domyślnie wskazuje na MainWindow.xaml.

MainWindow – główne okno

Plik XAML – wygląd okna

Otwórz plik MainWindow.xaml. Zobaczysz następującą treść:

<Window x:Class="MojaAplikacjaWPF.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow"
        Height="450"
        Width="800">

  <Grid>
    <!-- Tutaj dodajemy przyciski, pola tekstowe itp. -->
  </Grid>

</Window>

Przeanalizujmy co tu jest, linijka po linijce:

Plik C# – logika okna (code-behind)

Otwórz plik MainWindow.xaml.cs. To jest kod C# powiązany z oknem:

using System.Windows;

namespace MojaAplikacjaWPF
{
    // Klasa okna – dziedziczy po Window
    public partial class MainWindow : Window
    {
        // Konstruktor – wywoływany przy tworzeniu okna
        public MainWindow()
        {
            InitializeComponent();  // ← OBOWIĄZKOWE! Inicjalizuje elementy z XAML
        }
    }
}

Słowo partial przy klasie oznacza, że ta klasa jest podzielona na dwa pliki – MainWindow.xaml.cs (piszesz sam) i wygenerowany automatycznie plik ukryty, który zawiera kod z XAML. Razem tworzą jedną klasę MainWindow.

Właściwości okna

Oknem rządzą właściwości ustawiane w XAML. Oto najczęściej używane – zmień je i uruchom program, żeby zobaczyć efekt:

<Window
    Title="Moja pierwsza aplikacja"
    Width="600"
    Height="400"

    <!-- Minimalne i maksymalne rozmiary -->
    MinWidth="300"
    MinHeight="200"

    <!-- Kolor tła -->
    Background="#1e1e2e"

    <!-- Pozycja startowa: Center, Manual, CenterScreen, CenterOwner -->
    WindowStartupLocation="CenterScreen"

    <!-- Stan okna: Normal, Maximized, Minimized -->
    WindowState="Normal"

    <!-- Czy można zmieniać rozmiar: CanResize, NoResize, CanMinimize -->
    ResizeMode="CanResize"

    <!-- Czy okno jest zawsze na wierzchu -->
    Topmost="False">
</Window>

Właściwości okna można też zmieniać z kodu C# w czasie działania programu:

private void Window_Loaded(object sender, RoutedEventArgs e)
{
    // Zmiana tytułu w czasie działania programu
    Title = "Witaj w mojej aplikacji!";

    // Maksymalizacja okna
    WindowState = WindowState.Maximized;

    // Zmiana rozmiaru
    Width  = 800;
    Height = 600;
}

Ikona aplikacji

Żeby zmienić ikonę okna (domyślnie jest to ikona WPF), dodaj plik .ico do projektu i ustaw właściwość Icon:

<!-- Plik ikona.ico musi być dodany do projektu -->
<Window Icon="ikona.ico" ...>

Pierwszy przycisk – „Hello, WPF!”

Dodajmy do okna jeden przycisk, który po kliknięciu wyświetli komunikat. To klasyczny „Hello World” w WPF.

Krok 1 – Dodaj przycisk w XAML

<Window x:Class="MojaAplikacjaWPF.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Moja aplikacja"
        Width="400"
        Height="300"
        WindowStartupLocation="CenterScreen">

  <Grid>

    <Button
        x:Name="btnPowitanie"
        Content="Kliknij mnie!"
        Width="150"
        Height="40"
        Click="btnPowitanie_Click" />

  </Grid>
</Window>

Krok 2 – Napisz obsługę kliknięcia w C#

using System.Windows;

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

        private void btnPowitanie_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("Witaj w WPF!", "Pierwsze okno");
        }
    }
}

Krok 3 – Uruchom i kliknij

Naciśnij F5. Pojawi się okno z przyciskiem. Po kliknięciu zobaczysz okno komunikatu z napisem „Witaj w WPF!”. Gratulacje – to Twoja pierwsza działająca aplikacja okienkowa!

Skrót: Naming Convention (konwencja nazewnictwa)

W WPF przyjął się zwyczaj nazywania kontrolek z przedrostkiem oznaczającym typ. Dzięki temu od razu wiesz z czym masz do czynienia w kodzie C#:

Częste błędy początkujących

❌ Błąd 1: Brak InitializeComponent()

public MainWindow()
{
    // Usunąłem InitializeComponent()
    // Okno będzie puste!
}

public MainWindow()
{
    InitializeComponent(); // zawsze!
}

❌ Błąd 2: Zły szablon projektu

❌ Błąd 3: Polskie znaki i spacje w nazwie projektu

❌ Błąd 4: Zmiana rozmiaru okna na ekranie mniejszym niż MinWidth/MinHeight

<Window Width="200"
        MinWidth="400" />
<!-- Width mniejszy niż MinWidth -->
<!-- Okno otworzy się z MinWidth=400 -->

<Window Width="600"
        MinWidth="400" />
<!-- Width większy niż MinWidth -->

Zadania do wykonania

// Zmiana tła z kodu C#
Background = new SolidColorBrush(Colors.SteelBlue);

// Otwieranie drugiego okna
OknoInfo okno = new OknoInfo();
okno.Show();           // niemodalne – oba okna aktywne
// lub:
okno.ShowDialog();    // modalne – główne zablokowane