Jan Vávra - Osobní stránky

WPF Tutorial Díl 2. – Grafické úpravy a práce s Designérem

V prvním díle seriálu jsme založili nový projekt pojmenovaný WpfTutorial, upravili vzhled okna, přidali mu nadpis a vložili do něj Label s textem „Hello World“. V dalším díle graficky upravíme okno aplikace a výše zmíněný Label. Při tom využijeme mimo jiné integrovaný Designer Visual Studia.

Úvod

Otevřete projekt z minulého dílu (k stažení zde). Nyní se přepněte do Designeru – to provedete kliknutím na pravé tlačítkem myši v okně se zobrazeným XAMLem a v kontextové nabídce vyberte View Designer (stejnou akci lze provést po stisknutí klávesové zkratky Shift + F7).

Designer

Designer slouží k rychlému náhledu na právě upravované Okno aplikace. Osobně v Designeru pracuji příliš nepracuji - po čase si totiž zvyknete na samotný XAML a jeho grafickou interpretaci již není tolik potřeba využívat (samozřejmě pouze co se týče rozmístění prvků - stylování je již věc jiná). V tomto seriálu budeme pracovat spíše v XAML nebo C#.

Nyní vidíte vaše okno, tak jak by mělo vypadat po spuštění. Měli byste vidět bílou plochu, na které je zobrazen text „Hello World“. Tento text je zobrazen díky prvku Label s vyplněnou proměnou „Content“. Klikněte na text „Hello world“ a měl by se označit prvek Label. V dolním rohu Visual Studia by se vám měli zobrazit Properties tohoto prvku – v hlavičce této tabulky byste měli vidět Type - Label.

wpf dil2 01

Dále změníme barvu a velikost písma daného textu. Rozklikněte proto v tabulce „Properties“ položku Brush a změňte hodnotu „Foreground“ na libovolnou barvu. Ihned po změně barvy by se vám měl adekvátně změnit vzhled textu v okně designeru.

wpf dil2 02

V tabulce brush vidíte mimo jiné i položku Background (barva pozadí), BorderBrush (barvu obtažení) a OpacityMask.
Pro změnu velikosti písma si rozklikněte položku Text a zde změňte hodnotu velikosti písma z 12 na 16. Opět by měla být vidět změna v oknu designeru.
Může vás zajímat jak se aktuálně změnit XAML. Zkuste se proto přepnout do hybridního zobrazení – ukazující jak XAML tak i Designer. Toto provedete například kliknutím na tlačítko nacházející se v pravém dolním rohu okna designeru.

wpf dil2 03

Ve spodní části byste měli vidět XAML a v horní adekvátní grafickou interpretaci v designeru. Pokud se zadíváte do XAMLu všimněte si, že do elementu Label přibylo několik atributů. Konkrétně property Foreground a FontSize. Element Label by měl vypadat v tuto chvílí například takto:

<Label Content="Hello World" Foreground="#FFFF8B00" FontSize="16" />

Nic vám nebrání tyto hodnoty měnit jak v tabulce Properties tak přímo v XAML. Zkuste si proto například změnit hodnotu FontSize na 18 a sami uvidíte, že se tato změna ihned projeví v okně designeru. Pokud pracujete v XAMLu tak okno properties zobrazuje hodnoty elementu ve kterém se aktuálně nacházíte – to jaký elementu zrovna upravujete lze vidět v hlavičce tabulky Properties. Klikněte proto v XAML do elementu Window a změňte například jeho hodnotu Background. Do elementu Window se vám vloží atribut Background, který nastaví oknu barvu pozadí v definované barvě.
Klikněte teď na Debug/Start Debugging a nebo stiskněte F5 a prohlédněte si vámi vytvořené dílo.

wpf dil2 04

Váš závěrečný zdrojový kód XAML bude vypadat například takto:

<Window x:Class="WpfTutorial.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Wpf Tutorial" Height="250" Width="250" Background="#FFFFF9C2">
    <Label Content="Hello World" Foreground="#FFFF8B00" FontSize="16" />
</Window>

Závěr

Sami vidíte, že práce s Designerem není žádná věda. Jeho omezení mohou přijít ve chvíli, kdy se snažíte načítat dynamická data či když vytváříte vlastní ovládací prvky. Ale není to nic neřešitelného. Pokud chcete využívat Designer naplno, doporučuji využít schopnosti programu Microsoft Expression Designer, tento program je lépe uzpůsobený pro práci v designe režimu. Jak jsem ale již napsal výše, tento tutoriál je primárně zaměřený na XAML a C# část WPF, takže se obejdeme i bez využití Designeru. Příští díl se podíváme na využití Toolboxu a nakousneme základy Layoutu ve WPF.

 

Vítejte

Mé jméno je Jan Vávra a jsem člověk s mnoha tvůrčími koníčky. Již od dětství jsem byl fascinován tvořením téměř čehokoliv. Ať už to bylo vymýšlení vlastních melodií, textů, vytváření úrovní do starých konzolových či PC her, natáčení, focení, programování textových her a mnoho dalších kreativních aktivit. Bohužel čas je neúprosný a není neomezený, a mé koníčky se tak nakonec ustálily na tom, co zveřejňuji na tomto webu. Primárně se teď zaměřuji na programování v .NET a hudební tvorbou pod aliasem "John Waver".