Image
10.2.2016 0 Comments

Vývoj pre Windows 10 – Praktické príklady / 8. časť

Späť na úvod >> Späť na programovanie >> Späť na seriál

Ponuka typu hamburger

Nový ročník časopisu a úplne nový web pcrevue.sk je vynikajúca príležitosť začať robiť seriály venované programovaniu na novej, oveľa lepšej kvalitatívnej úrovni. Hlavným obmedzením takýchto seriálov je limitovaný priestor v časopise, ktorý nedovoľuje publikovať kompletné zdrojové kódy a v mnohých prípadoch ani úplné fragmenty kódov, ktoré sú nevyhnutné na pochopenie preberanej témy. Nepomohol by ani väčší rozsah článkov, veď kto by prepisoval polstranový kód. Situáciu čiastočne rieši zverejnenie kompletných kódov na webe, ale čítať časopis a zároveň si pozerať kód viažuci sa k preberanej téme je nepraktické. Preto v časopise len stručne opíšeme preberanú tému a námet príkladov a kompletný článok s kódom nájdete na webe. Kód bude jednak priebežne v texte, jednak ako kompletný projekt na stiahnutie, ktorý si môžete priamo otvoriť a spustiť vo vývojovom prostredí na svojom počítači. 

Rekapitulácia

Minulý rok sme v seriáli venovanom vývoju aplikácií pre Windows 10 vysvetlili základné princípy architektúry nového operačného systému, ktorý umožňuje spúšťať rovnakú aplikáciu na viacerých typoch zariadení od mobilného telefónu cez tablet, PC, Xbox One až po zariadenia s veľkoplošnými obrazovkami. Prinášame stručnú rekapituláciu seriálu.

PC REVUE č. 6/2015: Predstavenie aplikačného modelu Universal Windows Platform (UWP) App model a možností vytvárania projektov vo Visual Studiu 2015. Pripomíname, že Windows 10 bol vtedy ešte vo verzii Insider preview a Visual Studio 2015 vo verzii Release Candidate.

 PC REVUE č. 7/2015: Venovali sme za základným princípom dizajnu aplikácií UWP, vysvetlili sme princíp efektívnych pixelov a dynamickej zmeny mierky a prezentovaného obsahu podľa veľkosti displeja zariadenia.
PC REVUE č. 8/2015: Podrobne sme krok za krokom opísali postup vytvorenia aplikácie UWP pre Windows 10 vrátane opisu nevyhnutných grafických prvkov čiže ikon a dlaždíc a vysvetlili životný cyklus aplikácie UWP.
PC REVUE č. 9/2015: Podrobné vysvetlenie možností adaptovania používateľského rozhrania možnostiam zariadenia, predovšetkým veľkosti displeja a spôsobu ovládania (dotykový displej, klávesnica a myš).
PC REVUE č. 10/2015: Postup migrácie aplikácií napísaných pre Windows 8.1 a Windows Phone na aplikácie UWP pre Windows 10.
PC REVUE č. 11/2015: Publikovanie aplikácie do Windows obchodu – vývojársky účet, príprava aplikácie na publikovanie, podmienky nevyhnutné na schválenie aplikácie.
PC REVUE č. 12/2015: Publikovanie aplikácie do Windows obchodu – aplikačný manifest, prvky grafického dizajnu pre obchod a vytvorenie aplikačného balíčka.

Ponuka typu hamburger

Jedna z kľúčových výziev v aplikácii je čo najprehľadnejšia navigácia, aby sa mohol používateľ prepínať medzi obrazovkami s jednotlivými funkciami, prípadne aby sa jednoducho navigoval do požadovanej časti obsahu. Dôraz na navigáciu je o to vyšší, že aplikácia UWP by mala poskytnúť rovnakú používateľskú skúsenosť na malom aj veľkom displeji. Ďalší dôležitý faktor je zrozumiteľnosť. Keď sa s novou aplikáciou oboznamujete, uvítate opis jednotlivých položiek, neskôr, keď sa v aplikácii zorientujete, budú vám stačiť aj ikony. V klasických desktopových aplikáciách to riešia tooltipy. Po umiestnení kurzora nad tlačidlo sa zobrazí jeho popis. Pri dotykovom ovládaní je to nepraktické.

