Kontrolki WPF – Button – https://school-it.pl/

1. Co robi kontrolka Button?

Button w WPF to kontrolka interaktywna, której głównym zadaniem jest umożliwienie użytkownikowi wykonywania akcji w aplikacji. W przeciwieństwie do TextBlock, który jedynie wyświetla informacje, Button aktywnie reaguje na interakcje użytkownika i komunikuje te interakcje z resztą aplikacji poprzez system zdarzeń.

Podstawowa funkcjonalność Button opiera się na wzorcu „kliknij i wykonaj”. Gdy użytkownik kliknie na przycisk, kontrolka wywołuje zdarzenie Click, które może być obsłużone przez kod aplikacji. Ten prosty mechanizm jest fundamentem większości interakcji użytkownik-aplikacja w interfejsach graficznych.

Button w WPF jest znacznie bardziej zaawansowany niż jego odpowiednik w starszych technologiach. Obsługuje nie tylko standardowe kliknięcia myszy, ale także interakcje klawiaturowe (spacja, Enter), dotykowe na urządzeniach dotykowych, a nawet może być aktywowany programowo z poziomu kodu. Dodatkowo, Button automatycznie zarządza swoim stanem wizualnym – zmienia wygląd gdy użytkownik najedzie na niego myszą, naciśnie go, lub gdy przycisk jest nieaktywny.

Kontrolka Button uczestniczy również w systemie fokusowania WPF. Może otrzymać fokus klawiatury, co oznacza, że użytkownik może nawigować do przycisku używając klawisza Tab i aktywować go spacją lub Enterem. To kluczowa funkcjonalność dla dostępności aplikacji i obsługi użytkowników preferujących klawiaturę nad mysz.

2. Podstawowe właściwości Button

Właściwość Content – serce Button

Najważniejszą właściwością Button jest Content, która określa, co jest wyświetlane wewnątrz przycisku. W przeciwieństwie do wielu innych kontrolek, Content nie jest ograniczona tylko do tekstu – może zawierać praktycznie dowolny element WPF.

Najprostsze użycie z tekstem:

<Button Content="Zapisz"/>

Button może zawierać też inne kontrolki:

<Button>
    <StackPanel Orientation="Horizontal">
        <Image Source="save_icon.png" Width="16" Height="16"/>
        <TextBlock Text="Zapisz" Margin="5,0,0,0"/>
    </StackPanel>
</Button>

Ta elastyczność oznacza, że przyciski mogą być bogate wizualnie, zawierać ikony, obrazy, a nawet złożone layouty z wieloma elementami.

Właściwości związane z wyglądem

Button dziedziczy wiele właściwości formatowania od swoich klas bazowych, ale ma też specyficzne właściwości dotyczące wyglądu:

<Button Content="Stylizowany przycisk" 
        Width="150" 
        Height="40" 
        Background="LightBlue" 
        Foreground="DarkBlue" 
        BorderBrush="Navy" 
        BorderThickness="2" 
        FontSize="14" 
        FontWeight="Bold"/>

Background określa kolor tła przycisku. Może to być jednolity kolor, gradient, lub nawet obrazek używany jako tło.

Foreground ustawia kolor tekstu lub innych elementów wewnątrz przycisku.

BorderBrush i BorderThickness kontrolują wygląd ramki wokół przycisku. BorderBrush określa kolor ramki, a BorderThickness jej grubość.

Właściwości stanu i zachowania

Button posiada kilka właściwości kontrolujących jego stan i zachowanie:

<Button Content="Przycisk opcjonalny" 
        IsEnabled="True" 
        IsDefault="False" 
        IsCancel="False" 
        ClickMode="Release"/>

IsEnabled określa, czy przycisk jest aktywny. Nieaktywny przycisk (IsEnabled=”False”) nie reaguje na kliknięcia i jest wyświetlany w sposób wskazujący na jego niedostępność.

IsDefault oznacza przycisk jako domyślny w oknie. Domyślny przycisk jest aktywowany gdy użytkownik naciśnie Enter, niezależnie od tego, który element ma aktualnie fokus.

IsCancel oznacza przycisk jako przycisk anulowania. Taki przycisk jest aktywowany gdy użytkownik naciśnie Escape.

ClickMode określa, kiedy zdarzenie Click jest wywoływane – czy przy naciśnięciu przycisku myszy (Press), przy zwolnieniu (Release), czy przy najechaniu myszą (Hover).

3. Zdarzenia Button – obsługa interakcji

Czym są zdarzenia?

Zdarzenia w WPF to mechanizm komunikacji między kontrolkami a kodem aplikacji. Gdy użytkownik wykonuje akcję (np. kliknie przycisk), kontrolka „wysyła” zdarzenie, które może być „obsłużone” przez kod C#. To podobne do systemu powiadomień – kontrolka informuje aplikację, że coś się stało.

Zdarzenie Click – podstawa interakcji

Najważniejszym zdarzeniem Button jest Click, wywoływane gdy użytkownik aktywuje przycisk.

