Ako vytvoriť aplikačnú lištu

Aplikačná lišta nahradzuje v nových “Modern UI” aplikiáciách pre Windows 8 ponuky funkcionality, ktoré v rôznych formách (menu, lišty tlačidiel…) poznáte z klasických aplikácií. Počas behu aplikácie je lišta skrytá, aby aplikácia mohla využívať celú plochu obrazovky. Používateľ ju môže aktivovať gestom – potiahnutím prsta od dolného okraja obrazovky dovnútra, pravým tlačidlom myši kdekoľvek na ploche aplikácie, prípadne kombináciu kláves Win (kláves s logom windows) +Z. Aplikačná lišta sa môže zobraziť aj kontextovo ako odozva na nejakú činnosť používateľa.

Je potrebné rozlišovať ponuky funkcií aplikácie od nastavenia parametrov, ktoré sa realizuje pomocou kľúčového tlačidla.

Príklady rozmiestnenia tlačidiel na aplikačných lištách

Podľa dizajnových odporúčaní pre Windows 8 aplikácie:

  • Tlačidlá príkazov na aplikačnej lište v spodnej časti obrazovky môžete rozmiestňovať na ľavej aj pravej strane aplikačnej lišty, pričom by malo platiť, že na ľavej strane lišty budú kontextové príkazy a na pravej strane globálne príkazy s platnosťou pre celú aplikáciu.
  • Aplikačná lišta v hornej časti obrazovky by mala byť použitá pre navigáciu a ďalšie voľby funkcionality potrebné vo vašej aplikácii, podobne ako napríklad na páse kariet Office aplikácií.

Aplikačná lišta nemusí mať iba konzervatívny dizajn, môže kreatívne zapadnúť do štýlu aplikácie. Môže byť zobrazená nielen v dolnej, ale aj hornej časti obrazovky

Aplikačná lišta sa vytvára v XAML elementoch <Page.BottomAppBar>, alebo <Page.BottomAppBar>, podľa toho, či ju chcete zobraziť v dolnej, alebo hornej časti obrazovky

<Page.BottomAppBar>

<AppBar x:Name=”BottomAppBar1″ Padding=”10,0,10,0″

AutomationProperties.Name= “Bottom App Bar”>

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition Width=”50*”/>

<ColumnDefinition Width=”50*”/>

</Grid.ColumnDefinitions>

<StackPanel x:Name=”LeftPanel” Orientation=”Horizontal”

Grid.Column=”0″ HorizontalAlignment=”Left”>

<Button x:Name=”Edit” Style=”{StaticResource EditAppBarButtonStyle}”

Tag=”Edit”/>


</StackPanel>

<StackPanel x:Name=”RightPanel” Orientation=”Horizontal”

Grid.Column=”1″ HorizontalAlignment=”Right”>

<Button x:Name=” Refresh ” Style=”{StaticResource

RefreshAppBarButtonStyle}” Tag=”Refresh”/>


</StackPanel>

</Grid>

</AppBar>

</Page.BottomAppBar>

 

Všimnite si rozdelenie prvkov na lište pomocou vizuálneho kontejnera Grid na dva stĺpce, ľavý pre kontextové a pravý pre globálne príkazy. V každom stĺpci sú tlačidlá rozmiestnené horizontálne pomocou kontajnerového prvku StackPanel.

Ak by ste aplikáciu spustili nefungovala by, nakoľko štýly tlačidiel aplikačnej listy sú v súbore StandardStyles.xaml (súbor sa nachádza v zložke projektu Common) v komentári. Najskôr musíte odstrániť komentár z tých štýlov tlačidiel, ktoré plánujete využiť. Ako príklad uvedieme kód štýlu pre tlačidlo Edit

<Style x:Key=”EditAppBarButtonStyle” TargetType=”ButtonBase”

BasedOn=”{StaticResource AppBarButtonStyle}”>

<Setter Property=”AutomationProperties.AutomationId” Value=”EditAppBarButton”/>

<Setter Property=”AutomationProperties.Name” Value=”Edit”/>

<Setter Property=”Content” Value=””/>

</Style>

Aj tento štýl dedí vlastnosti štýlu AppBarButtonStyle, ktorého definíciu nájdete taktiež v súbore StandardStyles.xaml.

Z definície štýlu pre tlačidlo “Edit” nie je na prvý pohľad zrejmé, ako je definovaný obrázok. Všimnite si riadok

<Setter Property=”Content” Value=””/>

Kód E104 znamená hexadecimálne vyjadrenie grafického znaku ktorý je v strede kruhového tlačidla v tabuľke fontov Segoe UI Symbol. Môžete si ho nechať zobraziť prostredníctvom aplikácie “Mapa znakov”.

Aplikačná lišta môže byť zobrazená nielen v dolnej, ale aj hornej časti obrazovky

Pri návrhu rozmiestnenia prvkov majte na pamäti, že používateľ môže aplikáciu pripnúť k ľavému, alebo pravému okraju obrazovky, takže má k dispozícii pre zobrazovanie iba pás široký 320 pixelov. Pre aktivovanie funkcionality je pre každé tlačidlo potrebné doplniť obsluhu udalosti OnClick. Aplikačná lišta môže obsahovať akékoľvek prvky. Ako príklad uvádzame vytvorenie hornej aplikačnej lišty pre výber farieb

<Page.TopAppBar>

<AppBar>

<StackPanel Orientation=”Horizontal” Margin=”10,10,10,10″ Height=”200″>

<Rectangle Width=”200″ Height=”200″ Fill=”Red” Margin=”0,0,20,0″

Tapped=”Rectangle_Tapped” />

<Rectangle Width=”200″ Height=”200″ Fill=”Green” Margin=”0,0,20,0″

Tapped=”Rectangle_Tapped” />


</StackPanel>

</AppBar>

</Page.TopAppBar>

 

Reklamy

Pridaj komentár

Zadajte svoje údaje, alebo kliknite na ikonu pre prihlásenie:

WordPress.com Logo

Na komentovanie používate váš WordPress.com účet. Odhlásiť sa / Zmeniť )

Twitter picture

Na komentovanie používate váš Twitter účet. Odhlásiť sa / Zmeniť )

Facebook photo

Na komentovanie používate váš Facebook účet. Odhlásiť sa / Zmeniť )

Google+ photo

Na komentovanie používate váš Google+ účet. Odhlásiť sa / Zmeniť )

Connecting to %s


%d bloggers like this: