4. diel - Programujeme pre Windows 8 - Navigácia medzi stránkami

V minulej lekcii, Programujeme pre Windows 8 - Dokončenie prvej aplikácie , sme si dokončili prvú aplikáciu v štýle Hello World. Dnes sa v C# .NET tutoriálu pozrieme na oveľa zaujímavejšie základy a tým je navigácia medzi stránkami a nabudúce na obsluhu app-life, teda obsluhu stavov aplikácie.

Pre dnešný tutoriál začneme úplne s novou aplikáciou. Bude sa jednať o úplne nezmyselnú aplikáciu, ktorá nám však postačí pre dnešné účely. Aplikácia bude mať dve stránky, prvá a úvodná stránka ponúkne tri textbox. Každý textbox bude slúžiť pre iný typ uloženie / posielanie dát. Druhá stránka ponúka len textblock, ktorý zobrazí pozdrav z prvej stránky.

Príprava

Nebudeme sa zaťažovať vytvorením štruktúry aplikácie. Použijeme síce komponent, ktorú sme ešte nepoužívali a používame aj nadefinovaný štýl, ale dnes si s tým nelámte hlavu. Vysvetlíme si to inokedy . Nasledujúci kód skopírujte do hlavného Gridu, ako v minulom diele sme pridali naše dve komponenty.

<Grid Grid.Row="1">
          <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
              <Grid>
                  <Grid.RowDefinitions>
                      <RowDefinition Height="*"/>
                      <RowDefinition Height="*"/>
                      <RowDefinition Height="*"/>
                      <RowDefinition Height="*" />
                  </Grid.RowDefinitions>
                  <Grid.ColumnDefinitions>
                      <ColumnDefinition Width="Auto"/>
                      <ColumnDefinition Width="Auto" />
                  </Grid.ColumnDefinitions>

                  <TextBlock Text="Jméno" Style="{StaticResource TextStyle}" />
                  <TextBox x:Name="txName" Grid.Column="1" Width="150" Margin="25,0,0,0" />
                  <TextBlock Text="Věk" Grid.Row="1" Style="{StaticResource TextStyle}" Margin="0,15,0,0" />
                  <TextBox x:Name="txVek" Grid.Row="1" Grid.Column="1" Width="150" Margin="25,15,0,0" />
                  <TextBlock Text="Pozdrav kolegu" Grid.Row="2" Grid.ColumnSpan="2" Style="{StaticResource TextStyle}" Margin="0,15,0,0" HorizontalAlignment="Center" />
                  <TextBox x:Name="txPozdrav" Grid.Row="3" Width="180" Margin="0,15,0,0" />
                  <Button x:Name="btnOdeslat" Content="Poslat" Grid.Row="3" Grid.Column="1" Margin="0,15,0,0" HorizontalAlignment="Center" Click="btnOdeslat_Click" />
              </Grid>
          </StackPanel>
      </Grid>

Iba v rýchlosti. Pridali sme (ako mám vo zvyku) ďalšie grid do druhého riadku hlavného gridu. V gridu máme stackpanel, ďalšie grid a ďalšie potrebné komponenty.

Otvorte si MainPage.xaml.cs a pridajte metódu pre obsluhu udalosti kliknutia na tlačidlo.

private void btnOdeslat_Click(object sender, RoutedEventArgs e)
{

}

Hlavná stránka je pripravená, pridáme druhú stánku. Kliknite pravým na názov projektu, Add -> Add new item -> Basic page. Pomenujte ju KecalPage. Na druhú stránku pridajte nasledujúci kód. Jedná sa len o Grid, Stackpanel (hoci mierne zbytočný) a TextBlock pre zobrazenie správy.

<Grid Grid.Row="1">
    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
        <TextBlock x:Name="txPrijato" FontSize="40" />
    </StackPanel>
</Grid>

Fajn, všetko je pripravené pre lepšiu zábavu.

Navigácia

Ukážeme si jednoduchú navigáciu stránok. Po kliknutí na tlačidlo sa presúvajú na nami druhú vytvorenú stránku KecalPage. Do metódy obsluhujúci kliknutí pridajte nasledujúce riadky.

