Vývoj aplikácií pre Windows 8

Aplikačná lišta

Ap­li­kač­ná lišta nah­ra­dzu­je v no­vých ap­li­ká­ciách Mo­dern UI pre Win­dows 8 po­nu­ky fun­kcio­na­li­ty, kto­ré v rôz­nych for­mách (me­nu, liš­ty tla­či­diel...) poz­ná­te z kla­sic­kých ap­li­ká­cií. Po­čas be­hu ap­li­ká­cie je lišta skry­tá, aby ap­li­ká­cia moh­la vy­uží­vať ce­lú plo­chu ob­ra­zov­ky.

Pou­ží­va­teľ ju mô­že ak­ti­vo­vať ges­tom - po­tiah­nu­tím prs­ta od dol­né­ho ok­ra­ja ob­ra­zov­ky dov­nút­ra, pra­vým tla­čid­lom my­ši kde­koľ­vek na plo­che ap­li­ká­cie, prí­pad­ne kom­bi­ná­ciou klá­ve­sov Win (klá­ves s lo­gom Win­dows) + Z. Ap­li­kač­ná lišta sa mô­že zob­ra­ziť aj kon­texto­vo ako reak­cia na ne­ja­kú čin­nosť pou­ží­va­te­ľa.

Tre­ba roz­li­šo­vať po­nu­ky fun­kcií ap­li­ká­cie od nas­ta­ve­nia pa­ra­met­rov, kto­ré sa reali­zu­je po­mo­cou tla­čid­la Nas­ta­ve­nie, kto­ré sa na­chá­dza na liš­te kľú­čo­vých tla­či­diel.

Lista0.jpg

Prík­la­dy roz­mies­tne­nia tla­či­diel na ap­li­kač­ných liš­tách

Di­zaj­no­vé od­po­rú­ča­nia

Di­zaj­no­vé od­po­rú­ča­nia pre ap­li­ká­cie Win­dows 8:

  • Tla­čid­lá prí­ka­zov na ap­li­kač­nej liš­te v spod­nej čas­ti ob­ra­zov­ky mô­že­te roz­mies­tňo­vať na ľa­vej aj pra­vej stra­ne liš­ty, pri­čom by ma­lo pla­tiť, že na ľa­vej stra­ne liš­ty bu­dú umies­tne­né kon­texto­vé prí­ka­zy a na pra­vej stra­ne glo­bál­ne prí­ka­zy s plat­nos­ťou pre ce­lú ap­li­ká­ciu.
  • Ap­li­kač­ná lišta v hor­nej čas­ti ob­ra­zov­ky by sa ma­la pou­žiť na na­vi­gá­ciu a ďal­šie voľ­by fun­kcio­na­li­ty pot­reb­né vo va­šej ap­li­ká­cii. V hor­nej čas­ti ob­ra­zov­ky ap­li­ká­cie to­tiž pou­ží­va­te­lia hľa­da­jú kla­sic­ké na­vi­gač­né me­nu či pás ka­riet ap­li­ká­cií Of­fi­ce.

Lista1 copy.jpg

Ap­li­kač­ná lišta ne­mu­sí mať iba kon­zer­va­tív­ny di­zajn, mô­že krea­tív­ne za­pad­núť do štý­lu
ap­li­ká­cie

Ap­li­kač­ná lišta je sú­čas­ťou kaž­dej strán­ky, inak po­ve­da­né, lišta kaž­dej strán­ky mô­že ob­sa­ho­vať iné tla­čid­lá a v prí­pa­de pot­re­by mô­že mať aj inú gra­fic­kú po­do­bu, aby di­zaj­no­vo la­di­la so zvyš­kom strán­ky.

De­fi­ní­cia ap­li­kač­nej liš­ty

Ap­li­kač­ná lišta sa vy­tvá­ra v ele­men­toch XAML <Pa­ge.Bot­to­mAp­pBar> ale­bo <Pa­ge.Bot­to­mAp­pBar>, pod­ľa to­ho, či ju chce­te zob­ra­ziť v dol­nej ale­bo hor­nej čas­ti ob­ra­zov­ky. Kód de­fi­nu­jú­ci ap­li­kač­nú liš­tu tre­ba umies­tniť za ele­ment <Pa­ge.Re­sour­ces>.