Podłączanie zdarzenia w XAML:

<Button Content="Kliknij mnie" Click="Button_Click"/>

Metoda obsługująca zdarzenie w C#:

private void Button_Click(object sender, RoutedEventArgs e)
{
    MessageBox.Show("Przycisk został kliknięty!");
}

Wyjaśnienie parametrów zdarzenia

Każda metoda obsługująca zdarzenie otrzymuje dwa parametry:

sender – to obiekt, który wywołał zdarzenie. W przypadku przycisku będzie to kontrolka Button, ale typ sender to object, więc często trzeba go przekonwertować:

private void Button_Click(object sender, RoutedEventArgs e)
{
    Button clickedButton = sender as Button;
    if (clickedButton != null)
    {
        MessageBox.Show($"Kliknięto przycisk: {clickedButton.Content}");
    }
}

Konwersja sender as Button próbuje przekonwertować obiekt sender na typ Button. Jeśli konwersja się nie powiedzie (sender nie jest przyciskiem), zwraca null. Dlatego zawsze sprawdzamy if (clickedButton != null).

e – to obiekt zawierający dodatkowe informacje o zdarzeniu, np. które klawisze były naciśnięte podczas kliknięcia.

Podłączanie zdarzeń z poziomu kodu C#

Zdarzenia można też podłączać programowo w kodzie:

public MainWindow()
{
    InitializeComponent();
    
    // Podłączenie zdarzenia do istniejącego przycisku
    btnMojPrzycisk.Click += Button_Click;
    
    // Podłączenie do innego przycisku
    btnInny.Click += InnaMetoda_Click;
}

private void InnaMetoda_Click(object sender, RoutedEventArgs e)
{
    MessageBox.Show("Kliknięto przycisk!");
}

Więcej niż jedna metoda dla jednego zdarzenia

Do jednego zdarzenia można podłączyć kilka metod – wszystkie zostaną wykonane po kolei:

public MainWindow()
{
    InitializeComponent();
    
    btnTest.Click += PierwszeObsluga;
    btnTest.Click += DragieObsluga;
    btnTest.Click += TrzecieObsluga;
}

private void PierwszeObsluga(object sender, RoutedEventArgs e)
{
    MessageBox.Show("Pierwsza obsługa");
}

private void DragieObsluga(object sender, RoutedEventArgs e)
{
    MessageBox.Show("Druga obsługa");
}

private void TrzecieObsluga(object sender, RoutedEventArgs e)
{
    MessageBox.Show("Trzecia obsługa");
}

Inne przydatne zdarzenia

Button obsługuje również inne zdarzenia:

<Button Content="Przycisk z dodatkowymi zdarzeniami" 
        MouseEnter="Button_MouseEnter" 
        MouseLeave="Button_MouseLeave"/>

MouseEnter – wywoływane gdy kursor myszy wchodzi w obszar przycisku MouseLeave – wywoływane gdy kursor opuszcza obszar przycisku

4. Podstawowa stylizacja Button

Najprostszym sposobem zmiany wyglądu Button jest modyfikacja jego właściwości:

<Button Content="Kolorowy przycisk" 
        Width="120" 
        Height="35"
        Background="LightBlue"
        Foreground="DarkBlue"
        FontWeight="Bold"/>

Przyciski z obrazkami – kontrolka Image

Button może zawierać nie tylko tekst, ale również obrazy. Do tego celu służy kontrolka Image:

<Button Width="80" Height="40">
    <Button.Content>
        <Image Source="save.png" Width="16" Height="16"/>
    </Button.Content>
</Button>

Lub krócej (bez Button.Content):

<Button Width="80" Height="40">
    <Image Source="save.png" Width="16" Height="16"/>
</Button>

Kontrolka Image to element WPF służący do wyświetlania grafik. Jej najważniejsze właściwości to:

Source – ścieżka do pliku graficznego
Width i Height – rozmiary obrazu
Stretch – sposób dopasowania obrazu do dostępnej przestrzeni

Image może wyświetlać popularne formaty graficzne jak PNG, JPG, GIF, BMP. Obrazy mogą być dołączone do projektu jako zasoby lub ładowane z systemu plików.

5. Dobre praktyki przy używaniu Button

Nazwnictwo i organizacja

Używaj opisowych nazw dla przycisków:

<Button x:Name="btnZapisz" Content="Zapisz"/>
<Button x:Name="btnAnuluj" Content="Anuluj"/>
<Button x:Name="btnWyslijEmail" Content="Wyślij e-mail"/>

Dostępność i użyteczność

Ustawiaj odpowiednie przyciski jako domyślne i anulujące:

<Button Content="OK" IsDefault="True"/>
<Button Content="Anuluj" IsCancel="True"/>

Używaj ToolTip dla przycisków z ikonami:

<Button ToolTip="Zapisz dokument (Ctrl+S)">
    <Image Source="save.png" Width="16" Height="16"/>
</Button>