Pri migrácii Modern UI pre Windows 8 a 8.1 sa stretnete s výzvou, ako implementovať ovládanie funkcií, predovšetkým nastavenia, vyhľadávania  a zdieľania, ktoré sa aktivovali cez lištu kľúčových tlačidiel, a takisto panel SettingsFlyout, na ktorý sa zvykla umiestňovať ponuka funkcií. Tento panel bol povinný, pretože naň bolo treba umiestniť deklaráciu povolení a v niektorých krajinách, kam patrilo aj Slovensko, aj opis, či a aké údaje od používateľa aplikácia zbiera a ako s nimi ďalej zaobchádza. Keď už panel nastavení v aplikácii musel byť, vývojári sem umiestňovali aj iné ponuky funkcií.

Panel kľúčových tlačidiel (na obrázku vľavo), ktorý bol vo Windows 8 a 8.1 súčasťou operačného systému

Panel nastavenia aplikácie realizovaný pomocou objektu SettingsFlyout

Naznačené výzvy veľmi efektívne rieši takzvané hamburger menu. Názov je odvodený nielen od tvaru typickej ikony, ktorá obsahuje tri čiarky (plátky) nad sebou, ale aj preto, lebo pod touto ikonou sú ďalšie ikony so symbolom funkcií.

V prvom cvičnom projekte Projekt PCREVUE_01HamburgerMenu ukážeme základné princípy. Po aktivácii ikony „hamburgera“  sa ponuka rozvinie do šírky a vedľa ikon sa zobrazia aj názvy. Realizáciu tohto efektu zabezpečuje prvok  SplitView podľa aktuálne nastavenej hodnoty parametra IsPaneOpen. V móde Overlay sa panel zobrazí tak, že prekryje hlavné okno, v móde CompactOverlay je panel prekrytý oknom obsahu.

Ponuka typu hamburger – vľavo zbalená do pása ikon, vpravo po kliknutí na tlačidlo ponuky rozbalená

Z obrázka je zrejmé, že tento druh ponuky bude dobre fungovať aj pri spustení aplikácie na malom displeji mobilného telefónu.

Ako vytvoriť ikonu „hamburger“ tlačidla a ikony ďalších funkcií, to vo väčšine prípadov riešiť nemusíte. Súčasťou Windows 10 je font  Segoe MDL2 Assets, kde tieto ikony, navyše v dizajnovom štýle Windows 10, nájdete. Stačí zobraziť aplikáciu Mapa znakov a z nej zistiť kód znaku požadovanej ikony.  Z tabuľky zistíte hexadecimálny kód Unicode znaku, v prípade nášho tlačidla je to E700. V definícii tlačidla sa typ font a kód znaku zapíše takto:
<Button Name="btHamburger" FontFamily="Segoe MDL2 Assets" Content="&#xE700;" FontSize="36" />

 

Font  Segoe MDL2 Assets s najčastejšie používanými ikonami v aplikáciách Windows 10

V druhom projekte Projekt PCREVUE_01HamburgerMenu2  ukážeme prepínanie stránok pomocou ponuky typu Hamburger. Aplikácia bude mať okrem hlavnej stránky MainPage ešte dve ďalšie stránky, medzi ktorými sa môže používateľ prepínať. Nejde nám o konkrétne riešenie, takže námetom bude prepínanie sa medzi dvoma tematickými stránkami, v našom prípade Psy.xaml a Mačky.xaml. Stránky vytvoríte pomocou kontextového menu Add – Existing Item – BlankPage. Námet sme použili úmyselne, font Segoe MDL2 Assets ikony psov ani mačiek neobsahuje, takže sme použili kombináciu obrázkov a textu. Implementovali sme aj tlačidlo na návrat na domovskú stránku, v tomto príklade je domovskou stránkou Psy.xaml.

