Část 3: Navigace, rozložení a zobrazení

Návrh uživatelského rozhraní aplikace pro Windows Store spočívá v uspořádání a prezentaci obsahu pro uživatele a v poskytnutí příkazů, které jim umožní tento obsah zpracovávat. Do návrhu uživatelského rozhraní patří uspořádání stránek v aplikaci, navigaci mezi stránkami a rozložení obsahu a příkazů na jednotlivých stránkách.

V tomto kurzu se naučíte:

• přidávat stránky a navigaci,
• uspořádat ovládací prvky a obsah na stránce,
• přizpůsobit rozložení stránky různým orientacím a zobrazením.

Než začnete

• Toto je třetí kurz jedné řady. Než se pustíte do tohoto kurzu, přečtěte si Část 1: Vytvoření aplikace "Hello, world!" a Část 2: Správa životního cyklu a stavu aplikace.
• Úplný výpis kódu pro tento kurz najdete tady: Úplný kód z části 3.

Krok 1: přidání stránek a navigace

V tomto kurzu si probereme základy vytváření uživatelského rozhraní v jazyce XAML (Extensible Application Markup Language). Abyste si osvojili základy, vytvoříte jednoduchý prohlížeč fotografií umožňující uživateli vybrat obrázek z knihovny obrázků, který pak zobrazí spolu s informacemi o souboru obrázku. Pro prohlížeč fotografií přidáte novou stránku do aplikace "Hello, world" z části 2. Aby bylo možné novou stránku používat, přidáte do aplikace příkazy pro navigaci mezi stránkami.

Nejdříve musíte do aplikace prohlížeče fotografií přidat novou stránku. Potom na hlavní stránku přidáte navigační příkaz, aby se mohl uživatel dostat na novou stránku.

Přidání stránky prohlížeče fotografií

Začneme s kódem z části 2: Správa životního cyklu a stavu aplikace.

Přidání stránky do aplikace

1. Vyberte možnost Projekt > Přidat novou položku. Otevře se dialogové okno Přidat novou položku.

   Tip  V Průzkumníku řešení musí být vybraný projekt, ne řešení.

2. V levém podokně v části Visual C# nebo Visual Basic vyberte typ šablony Windows Store.
3. V prostředním podokně vyberte možnost Základní stránka.
4. Zadejte "PhotoPage.xaml" jako název stránky.
5. Klikněte na tlačítko Přidat. Soubory XAML a souboru kódu pro stránku se přidají do projektu.

   Tady je dialogové okno Přidat novou položku.

   

   (Když poprvé přidáváte novou stránku do šablony Prázdná aplikace (to je jiná šablona než Prázdná stránka), zobrazí Visual Studio dialogové okno se zprávou, že je potřeba přidat soubory, které v projektu chybí. Tyto soubory jste přidali v první části, takže byste toto upozornění neměli vidět. Pokud se přesto zobrazí, klikněte na Ano a soubory se přidají. Soubory pro několik užitkových tříd se přidají do projektu do složky Common.)

6. Pokud chcete změnit nadpis stránky, vyberte text "Moje aplikace" v horní části stránky PhotoPage.xaml.

   Na panelu Vlastnosti a v zobrazení Vlastnosti () musí být vybraný objekt TextBlock s názvem pageTitle.

7. V oblasti Společné na panelu Vlastnosti klikněte na značku vlastnosti u vlastnosti Text. Otevře se nabídka vlastnosti.

   Poznámka  Značka vlastnosti je symbol malé krabice vpravo u každé hodnoty vlastnosti. Pokud má nastavený prostředek, je značka vlastnosti Text zelená.

8. V nabídce vlastnosti vyberte možnost Upravit prostředek. Otevře se dialogové okno Upravit prostředek.
9. V dialogovém okně Upravit prostředek změňte hodnotu z "Moje aplikace" na "Hello, photo!".
10. Klikněte na OK.

    XAML pro definici prostředku se aktualizuje takto.

    XAML

    Copy

    
    <x:String x:Key="AppName">Hello, photo!</x:String>
    
    

Přidání navigace

Architektura uživatelského rozhraní jazyka XAML poskytuje předdefinovaný model navigace, který používá ovládací prvky Frame a Page a funguje podobně jako navigace ve webovém prohlížeči. Ovládací prvek Frame hostí ovládací prvky Page a má historii navigace, pomocí které může uživatel přecházet mezi navštívenými stránkami dopředu a zpět. Při navigaci se můžou mezi stránkami předávat data.

