3. diel - Programujeme pre Windows 8 - Dokončenie prvej aplikácie

V minulej lekcii, Programujeme pre Windows 8 - Prvá aplikácia , sme si popísali základnú štruktúru šablón a samotnej aplikácie. Dnes sa už konečne vrhneme na samotné programovanie. Vytvoríme si program klasického Hello World, ktorý však mierne vylepšíme.

Otvoríme si náš vytvorený projekt. Pokiaľ ho nemáte, založte si ho podľa minulého dielu. Prvé čo si zmeníme je nadpis aplikácie. Otvorte si MainPage.xaml a nájdite si riadky

<Page.Resources>

        <!-- TODO: Delete this line if the key AppName is declared in App.xaml -->
        <x:String x:Key="AppName">My Application</x:String>
    </Page.Resources>

Tu deklarujeme lokálne zdroje stránky. Visual Studio nám vygenerovalo objekt typu string pre názov aplikácie. Zdroje sa používajú, ak potrebujete na viacerých miestach mať napríklad rovnaký text. Môžete síce každému prvku individuálne pripísať text, ale čo keď budete chcieť raz text zmeniť? Museli by ste text meniť na niekoľkých miestach naraz. Vďaka zdrojom si túto zbytočnú prácu odpustíme. Zmeňte teda text napríklad na Zdravice 1.0. výsledok

<x:String x:Key="AppName">Zdravič 1.0</x:String>

Skúste si aplikáciu spustiť. Vidíte že sa nadpis zmenil. Pozrieme sa na to viac zblízka. Nájdite si riadok (nachádza sa pravděpodbně na riadku 37).

<TextBlock x:Name="pageTitle" Grid.Column="1" Text="{StaticResource AppName}" Style="{StaticResource PageHeaderTextStyle}"/>

Tu máme prvok typu TextBlock (obdoba Label). Nastavujeme mu názov (pageTitle), zarovnanie v gridu, text a štýl. Do atribútu text môžeme napísať rovno náš nadpis, tu je však ukázané použitie PageResources.

Odbočíme od programu a dáme si trochu teórie. Už som to načal v minulom diele. Aplikácia sa doslova krája na kúsky mriežok (Grid). Grid má jednu veľmi dôležitú vlastnosť, dynamicky sa prispôsobuje rozlíšenie. Prvky sa větišnou centrujú a odsadzuje sa relatívne. Naša aplikácia má zatiaľ dva Gridy.

Jeden Grid je pre celú aplikáciu a je rozdelený na dva riadky

<Grid Style="{StaticResource LayoutRootStyle}">
       <Grid.RowDefinitions>
           <RowDefinition Height="140"/>
           <RowDefinition Height="*"/>
       </Grid.RowDefinitions>

  <!-- Pokračování kódu .... -->

Deklarácia riadkov vykonáme cez Grid.RowDefiniton a samotný riadok RowDefinition. Výšku môžeme zadať tromi spôsobmi

• Pevne stanovená výška v px
• Auto - automatická výška
• * - pomer (napr. 2 * zaistí že bude 2x vyššia ako predchádzajúci riadok)

Tu máme teda 1 riadok vysoký presne 140px a druhý riadok zaberá zvyšok obrazovky. Úplne podobne sa deklarujú stĺpca. Druhý Grid slúži pre zobrazenie tlačidla späť a nášho nadpisu.

<Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
            <TextBlock x:Name="pageTitle" Grid.Column="1" Text="{StaticResource AppName}" Style="{StaticResource PageHeaderTextStyle}"/>
        </Grid>

Môžeme si všimnúť, že druhý grid je rozdelený na 2 stĺpce. V 1. stĺpci je tlačidlo späť a stĺpec má hodnotu Auto. Druhý stĺpec obsahuje nadpis aplikácie. Tento Grid sa umiestnil do 1. riadku nadradeného Gridu. Poďme si skúsiť ho umiestniť do 2.řádku.

Gridu nastavíme Grid.Row, čo určuje umiestnenie v riadku nadradeného gridu. Počítanie riadkov prebieha od nuly!

