Aplikacje desktopowe · WPF

Pierwsza aplikacja WPF: okno, przycisk i kod, który na niego reaguje

Czas napisać program z prawdziwym oknem. W tej lekcji poznasz pliki projektu, zobaczysz, jak XAML opisuje wygląd, a C# decyduje, co się dzieje po kliknięciu, i sam sprawdzisz to w mini-środowisku obok.

  • około 40 minut
  • WPF · XAML · C#
  • INF.04.5.3

Po tej lekcji: utworzyć projekt WPF, nazwać kontrolkę (x:Name), podpiąć do przycisku metodę Click i zmienić tekst etykiety z poziomu kodu.

Zacznijmy od pomysłu

Wygląd osobno, działanie osobno

To rozdzielenie działa jak na stronach internetowych: HTML i CSS opisują, jak wygląda strona, a JavaScript albo PHP, co się dzieje po kliknięciu. W WPF wygląd opisuje plik XAML, a działanie plik C# zwany code-behind.

W dużych zespołach grafik może pracować nad plikiem XAML (układ, kolory, style), a programista równolegle pisać logikę, bez wchodzenia sobie w drogę. Dla Ciebie to znaczy tyle: gdy ustawiasz wygląd, otwierasz .xaml, a gdy piszesz, co się stanie po kliknięciu, otwierasz .xaml.cs.

1 · Zacznij od projektu

Sześć kroków do pustego okna

Zaznaczaj kroki, gdy je wykonujesz. Jeśli szablonu WPF nie ma na liście, wróć do instalatora Visual Studio i zaznacz obciążenie .NET desktop development.

2 · Co powstało

Trzy pliki i dwa atrybuty, które łączą wszystko

App.xamlstart programu

Punkt startowy całej aplikacji. Wskazuje, które okno otworzyć jako pierwsze, i trzyma zasoby wspólne dla wszystkich okien, np. style.

Na przykład wspólny kolor przycisków w całym programie

MainWindow.xamlwygląd

Opis wyglądu głównego okna: rozmieszczenie kontrolek, kolory, czcionki. Zapisany w XAML, podobnym do HTML.

Na przykład etykieta i przycisk na środku okna

MainWindow.xaml.csdziałanie

Kod C# powiązany z oknem, czyli code-behind. Tu piszesz logikę, która reaguje na kliknięcia i wpisany tekst.

Na przykład zmiana napisu po kliknięciu

x:Name i Clickmost między plikami

x:Name daje kontrolce nazwę, dzięki której odwołasz się do niej w C#. Click="Nazwa" mówi, którą metodę wywołać po kliknięciu.

Na przykład x:Name="EtykietaPowitania", Click="PrzyciskPrzywitaj_Click"

Laboratorium · ćwiczenie w przeglądarce, do którego odsyłają rozgrzewki na końcu lekcji

3 · Sprawdź w działaniu

Twoja pierwsza aplikacja, bez instalowania czegokolwiek

Po lewej dwa pliki: XAML (wygląd) i C# (działanie). Kliknij przycisk w oknie i zobacz, jak wykonuje się metoda. Potem zmień tekst w kodzie C#, a nawet nazwę metody w jednym z plików, i obejrzyj błąd, który zobaczyłbyś w Visual Studio.

Ta interakcja wymaga włączonego JavaScriptu.

Nazwa w Click="…" w XAML musi być identyczna z nazwą metody w C#. Jeśli się różnią, program się nie skompiluje.

4 · Wygląd

MainWindow.xaml linia po linii

Każdy znacznik to jeden obiekt (kontrolka albo kontener), atrybuty ustawiają jego właściwości, a zagnieżdżanie odzwierciedla hierarchię: kontener na zewnątrz, kontrolki w środku.

MainWindow.xamlxaml
<Window x:Class="MojaPierwszaAplikacja.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Moja pierwsza aplikacja WPF" Height="250" Width="400">
    <Grid>
        <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
            <TextBlock x:Name="EtykietaPowitania"
                       Text="Witaj w WPF!"
                       FontSize="20"
                       Margin="0,0,0,20" />
            <Button x:Name="PrzyciskPrzywitaj"
                    Content="Kliknij mnie"
                    Width="140"
                    Height="35"
                    Click="PrzyciskPrzywitaj_Click" />
        </StackPanel>
    </Grid>
</Window>
  1. Window Całe okno. Title, Height i Width to jego właściwości.
  2. Grid i StackPanel Kontenery układające zawartość. StackPanel stawia elementy jeden pod drugim, a wyrównania wyśrodkowują go w oknie.
  3. x:Name="EtykietaPowitania" Nazwa kontrolki widoczna w kodzie C#. Bez niej nie odwołasz się do elementu.
  4. Click="PrzyciskPrzywitaj_Click" Podpięcie metody do zdarzenia kliknięcia. Metoda ma powstać w pliku C#.

5 · Działanie

MainWindow.xaml.cs

Metoda obsługi zdarzenia zawsze ma dwa parametry. Wewnątrz zmieniasz właściwość kontrolki po jej nazwie, tak jak w JavaScript zmieniasz zawartość elementu po jego id.

MainWindow.xaml.cscsharp
using System.Windows;

namespace MojaPierwszaAplikacja;

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

    private void PrzyciskPrzywitaj_Click(object sender, RoutedEventArgs e)
    {
        EtykietaPowitania.Text = "Kliknięto przycisk!";
    }
}
  1. InitializeComponent() Wczytuje wygląd z pliku XAML i tworzy wszystkie kontrolki. Bez tej linii okno byłoby puste.
  2. PrzyciskPrzywitaj_Click Metoda wywoływana po kliknięciu przycisku. Nazwa musi pasować do atrybutu Click w XAML.
  3. EtykietaPowitania.Text = … Zmienia tekst etykiety. Odwołujesz się do niej po nazwie z x:Name.

Do zadań

Dwa narzędzia, które przydadzą się w zadaniach

Zadania proszą o zmianę koloru z kodu i o jedną metodę dla kilku przycisków. Oba zapisy są poniżej. Wklej je do własnego okna i dopasuj nazwy kontrolek.

MainWindow.xaml.cscsharp
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;   // tu mieszka klasa Brushes

// 1) Kolor z kodu. Tlo to x:Name nadany elementowi Grid w XAML
Tlo.Background = Brushes.LightBlue;
EtykietaPowitania.Foreground = Brushes.DarkRed;

// 2) Jedna metoda dla kilku przycisków: sender zamieniasz na Button
private void Kolor_Click(object sender, RoutedEventArgs e)
{
    Button klikniety = (Button)sender;
    string napis = klikniety.Content.ToString()!;      // np. "Czerwony"

    if (napis == "Czerwony") Tlo.Background = Brushes.Red;
    else if (napis == "Zielony") Tlo.Background = Brushes.Green;
    else Tlo.Background = Brushes.Blue;

    EtykietaPowitania.Text = "Wybrano: " + napis.ToLower();
}

// 3) Pusty TextBox
if (string.IsNullOrWhiteSpace(PoleImie.Text))
    EtykietaPowitania.Text = "Wpisz imię";
else
    EtykietaPowitania.Text = $"Cześć, {PoleImie.Text}!";
  1. Brushes.LightBlue Gotowe kolory. Podpowiedź wpiszesz kropką po Brushes., a Visual Studio pokaże całą listę.
  2. (Button)sender Rzutowanie: mówisz programowi, że ten obiekt jest przyciskiem. Dopiero wtedy masz dostęp do jego Content.
  3. string.IsNullOrWhiteSpace Prawda, gdy pole jest puste albo zawiera same spacje.

6 · Mała lupa

Nagłówek metody obsługi zdarzenia

Ten nagłówek jest prawie zawsze taki sam. Kliknij jego części.

Kto widzi metodę i co zwraca?

private oznacza, że metodę wywołuje tylko ta klasa, a void, że nic nie zwraca.

Metoda działa wewnątrz okna i nic nie oddaje.

7 · Częsty kłopot

Która właściwość trzyma napis?

KontrolkaWłaściwość z napisemPrzykład
ButtonContentPrzycisk.Content = "Gotowe";
LabelContentEtykieta.Content = "Imię:";
TextBlockTextOpis.Text = "Witaj";
TextBoxTextPole.Text = "";
CheckBox, RadioButtonContent (napis) i IsChecked (stan)Zgoda.IsChecked = true;
Pamiętaj: w kontrolkach z zawartością (przycisk, etykieta) jest Content, a w tekstowych (TextBlock, TextBox) jest Text.

8 · Czego unikać

Trzy błędy, które widać w pierwszej godzinie

Literówka w nazwie metody
Tak nie
<Button Click="Zrob_Cos" />

// w C#:
private void ZrobCos(object sender, RoutedEventArgs e) { }

Program się nie skompiluje: w klasie nie ma metody „Zrob_Cos”.

Tak
<Button Click="ZrobCos" />

// w C#:
private void ZrobCos(object sender, RoutedEventArgs e) { }

Nazwy muszą być identyczne, łącznie z wielkością liter i podkreślnikiem.

Brak x:Name
Tak nie
<TextBlock Text="Witaj" />

// w C#:
Etykieta.Text = "Cześć";

Błąd CS0103: nazwa „Etykieta” nie istnieje w bieżącym kontekście.

Tak
<TextBlock x:Name="Etykieta" Text="Witaj" />

// w C#:
Etykieta.Text = "Cześć";

Bez x:Name kontrolka nie ma nazwy w kodzie, więc nie da się jej wskazać.

Content zamiast Text (albo odwrotnie)
Tak nie
EtykietaPowitania.Content = "Cześć";   // TextBlock

Błąd kompilatora: TextBlock nie zawiera definicji „Content”.

Tak
EtykietaPowitania.Text = "Cześć";

TextBlock i TextBox używają Text, a Button i Label używają Content.

9 · Sprawdź się

Którą właściwość ustawisz?

Cztery krótkie sytuacje. Wybierz właściwość, której użyjesz w C#.

Ta interakcja wymaga włączonego JavaScriptu.

Podsumowanie

Co warto zapamiętać

  1. Projekt WPF składa się z App.xaml, MainWindow.xaml (wygląd) i MainWindow.xaml.cs (działanie).
  2. x:Name daje kontrolce nazwę w kodzie, a Click="Metoda" łączy przycisk z metodą.
  3. Nazwa metody w XAML i w C# musi być identyczna.
  4. Metoda zdarzenia ma parametry object sender i RoutedEventArgs e.
  5. Button i Label używają Content, a TextBlock i TextBox używają Text.

Dalej na swoim koncie

Rozgrzewki, quiz i zadania są w biurku ucznia.

Teoria jest otwarta dla wszystkich. Żeby rozwiązywać zadania, zapisywać szkice i widzieć swój postęp, zaloguj się.

Zaloguj się →
Źródła i dalsza nauka