V první a druhé části jsme viděli kód v App.xaml.cs/.vb, který vytvoří objekt Frame a při spuštění aplikace naviguje na stránku MainPage. Teď na stránku MainPage přidáte příkaz, který stejným způsobem naviguje na novou stránku PhotoPage.

Navigace mezi stránkami

1. V Průzkumníkovi řešení otevřete dvojitým kliknutím MainPage.xaml.
2. V editoru XAML najděte StackPanel, který obsahuje greetingOutput TextBlock. Hned za element greetingOutput TextBlock přidejte element Button, jako tento:
   XAML

   Copy

   
   <Button x:Name="photoPageButton" Content="Go to photo page"/>
   
   

   Tady je tlačítko, které jste přidali spolu s okolním XAML.

   XAML

   Copy

   
   
   <StackPanel Grid.Row="1" Margin="120,30,0,0">
       <TextBlock Text="What's your name?" Style="{StaticResource BasicTextStyle}"/>
       <StackPanel Orientation="Horizontal" Margin="0,20,0,20">
           <TextBox x:Name="nameInput" Width="300" HorizontalAlignment="Left"
                    TextChanged="NameInput_TextChanged"/>
           <Button Content="Say &quot;Hello&quot;" Click="Button_Click"/>
       </StackPanel>
       <TextBlock x:Name="greetingOutput" Style="{StaticResource BigGreenTextStyle}"/>
       <Button x:Name="photoPageButton" Content="Go to photo page"/>
   </StackPanel>
   
   
   

3. V editoru XAML nebo v návrhovém zobrazení vyberte tlačítko "Přejít na stránku fotografií" Button, které jste přidali na stránku MainPage.xaml.
4. V panelu Vlastnosti klikněte na tlačítko Události ().
5. Najděte událost Click na začátku seznamu událostí. Do textového pole pro událost zadejte jako název funkce, která obsluhuje událost Click, "PhotoPageButton_Click".
6. Stiskněte klávesu Enter. Vytvoří se metoda obslužné rutiny události a otevře se v editoru kódu, takže můžete přidat kód prováděný při výskytu události.
7. Přidejte tento kód do obslužné rutiny události, kterou jste vytvořili na stránce kódu. V obslužné rutině události přejděte na novou stránku fotografií, kterou jste přidali do aplikace.
   C#

   VB

   Copy

   
   
               // Add this code.
               if (this.Frame != null)
               {
                   this.Frame.Navigate(typeof(PhotoPage));
               }
   
   

8. Sestavte a spusťte aplikaci stisknutím klávesy F5. Klikněte na tlačítko Přejít na stránku fotografií. Otevře se stránka fotografií. Kliknutím na tlačítko Zpět se vraťte na hlavní stránku.

Na stránku fotografií není potřeba přidávat tlačítko Zpět. Stránka fotografií je založena na třídě LayoutAwarePage, která má integrovanou podporu navigace. Tlačítko Zpět používá k přechodu na předchozí stránku historii Frame a zobrazuje se jen tehdy, když má vlastnost Frame.CanGoBack hodnotu true. Další příklady podpory navigace najdete v části "Podpora navigace" souboru LayoutAwarePage.cs/.vb ve složce projektu Common.

Krok 2: Přidání ovládacích prvků a obsahu na stránku

Teď na stránku fotografií přidáte obsah. Než se pustíte do práce na rozložení stránky fotografií, bude dobré si ujasnit základní principy rozložení pomocí XAML.

O vytváření uživatelského rozhraní pomocí XAML

Systém rozložení XAML podporuje jak statická, tak dynamická rozložení.

Ve statickém rozložení přidělujete ovládacím prvkům přesné rozměry v pixelech a pozici. Když uživatel změní rozlišení nebo orientaci zařízení, uživatelské rozhraní se nezmění. Statická rozložení můžou být v různých formátech a na různě velkých displejích roztažená, smrštěná nebo oříznutá.

Dynamická rozložení se smršťují, zvětšují a přesouvají podle vizuálního prostoru dostupného v zařízení. V dynamickém rozložení se velikost a poloha kontejnerů rozložení a ovládacích prvků automaticky mění podle změn velikosti aplikace. V aplikaci pro Windows Store se místy pořád používají statické prvky a hodnoty. Dbejte ale na to, aby bylo celkové uživatelské rozhraní dynamické a přizpůsobovalo se různým rozlišením, rozložením a zobrazením.

