Button – przycisk

Czym jest Button?

Button to klikalny przycisk – jedna z najważniejszych kontrolek w każdej aplikacji okienkowej. Użytkownik klika, a Twój kod C# reaguje wykonując określoną akcję.

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

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

Content – zawartość przycisku

Tekst jako Content

Najczęściej Content to po prostu tekst, podany jako atrybut.

<Button Content="Zapisz"  Width="100" />
<Button Content="Anuluj" Width="100" />
<Button Content="Usuń"   Width="100" />

Content jako dowolny element

Właściwość Content to nie tylko tekst – może przyjąć dowolny element WPF. To znaczy, że przycisk może zawierać obraz, kombinację tekstu i ikony, nawet cały StackPanel z kilkoma elementami.

<Button Width="140" Height="40">
    <Button.Content>
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="💾" Margin="0,0,6,0" />
            <TextBlock Text="Zapisz plik" />
        </StackPanel>
    </Button.Content>
</Button>

Zdarzenie Click

Podpięcie w XAML

Są dwa sposoby podpięcia obsługi kliknięcia: wpisanie nazwy metody ręcznie w XAML, albo kliknięcie dwukrotne na przycisku w designerze Visual Studio (które zrobi to automatycznie).

<Button x:Name="btnZapisz"
        Content="Zapisz"
        Click="btnZapisz_Click" />

private void btnZapisz_Click(object sender, RoutedEventArgs e)
{
    // Twój kod tutaj
    MessageBox.Show("Zapisano!");
}

Wspólna metoda dla wielu przycisków

Jeśli kilka przycisków ma podobną logikę, możesz podpiąć je do tej samej metody i rozróżnić który został kliknięty za pomocą sender.

<Button Content="Poniedziałek" Click="DzienTygodnia_Click" />
<Button Content="Wtorek"      Click="DzienTygodnia_Click" />
<Button Content="Środa"       Click="DzienTygodnia_Click" />

private void DzienTygodnia_Click(object sender, RoutedEventArgs e)
{
    // Rzutujemy sender na Button, żeby odczytać który był kliknięty
    Button klikniety = (Button)sender;
    string dzien = klikniety.Content.ToString();

    lblWynik.Text = $"Wybrano: {dzien}";
}

IsEnabled – włączanie i wyłączanie

IsEnabled kontroluje czy przycisk jest aktywny. Wyłączony przycisk (IsEnabled="False") jest wyszarzony i nie reaguje na kliknięcia.

<Button x:Name="btnWyslij"
        Content="Wyślij"
        IsEnabled="False" />

Najczęstszy wzorzec: przycisk jest wyłączony do momentu, gdy użytkownik wypełni wymagane pole.

// XAML: <TextBox x:Name="txtEmail" TextChanged="txtEmail_TextChanged" />
//       <Button x:Name="btnWyslij" IsEnabled="False" />

private void txtEmail_TextChanged(object sender, TextChangedEventArgs e)
{
    // Przycisk aktywny tylko gdy pole nie jest puste
    btnWyslij.IsEnabled = !string.IsNullOrWhiteSpace(txtEmail.Text);
}

Inny częsty przypadek: wyłączenie przycisku po kliknięciu, żeby zapobiec wielokrotnemu wysłaniu tej samej akcji (np. wielokrotne zamówienie po szybkim klikaniu).

private void btnZamow_Click(object sender, RoutedEventArgs e)
{
    btnZamow.IsEnabled = false;        // blokujemy ponowne kliknięcie
    btnZamow.Content   = "Przetwarzanie...";

    // (tu logika zamówienia)

    MessageBox.Show("Zamówienie złożone!");
    btnZamow.Content   = "Zamów";
    btnZamow.IsEnabled = true;
}

IsDefault i IsCancel – obsługa Enter i Esc

Te dwie właściwości pozwalają obsłużyć przycisk klawiaturą bez pisania żadnego kodu – działają automatycznie.

<StackPanel Orientation="Horizontal"
            HorizontalAlignment="Right">

    <Button Content="Anuluj"
            IsCancel="True"
            Width="80"
            Margin="0,0,8,0"
            Click="btnAnuluj_Click" />

    <Button Content="OK"
            IsDefault="True"
            Width="80"
            Click="btnOK_Click" />

</StackPanel>
<!-- Enter = kliknie OK, Esc = kliknie Anuluj –
     niezależnie od tego, który element ma focus -->

ToolTip – podpowiedź po najechaniu

ToolTip to mały żółty komunikat, który pojawia się po najechaniu kursorem na element i chwili oczekiwania. Przydaje się do wyjaśniania znaczenia przycisków – zwłaszcza tych z samą ikoną, bez tekstu.

<Button Content="🗑"
        Width="40"
        ToolTip="Usuń wybrany element" />

<Button Content="💾"
        Width="40"
        ToolTip="Zapisz zmiany (Ctrl+S)" />

ToolTip może też być złożonym elementem – nie tylko tekstem.

<Button Content="Eksportuj">
    <Button.ToolTip>
        <StackPanel>
            <TextBlock Text="Eksport danych" FontWeight="Bold" />
            <TextBlock Text="Zapisuje dane do pliku CSV" Foreground="Gray" />
        </StackPanel>
    </Button.ToolTip>
