Vaša Windows 10 aplikácia sa musí flexibilne prispôsobiť nielen rôznej veľkosti displejov a ich orientácii. Prvky používateľského rozhrania bude treba zrejme usporiadať inak pri zobrazení na veľkej obrazovke v režime na šírku a inak na menšej obrazovke telefónu pri základnej orientácii na výšku. Kombinatorika týmto nekončí, aplikácie sa na väčších obrazovkách zariadení, ktoré nie sú prepnuté do tablet módu štandardne zobrazujú v oknách, pričom ich veľkosť môže používateľ meniť.
V časti venovanej dizajnu sme vysvetlili, že Windows 10 používa algoritmus pre zmenu mierky, ktorý normalizuje spôsob zobrazovania prvkov používateľského rozhrania a fontov. Algoritmus berie do úvahy pozorovaciu vzdialenosť a rozlíšenie obrazovky pre optimalizáciu vnímania veľkosti prvkov. Pri definovaní prvkov budete namiesto skutočných pixelov používať takzvané efektívne pixely.
VyvojWindows1 Pri návrhu prvku s rozmerom 1 ” sa bude tento prvok zdať veľký približne 1 ” na všetkých zariadeniach. Na menších zariadeniach pritom môže mať 100 x 100 fyzických pixelov a na veľkej obrazovke s vysokou hustotou pixelov, môže mať 200 x 200 fyzických pixelov.
Zmena usporiadania prvkov
Ako to funguje v praxi, ukážeme na jednoduchej aplikácii. Vo Visual Studiu 2015 vytvorte projekt typu UWP (Universal Windows Platform) s využitím šablóny Blank App. Pre nekomerčné účely môžete využiť verziu Copmmunity Edition, ktorá je zdarma. Pri vytváraní prvého projektu na vašom vývojárskom počítači s Windows 10 budete upozornení aby ste zapli vývojársky mód umožňujúci spúšťať a ladiť aplikácie.
Zapnutie režimu vývojára v nastaveniach Windows 10
Na stránke MainPage.xaml definujeme niekoľko prvkov používateľského rozhrania, vhodne rozmiestnených, napríklad
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<StackPanel x:Name="hlavnyPanel" Margin="8,32,0,0">
<TextBlock Text="Flexibilná aplikácia!" Margin="0,0,0,40"/>
<TextBlock Text="Zadajte vaše meno a priezvisko"/>
<StackPanel x:Name="vstupnyPanel" Orientation="Horizontal" Margin="0,20,0,20">
<TextBox x:Name="menoTB" Width="280" HorizontalAlignment="Left"/>
<Button x:Name="pridajBT" Content="Pridaj do zoznamu"/>
</StackPanel>
<TextBlock x:Name="vystupTB"/>
</StackPanel>
</Grid>
Prvky používateľského rozhrania sú zapuzdrené v dvoch vnorených vizuálnych kontejneroch typu StackPanel. Úlohou tohto kontejnera je usporiadať prvky vertikálne, čo je implicitná voľba, alebo horizontálne, ak túto voľbu nastavíte pomocou parametra Orientation. Prvý kontejner usporiadal prvky zvislo vrátane druhého kontejnera, ktorý usporiadal prvky “menoTB” a “pridajBT” vodorovne. Nakoľko sme sa zamerali na flexibilitu používateľského rozhrania nebudeme riešiť obsluhu udalosti zatlačenia tlačidla.
Spustenie aplikácie na vývojárskom počítači. Všimnite si diagnostické okno, ktoré ukazuje ako vaša aplikácia zaťažuje procesor, spotrebováva pamäť a iné zdroje počítača na ktorom je spustená
Na širšom displeji, v širšom okne, alebo na telefóne pri orientácii na šírku je toto usporiadanie prehľadné. Ako bude aplikácia zobrazená na displeji telefónu pri orientácii na výšku. Nemusíte pripájať telefón, ani spúšťať emulátor, stačí ak prepnete náhľadové okno vývojového prostredia do režimu vybraného typu displeja. Pri náhľade v tomto režime zistíte, že tlačidlo sa nezobrazilo celé. Takto navrhnutá aplikácia by sa zle ovládala, nehovoriac o tom, čo by si používateľ pomyslel o jej tvorcoch.
Simulovanie zobrazenia na displeji telefónu. Všimnite si vľavo výber veľkostí displejov na ktorých môžete simulovať zobrazenie vašej aplikácie v náhľadovom okne Visual Studia.
Aby sa vaša aplikácia, presnejšie rozmiestnenie jej prvkov prispôsobilo rozmerom displeja, alebo okna, budete potrebovať triedu VisualStateManager. Jej úlohou je správa logických stavov zobrazovania a realizácia vhodných transformácií na prispôsobenie rozloženia prvkov aktuálnemu rozmeru okna aplikácie. Napríklad pri užšom okne môžete nielen inak usporiadať prvky, ale aj zmenšiť šírku okrajov a podobne.
Za úvodný tag Grid, pred prvý element StackPanel vložte blok XAML kódu
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="wideState">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="641" />
</VisualState.StateTriggers>
</VisualState>
<VisualState x:Name="narrowState">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="vstupnyPanel.Orientation" Value="Vertical"/>
<Setter Target="pridajBT.Margin" Value="0,4,0,0"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
Pokiaľ má aplikácia na šírku k dispozícii viac než 640 pixelov, zostane používateľské rozhranie nezmenené. Na užšej obrazovke sa zmení orientácia usporiadania prvkov vo vnútri vzuálneho kontejnera StackPanel „vstupnyPanel“ z horizontálnej na vertikálnu, takže tlačidlo sa zobrazí pod prvkom na zadanie mena a priezviska.
Zmena usporiadania prvkov na úzkej obrazovke
VisualState s názvom wideState má adaptívny trigger nastavený pomocou parametra MinWindowWidth, ktorý definuje minimálnu šírku okna 641. To znamená, že tento status je aktívny iba v prípade, ak šírka okna nie je menšia ako nastavené minimum v tomto prípade 641 pixelov. V tomto stave sa zobrazí implicitný návrh používateľského rozhrania. Nemusíte nastavovať žiadne seter objekty pre tento stav, nakoľko využíva vlastnosti rozvrhnutia a veľkosti prvkov, ktoré ste definovali v XAML návrhu stránky. Druhý VisualState, s názvom narrowState, má trigger AdaptiveTrigger, presnejšie jeho parameter MinWindowWidth nastavený na hodnotu 0. Tento stav sa použije ak je šírka okna je väčšia ako 0, ale menšia ako 641 pixelov. V tomto stave je potrebné pomocou objektov Setter definovať, ktoré vlastnosti ktorých prvkov v používateľskom rozhraní sa zmenia.
Skrývanie nepoužívaných prvkov
Na menších displejoch môžete na základne obrazovke zobraziť iba najčastejšie používané prvky a ďalšie si používateľ zobrazí napríklad posunutím. Na väčšej obrazovke zobrazíte naraz viac prvkov pre vyššiu variabilitu ovládania. Veľa aplikácií využíva zobrazenie typu master – detail. Na malej obrazovke sa vypíše zoznam objektov a po kliknutí na vybraný objekt sa vypíšu detailné informácie. Na PC a tabletoch sa detaily o vybranom objekte zobrazia spravidla vpravo od zoznamu objektov. Ako jednu z možností realizácie ukážeme využitie prvku SplitView, ktorý rozdeľuje obrazovku na dve časti. Ľavá môže byť použitá pre panel menu, alebo zoznam objektov a pravá zobrazuje vybraný obsah. V móde Overlay sa panel zobrazí tak, že prekryje hlavné okno, v móde CompactOverlay je panel prekrytý oknom obsahu. Odporúčame v tomto režime zobraziť len ikony.
Prvok SplitView v móde CompactOverlay
V móde Inline, ktorý využijeme v príklade je panel zobrazený vedľa okna kontextu. Ukážeme to na jednoduchom príklade. :
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<SplitView Name="Split" PanePlacement="Left" OpenPaneLength="200" IsPaneOpen="False" DisplayMode="Inline">
<SplitView.Pane>
<Grid Padding="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="10" />
<RowDefinition Height="Auto" />
<RowDefinition Height="10" />
<RowDefinition Height="Auto" />
<RowDefinition Height="10" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<SymbolIcon HorizontalAlignment="Left" Foreground="Gold" Symbol="Favorite"/>
<TextBlock Grid.Column="1" Text="Obľúbené" />
<SymbolIcon Grid.Row="2" HorizontalAlignment="Left" Foreground="Red" Symbol="Sync" />
<TextBlock Grid.Column="1" Grid.Row="2" Text="Synchronizuj" />
<SymbolIcon Grid.Row="4" HorizontalAlignment="Left" Foreground="Green" Symbol="Save" />
<TextBlock Grid.Column="1" Grid.Row="4" Text="Ulož" />
<SymbolIcon Grid.Row="6" HorizontalAlignment="Left" Symbol="Setting" />
<TextBlock Grid.Column="1" Grid.Row="6" Text="Nastave" />
</Grid>
</SplitView.Pane>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Button Background="White" Click="Button_Click">
<StackPanel>
<Rectangle Height="3" Width="20" Fill="Black" />
<Rectangle Margin="0,5" Height="3" Width="20" Fill="Black" />
<Rectangle Height="3" Width="20" Fill="Black" />
</StackPanel>
</Button>
<TextBlock Margin="10" Grid.Row="1" Text="Obsah hlavného okna" />
</Grid>
</SplitView>
</Grid>
Tlačidlom sa zapína, alebo vypína zobrazenie panelu
private void Button_Click(object sender, RoutedEventArgs e)
{
Split.IsPaneOpen = !Split.IsPaneOpen;
}
Teraz môžete aplikáciu vyskúšať a tlačidlom zobrazovať a skrývať panel ponuky funkcií
Skrytý (vľavo) a zobrazený (vpravo) ľavý panel prvku SplitView
Ak ste si v predchádzajúcom príklade vyskúšali triedu VisualStateManager, pointa prispôsobenia prvku SplitView vás už určite napadla. Pri širokom displeji stačí nastaviť parameter Split.IsPaneOpen na true a na úzkom displeji na false, aby sa zobrazil len po zatlačení tlačidla.
Windows 10 
Pridaj komentár