Obsah většiny aplikací se dá uspořádat do nějaké formy seskupení či hierarchie. Kontejnery rozložení slouží k seskupení a uspořádání prvků uživatelského rozhraní. Systém rozložení XAML nabízí různé ovládací prvky typu Panel (například Grid, StackPanel nebo Canvas), které slouží jako kontejnery, ve kterých můžete uspořádat obsah. Většina kontejnerů do jisté míry automaticky upravuje velikost svých podřízených prvků, pokud prvky nemají explicitně zadanou velikost.

K uspořádání obsahu do řádků a sloupců slouží Grid. Prvky se umísťují pomocí připojených vlastností Grid.Row a Grid.Column. Pomocí připojených vlastností Grid.RowSpan a Grid.ColumnSpan můžete prvky roztáhnout přes více řádků a sloupců.

StackPanel slouží k uspořádání obsahu do jednoho řádku. Nastavením vlastnosti Orientation můžete položky svisle nebo vodorovně uspořádat na sebe.

Canvas se používá, když chcete mít pod kontrolou všechny aspekty umístění a velikosti obsahu. V Canvas se prvky umísťují absolutně pomocí připojených vlastností Canvas.Top a Canvas.Left. Plocha neprovádí žádné změny velikosti podřízených prvků, takže jim musíte velikost nastavit explicitně.

Velikost a pozici elementu určíte nastavením vlastností jeho rozložení. Tady jsou některé běžné vlastnosti rozložení a jejich efekt.

• HorizontalAlignment a VerticalAlignment: Určuje, jakou pozici objekt zaujme vzhledem ke svému nadřazenému objektu.
• Margin: Určuje množství volného místa kolem ovládacího prvku, mezi okrajem podřízeného objektu a hranicemi panelu.
• Width a Height: Určuje pevné hodnoty měřené v pixelech.
• MinWidth/MaxWidth a MinHeight/MaxHeight: Určuje hodnoty, které omezují velikost elementu, ale zároveň umožňují dynamickou změnu velikosti.

Tyhle kontejnery a vlastnosti rozložení použijete k vytvoření dynamického rozložení pro stránku prohlížeče fotografií.

Nástroje rozložení XAML

V části 1 jste na hlavní stránce přidávali ovládací prvky přímým zadáváním XAML do editoru XAML. Visual Studio ale obsahuje taky návrháře XAML, pomocí kterého můžete přidávat a uspořádávat ovládací prvky. Po zbytek tohoto kurzu budete pro vytváření uživatelského rozhraní používat návrháře XAML. Ještě než začneme, pojďme se podívat na části uživatelského rozhraní Visual Studia, které budete používat, a na to, jak provést některé běžné úlohy.

Hlavní části Visual Studia, které budete používat:

Panel	Obrázek	Popis
Průzkumník řešení		Slouží ke správě souborů ve vašem projektu. Dvojitým kliknutím na soubor ho otevřete. Pokud je soubor už otevřený, stane se z něj aktivní dokument.
Vlastnosti		Slouží k zobrazení a úpravě vlastností vybrané položky. Ve výchozím nastavení jsou vlastnosti seskupeny podle kategorie. Rozbalte kategorii, abyste viděli její vlastnosti. Kliknutím na šipku dolů ve spodní části kategorie zobrazíte pokročilé vlastnosti.
Návrhář XAML		Slouží k přidávání a uspořádání prvků uživatelského rozhraní aplikace. Běžnými činnostmi jsou uspořádání položek přetažením a výběr položky kliknutím.
Editor XAML		Slouží k přímé úpravě XAML.
Sada nástrojů		Slouží k přidávání ovládacích prvků a dalších položek do uživatelského rozhraní vaší aplikace. Přetáhněte ovládací prvky na povrch návrháře.
Zařízení		Slouží k simulaci různých nastavení fyzického zařízení v návrháři. Kliknutím na tlačítka zobrazení můžete v návrháři simulovat různá zobrazení aplikace. Nastavení Displej umožňují v návrháři simulovat různá rozlišení.
Osnova dokumentu		Slouží k výběru a uspořádání prvků uživatelského rozhraní v hierarchickém zobrazení. Kliknutím na položku ji vyberte. Kliknutím na šipku rozbalíte položku a uvidíte její podřízené prvky. Pomocí Ctrl+kliknutí můžete vybrat více nesousedících položek. Pomocí Shift+kliknutí můžete vybrat více sousedících položek. Přetahováním položek můžete měnit jejich uspořádání.

Předpokládáme, že ve Visual Studiu používáte výchozí rozložení okna. Pokud změníte výchozí rozložení, můžete ho obnovit v nabídce Okno kliknutím na příkaz Obnovit rozložení okna.