Prepínanie stránok používateľského rozhrania pomocou ponuky typu Hamburger 

V záhlaví sme si neodpustili výzvu – príklad používateľského rozhrania na vyhľadávanie. Implementácia, samozrejme, závisí od konkrétnej aplikácie.

 

Projekt PCREVUE_01HamburgerMenu

Definícia používateľského rozhrania je v súbore MainPage.xaml. Rozmiestnenie prvkov je realizované vizuálnym kontajnerom Grid, ktorý má dva riadky a jeden stĺpec. V prvom riadku je tlačidlo na zbalenie/rozbalenie menu, ktoré je zapuzdrené v prvku RelativePanel.

<RelativePanel>
    <Button Name="btHamburger" FontFamily="Segoe MDL2 Assets"
        Content="&#xE700;" FontSize="36" Click="btHamburger_Click"  />
    </RelativePanel>

V druhom riadku neviditeľnej tabuľky je prvok SplitView. Zoznam položiek je definovaný pomocou prvku ListBox.

<SplitView Name="HbgSplitView"
            Grid.Row="1"
            DisplayMode="CompactOverlay">
     <SplitView.Pane>
         <ListBox SelectionMode="Single"
                  Name="IconsListBox"
                  SelectionChanged="IconsListBox_SelectionChanged">
             <ListBoxItem Name="ShareListBoxItem">
                 <StackPanel Orientation="Horizontal">
                     <TextBlock FontFamily="Segoe MDL2 Assets"
                         FontSize="36" Text="&#xE72D;" />
                     <TextBlock Text="Zdieľaj"/>
                 </StackPanel>
             </ListBoxItem>

             ...

         </ListBox>
     </SplitView.Pane>
     <SplitView.Content>
         <TextBlock Name="ResultTextBlock" />
     </SplitView.Content>
</SplitView>

V obsluhe udalosti zatlačenia tlačidla v súbore MainPage.xaml.cs sa prepína hodnota parametra IsPaneOpen pre prvok SplitView.

private void btHamburger_Click(object sender, RoutedEventArgs e)
{
    HbgSplitView.IsPaneOpen = !HbgSplitView.IsPaneOpen;
}

Funkcie zodpovedajúce vybraným položkám sa aktivujú napríklad takto:

private void IconsListBox_SelectionChanged(object sender,SelectionChangedEventArgs e)
{
    if (ShareListBoxItem.IsSelected) { ResultTextBlock.Text = "Zdieľaj"; }
    else if (FavoritesListBoxItem.IsSelected) { ResultTextBlock.Text = "Obľúbené"; }
     ...
}

Kompletný kód v súbore MainPage.xaml:

<Page
    x:Class="PCREVUE_01HamburgerMenu.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:PCREVUE_01HamburgerMenu"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <RelativePanel>
            <Button Name="btHamburger" FontFamily="Segoe MDL2 Assets"
                Content="&#xE700;" FontSize="36" Click="btHamburger_Click"  />
        </RelativePanel>
        <SplitView Name="HbgSplitView"
                   Grid.Row="1"
                   DisplayMode="CompactOverlay"
                   OpenPaneLength="200"
                   CompactPaneLength="56"
                   HorizontalAlignment="Left">
            <SplitView.Pane>
                <ListBox SelectionMode="Single"
                         Name="IconsListBox"
                         SelectionChanged="IconsListBox_SelectionChanged">
                    <ListBoxItem Name="ShareListBoxItem">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock FontFamily="Segoe MDL2 Assets"
                                FontSize="36" Text="&#xE72D;" />
                            <TextBlock Text="Zdieľaj" FontSize="24" Margin="20,0,0,0" />
                        </StackPanel>
                    </ListBoxItem>

                    <ListBoxItem Name="FavoritesListBoxItem">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock FontFamily="Segoe MDL2 Assets"
                              FontSize="36" Text="&#xE734;" />
                            <TextBlock Text="Obľúbené" FontSize="24" Margin="20,0,0,0" />
                        </StackPanel>
                    </ListBoxItem>

                    <ListBoxItem Name="SetupListBoxItem">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock FontFamily="Segoe MDL2 Assets"
                               FontSize="36" Text="&#xE115;" />
                            <TextBlock Text="Nastavenie" FontSize="24" Margin="20,0,0,0" />
                        </StackPanel>
                    </ListBoxItem>

                    <ListBoxItem Name="AboutListBoxItem">
                        <StackPanel Orientation="Horizontal">
                            <TextBlock FontFamily="Segoe MDL2 Assets"
                             FontSize="36" Text="&#xE946;" />
                            <TextBlock Text="O aplikácii" FontSize="24" Margin="20,0,0,0" />
                        </StackPanel>
                    </ListBoxItem>

                </ListBox>
            </SplitView.Pane>
            <SplitView.Content>
                <TextBlock Name="ResultTextBlock" />
            </SplitView.Content>
        </SplitView>
    </Grid>
</Page>


Kompletný kód v súbore MainPage.xaml.cs

using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

namespace PCREVUE_01HamburgerMenu
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        private void btHamburger_Click(object sender, RoutedEventArgs e)
        {
            HbgSplitView.IsPaneOpen = !HbgSplitView.IsPaneOpen;
        }

        private void IconsListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            if (ShareListBoxItem.IsSelected) { ResultTextBlock.Text = "Zdieľaj"; }
            else if (FavoritesListBoxItem.IsSelected) { ResultTextBlock.Text = "Obľúbené"; }
            else if (SetupListBoxItem.IsSelected) { ResultTextBlock.Text = "Nastavenie"; }
            else if (AboutListBoxItem.IsSelected) { ResultTextBlock.Text = "O aplikácii"; }
        }
    }
}

 

 

Projekt PCREVUE_01HamburgerMenu

Najskôr vytvoríme návrhový kód stránok Psy.Xaml a macky.xaml, na ktorých na zjednodušenie budú len obrázky.

Pridanie novej stránky XAML pomocou kontextového menu Add – Existing Item - BlankPage

Kompletný kód v súbore Psy.xaml:

<Page
    x:Class="PCREVUE_01HamburgerMenu2.Psy"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:PCREVUE_01HamburgerMenu2"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid>
        <Image Source="Assets/pexeso_psy.png" VerticalAlignment="Top" />
    </Grid>

</Page>

 

Kompletný kód v súbore Macky.xaml:

<Page
    x:Class="PCREVUE_01HamburgerMenu2.Macky"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:PCREVUE_01HamburgerMenu2"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid>
        <Image Source="Assets/pexeso_macky.jpg" VerticalAlignment="Top" />
    </Grid>
</Page>

 

Kompletný kód v súbore MainPage.xaml.cs