<Pa­ge.Bot­to­mAp­pBar>
   <Ap­pBar x:Na­me="Bot­to­mAp­pBar1" Pad­ding="10,0,10,0"
      Auto­ma­tion­Pro­per­ties.Na­me= "Bot­tom App Bar">
      <Grid>
         <Grid.Co­lum­nDe­fi­ni­tions>
            <Co­lum­nDe­fi­ni­tion Width="50*"/>
            <Co­lum­nDe­fi­ni­tion Width="50*"/>
         </Grid.Co­lum­nDe­fi­ni­tions>
         <Stac­kPa­nel x:Na­me="Lef­tPa­nel" Orien­ta­tion="Ho­ri­zon­tal"
            Grid.Co­lumn="0" Ho­ri­zon­ta­lA­lig­nment="Left">
            <But­ton x:Na­me="Edit" Sty­le="{Sta­tic­Re­sour­ce Edi­tAp­pBar­But­ton­Sty­le}"
                    Tag="Edit"/>
             ...
         </Stac­kPa­nel>
         <Stac­kPa­nel x:Na­me="Rig­htPa­nel" Orien­ta­tion="Ho­ri­zon­tal"
            Grid.Co­lumn="1" Ho­ri­zon­ta­lA­lig­nment="Right">
            <But­ton x:Na­me=" Ref­resh " Sty­le="{Sta­tic­Re­sour­ce
                    Ref­res­hAp­pBar­But­ton­Sty­le}" Tag="Ref­resh"/>
            ...
         </Stac­kPa­nel>
      </Grid>
   </Ap­pBar>
</Pa­ge.Bot­to­mAp­pBar>

Ak na strán­ke XAML, nap­rík­lad Main­Pa­ge.xaml, umies­tni­te kur­zor dov­nút­ra sek­cie <Pa­ge.Bot­to­mAp­pBar> de­fi­nu­jú­cej ap­li­kač­nú liš­tu, zob­ra­zí sa vám v ok­ne di­zaj­no­vé­ho návr­hu v dol­nej čas­ti ob­ra­zov­ky, te­da tak, ako bu­de zob­ra­ze­ná v spus­te­nej ap­li­ká­cii, keď ju pou­ží­va­teľ, prí­pad­ne ap­li­kač­ný kód ak­ti­vu­je.

Všim­ni­te si roz­de­le­nie pr­vkov na liš­te po­mo­cou vi­zuál­ne­ho kon­taj­ne­ra Grid na dva stĺpce - ľa­vý na kon­texto­vé a pra­vý na glo­bál­ne prí­ka­zy. V kaž­dom stĺpci sú tla­čid­lá roz­mies­tne­né ho­ri­zon­tál­ne po­mo­cou kon­taj­ne­ro­vé­ho pr­vku Stac­kPa­nel.

Ke­by ste ap­li­ká­ciu spus­ti­li, ne­fun­go­va­la by, pre­to­že štý­ly tla­či­diel ap­li­kač­nej lis­ty sú de­fi­no­va­né v sú­bo­re Stan­dar­dSty­les.xaml (sú­bor sa na­chá­dza v zlož­ke pro­jek­tu Com­mon) v ko­men­tá­ri. Naj­skôr mu­sí­te od­strá­niť ko­men­tár z tých štý­lov tla­či­diel, kto­ré plá­nu­je­te vy­užiť. Ako prík­lad uve­die­me kód štý­lu pre tla­čid­lo Edit:

<Sty­le x:Key="Edi­tAp­pBar­But­ton­Sty­le" Tar­get­Ty­pe="But­ton­Ba­se"
Ba­se­dOn="{Sta­tic­Re­sour­ce Ap­pBar­But­ton­Sty­le}">
<Set­ter Pro­per­ty="Auto­ma­tion­Pro­per­ties.Auto­ma­tio­nId" Va­lue="Edi­tAp­pBar­But­ton"/>
<Set­ter Pro­per­ty="Auto­ma­tion­Pro­per­ties.Na­me" Va­lue="Edit"/>
<Set­ter Pro­per­ty="Con­tent" Va­lue="&#xE104;"/>
</Sty­le>

Aj ten­to št­ýl de­dí vlas­tnos­ti štý­lu Ap­pBar­But­ton­Sty­le, kto­ré­ho de­fi­ní­ciu náj­de­te ta­kis­to v sú­bo­re Stan­dar­dSty­les.xaml.

Z de­fi­ní­cie štý­lu pre tla­čid­lo Edit nie je na pr­vý poh­ľad zrej­mé, ako je de­fi­no­va­ný ob­rá­zok. Všim­ni­te si ria­dok:

<Set­ter Pro­per­ty="Con­tent" Va­lue="&#xE104;"/>

Kód E104 zna­me­ná hexade­ci­mál­ne vy­jad­re­nie gra­fic­ké­ho zna­ku, kto­rý je v stre­de kru­ho­vé­ho tla­čid­la v ta­buľ­ke fon­tov Se­goe UI Sym­bol. Mô­že­te si ho ne­chať zob­ra­ziť pros­tred­níc­tvom ap­li­ká­cie Ma­pa zna­kov. Pou­žiť mô­že­te aj tla­čid­lo s vlas­tným ob­ráz­kom. Všim­ni­te si vo vi­zuál­nom kon­taj­ne­ro­vom pr­vku Stac­kPa­nel pod ob­ráz­kom texto­vý opis fun­kcie v pr­vku TextBlock:

<Stac­kPa­nel Orien­ta­tion="Ver­ti­cal" Ver­ti­ca­lA­lig­nment="Cen­ter">
<But­ton Con­tent="" Height="50" Ver­ti­ca­lA­lig­nment="Cen­ter"
Width="50" Ho­ri­zon­ta­lA­lig­nment="Cen­ter" Clic­kMo­de="Press" >
<But­ton.Background>
<Ima­geB­rush Ima­ge­Sour­ce="/As­sets/obr1.png"/>
</But­ton.Background>
</But­ton>
<TextBlock Text="Edi­tuj" />
</Stac­kPa­nel>

Pri návr­hu roz­mies­tne­nia pr­vkov maj­te na pa­mä­ti, že pou­ží­va­teľ mô­že ap­li­ká­ciu prip­núť k ľa­vé­mu ale­bo pra­vé­mu ok­ra­ju ob­ra­zov­ky, tak­že má k dis­po­zí­cii na zob­ra­zo­va­nie iba pás ši­ro­ký 320 pixelov.

Na ak­ti­vo­va­nie fun­kcio­na­li­ty tre­ba pre kaž­dé tla­čid­lo dopl­niť ob­slu­hu uda­los­ti On­Click.

Ap­li­kač­ná lišta mô­že ob­sa­ho­vať aké­koľ­vek pr­vky. Ako prík­lad uvá­dza­me vy­tvo­re­nie hor­nej ap­li­kač­nej liš­ty na vý­ber fa­rieb.

<Pa­ge.To­pAp­pBar>
<Ap­pBar>
<Stac­kPa­nel Orien­ta­tion="Ho­ri­zon­tal" Mar­gin="10,10,10,10" Height="200">
<Rec­tang­le Width="200" Height="200" Fill="Red" Mar­gin="0,0,20,0"
Tap­ped="Rec­tan­gle_Tap­ped" />
<Rec­tang­le Width="200" Height="200" Fill="Green" Mar­gin="0,0,20,0"
Tap­ped="Rec­tan­gle_Tap­ped" />
...
</Stac­kPa­nel>
</Ap­pBar>
</Pa­ge.To­pAp­pBar>

Roz­vi­nu­tie po­nu­ky ap­li­kač­nej liš­ty

V úvo­de člán­ku sme spo­mí­na­li od­po­rú­ča­ný účel ap­li­kač­nej liš­ty v hor­nej čas­ti ob­ra­zov­ky na na­vi­gá­ciu. Hlav­ne spo­čiat­ku, kým nep­rev­lád­nu za­ria­de­nia pre Win­dows 8 s do­ty­ko­vou ob­ra­zov­kou a pou­ží­va­te­lia si pl­ne neos­vo­ja fi­lo­zo­fiu ov­lá­da­nia ap­li­ká­cií Mo­dern UI, bu­dú in­tui­tív­ne hľa­dať ana­ló­giu s kla­sic­kým ro­le­to­vým me­nu. Na ten­to účel mô­že­te vy­tvá­rať ro­le­to­vú po­nu­ku s vy­uži­tím kniž­ni­ce Callis­to. Naj­skôr mu­sí­te do pro­jek­tu pri­dať re­fe­ren­cie na kniž­ni­cu (kon­texto­vé me­nu na zlož­ku Re­fe­ren­ces v ok­ne So­lu­tion Explo­rer).

Lista6.jpg

Roz­vi­nu­tie po­nu­ky ap­li­kač­nej liš­ty for­mou me­nu

V ob­slu­he uda­los­ti prís­luš­né­ho tla­čid­la ap­li­kač­nej liš­ty vy­tvo­rí­te dy­na­mic­ky roz­ší­re­nú po­nu­ku pre to­to tla­čid­lo.