Během vytváření uživatelského rozhraní se některé běžné úlohy často opakují. Pokud budeme vědět, jak tyto úlohy provádět, ještě než začneme, bude vytváření uživatelského rozhraní o to jednodušší.

Přidání navigačních příkazů

V kroku 1 jste přidali tlačítko Button pro navigaci z hlavní stránky na novou stránku fotografií. Pro zajištění pohodlí jste tlačítko umístili na plochu hlavní stránky. Tento navigační příkaz ale nesouvisí s ničím jiným na hlavní stránce a tlačítko tu proto působí nepatřičně. Při návrhu aplikací pro Windows Store je vždycky potřeba dávat pozor na umístění příkazů.

Aplikace pro Windows Store obsahují panely aplikace pro seskupování příkazů, které jsou normálně skryté. Uživatel může v případě potřeby příkazy zobrazit potáhnutím z horního nebo spodního okraje obrazovky nebo kliknutím pravým tlačítkem. Panel aplikace v horní části obrazovky obvykle slouží k navigaci, takže nahoru přidáte panel aplikace a přesunete navigační tlačítko do něj.

Přidání panelu aplikace

1. V Průzkumníkovi řešení otevřete dvojitým kliknutím MainPage.xaml.
2. V osnově dokumentu vyberte prvek "pageRoot".
3. Na panelu Vlastnosti klikněte na tlačítko Vlastnosti () aby bylo vidět zobrazení Vlastnosti.
4. V části Obecné na panelu Vlastnosti najděte vlastnost TopAppBar.
5. Klikněte na tlačítko Nový vedle TopAppBar. Na stránku se přidá ovládací prvek AppBar.
6. V osnově dokumentu rozbalte vlastnost TopAppBar.
7. Vyberte prvek "photoPageButton", přetáhněte ho na AppBar a pusťte.
8. V části Rozložení na panelu Vlastnosti nastavte vlastnost HorizontalAlignment na Right ().
9. Sestavte a spusťte aplikaci stisknutím klávesy F5. Panel aplikace otestujte kliknutím pravým tlačítkem na hlavní stránku. Panel aplikace se otevře v horní části obrazovky.

Příkazy na panelu aplikace se zpravidla zobrazují s využitím speciálního stylu s kulatým tlačítkem a ikonou. Spousta běžných stylů tlačítek panelu aplikace je součástí slovníku prostředků StandardStyles.xaml. Tady aplikujete jeden z těchto stylů na navigační tlačítko na panelu aplikace.

Nastavení stylu tlačítka panelu aplikace

1. V Průzkumníku řešení rozbalte složku Common a dvojitým kliknutím otevřete soubor StandardStyles.xaml.
2. Najděte Style s hodnotou x:KeyPicturesAppBarButtonStyle.

   Tip  Stisknutím kláves Ctrl+F otevřete okno Najít a najděte "PicturesAppBarButtonStyle".

   1. Přesuňte Style mimo tagy komentáře (<!-- comment -->), aby byla dostupná pro použití.
   2. Nebo XAML zkopírujte do místního slovníku ResourceDictionary v souboru App.xaml.

      Tady je XAML pro Style.

      XAML

      Copy

      
      <Style x:Key="PicturesAppBarButtonStyle" TargetType="ButtonBase" BasedOn="{StaticResource AppBarButtonStyle}">
          <Setter Property="AutomationProperties.AutomationId" Value="PicturesAppBarButton"/>
          <Setter Property="AutomationProperties.Name" Value="Pictures"/>
          <Setter Property="Content" Value="&#xE158;"/>
      </Style> 
      
      

3. Uložte a zavřete StandardStyles.xaml.
4. V MainPage.xaml vyberte prvek "photoPageButton" na panelu Osnova dokumentu.

   (Aby byl viditelný, bude možná potřeba rozbalit prvek TopAppBar.)

5. Obnovte tyto vlastnosti elementu Button: Content.
6. V části Různé najděte v panelu Vlastnosti vlastnost Style.
7. Kliknutím na značku vlastnosti vedle vlastnosti Style otevřete nabídku.
8. V nabídce vyberte Místní zdroj > PicturesAppBarButtonStyle.

   Tady je finální XAML pro panel aplikace. (Ve Visual Basicu může chybět deklarace události Click. Obslužná rutina události místo toho využívá klíčové slovo Handles.)

   XAML

   Copy

   
   <common:LayoutAwarePage.TopAppBar>
       <AppBar>
           <Button x:Name="photoPageButton" 
                   Click="PhotoPageButton_Click"
                   HorizontalAlignment="Right" 
                   Style="{StaticResource PicturesAppBarButtonStyle}"/>
       </AppBar>
   </common:LayoutAwarePage.TopAppBar>
   
   

9. Sestavte a spusťte aplikaci stisknutím klávesy F5. Panel aplikace otevřete potáhnutím od horního nebo dolního okraje obrazovky nebo kliknutím pravým tlačítkem.

Pomocí panelu aplikace jste udělali pořádek v rozložení hlavní stránky. Teď se můžeme věnovat nové stránce prohlížeče fotografií.

Přidání mřížky rozložení

Začnete přidáním objektu Grid, pomocí kterého rozdělíme oblast obsahu stránky na 3 řádky. První dva řádky mají pevnou výšku a poslední řádek vyplní zbývající místo.

Přidání panelu mřížky na stránku

1. Otevřete PhotoPage.xaml.
2. Přetáhněte Grid ze sady nástrojů na návrhovou plochu uprostřed stránky.

   Grid se přidá na stránku a návrhář nastaví některé vlastnosti podle svého nejlepšího mínění v požadovaném rozložení. Modré zvýraznění kolem Grid označuje, že se jedná o aktivní objekt.

3. V panelu Vlastnosti zadejte "contentGrid" jako název Grid.

   

4. Resetujte tyto vlastnosti Grid: Width, Height, HorizontalAlignment, VerticalAlignment a Margin. Grid teď zcela vyplňuje oblast obsahu stránky.
5. V části Rozložení nastavte levý Margin a spodní Margin na hodnotu "120".

   

6. V návrháři se podél horní a levé strany Grid zobrazují tečkované čáry, označované jako kolejnice mřížky. Přesuňte ukazatel nad kolejnici mřížky po levé straně. Ukazatel se změní na šipku se znaménkem plus (+) a oranžová čára značí, kam se přidá řádek.

   

7. Klikněte na libovolné místo v levé kolejnici mřížky a přidejte řádek.
8. Opakujte předchozí krok a přidejte do Grid další řádek.

   V Grid jsou teď 3 řádky. Když podržíte ukazatel nad kolejnicí mřížky, zobrazí se malý informační rámeček, pomocí kterého můžete vybrat možnosti velikosti a upravit vlastnosti Height řádku.

9. Umístěte ukazatel nad kolejnici mřížky v prvním řádku, dokud se neobjeví informační rámeček.
10. Kliknutím na šipku dolů otevřete nabídku informačního rámečku. V nabídce vyberte Pixel.

    

11. Umístěte ukazatel znovu nad kolejnici mřížky, dokud se neobjeví informační rámeček. V informačním rámečku klikněte na číselnou hodnotu.
12. Zadejte "50" a stisknutím klávesy Enter nastavte vlastnost Height na 50 pixelů.

    

13. Opakováním kroků 9 až 12 tohoto postupu nastavte hodnotu vlastnosti Height druhého řádku na 70 pixelů.

    Poslední řádek má nastavenou výchozí hodnotu "1*" (1 hvězdička). To znamená, že použije veškeré zbývající místo.

Pojďme se teď podívat na kód XAML, který se tímto vytvoří.

<Grid x:Name="contentGrid" Grid.Row="1" Margin="120,0,0,120">
    <Grid.RowDefinitions>
        <RowDefinition Height="50"/>
        <RowDefinition Height="70"/>
        <RowDefinition/>
    </Grid.RowDefinitions>
</Grid>

Abyste v kontejneru Grid definovali řádky, přidáte objekty RowDefinition do kolekce Grid.RowDefinitions. U objektu RowDefinition můžete nastavením vlastností určit, jak bude řádek vypadat. Podobným způsobem přidáte sloupce – pomocí objektů ColumnDefinition a kolekce Grid.ColumnDefinitions.

Všimněte si tohoto nastavení v počátečním tagu Grid: Grid.Row="1". Prvky se v Grid umísťují pomocí připojených vlastností Grid.Row a Grid.Column. Řádky a sloupce jsou číslované od nuly, takže toto nastavení říká, že panel "contentGrid" se přidá do druhého řádku jeho nadřazené Grid. Tuto vlastnost nastavuje Visual Studio podle toho, kam při přidávání vložíte prvek Grid.

Přidání ovládacích prvků na stránku fotografií

