The Button control

Egy GUI keretrendszer sem lenne teljes 'Button' vezérlő nélkül, ezért természetesen a WPF is rendelkezik ilyen megoldással. Mint a többi vezérlő ez is roppant rugalmas és szinte bármit meg tudsz vele valósítani. De kezdjünk pár alap példával.

Egyszerű nyomógomb ( Button )

Mint a többi WPF vezérlő elem, a 'Button' is egyszerűen megjeleníthető, csak hozzá kell adni a 'Button' címkét az ablakhoz. Ha szöveget teszünk a címkék közé ( vagy egy másik vezérlő elemet ) a tartalma megjelenik a 'Button'-on:

<Button>Hello, world!</Button>

Egyszerű nem? Természetesen a 'Button' még nem csinál semmit egyenlőre, azon kívül, hogy ha rámutatunk az egérrel akkor egy látványos effekt keretében kivilágosodik. De csináljunk is valamit, iratkozzunk fel a Click eseményre ( további információ erről a folyamatról abban a cikkben található ahol az XAML eseményekre való feliratkozást tárgyaljuk):

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

A c# forráskódban egy megfelelő metódusra lesz szükségünk a 'Click' kezeléséhez:

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

Most már van egy alap 'Button' vezérlőnk amire 'Click'-elve egy üzenet-ablak jelenik meg!

Formázott tartalom

A háttérben a 'Button' sima szöveges tartalma egy 'TextBlock' vezérlőbe lesz burkolva, aminek köszönhetően, annak megfelelően formázható. A 'Button' vezérlő így számos tulajdonsággal fog rendelkezni, mint például ( és nem csak ) Foreground, Background vagy FontWeight és így tovább... Így látszik, hogy könnyedén tudjuk a szöveget akaratunknak megfelelően testre-szabni a vezérlőn:

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

Amennyiben közvetlenül állítjuk be ezeket a tulajdonságokat akkor azok az egész vezérlőre érvényesek lesznek. Ha ez nem felel meg akkor olvass tovább a fejlettebb tartalom formázáshoz.

'Button' kiterjesztett tartalommal

Már többször beszéltünk róla, hogy az egyik legjobb dolog a WPF-ben, az a képesség, hogy egy vezérlő sima szöveges tartalmát egyszerűen lecserélhetjük egy másik WPF vezérlőre. Ez esetünkben azt jelenti, hogy a 'Button'-unk nem csak egységesen formázott szöveget jeleníthet meg, hanem több szöveges vezérlőből is állhat különböző formázással. Bár maga a WPF 'Button' csak egy direkt gyermek objektumot tartalmazhat, de ez lehet akár egy 'Panel'-is ami már annyi objektumot zár magába, amennyire csak szükségünk van. Ennek segítségével olyan változatos 'Button' vezérlőt csinálhatunk amilyet csak akarunk:

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

Természetesen a tartalom nem csak sima szöveg lehet - szinte bármi, ami ahhoz a kérdéshez vezet amit mindenki fel szokott tenni: nyomógomb képpel!

Nyomógomb képpel

A legtöbb UI keretrendszerben található hagyományos nyomógomb és egy / vagy több különböző variánsa, amik további extra funkcióval bírnak. A legismertebb változat az ImageButton ( gomb-képpel ) ami ahogy a neve is mutatja a szöveg mellett képet is képes megjeleníteni. De WPF-ben nincs szükség külön vezérlőre - mert azt saját magunk is könnyedén meg tudjuk csinálni, amint a példa is mutatja:

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

Ilyen egyszerű WPF-ben egy nyomógombot készíteni ami képet is tartalmaz és könnyedén testre szabhatjuk - ha például a képet a szöveg mögé szeretnénk tenni vagy bármi mást csinálnák.

Gomb hely-kitöltés

Talán észrevetted, hogy a gombok WPF-ben alapértelmezés szerint nem alkalmaznak kitöltést ( padding ). Ezért a szöveg nagyon közel van a gomb széleihez, ami egy kicsit furcsán néz ki, hiszen más rendszerekben ez nem feltétlenül így működik. Semmi gond, ugyanis a Padding tulajdonsággal ez könnyedén orvosolhatjuk:

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

Ezzel máris hozzáadtunk 5 pixel-t az oldalakon és 2 pixelt az alsó és felső keret közé. Persze minden egyes gombhoz egyesével hozzáadni a kitöltést egy kicsit fárasztó lenne, ezért itt egy tipp: globálisan is megadhatjuk a kitöltést, akár az egész applikációra, vagy egyes ablakokhoz is, ha stílusokat ( Style ) használunk ( a stílusokról majd később ). Addig is itt egy példa amiben az ablakhoz rendelünk kitöltést a Window.Resources tulajdonsággal:

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

Ez a kitöltés most már minden gombra érvényes lesz az adott ablakban, de természetesen ezt bármikor felül definiálhatjuk a 'Padding' tulajdonság átírásával az adott vezérlőn egyesével is. Most pedig egy példa, hogyan is néznek ki a gombjaink a beállított általános kitöltéssel:

Összegzés

Amint a cikkből látható, WPF-ben a gombok használata és testreszabása roppant könnyű, szinte korlátok nélkül.