Kontrolka Button

Żaden framework graficznego interfejsu użytkownika nie byłby kompletny bez kontrolki przycisku, więc WPF również ją zawiera. Tak jak inne kontrolki, jest ona bardzo elastyczna i pozwoli na zrealizowanie niemalże wszystkich pomysłów. Ale zacznijmy z jakimś podstawowym przykładem.

Prosty przycisk

Jak wiele innych kontrolek WPF, przycisk można wyświetlić w prosty sposób dodając znacznik Button do Twojego okna. Jeśli umieścisz tekst między znacznikami (otwierającym i zamykającym), lub inną kontrolkę, zachowa się on jak zawartość przycisku.

<Button>Hello, world!</Button>

Proste, prawda? Oczywiście, przycisk w tym momencie jeszcze nic nie robi, ale jeśli najedziesz na niego, zauważysz, że posiada ładny efekt. Sprawmy, aby przycisk coś robił subskrybując do jego zdarzenia Click (więcej informacji na temat tego procesu możesz znaleźć w artykule poświęconym subskrybowaniu do zdarzeń w XAML, o tutaj https://www.wpf-tutorial.com/pl/7/xaml/zdarzenia-w-xaml/):

<Button Click="HelloWorldButton_Click">Hello, World!</Button>

W warstwie kodu (plik o rozszerzeniu .xaml.cs) musisz obsłużyć kliknięcie w metodzie:

private void HelloWorldButton_Click(object sender, RoutedEventArgs e)
{
    MessageBox.Show("Hello, world!");
}

Masz teraz bardzo podstawowy przycisk, a gdy na niego klikniesz, wiadomość zostanie wyświetlona!

Formatowanie zawartości

Wewnątrz prosty tekst w przycisku zamieniany jest w kontrolkę TextBlock, co oznacza również, że możesz kontrolować te same aspekty formatowania tekstu. Znajdziesz parę właściwości w kontrolce przycisku do formatowania tekstu, m.in. Foreground (pierwszy plan), Background (tło), FontWeight(czcionka). Jak widać, formatowanie tekstu w kontrolce przycisku jest bardzo łatwe:

<Button Background="Beige" Foreground="Blue" FontWeight="Bold">Formatted Button</Button>

Ustawiając te właściwości bezpośrednio w przycisku, jesteś oczywiście ograniczony do zastosowania takich samych ustawień dla całej zawartości przycisku. Ale jeśli takie formatowanie nie jest wystarczające, czytaj dalej a poznasz bardziej zaawansowane techniki formatowania zawartości.

Przycisk z zaawansowanym formatowaniem zawartości

Mówiliśmy o tym już kilka razy, ale jednym z bardzo fajnych aspektów WPF jest możliwość zastąpienia prostego tekstu wewnątrz kontrolki inną kontrolką WPF. Co również oznacza, że nie musisz ograniczać swojego przycisku do prostego tekstu sformatowanego w jeden sposób - możesz po prostu dodać kilka kontrolek z różnym formatowaniem. Przycisk WPF wspiera zastosowanie tylko jednego bezpośredniego potomka (element podrzędny) , ale bez problemu możesz użyć do tego kontrolki Panel, która pomieści tak wiele kontrolek ile potrzebujesz. Możesz w ten sposób tworzyć przyciski z różnorodnym formatowaniem:

<Button>
    <StackPanel Orientation="Horizontal">
    <TextBlock>Formatted </TextBlock>
    <TextBlock Foreground="Blue" FontWeight="Bold" Margin="2,0">Button</TextBlock>
    <TextBlock Foreground="Gray" FontStyle="Italic">[Various]</TextBlock>
    </StackPanel>
</Button>

Oczywiście, nie musisz ograniczać się jedynie do tekstu - możesz umieścić wewnątrz przycisku co tylko zechcesz, co prowadzi nas do tematu, o który zapyta wiele osób. Przycisk z obrazkiem!

Przycisk z obrazem (ImageButton)

W wielu frameworkach UI znajdziesz podstawowy przycisk i potem kilka innych wariantów, które będą oferować dodatkowe możliwości. Jednym z najczęściej używanych jest ImageButton, który, jak nazwa wskazuje, jest przyciskiem pozwalającym na umieszczenie obrazka przed tekstem. Ale w WPF nie ma potrzeby rozgraniczać tych kontrolek - tak jak właśnie widziałeś, możemy umieścić kilka różnych kontrolek wewnątrz przycisku, więc w prosty sposób możesz dodać kontrolkę obrazka, w następujący sposób:

<Button Padding="5">  
    <StackPanel Orientation="Horizontal">  
    <Image Source="/WpfTutorialSamples;component/Images/help.png" />  
    <TextBlock Margin="5,0">Help</TextBlock>  
    </StackPanel>  
</Button>

Stworzenie ImageButton w WPF jest naprawdę takie proste i oczywiście możesz dowolnie zmieniać zawartość, np. jeśli chcesz by obraz był za tekstem zamiast przed nim itp.

Odstęp zawartości od brzegów przycisku (padding)

Możesz zauważyć, że w WPF przyciski nie mają żadnego domyślnego odstępu zawartości od brzegów przycisku (padding). Co oznacza, że tekst jest bardzo blisko brzegów, co może wyglądać odrobinę dziwnie, ponieważ inne przyciski widoczne gdzie indziej (przeglądarka internetowa, inne aplikacje) mają chociaż mały odstęp. Bez obaw, przyciski w WPF mają właściwość Padding, dzięki której to osiągniesz:

<Button Padding="5,2">Hello, World!</Button>

To spowoduje zastosowanie 5 pikseli odstępu po obu stronach tekstu i 2 pikseli u góry i na dole. Ale dodanie odstępu do wszystkich przycisków może być pracochłonne, dlatego mała podpowiedź: możesz dodać odstęp globalnie do całej aplikacji, albo do konkretnego okna używając stylów (Style) (więcej o stylach będzie później). Oto przykład dodania odstępu do okna (Window), używając właściwości Window.Resources:

<Window.Resources>
    <Style TargetType="{x:Type Button}">
    <Setter Property="Padding" Value="5,2"/>
    </Style>
</Window.Resources>

Ten odstęp zostanie teraz zastosowany do wszystkich przycisków na stronie, oczywiście nic nie stoi na przeszkodzie abyś nadpisał go specjalnie zdefiniowanym odstępem bezpośrednio w przycisku. Oto jak wszystkie przyciski wyglądają z ogólnym odstępem:

Podsumowanie

Po przeczytaniu tego artykułu, widzisz, że używanie przycisków w WPF jest bardzo proste i możesz niemal bez ograniczeń dostosowywać ich wygląd do swoich potrzeb.