Teď do objektu Grid přidáme ovládací prvky. Přidáte Button pro získání obrázku z knihovny obrázků, ovládací prvek Image pro zobrazení obrázku a několik ovládacích prvků TextBlock, které budou sloužit k zobrazení informací o souboru obrázku. V posledním řádku mřížky použijete objekty StackPanel k uspořádání ovládacích prvků Image a TextBlock.

Přidání ovládacích prvků na stránku

1. Přidání tlačítka "Get photo"

   1. V osnově dokumentu vyberte panel "contentGrid".
   2. Zatímco máte vybraný panel "contentGrid", přetáhněte ovládací prvek Button ze sady nástrojů do prvního řádku mřížky.
   3. V panelu Vlastnosti resetujte tyto vlastnosti Button: HorizontalAlignment, VerticalAlignment a Margin.
   4. Nastavte vlastnosti tlačítka Content na "Get photo".

2. Přidání textového bloku s názvem obrázku

   1. Zatímco máte vybraný panel "contentGrid", přetáhněte ovládací prvek TextBlock ze sady nástrojů do druhého řádku mřížky.
   2. V panelu Vlastnosti resetujte tyto vlastnosti TextBlock: HorizontalAlignment, VerticalAlignment a Margin.
   3. Rozbalte skupinu Různé a najděte vlastnost Styl.
   4. V nabídce vlastnosti Styl vyberte Místní prostředky > PageSubheaderTextStyle.

3. Přidání obrázku

   1. Zatímco máte vybraný panel "contentGrid", přetáhněte ovládací prvek StackPanel ze sady nástrojů do posledního řádku mřížky.
   2. Resetujte tyto vlastnosti StackPanel: Width, Height, HorizontalAlignment, VerticalAlignment a Margin.
   3. V panelu Vlastnosti nastavte vlastnost Orientation objektu StackPanel na Horizontal.
   4. Do textového pole Name pro StackPanel zadejte "imagePanel" a stiskněte Enter.
   5. Zatímco máte vybraný StackPanel, přetáhněte ovládací prvek Border ze sady nástrojů do StackPanel.
   6. V oblasti Štětec vyberte na panelu Vlastnosti položku Background.
   7. Vyberte kartu štětce jednotné barvy a nastavte hodnotu barvy na "#FF808080".
   8. U vlastnosti BorderBrush opakujte kroky 6–7.

      

   9. Přetáhněte ovládací prvek Image ze sady nástrojů do objektu Border.
   10. Do textového pole Name pro Image zadejte "displayImage" a stiskněte Enter.
   11. V rozevíracím seznamu pro vlastnost Source objektu Image vyberte "Logo.png".
   12. V osnově dokumentu vyberte prvek Border, který obsahuje prvek Image.
   13. V panelu Vlastnosti resetujte vlastnost Width objektu Border.

4. Přidání informací o obrázku

   1. Přetáhněte ovládací prvek TextBlock ze sady nástrojů do StackPanel "imagePanel", napravo od ovládacího prvku Image.

      Na rozdíl od vkládání objektu TextBlock do mřížky nemusíte v tomto případě resetovat žádné vlastnosti rozložení. StackPanel a Grid pracují s velikostí svých podřízených prvků různě. Další informace najdete v tématu Úvodní příručka: Přidávání ovládacích prvků rozložení.

   2. Přetáhněte do StackPanel dalších 5 ovládacích prvků TextBlock.

      V tuto chvíli máte napravo od ovládacího prvku Image vodorovně vedle sebe 6 ovládacích prvků TextBlock.

   3. Vyberte první TextBlock a nastavte jeho vlastnost Text na "Název souboru:".
   4. Vyberte třetí TextBlock a nastavte jeho vlastnost Text na "Cesta:".
   5. Vyberte pátý TextBlock a nastavte jeho vlastnost Text na "Datum vytvoření:".

Uživatelské rozhraní prohlížeče fotografií teď vypadá takto. Rozložení je skoro hotové, ale ještě potřebujete opravit vzhled objektů TextBlock, které zobrazují informace o obrázku.

Tady je kód XAML vygenerovaný pro toto rozložení.

