Lekce 3 - Programujeme pro Windows 8 - Dokončení první aplikace

V minulé lekci, Programujeme pro Windows 8 - První aplikace, jsme si popsali základní strukturu šablon a samotné aplikace.

Dnes se již konečně vrhneme na samotné programování. Vytvoříme si program klasického Hello World, který ovšem mírně vylepšíme.

Otevřeme si náš vytvořený projekt. Pokud ho nemáte, založte si jej podle minulého dílu. První co si změníme je nadpis aplikace. Otevřete si MainPage.xaml a najděte si řádky

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

Zde deklarujeme lokální zdroje stránky. Visual Studio nám vygenerovalo objekt typu string pro název aplikace. Zdroje se používají, pokud potřebujete na více místech mít například stejný text. Můžete sice každému prvku individuálně připsat text, ale co když budete chtít jednou text změnit? Museli by jste text měnit na několika místech najednou. Díky zdrojům si tuto zbytečnou práci odpustíme. Změňte tedy text například na Zdravič 1.0. Výsledek

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

Zkuste si aplikaci spustit. Vidíte že se nadpis změnil. Podíváme se na to více zblízka. Nalezněte si řádek (nachází se pravděpodbně na řádku 37).

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

Zde máme prvek typu TextBlock (obdoba Label). Nastavujeme mu název (pageTitle), zarovnání v gridu, text a styl. Do atributu text můžeme napsat rovnou náš nadpis, zde je ovšem ukázáno použití PageResources.

Odbočíme od programu a dáme si trochu teorie. Už jsem to nakousl v minulém díle. Aplikace se doslova krájí na kousky mřížek (Grid). Grid má jednu velmi důležitou vlastnost, dynamicky se přizpůsobuje rozlišení. Prvky se větišnou centrují a odsazují se relativně. Naše aplikace má prozatím dva Gridy.

Jeden Grid je pro celou aplikaci a je rozdělen na dva řádky

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

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

Deklarace řádků provedeme přes Grid.RowDefiniton a samotný řádek RowDefinition. Výšku můžeme zadat třemi způsoby

• Pevně stanovená výška v px
• Auto - automatická výška
• * - poměr (např. 2* zajistí že bude 2x vyšší než předchozí řádek)

Zde máme tedy 1 řádek vysoký přesně 140px a druhý řádek zabírá zbytek obrazovky. Zcela podobně se deklarují sloupce. Druhý Grid slouží pro zobrazení tlačítka zpět a našeho 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šimnout, že druhý grid je rozdělen na 2 sloupce. V 1. sloupci je tlačítko zpět a sloupec má hodnotu Auto. Druhý sloupec obsahuje nadpis aplikace. Tento Grid se umístil do 1. řádku nadřazeného Gridu. Pojďme si zkusit ho umístit do 2.řádku.

Gridu nastavíme Grid.Row, což určuje umístění v řádku nadřazeného Gridu. Počítání řádků probíhá od nuly!

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

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

Pusťte si aplikaci. Vidíme, že nadpis je umístěn do dolního okraje obrazovky. Je to způsobené systémovým stylem. Vraťte celý Grid zpátky do prvního řádku. Na celém tomto principu funguje dynamika aplikací.

Nyní si přidáme tyto prvky

• TextBlock pro pozdrav
• Button pro vyvolání pozdravu

Budeme chtít, aby oba prvky byli vždy uprostřed obrazovky a pod sebou. Nastavit absolutní odsazení je nesmysl, protože při změně rozlišení by nezůstaly uprostřed. Vypíšu několik možných řešení.

• Nastavit prvkům Centrování
• Přidat dašlí Grid a rozdělit jej na 3 sloupce a 3 řádky
• Kombinace 2 předchozích

Samozřejmě způsobů je více a druhý způsob pro náš účel je velmi zbytečný. Přidáme si další Grid, který umístíme do druhého řádku hlavního Gridu. Kód můžete napsat buď před Grid s nadpisem nebo pod něj, je to na vás.

<Grid Grid.Row="1">

</Grid>

Nyní přidáme naše prvky. Oběma prvkům nastavíme centrování. Horizontální centrování a vertikální pomocí HorizontalAlig­nment a VerticalAlignmen­t. Prvky přidáme do našeho nově přidaného Gridu!

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

Prvku TextBlock jsme si dali jméno txVypis a nastavili mu centrování na "center". To zajistí umístění vždy uprostřed nadřízeného prvku (Gridu). Nenastavili jsme vlastnost Text, tu přidáme až při stisku tlačítka. A nakonec velikost písma nastavenou na 40. Prvku Button jsme dali jméno btnPozdrav a obsah (Content) na "Ahoj". A dále stejné nastavení centrování.

