Kezdőlap > Windows 8 > Application Bar

Application Bar

2012. december 5. szerda Hozzászólás Go to comments

Az ApplicationBar az egyik legfontosabb Windows Store App vezérlő. Ugyanis ezen a felületen helyezzük el alkalmazásunk fontosabb parancsait. Ha lehetséges, minden funkciót ezen a felületen helyezzünk el! Bár lehetőségünk van a munkaterületen is gombokat és menü elemeket elhelyezni, amik valamilyen funkciót végeznek el, de ha ez nem feltétlenül fontos, próbáljuk meg ezeket a funkciókat az Applicationbar-on elhelyezni! Ez a menü a képernyő alján jelenik meg, ha jobb egérgombbal kattintunk vagy a megfelelő gesztikulációt végezzük el. Nézzük meg, hogy miként hozhatunk létre egy ilyen Applicationbar-t!

image

Nyissunk meg egy tetszőleges oldalt, és az elrendezés vezérlő (Grid), valamint a Page definíció közé írjuk a következőt:

<Page.BottomAppBar>
 
<AppBar>
      <StackPanel Orientation="Horizontal">
      
 <Button Content="Edit" />
        <Button Content="Save" />
        <Button Content="Refresh"/>
     
</StackPanel>
    </AppBar>
</Page.BottomAppBar>

Ha most elindítanánk az alkalmazásunkat, akkor valami hasonló Application Bar jelenne meg, ami ugyan használható, de ez nem az elvárt.

image

Ha olyan Applicationbar-t szeretnénk, mint amit már megszoktunk Windows Store alkalmazásoknál, akkor először nyissuk meg a Common mappa alatt található StandardStyles.xaml fájlt! Itt már vannak ApplicationBar Button style-ok, de ezek ki vannak kommentezve. Vegyük ki a kommenteket! Egy stílus hozzávetőleg így néz ki:

<Style x:Key="SkipBackAppBarButtonStyle" TargetType="ButtonBase" BasedOn="{StaticResource AppBarButtonStyle}">
        <Setter Property="AutomationProperties.AutomationId" Value="SkipBackAppBarButton"/>
     
  <Setter Property="AutomationProperties.Name" Value="Skip Back"/>
     
  <Setter Property="Content" Value=""/>
</Style>

Miután a kommenteket eltávolítottuk, térjünk vissza az Applicationbar-unk definíciójához, és módosítsuk az alábbiak szerint:

<Page.BottomAppBar>
   
<AppBar>
 
    <StackPanel Orientation="Horizontal">
         <Button Style="{StaticResource EditAppBarButtonStyle}"  />
         <Button Style="{StaticResource SaveAppBarButtonStyle}"  />
     
   <Button Style="{StaticResource AddAppBarButtonStyle}" />
   
  </StackPanel>
    </AppBar>
</Page.BottomAppBar>

Figyeljük meg, hogy ebben az esetben a Content-et eltávolítottuk és csak a Style tulajdonságot határoztuk meg! (Próbáljuk ki, mi történik akkor, ha a Content tulajdonságot is megadjuk!)

image

Ezt követően már felhasználhatjuk az Application Bar elemeit. Mind Click eseménye, mind Commands tulajdonságai is vannak a gomboknak, amikkel feliratkozhatunk az eseményekre.

Természetesen arra is van lehetőségünk, hogy saját stílust definiáljunk az Applicationbar-ban megjelenő gombok és vezérlők számára!

  1. Még nincs hozzászólás.
  1. No trackbacks yet.

Vélemény, hozzászólás?

Adatok megadása vagy bejelentkezés valamelyik ikonnal:

WordPress.com Logo

Hozzászólhat a WordPress.com felhasználói fiók használatával. Kilépés / Módosítás )

Twitter kép

Hozzászólhat a Twitter felhasználói fiók használatával. Kilépés / Módosítás )

Facebook kép

Hozzászólhat a Facebook felhasználói fiók használatával. Kilépés / Módosítás )

Google+ kép

Hozzászólhat a Google+ felhasználói fiók használatával. Kilépés / Módosítás )

Kapcsolódás: %s

%d blogger ezt kedveli: