Ovládací prvek "Button"

Žádný framework na tvorbu okenních aplikací by se zřejmě neobešel bez kontrolky tlačítko, a WPF ho samozřejmě také má, reprezentuje ho třída Button. Stejně jako všechny ostatní kontrolky je i tlačítko velmi flexibilní a dokážete s ním udělat opravdu téměř cokoliv. Začněme ale s několika základními příklady.

Prosté tlačítko

Tlačítko zobrazíme, podobně jako většinu jiných WPF kontrolek, přidáním tagu Button do XAML kódu. Pokud do tagu uzavřete text (či jinou kontrolku), zobrazí se jako obsah tlačítka:

<Button>Hello, world!</Button>

Jak snadné, není-liž pravda? Naše tlačítko sice zatím nic nedělá, ale když na něj najedete myší, zjistíte, že již obsahuje pěkný efekt najetého kurzoru. Pojďme však tlačítku přidat nějakou funkcionalitu. Provedeme to napojením se na událost Click (více informací k této problematice naleznete v článku Události v jazyce XAML):

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

V Code-behind souboru budete potřebovat odpovídající metodu, která obslouží naši událost Click:

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

Nyní máte hotové velmi jednoduché tlačítko, které po kliknutí zobrazí zprávu!

Formátovaný obsah

Interně se jednoduchý text, který je v XAMLu zapsán jako Content našeho tlačítka, převádí na kontrolku TextBlock, která se pak vykreslí v tlačítku. To mimo jiné také znamená, že je možné stylovat text v tlačítku stejně, jako ten v TextBlocku. Ve třídě Button najdete několik vlastností, které stylování umožňují, například Foreground, Background, FontWeight a další. Jednoduše řečeno, změnit formátování textu uvnitř tlačítka je snadné:

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

Nastavením těchto vlastností přímo tlačítku se podle nich samozřejmě naformátuje celý text. Pokud vám to však nestačí, čtěte dále a dozvíte se, jak udělat formátování ještě pokročilejší.

Tlačítka s pokročilým obsahem

Už jsme o tom mluvili několikrát, nicméně jedna ze skvělých věcí na WPF je možnost nahradit prostý text v kontrolce za jinou kontrolku. To také vede k tomu, že se nemusíte omezovat na tlačítka s obyčejným textem, který má navíc jednotné formátování - můžete prostě přidat několik kontrolek, a každé dát jiné formátování. Do Buttonu je možné vložit napřímo jedinou kontrolku, tou bude nějaký Panel, do kterého pak bude možné dát tolik kontrolek, kolik jen budete potřebovat. Takto se dá vytvořit řada tlačítek, každé s jiným formátováním:

<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>

Pochopitelně nejste omezení jen na text - do tlačítka lze vložit cokoli, což nás vede k tématu, které zajímá mnoho lidí - jak vyrobit tlačítko s obrázkem!

Tlačítka s obrázkem (ImageButton)

V celé řadě frameworků naleznete klasické tlačítko, a spolu s ním několik dalších variant, které poskytnou funkcionality navíc. Jednou z nejčastějších takovýchto variant je ImageButton, tedy tlačítko s obrázkem, zobrazeným před textem na zbytku tlačítka. Naproti tomu ve WPF není potřeba žádná jiná kontrolka, než normální Button, protože, jak už jste mohli vidět, do něj můžeme vložit, jakékoli kontrolky chceme, a není tak problém vložit tam kontrolku Image, která vykresluje obrázek:

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

Udělat si ve WPF ImageButton je tedy velice snadné, a také flexibilní, protože je snadné změnit pořadí vnitřních kontrolek, a tak určit, jestli bude první obrázek nebo text, atd.

Padding v tlačítku

Možná jste si všimli, že tlačítka ve WPF nemají žádný vnitřní okraj (padding), což znamená, že text je hodně blízko k okrajům tlačítka, což může vypadat zvláštně, vzhledem k tomu, že většina moderních webů a aplikací má tlačítka, která vnitřní okraj mají, alespoň po stranách. Není ale třeba se obávat, na to existuje vlastnost Padding:

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

Tím přidáme vnitřní okraj o šířce 5 pixelů po stranách, a 2 pixely nahoře a dole. Kdybyste ale měli psát změnu paddingu ke každému tlačítku zvlášť, bylo by to trošku zdlouhavé a výsledný kód by nebyl moc kvalitní, takže vám nyní ukážeme malinký trik: vlastnost Padding je možné aplikovat globálně, ať už skrze celou aplikaci, nebo jen v konkrétním okně. Používají se na to styly, o kterých si více povíme později, ale zde alespoň příklad, kde jej aplikujeme na okno (Window) skrze vlastnost Window.Resources:

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

Nyní se tento Padding aplikuje na všechna tlačítka v okně. Samozřejmě, pokud na nějakém tlačítku napíšete jiný Padding, použije se ten namísto globálně definovaného. Zde ještě ukázka toho, jak budou vypadat všechna tlačítka z předešlého příkladu s globálně definovaným paddingem:

Shrnutí

Jak jste mohli vidět, používání tlačítek ve WPF je velmi jednoduché, a je možné je do nekonečna přizpůsobovat.