<Grid x:Name="contentGrid" Grid.Row="1" Margin="120,0,0,120">
    <Grid.RowDefinitions>
        <RowDefinition Height="50"/>
        <RowDefinition Height="70"/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Button Content="Get photo"/>
    <TextBlock Grid.Row="1" TextWrapping="Wrap" Text="TextBlock" 
               Style="{StaticResource PageSubheaderTextStyle}"/>
    <StackPanel x:Name="imagePanel" Grid.Row="2" Orientation="Horizontal">
         <Border BorderBrush="Gray" BorderThickness="7" Background="Gray">
             <Image x:Name="displayImage" Source="Assets/Logo.png"/>
         </Border>
         <TextBlock TextWrapping="Wrap" Text="File name:"/>
         <TextBlock TextWrapping="Wrap" Text="TextBlock"/>
         <TextBlock TextWrapping="Wrap" Text="Path:"/>
         <TextBlock TextWrapping="Wrap" Text="TextBlock"/>
         <TextBlock TextWrapping="Wrap" Text="Date created:"/>
         <TextBlock TextWrapping="Wrap" Text="TextBlock"/>
    </StackPanel>
</Grid>

Potřebujete opravit rozložení a formátování přidaných objektů TextBlock. Abyste pro informační text o obrázku nastavili požadované rozložení, seskupíte ovládací prvky do objektu StackPanel.

Seskupení položek do objektu StackPanel

1. V osnově dokumentu klikněte na první TextBlock v objektu StackPanel "imagePanel".
2. Stiskněte Shift a klikněte na poslední TextBlock ve skupině. Máte vybraných 6 TextBlock ovládacích prvků.
3. Klikněte pravým tlačítkem na skupinu vybraných ovládacích prvků TextBlock. V kontextové nabídce vyberte Seskupit do > StackPanel.

   Na stránku se přidá StackPanel a 6 ovládacích prvků TextBlock se do tohoto StackPanel vloží.

4. V části Rozložení na panelu Vlastnosti nastavte vlastnost Orientation objektu StackPanel na Vertical.
5. Nastavte levý Margin objektu StackPanel na hodnotu "20".

Jako poslední zbývá naformátovat informační text obrázku. Na text použijete integrované styly a nastavíte okraje, aby vznikl prostor mezi jednotlivými prvky.

Styl textu

1. V osnově dokumentu klikněte na první TextBlock v objektu StackPanel "imagePanel".
2. Stiskněte Ctrl a klikněte na třetí a pátý TextBlock ve skupině. Máte vybrané 3 ovládací prvky TextBlock.
3. V části Různé najděte v panelu Vlastnosti vlastnost Style.
4. V nabídce vlastnosti Style vyberte Místní prostředky > CaptionTextStyle.
5. Vyberte druhý, čtvrtý a šestý ovládací prvek TextBlock ve skupině.
6. Nastavte vlastnost Style na Místní prostředky > ItemTextStyle.
7. Nastavte vlastnost levého Margin na hodnotu 10 a dolního na 30.

Kód XAML pro informační text o obrázku teď vypadá takto:

<StackPanel Margin="20,0,0,0">
    <TextBlock TextWrapping="Wrap" Text="File name:" 
               Style="{StaticResource CaptionTextStyle}"/>
    <TextBlock TextWrapping="Wrap" Text="TextBlock" 
               Style="{StaticResource ItemTextStyle}" Margin="10,0,0,30"/>
    <TextBlock TextWrapping="Wrap" Text="Path:" 
               Style="{StaticResource CaptionTextStyle}"/>
    <TextBlock TextWrapping="Wrap" Text="TextBlock" 
               Style="{StaticResource ItemTextStyle}" Margin="10,0,0,30"/>
    <TextBlock TextWrapping="Wrap" Text="Date created:" 
               Style="{StaticResource CaptionTextStyle}"/>
    <TextBlock TextWrapping="Wrap" Text="TextBlock" 
               Style="{StaticResource ItemTextStyle}" Margin="10,0,0,30"/>
</StackPanel>

Sestavte a spusťte aplikaci stisknutím klávesy F5. Přejděte na stránku fotografií. Vypadá následovně.

Krok 3: přizpůsobit rozložení stránky různým orientacím a zobrazením

Dosud jste aplikaci navrhovali pro zobrazení na celé obrazovce v orientaci na šířku. Nové uživatelské rozhraní Windows se ale musí umět přizpůsobovat různým orientacím a rozložením. Konkrétně musí podporovat orientaci na šířku i na výšku. V orientaci na šířku musí podporovat rozložení FullScreen (celá obrazovka), Filled (vyplněné) a Snapped (přichycené). Jak tady můžeme vidět, aplikaci jde upravit tak, aby vypadala dobře v jakémkoli rozlišení nebo orientaci.

Používání různých zobrazení ve Visual Studiu