pri­va­te void OnE­dit­But­ton­Clic­ked(ob­ject sen­der, Rou­te­dE­ven­tArgs e)
{
// dvo­jriad­ko­vé me­nu
var me­nu = new Me­nu();
var item1 = new Me­nuI­tem { Text = "Urob fo­to" };
item1.Tap­ped += Sni­maj­Fo­to;
me­nu.Items.Add(item1);
var item2 = new Me­nuI­tem { Text = "Sní­maj vi­deo" };
item2.Tap­ped += Sni­maj­Vi­deo;
me­nu.Items.Add(item2);
// Vi­zual­ne pri­po­je­nie k tla­čid­lu
var flyout = new Flyout();
flyout.Pla­ce­ment = Pla­ce­men­tMo­de.Top;
flyout.Ho­ri­zon­ta­lA­lig­nment = Ho­ri­zon­ta­lA­lig­nment.Left;
flyout.Ho­ri­zon­tal­Con­ten­tA­lig­nment = Ho­ri­zon­ta­lA­lig­nment.Left;
flyout.Pla­ce­men­tTar­get = Brag­But­ton;
flyout.Con­tent = me­nu;
flyout.IsO­pen = true;
}

Zdroj: IW 5/2013



Ohodnoťte článok:
 
 
 

24 hodín

týždeň

mesiac

Najnovšie články

Zá­lo­huj­te dá­ta efek­tív­ne
S nárastom objemu dát sa čoraz väčší dôraz kladie na ich bezpečné a efektívne zálohovanie. Tradičné spôsoby už pomaly začínajú narážať na svoje limity, a tak sa výrobcovia zálohovacích riešení snažia nájsť ďalšie alternatívy. čítať »
 
Ako bu­dú fun­go­vať glo­bál­ne te­le­ko­my v ro­ku 2020?
V roku 2020 si zákazník nebude kupovať prístup, ale služby ekosystému telekomunikačných spoločností. Komunikácia bude prebiehať na platforme sociálnych médií. čítať »
 
SXSW je aj nie je o IT
Festival South by Southwest, skrátene SXSW, ktorý sa už 20 rokov odohráva každoročne v americkom Austine, je známy najmä svojou myšlienkou prepájania technológií a kreatívnych riešení na lepšiu budúcnosť. čítať »
 
Zdie­ľa­nie zdro­jov me­dzi OS Win­dows a OS Li­nux / 11.
V tomto článku ukončíme tému, v ktorej sme sa venovali špecifickému spôsobu pripojenia smartfónu k PC pomocou ad hoc siete Wi-Fi. Opíšeme úpravy konfiguračného súboru wpa_supplicant.conf. Nakoniec vytvoríme funkčné spojenie medzi smartfónom a PC. čítať »
 
Ap­li­kač­ná lišta
Aplikačná lišta nahradzuje v nových aplikáciách Modern UI 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. čítať »
 
Prog­ra­mu­je­me GPU / 22. časť
V tomto článku sa zameriame na opis implementácie tzv. High Dynamic Range renderingu. Vo vzťahu k OpenGL môžeme povedať, že princípom HDR je zreálnenie vzhľadu renderovaných scén pomocou zvýšenia jasu tých bodov, v blízkosti ktorých sa nachádzajú svetelné zdroje. čítať »
 
DNS – kon­fi­gu­rač­ný sú­bor na­med.conf
V predchádzajúcej časti sme ukázali tvorbu najdôležitejších záznamov RR v zmysle nášho imaginárneho príkladu siete. Zároveň sme naznačili tvorbu záznamu PTR (Pointer), ktorý hovorí o spätnom preklade. Tentoraz sa budeme venovať konfigurácii celého systému DNS. čítať »
 
No­vé server­y SPARC s naj­rý­chlej­ší­mi mik­rop­ro­ce­sor­mi na sve­te
Akvizíciou Sun Microsystems spoločnosť Oracle, dovtedy výhradne softvérová firma, získala nielen portfólio serverov, ale aj kvalitný tím špecialistov na vývoj procesorov. Preto popri nových serveroch Oracle s predponou Exa ďalším „esom v rukáve". čítať »
 
 
 
  Zdieľaj cez Facebook Zdieľaj cez Google+ Zdieľaj cez Twitter Zdieľaj cez LinkedIn Správy z RSS Správy na smartfóne Správy cez newsletter