if (txPozdrav.Text != string.Empty)// není textbox prázdný ?
{
    // navigace na další stránku a poslání objektu
    // v našem případě string z textboxu
    this.Frame.Navigate(typeof(KecalPage), txPozdrav.Text);
}

Najskôr skontrolujeme, či textbox txPozdrav nie je prázdny. Keď obsahuje text, presunieme sa na ďalšiu stránku. Navigáciu obsluhujeme cez triedu Frame, ktorá okrem metódy Navigate, obsahuje aj metódy GoBack, GoForward, GoHome pod. Prvým parameter metódy je povinný a udáva typ stránky, na ktorú sa presúvame. Druhý parameter je nepovinný a dovoľuje nám poslať ľubovoľný objekt na stránku. V našom prípade posielame text z textbox txPozdrav.

Presuňte sa do KecalPage.xaml.cs. Prepíšeme si metódu OnNavigatedTo, ktorú nám poskytuje predok LayoutAwarePage. Tu vidíme prvé výhodu pridanie pomocných tried, ktorý sme si popísali v druhom diele, rieši za nás veľmi ľahko navigáciu a ako uvidíte v budúcom diele tak i ukladanie dát. Prepíšeme teda metódu

protected override void OnNavigatedTo(NavigationEventArgs e)
{

    base.OnNavigatedTo(e);
}

Zavolanie metódy z predka base.OnNavigatedTo (e) je nutné nechať! Metóda sa zavolá pri otvorení stránky, pri navigovaní z inej stránky. Argument e nám poskytuje zistenie zdrojovej stránky navigácia, adresu alebo nami odovzdaný objekt Parameter. Nastavíme teda text textblocku txPrijato.

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    if (e.Parameter != null)
    {
        txPrijato.Text = e.Parameter.ToString();
    }
    base.OnNavigatedTo(e);
}

Pre istotu si pridáme podmienku, či nie je odovzdaný objekt null. Skúste si teraz aplikáciu zapnúť, vyplniť pozdrav a presunúť sa na stránku.

Malo by všetko fungovať ako má. Skúste sa pohrať s triedou Frame. Pozrite sa na ďalšie metódy, ktoré nám poskytuje predok, napríklad OnNavigatedFrom, ktorá sa hodí pre zistenie, že stránku opúšťame. Nespornú výhodu nám poskytuje odovzdanie ľubovoľného objektu, ktoré možno veľmi dobre využívať.

Aby sme trochu zaplnili obsah dnešného článku, poďme si aplikáciu do nabudúce trochu vymaľovať. Ako prvý zmeníme štýl písma. Nájdite si v Page.Resources definícii štýle pre všetkých TextBlocky.

<Style x:Key="TextStyle" TargetType="TextBlock">
            <Setter Property="FontSize" Value="30"/>
        </Style>

Štýlom sa budeme venovať aj v samostatnom článku. Zatiaľ stačí vedieť, že tu definujeme lokálne štýl stránky, ktorý je určený len pre komponenty TextBlock. Máme tu iba jednu nastavenú vlastnosť a tou je FontSize (Veľkosť písma) na 30. Pridáme si definíciu FontFamily (Rodina písma). Zvolil som tento Sego Print. Vlastnosť pridáme hneď pod definíciu vlasnosti FontSize

<Setter Property="FontFamily" Value="Segoe Print" />

Teraz máme o niečo málinko krajší aplikáciu. Určite ste pochopili, ako nastavovať základné štýly. Skúste si sami vytvoriť štýl pre textbox, ktoré budú mať napríklad rovnaké pozadie.

To je priatelia pre dnešok všetko. Opäť sme nestihli veľa a v budúcej lekcii, Programujeme pre Windows 8 - Zachovanie stavu aplikácie , sa pozrieme na prvú časť ukladanie dát a stavov aplikácie. Schválne si skúste jedno. Vyplňte všetky textbox a presuňte sa na druhú stránku. Pokochajte sa textom strede obrazovky a vráťte sa späť. A máme problém, vyplnené textbox sú prázdne. Prečo a ako ich nechať vyplnené si povieme nabudúce .

Dúfam, že vás dnešné lekcie aspoň trochu zaujala a teším sa na vlnu komentárov, tipov a kritiky. 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š.