Nyní je čas zaregistrovat událost při kliknutí na tlačítko. Můžeme si ji napsat ručně anebo využijeme Visual Studio. Klepněte na tlačítko v Designeru nebo v kódu na Button. Pod solution explorer by jste měli mít Properties. Vedle jména naleznete tlačítko s bleskem. Klepněte na něj. Následuje výpis všech událostí. Nalezněte si událost Click a 2x na ni klepněte. Vygenerovala se nám metoda obsluhující událost Click.

private void btnPozdrav_Click(object sender, RoutedEventArgs e)
{

}

V XAML u prvku Button se přidal nový atribut a to Click

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

Konečně je vše připraveno pro nějaké programování . Přejděte do metody obsluhující událost Click. Změníme vlastnost našeho TextBlocku. Abychom to mírně okořenili, program nás vždy náhodně pozdraví.

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

Aplikaci spusťte a klepněte na tlačítko. Hned uvidíte první chybu naší aplikace. Tlačítko i text jsou v sobě zanořené. Je to způsobené centrováním. Pojďme to napravit. Nápravu můžeme udělat opět několika způsoby, Tady je pár možností.

• Relativní odsazení jednoho z prvků
• Oba prvky přidáme do prvku StackPanel
• nadřazený Grid rozdělíme na dva řádky

Stackpanel je vhodný pro více prvků, kdy nám zajistí řazení pod sebe nebo vedle sebe všech podřzených prvků. Třetí možnost je v našem případě opět komplikovaná a zbytečná. My tedy využijeme první možnost.

Prvku Button nastavíme odsazení Margin. Jelikož máme nastavené i centrování, bude se jednat o relativní odsazení. Vždy bude prvek uprostřed a odsazený o určité místo. Tlačítko posuneme o 100px dolů od textu.

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

Několik důležitých poznámek

• Pokud patříte i mezi webmastery, pozor na změnu pořadí odsazení. V CSS máme pořadí následující Top,Right,Bot­tom,Left. V XAML je to posunuté, tedy Left,Top,Right,Bot­tom.
• Defaultně se odsazení počítá od prostředka prvku. Lze to změnit.

Nyní když aplikaci pustíme, je vše v pořádku nebo to aspoň tak vypadá. Jelikož jsme ale ve Windows 8 můžeme aplikaci přepnout do tzv Snap View. Aplikaci přepněte. A je to tady. Font pozdravu je příliš velký. Šířka Snap view je 320px a proto se musíme přizpůsobit. My přizpůsobíme velikost písma.

V minulém díle jsme si popisovali hlavní části XAML. Třetí část je VisualStateMa­nager. Ten nám zajišťuje zjištění pohledu a můžeme se podle toho zachovat. Pohled je vždy ve VisualState a má název. Nalezněte si Snapped a přidejte tento kus kódu.

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

Pojďme si ho rozebrat na kousky.

• ObjectAnimati­onUsingKeyFra­mes - slouží pro deklaraci nastavení prvku
• Storyboard.Tar­getName="" - název prvku
• Storyboard.Tar­getProperty="" - atribut prvku
• DiscreteObjec­tKeyFrame - označení pro změnu atributu
• KeyTime - čas
• Value - hodnota

Můžeme být zde něco zavádějící a to opakování názvu Key, Frame a Animation. V XAML lze dělat animace. Takže my defakto animujme prvky. Díky KeyTime 0 se změna projeví hned.

Prosím neptejte se mě na animace. Sám jsem je ještě nestudoval.

Můžeme aplikaci spustit. Nyní funguje i Snap view. Ale co Fill view a nepovinný pohled Portrait? Fill view funguje zcela v pořádku. Spusťte si simulator a natočte "tablet". Vidíme, že funguje i Portrait. Takto by měla vypadat dokonalá aplikace, ovšem někdy je podpora Portrait view komplikovaná. Snap a Fill view jsou povinné!

Samozřejmě by bylo zcela pěkné kdyby se velikost písma měnila automaticky závsile na rozlišení. Museli bychom v C# zjistit vždy aktuální rozlišení a pohled a vypočítat. Ale není to trochu zbytečné pro jeden TextBlock?

Nakonec ještě dodám jak psát komentáře v XAML. Úplně stejně jako v HTML, tedy:

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

Přátelé, jsme u konce.

Doufám, že jsem vás neodradil a budete se těšit na příští lekci, Programujeme pro Windows 8 - Navigace mezi stránkami, kde si vyzkoušíme přepínání mezi stránkami, posílání dat mezi stránkami a uložení stavu aplikace. Dnes již přikládám celý projekt. Budu rád za komentáře a chci vás poprosit o vyjádření, zda tento typ vysvětlování je vhodný nebo naopak.Uvidíme se příště .

 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.