<Page
    x:Class="PCREVUE_01HamburgerMenu2.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:PCREVUE_01HamburgerMenu2"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <RelativePanel>
            <Button Name="btHamburger"
                    RelativePanel.AlignLeftWithPanel="True"
                    FontFamily="Segoe MDL2 Assets"
                    FontSize="36"
                    Content="&#xE700;"
                    Click="btHamburger_Click" />

            <Button Name="btBack"
                    RelativePanel.RightOf="btHamburger"
                    FontFamily="Segoe MDl2 Assets"
                    FontSize="36"
                    Content="&#xE0C4;"
                    Click="btBack_Click"/>

            <TextBlock Name="TitleTextBlock"
                       RelativePanel.RightOf="btBack"
                       FontSize="16"
                       FontWeight="Bold"
                       Margin="5,5,0,0"/>

            <Button Name="btSearch"
                    RelativePanel.AlignRightWithPanel="True"
                    FontFamily="Segoe MDL2 Assets"
                    FontSize="36"
                    Content="&#xE1A3;" />

            <TextBox Name="SearchTextBox"
                     RelativePanel.LeftOf="btSearch"
                     Height="48"
                     Width="120"
                     FontSize="16"
                     PlaceholderText="Vyhľadaj" />
        </RelativePanel>

        <SplitView Grid.Row="1"
                   Name="HbgSplitView"
                   DisplayMode="CompactOverlay"
                   OpenPaneLength="200"
                   CompactPaneLength="56">
            <SplitView.Pane>
                <ListBox SelectionMode="Single"
                         SelectionChanged="ListBox_SelectionChanged">
                    <ListBoxItem Name="lbPsy">
                        <StackPanel Orientation="Horizontal">
                            <Image Source="Assets/iDog.png" VerticalAlignment="Top" Height="36" Width="36" />
                            <TextBlock FontSize="24" Margin="20,0,0,0">Psy</TextBlock>
                        </StackPanel>
                    </ListBoxItem>
                    <ListBoxItem Name="lbMacky">
                        <StackPanel Orientation="Horizontal">
                            <Image Source="Assets/iCat.png" VerticalAlignment="Top" Height="36" Width="36" />
                            <TextBlock FontSize="24" Margin="20,0,0,0">Mačky</TextBlock>
                        </StackPanel>
                    </ListBoxItem>
                </ListBox>
            </SplitView.Pane>
            <SplitView.Content>
                <Frame Name="MyFrame"></Frame>
            </SplitView.Content>

        </SplitView>

    </Grid>
</Page>


Kompletný kód v súbore MainPage.xaml.cs:

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409

namespace PCREVUE_01HamburgerMenu2
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
            btBack.Visibility = Visibility.Collapsed;
            MyFrame.Navigate(typeof(Psy));
            TitleTextBlock.Text = "Psy";
            lbPsy.IsSelected = true;
        }

        private void btHamburger_Click(object sender, RoutedEventArgs e)
        {
            HbgSplitView.IsPaneOpen = !HbgSplitView.IsPaneOpen;
        }

        private void btBack_Click(object sender, RoutedEventArgs e)
        {
            if (MyFrame.CanGoBack)
            {
                MyFrame.GoBack();
                lbPsy.IsSelected = true;
            }
        }

        private void ListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            if (lbPsy.IsSelected)
            {
                btBack.Visibility = Visibility.Collapsed;
                MyFrame.Navigate(typeof(Psy));
                TitleTextBlock.Text = "Psy";
            }
            else if (lbMacky.IsSelected)
            {
                btBack.Visibility = Visibility.Visible;
                MyFrame.Navigate(typeof(Macky));
                TitleTextBlock.Text = "Mačky";
            }
        }
    }
}

 

Zobrazit Galériu

Nechajte si posielať prehľad najdôležitejších správ emailom

Mohlo by Vás zaujímať

Ako na to

Ako funguje sandbox?

08.12.2016 15:36

Každá aplikácia môže pre operačný systém počítača či mobilného zariadenia predstavovať potenciálnu hrozbu, a to aj v prípade, ak neobsahuje žiadne bloky škodlivého kódu. Murphyho zákony neúprosne defi ...

Ako na to

Tipy a triky: Ako na snímku obrazovky na akomkoľvek počítači s Windows?

02.12.2016 00:13

Ak snímky obrazovky robíte často apotrebujete napríklad funkcie na posun stránok alebo snímanie zobrazenia pri vyššom rozlíšení displeja, zrejme používate nejakú špecializovanú aplikáciu. Väčšina použ ...

Ako na to 1

Tipy a triky: Ako aplikácii prednastaviť spúšťanie s administrátorskými právami?

30.11.2016 00:10

Väčšina aspoň trochu skúsenejších používateľov vie, že aj keď máte na operačnom systéme Windows vytvorený administrátorský účet, aplikácie pre bezpečnosť nefungujú vždy splnými administrátorskými práv ...

Žiadne komentáre

Vyhľadávanie

Kyocera - prve-zariadenia-formatu-a4-s-vykonom-a3

Najnovšie videá