<Grid Grid.Row="1">
          <Grid.ColumnDefinitions>

<!-- Pokračování kódu -->

Pustite si aplikáciu. Vidíme, že nadpis je umiestnený do dolného okraja obrazovky. Je to spôsobené systémovým štýlom. Vráťte celý Grid späť do prvého riadku. Na celom tomto princípe funguje dynamika aplikácií.

Teraz si pridáme tieto prvky

• TextBlock pre pozdrav
• Button pre vyvolanie pozdravu

Budeme chcieť, aby oba prvky boli vždy v strede obrazovky a pod sebou. Nastaviť absolútny odsadenie je nezmysel, pretože pri zmene rozlíšenia by nezostali uprostred. Výpis niekoľko možných riešení.

• Nastaviť prvkom Centrovanie
• Pridať dašlí Grid a rozdeliť ho na 3 stĺpce a 3 riadky
• Kombinácia 2 predchádzajúcich

Samozrejme spôsobov je viac a druhý spôsob pre náš účel je veľmi zbytočný. Pridáme si ďalší Grid, ktorý umiestnime do druhého riadku hlavného Gridu. Kód môžete napísať buď pred Grid s nadpisom alebo pod neho, je to na vás.

<Grid Grid.Row="1">

</Grid>

Teraz pridáme naše prvky. Obom prvkom nastavíme centrovanie. Horizontálne centrovanie a vertikálne pomocou HorizontalAlig­nment a VerticalAlignmen­t. Prvky pridáme do nášho novo pridaného Gridu!

<TextBlock x:Name="txVypis" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="40" />
           <Button x:Name="btnPozdrav" Content="Ahoj" HorizontalAlignment="Center" VerticalAlignment="Center" />

Prvku TextBlock sme si dali meno txVypis a nastavili mu centrovanie na "center". To zaistí umiestnenie vždy uprostred nadriadeného prvku (grid). Nenastavili sme vlastnosť Text, tú pridáme až pri stlačení tlačidla. A nakoniec veľkosť písma nastavenú na 40. prvku Button sme dali meno btnPozdrav a obsah (Content) na "Ahoj". A ďalej rovnaké nastavenie centrovanie.

Teraz je čas zaregistrovať udalosť pri kliknutí na tlačidlo. Môžeme si ju napísať ručne alebo využijeme Visual Studio. Kliknite na tlačidlo v Designeri alebo v kóde na Button. Pod solution explorer by ste mali mať Properties. Vedľa mena nájdete tlačidlo s bleskom. Kliknite naň. Nasleduje výpis všetkých udalostí. Nájdite si udalosť Click a 2x na ňu kliknite. Vygenerovala sa nám metóda obsluhujúci udalosť Click.

private void btnPozdrav_Click(object sender, RoutedEventArgs e)
{

}

V XAML u prvku Button sa pridal nový atribút a to Click

<Button x:Name="btnPozdrav" Content="Ahoj" HorizontalAlignment="Center" VerticalAlignment="Center" Click="btnPozdrav_Click" />

Konečne je všetko pripravené pre nejaké programovanie . Prejdite do metódy obsluhujúci udalosť Click. Zmeníme vlastnosť nášho TextBlocku. Aby sme to mierne okorenili, program nás vždy náhodne pozdravia.

Random rnd = new Random();
           int typ=rnd.Next(0,3);

           switch (typ)
           {
               case 0: txVypis.Text = "Ahoj. Krásný den že ?"; break;
               case 1: txVypis.Text = "Zdravím. My se známe ?"; break;
               case 2: txVypis.Text = "Co potřebuješ, neznám tě !"; break;
           }

Aplikáciu spustite a kliknite na tlačidlo. Hneď uvidíte prvú chybu našej aplikácie. Tlačidlo aj text sú v sebe zanorené. Je to spôsobené centrovaním. Poďme to napraviť. Nápravu môžeme urobiť opäť niekoľkými spôsobmi, Tu je pár možností.

• Relatívna odsadenie jedného z prvkov
• Oba prvky pridáme do prvku StackPanel
• nadradený Grid rozdelíme na dva riadky