</Button>

Przycisk z ikoną

Emoji jako ikona – najprostszy sposób

Najprostszym sposobem dodania ikony jest użycie emoji w tekście. Nie wymaga żadnych plików graficznych i działa od razu.

<Button Content="➕ Dodaj"     Width="100" />
<Button Content="🗑 Usuń"      Width="100" />
<Button Content="✏️ Edytuj"    Width="100" />
<Button Content="💾 Zapisz"    Width="100" />
<Button Content="🔍 Szukaj"    Width="100" />
<Button Content="⚙️ Ustawienia" Width="110" />

Obraz + tekst (Image + TextBlock)

Dla bardziej profesjonalnego wyglądu możesz użyć prawdziwego pliku graficznego razem z tekstem, łącząc je w StackPanel.

<Button Width="140" Height="40">
    <StackPanel Orientation="Horizontal">
        <Image Source="/Images/save.png"
               Width="20"
               Height="20"
               Margin="0,0,8,0" />
        <TextBlock Text="Zapisz"
                   VerticalAlignment="Center" />
    </StackPanel>
</Button>

Tylko ikona, bez tekstu – dobry do przycisków w toolbarach. Wtedy koniecznie dodaj ToolTip, żeby użytkownik wiedział co robi przycisk.

<Button Width="36" Height="36"
        ToolTip="Usuń wybrany element">
    <Image Source="/Images/delete.png" Width="18" Height="18" />
</Button>

Wygląd przycisku

Podstawowy wygląd przycisku możesz dostosować bez wnikania w zaawansowane style i szablony (te poznasz w dalszych tematach).

<Button Content="Zapisz zmiany"
        Width="150"
        Height="40"
        Background="#2ecc71"
        Foreground="White"
        FontSize="14"
        FontWeight="Bold"
        BorderThickness="0"
        Cursor="Hand" />

<Button Content="Zapisz"  Background="#2ecc71" Foreground="White" />  <!-- zielony – sukces -->
<Button Content="Usuń"   Background="#e74c3c" Foreground="White" />  <!-- czerwony – niebezpieczna akcja -->
<Button Content="Edytuj"  Background="#3498db" Foreground="White" />  <!-- niebieski – neutralna akcja -->
<Button Content="Anuluj"  Background="#95a5a6" Foreground="White" />  <!-- szary – mniej istotna akcja -->
<Button Content="Ostrzeżenie" Background="#f39c12" Foreground="White" /> <!-- pomarańcz – uwaga -->

Przyciski tworzone w C#

Tak jak inne kontrolki, Button możesz w pełni stworzyć i skonfigurować z kodu C#. Przydaje się to gdy liczba przycisków zależy od danych.

private void Window_Loaded(object sender, RoutedEventArgs e)
{
    string[] kategorie = { "Elektronika", "Odzież", "Sport", "Książki" };

    foreach (string kategoria in kategorie)
    {
        Button btn = new Button();
        btn.Content = kategoria;
        btn.Width   = 120;
        btn.Height  = 35;
        btn.Margin  = new Thickness(5);
        btn.Tag     = kategoria;          // zapamiętujemy kategorię
        btn.Click  += Kategoria_Click;   // podpinamy obsługę

        panelKategorii.Children.Add(btn);
    }
}

private void Kategoria_Click(object sender, RoutedEventArgs e)
{
    Button klikniety = (Button)sender;
    string kategoria = (string)klikniety.Tag;
    lblWynik.Text = $"Wybrana kategoria: {kategoria}";
}

Częste błędy

❌ Błąd 1: Literówka w nazwie metody Click

<!-- XAML: -->
<Button Click="btnZapisz_Click" />

// C#:
private void btnZapsiz_Click(...) // literówka!
{ }
// Błąd kompilacji

❌ Błąd 2: Zapominanie o sprawdzeniu null przy rzutowaniu sender

private void Wspolna_Click(object sender, ...)
{
    Button btn = (Button)sender;
    string tag = (string)btn.Tag;
    // Jeśli Tag nie był ustawiony (null) –
    // rzutowanie wyrzuci wyjątek!
}

private void Wspolna_Click(object sender, ...)
{
    Button btn = (Button)sender;
    if (btn.Tag == null) return;
    string tag = (string)btn.Tag;
}

❌ Błąd 3: Brak ToolTip na przycisku tylko z ikoną

<Button Content="🗑" Width="36" />
<!-- Co robi ten przycisk?
     Użytkownik musi zgadywać -->

<Button Content="🗑" Width="36"
        ToolTip="Usuń element" />

❌ Błąd 4: Niewyłączony przycisk podczas długiej operacji

private void btnWyslij_Click(...)
{
    // Brak IsEnabled = false
    // Użytkownik może kliknąć
    // kilka razy zanim operacja się skończy
    WyslijDane();
}

private void btnWyslij_Click(...)
{
    btnWyslij.IsEnabled = false;
    WyslijDane();
    btnWyslij.IsEnabled = true;
}

Zadania do wykonania