Microsoft Expression Blend - Hei maailma

V totomto článku si vytvoříme první program, který vyžije naplno schopností WPF. Program nazveme Hei maailma.

Hei maailma bude program s vlastním oknem (okno si nakreslíme). Naučíme se tvořit a vybarvovat tlačítka a nastavovat přechody. V tuto chvíli spustíme Blend a vytvoříme novou WPF aplikaci, vybereme umístění, jazyk, ve kterém budeme programovat (C#), a název projektu zadáme Hei maailma.

Tvorba vlastního okna

Ano, zbavíme se těch starých hranatých oken a namalujeme si vlastní okno dle libosti. Postup bude následující:

1. V seznamu prvků vybereme naše okno a v záložce Properties nastavíme AllowsTransparency na hodnotu true, zaškrtnutím zatržítka. Tím docílíme schování ošklivého rámečku.

   

2. V seznamu prvků vybereme LayoutRoot a v Properties nastavíme průhledné pozadí okna. Toho docílíme vymazáním výplně prvku Window. V  sekci Brushes klepněte na políčko No brush.

   

3. Zvolíme nástroj Pen (Pero) a nakreslíme si vlastní tvar okna. Třeba takový jako na následujícím obrázku.

   

4. Nyní jsme se rozhodli, že chceme pozměnit tvar. Nezoufejte, použijte nástroj Direct Selection (Přímý výběr) a okno pomocí úchopových bodů editujte.

   

5. Tak, v dalším bodě se podíváme, jak našemu oknu nastavíme nějaký poutavý přechod na pozadí místo té standardní bílé. Pomocí nástroje Selection (Výběr) vybereme námi nakreslený tvar. Přepneme se na kartu Properties a v části Brushes zapneme Gradient brush.

   

6. Nyní se jistě nespokojíte s černobílým přechodem. Změnu přechodu provedeme tak, že klikneme na posuvník pod paletou barev. Vybereme jeden ze dvou jezdců. Nyní pokud vyberete jinou barvu místo bílé, například azurovou, přechod se nám změní na černo-azurový. Dále můžeme změnit přechod z lineárního na kruhový, to uděláme kliknutím na Radial gradient.

   

7. Nyní při stisku klávesy F5 program zkompilujeme a spustíme. Máme před sebou vlastní okno dle taktovky WPF. Nyní ale nastává problém, který spolu elegantně vyřešíme. Oknem nejde pohybovat. Vypneme ho tedy kombinací kláves Alt + F4.

   

8. K tomu, abychom oknem mohli pohybovat, potřebujeme napsat event handler (obsluhu události). V Blendu vybereme náš tvar, přepneme se na záložku Properties, kde zvolíme ikonku Events.

   

9. V seznamu najdeme vlastnost MouseLeftButtonDown a dvakrát na ni poklepáme.

   

10. Spustí se nám Visual Studio. V souboru Window1.xaml.cs bude předem vytvořená metoda Path_MouseLeftButtonDown. Do této metody zapíšeme jedinou metodu DragMove();.

    

11. Visual Studio zavřeme a při stisku klávesy F5 v Blendu naši aplikaci znovu zkompilujeme. Nyní při kliknutí do plochy okna a tažením myši můžeme okno posouvat.

    

12. Okno máme hotové, přistupme tedy k další části a oživme okno pomocí pár tlačítek.

Tvorba tlačítek

Touto částí navážeme na tu předchozí. To znamená, že tlačítka budeme umisťovat do našeho vlastního okna. Pojďme na to.

1. V panelu nástrojů vybereme Button (Tlačítko) a nakreslíme do plochy našeho okna.

   

2. Nyní si tlačítko vybarvíme, vše provedeme úplně stejně jako vybarvení okna. Tak do toho!

   

3. Už je vám možná divné, jak jsem nastavil bílý text na tlačítku. Není to nic složitého, stačí se v sekci Brushes přepnout z Background na Foreground.

   

4. Pro změnu textu na tlačítku vybereme tlačítko nástrojem Selection (Výběr). Přepneme se na kartu Properties, kde v sekci Common Properties přepíšeme hodnotu Content. Tlačítko můžeme libovolně zvětšit či přemístit pomocí nástroje Selection (Výběr).

   

5. V okně vytvoříme ještě jedno tlačítko, které bude sloužit pro vypnutí okna.

   

6. Za další si vytvoříme jeden Label (Popisek), kam bude program vypisovat odpověď na stisk tlačítka. Label vytvoříme tak, že nejprve rozbalíme nabídku TextBox, kde vybereme Label. Nakreslíme ho stejně jako tlačíko. Po nakreslení máme možnost napsat nějaký obsah. Text Labelu smažeme a necháme prázdné.

   

7. Barvu textu Labelu nastavíme úplně stejně jako barvu textu Button. Pro vyzkoušení vepíšeme dočasný text, který po nastavení barvy vymažeme (vlastnost Content v Common Properties).

   

   

8. Tak nyní máme základní vzhled aplikace hotov. Pro další pokračování vytvoříme Eventy (události) pro tlačítka Jak se řekne finsky „Ahoj světe“? a Zavřít. Pro obě tlačítka vytvoříme Event Click.
9. Začněme tlačítkem Zavřít. Do metody Button_Click zapíšeme metodu Close().

   

10. Event přiřadíme i druhému tlačítku. Do metody Button2_Click umístíme následující kód:

    Label1.Content = "Hei maailma";

11. Nyní můžeme zavřít VS 2008. V Blendu naši aplikaci opět zkompilujeme pomocí klávesy F5. A právě máte před sebou hotový program.

Závěr

V dnešním „krátkém“ díle jsme se naučili základní práci s Blendem, jako je kreslení okna, tvorba tlačítek, vytváření event handlerů a mnoho dalšího. Těším se na shledání u dalšího dílu.