Stackpanel je vhodný pre viac prvkov, kedy nám zaistí radenie pod seba alebo vedľa seba všetkých podržané prvkov. Tretia možnosť je v našom prípade opäť komplikovaná a zbytočná. My teda využijeme prvú možnosť.

Prvku Button nastavíme odsadenie Margin. Keďže máme nastavené aj centrovanie, bude sa jednať o relatívnej odsadenie. Vždy bude prvok uprostred a odsadený o určité miesto. Tlačidlo posunieme o 100px nadol od textu.

<Button x:Name="btnPozdrav" Content="Ahoj" HorizontalAlignment="Center" VerticalAlignment="Center" Click="btnPozdrav_Click" Margin="0,100,0,0" />

Niekoľko dôležitých poznámok

• Pokiaľ patríte aj medzi webmasterov, pozor na zmenu poradia odsadenie. V CSS máme poradí nasledujúce Top, Right, Bottom, Left. V XAML je to posunuté, teda Left, Top, Right, Bottom.
• Defaultne sa odsadenie počíta od prostredku prvku. Možno to zmeniť.

Teraz keď aplikáciu pustíme, je všetko v poriadku alebo to aspoň tak vyzerá. Keďže sme ale vo Windows 8 môžeme aplikáciu prepnúť do tzv Snap View. Aplikáciu prepnite. A je to tu. Font pozdravu je príliš veľký. Šírka Snap view je 320px a preto sa musíme prispôsobiť. My prispôsobíme veľkosť písma.

V minulom dieli sme si opisovali hlavnej časti XAML. Tretia časť je VisualStateMa­nager. Ten nám zaisťuje zistenie pohľadu a môžeme sa podľa toho zachovať. Pohľad je vždy vo VisualState a má názov. Nájdite si Snapped a pridajte tento kus kódu.

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="txVypis" Storyboard.TargetProperty="FontSize">
                         <DiscreteObjectKeyFrame KeyTime="0" Value="25"/>
                     </ObjectAnimationUsingKeyFrames>

Poďme si ho rozobrať na kúsky.

• ObjectAnimati­onUsingKeyFra­mes - slúži pre deklaráciu nastavenie prvku
• Storyboard.Tar­getName = "" - názov prvku
• Storyboard.Tar­getProperty = "" - atribút prvku
• DiscreteObjec­tKeyFrame - označenie pre zmenu atribútu
• KeyTime - čas
• Value - hodnota

Môžeme byť tu niečo zavádzajúce a to opakovanie názvu Key, Frame a Animation. V XAML možno robiť animácie. Takže my defakto Animujte prvky. Vďaka KeyTime 0 sa zmena prejaví hneď.

Prosím nepýtajte sa ma na animácie. Sám som ich ešte neštudoval.

Môžeme aplikáciu spustiť. Teraz funguje aj Snap view. Ale čo Fill view a nepovinný pohľad Portrait? Fill view funguje úplne v poriadku. Spustite si simulator a natočte "tablet". Vidíme, že funguje aj Portrait. Takto by mala vyzerať dokonalá aplikácie, avšak niekedy je podpora Portrait view komplikovaná. Snap a Fill view sú povinné!

Samozrejme by bolo úplne pekné keby sa veľkosť písma menila automaticky zavŕšili na rozlíšenie. Museli by sme v C# zistiť vždy aktuálne rozlíšenie a pohľad a vypočítať. Ale nie je to trochu zbytočné pre jeden TextBlock?

Nakoniec ešte dodám ako písať komentáre v XAML. Úplne rovnako ako v HTML, teda:

<!-- Toto je komentář -->

Priatelia, sme u konca. Dúfam, že som vás neodradil a budete sa tešiť na budúci lekciu, Programujeme pre Windows 8 - Navigácia medzi stránkami , kde si vyskúšame prepínanie medzi stránkami, posielanie dát medzi stránkami a uloženie stavu aplikácie. Dnes už prikladám celý projekt. Budem rád za komentáre a chcem vás poprosiť o vyjadrenie, či tento typ vysvetľovanie je vhodný alebo naopak.

Uvidíme sa nabudúce

 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.