Abyste zjistili, jak aplikace vypadá v jednotlivých zobrazeních, můžete použít panel Zařízení v Microsoft Visual Studiu 2012. Panel vám umožní v návrháři Visual Studia simulovat pro vaši aplikaci různá zobrazení, displeje a možnosti zobrazení. Tady můžete vidět, jak používat možnosti Zobrazení. Ale abyste viděli, jak bude uživatelské rozhraní vypadat při různých rozlišeních obrazovky, je potřeba použít taky možnosti Displej. Dynamické rozložení se přizpůsobuje, aby vypadalo dobře na různých obrazovkách.

Nejdříve vyzkoušejme různá zobrazení, abychom viděli, jak aplikace bude vypadat.

Používání různých zobrazení ve Visual Studiu

1. V panelu Zařízení klikněte na tlačítko vyplněného () zobrazení. Návrhář se změní, aby simuloval vyplněné zobrazení.

   Takto aplikace vypadá, když vedle ní uživatel přichytí další aplikaci. Toto zobrazení vypadá dobře, takže ho můžete nechat jak je.

   

2. V panelu Zařízení klikněte na tlačítko přichyceného () zobrazení. Návrhář se změní, aby simuloval přichycené zobrazení.

   Takto aplikace vypadá, když ji uživatel přichytí vedle další aplikace. Toto zobrazení je moc úzké a aplikace není vidět celá, proto musíte provést pár úprav.

   

3. V panelu Zařízení klikněte na tlačítko zobrazení na výšku (). Návrhář se změní, aby simuloval zobrazení na výšku.

   Takto aplikace vypadá, když ji uživatel otočí na výšku. Toto zobrazení je taky moc úzké. Budete muset provést několik úprav podobných úpravám pro přichycené zobrazení.

   

Úprava přichyceného zobrazení

Začnete provedením několik změn v přichyceném zobrazení.

Úprava přichyceného zobrazení

1. V panelu Zařízení zobrazte kliknutím na příslušné tlačítko () přichycené zobrazení.
2. Zaškrtněte políčko Zapnout nahrávání stavu.

   Když zapnete nahrávání stavu, změny v rozložení se projeví jen v aktuálním vizuálním stavu a změny se provedou v části VisualStateManager kódu XAML. V opačném případě se změny provedou ve výchozím zobrazení.

3. Vyberte ovládací prvek Grid "contentGrid".
4. V části Rozložení nastavte vlastnost Margin na levé straně mřížky na hodnotu "20".
5. Nastavte vlastnost Margin na spodní straně mřížky na hodnotu "20".
6. Vyberte StackPanel "imagePanel".
7. V části Rozložení na panelu Vlastnosti nastavte vlastnost Orientation panelu na Vertical.

Aplikace teď v přichyceném zobrazení vypadá takto.

Když jste změnili StackPanel z Horizontal na Vertical, velikost vlastnosti Border a Image se automaticky změnila. Toto je příklad dynamického rozložení. Panel StackPanel umožňuje svým podřízeným prvkům roztažení ve směru, v jakém je natočený, a omezuje je v opačném směru. Místo abyste nastavili pevnou velikost obrázku, necháte panel rozložení, aby uspořádal svoje podřízené prvky a změnil jejich velikost podle potřeby.

Úprava zobrazení na výšku

Teď opravme zobrazení na výšku.

Úprava zobrazení na výšku

1. V panelu Zařízení zobrazte kliknutím na příslušné tlačítko () zobrazení na výšku.
2. Zaškrtněte políčko Zapnout nahrávání stavu.
3. Vyberte StackPanel "imagePanel".
4. V části Rozložení na panelu Vlastnosti nastavte vlastnost Orientation panelu na Vertical.
5. Nastavte pravý Margin panelu na hodnotu "20".

Aplikace teď v orientaci na výšku vypadá takto.

Abychom aplikaci vyzkoušeli v různých orientacích, zobrazeních a rozlišeních, můžeme ji spustit v simulátoru ve Visual Studiu. Další informace o testování aplikace v simulátoru najdete v tématu Spouštění aplikací pro Windows Store z Visual Studia.

Shrnutí

Dokončili jste třetí výukový kurz. Blahopřejeme! Naučili jste se uložit data aplikace a stav relace v aplikaci pro Windows Store.

Podívejte se na kód.

Dostali jste se do slepé uličky, nebo si chcete práci zkontrolovat? Pokud ano, podívejte se na téma Úplný kód pro část 3.

Další kroky

V následující části tohoto výukového seriálu se naučíte přistupovat k souborům a pracovat s nimi. Přejděte na část 4: Přístup k souborům a výběr souborů.