Prvok Tlačidlo

Žiaden GUI Framework by nebol kompletný bez ovládacieho prvku Tlačidlo, takže je samozrejmosťou že WPF má jedno veľmi pekné zahrnuté, a tak ako aj ostatné prvky Frameworku, je veľmi flexibilné a dovolí Vám uskutočniť skoro čokoľvek. Ale začnime s základnými príkladmi.

Jednoduché tlačidlo

Tak ako aj mnoho WPF prvkov, Tlačidlo môže byť zobrazené jednoduchým pridaním odkazu Tlačidla do Vášho okna. Ak vložíte text medzi odkazy ( alebo ďalšieho prvku ), bude sa správať ako obsah Tlačidla :

<Button>Hello, world!</Button>

Jednoduché, však ? Samozrejme, tlačidlo zatiaľ nič nevykonáva, ale ak ho označíte, zistíte že obsahuje pekný efekt ak cez neho prejdete kurzorom. Ale poďme s tlačidlom niečo spraviť, a to že mu napojíme Click event ( o tomto procese nájdete viacej informácií v článku popisujúcim eventy v XAML ):

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

V kóde na pozadí, budete potrebovať zhodnú metódu na obslúženie kliknutia :

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

Teraz máte základné tlačidlo na ktoré keď kliknete zobrazí sa Vám správa.

Formátovaný obsah

Na pozadí, jednoduchý text v obsahu tlačidla je premenený na TextBlock prvok, čo znamená že môžete meniť vlastnosti formátovania textu. Na prvku Tlačidlo nájdete niekoľko vlastností na tieto zmeny, zahŕňajúce ( ale nie sú obmedzené len na tieto ) Foreground (Popredie), Background (pozadie), FontWeight (typ písma) a ďalšie. Jednoducho povedané je veľmi jednoduché zmeniť formátovanie textu prvku Tlačidlo.

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

Nastavením týchto vlastností priamo na Tlačidle, ste samozrejme obmedzený na používanie rovnakého formátovanie na všetok obsah, ale ak to nestačí, treba si čítať ďalej pre pokročilejšie formátovanie obsahu.

Tlačidlá s pokročilým obsahom

Už niekoľko krát sme o tomto rozprávali, ale jednou z super vecí ohľadom WPF je možnosť zameniť jednoduchý text jedného prvku s ostatnými WPF prvkami. To taktiež znamená že nemusíte svoje tlačidlá obmedzovať na jednoduchý text, formátovaný rovnakým spôsobom - môžete si pridať niekoľko Text prvkov s rôznym formátovaním. WPF Tlačidlo podporuje len jedného priameho potomka prvku, ale môžete vytvoriť panel, ktorý potom bude obsahovať toľko prvkov koľko potrebujete. Týmto môžete vytvoriť tlačidlá s rôznymi druhmi formátovania:

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

Samozrejme nie ste limitovaný len na text - do tlačidla môžete vložiť čokoľvek čo chcete, čo nás prináša k téme, ktorú zaujíma veľa ľudí. Tlačidlá s obrázkami!

Tlačidlá s obrázkami (ImageButton)

V mnoho UI frame workoch, nájdete základné Tlačidlo a potom niekoľko variánt, ktoré ponúkajú extra funkcie. Jednou z naj častejších variánt je ImmageButton, ktoré ako naznačuje jeho názov, je tlačidlo ktoré umožňuje zahrnúť obrázok pred text. Ale v WPF, nie je potrebný nezávislý prvok aby sme to dosiahli, ako ste práve videli, môžeme pridať niekoľko prvkov do Tlačidla, takže stačí ak do neho jednoducho pridáte Image prvok, práve takto :

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

Je veľmi jednoduché vytvoriť ImageButton v WPF, a samozrejme môžete umiestňovať prvky ako chcete, napr. ak chcete obrázok po texte namiesto pre textom atď.

Odsadenie v Tlačidle

Mohli ste si všimnúť, že tlačidlá v WPF frameworku nemajú predvolené žiadne odsadenie. To znamená že sa text nachádza blízko okrajov, čo môže vyzerať trocha zvláštne, pretože väčšina tlačidiel ktoré nájdete inde (web, iné aplikácie atď.) majú aspoň nejaké odsadenie na stranách. Netreba sa obávať, pretože tlačidlo obsahuje Padding (odsadenie) nastavenie :

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

Toto aplikuje odsadenie 5 pixelov na stranách a 2 pixely na vrchu a spodku. Ale nastavenie odsadenia na Vašich všetkých tlačidlách môže v určitom bode byť otravné, takže pre Vás máme malú pomôcku : Odsadenie môžete aplikovať globálne, buď to v celej aplikácii alebo iba v špecifických oknách, použitím príkazu Style (viacej o tomto neskôr). Tu je príklad ako to aplikujeme na okno, použitím Window.Reouserces nastavenia :

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

Odsadenie bude teraz aplikované na všetkých tlačidlách, ale samozrejme viete prepísať toto nastavenie tým že nastavíte odsadenie na konkrétnom tlačidle. Na tomto príklade je zobrazené ako budú vyzerať všetky tlačidlá s spoločným odsadením :

Súhrn

Ako vidíte v tomto článku, používanie tlačidiel v WPF frameworku je veľmi jednoduché a tento dôležitý prvok môžete upravovať skoro do nekonečna.