Windows Phone 8 în 10 zile 3
Azi discutăm puțin de câteva aspecte specifice Windows Phone 8, AppBar și Panorama Control, pe care le vom folosi în meniul de instrucțiuni cu referire la joc.
Înainte să folosesc un AppBar, trebuie să îl declar. Mă duc în soluția mea, la Resources -> AppResources.resx.
O să dau un nume AppBar-ului meu: AppBarHowTo și o valoare “Cum se joacă” pentru a informa utilizatorul cu referire la ceea ce face butonul.
Intru în pagina unde vreau să am AppBar-ul la partea de C#, în cazul meu este vorba de MainPage.xaml.cs
By default, ar trebui să existe deja metoda BuildLocalizedApplicationBar, dar o puteți șterge și să o înlocuiți cu următoarea bucată de cod:
1 2 3 4 5 6 7 8 9 |
private void BuildLocalizedApplicationBar() { ApplicationBar = new ApplicationBar(); ApplicationBarMenuItem appBarHowTo = new ApplicationBarMenuItem(AppResources.AppBarHowTo); ApplicationBar.MenuItems.Add(appBarHowTo); appBarHowTo.Click += appBarHowTo_Click; } |
Click dreapta pe eroare când apare și Generate -> Method stub.
Ce face codul:
- Creez ApplicationBar-ul (linia 4)
- Creez item-ul pe care-l vreau în AppBar (linia 6)
- Adaug item-ul creat în AppBar (linia 7)
- Creez eventul de click/tap.
Analog pentru orice alt buton pe care vreau să-l creez.
La handler-ul de tap o să navighez la pagina howTo.xaml:
1 |
NavigationService.Navigate(new Uri("/Views/howTo.xaml", UriKind.Relative)); |
HowTo.xaml
Nu am vrut să tratez ieri pagina howTo pentru că am zis să-i adaug ceva mai diferit. În Știi Să Scrii i-am adăugat un stackpanel care avea în interior mai multe TextBlock-uri. Pentru “Știi sinonimul” o să folosesc controlul Panorama despre care puteți citi în detaliu aici
Practic este o pagină wide formată din mai multe ecrane mici. Eu în orice moment văd doar o bucățică a întregii imagini, nu pe toată. Ca să o văd pe toate trebuie să dau Swipe. Pot spune că este echivalentul lui FlipView din Windows 8 (într-o oarecare măsură)
Codul este următorul:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<Grid x:Name="LayoutRoot" Background="#c09a00"> <phone:Panorama Title="Instrucțiuni"> <phone:PanoramaItem Header="1"> <TextBlock Text=""/> </phone:PanoramaItem> <phone:PanoramaItem Header="2"> <TextBlock Text=""/> </phone:PanoramaItem> <phone:PanoramaItem Header="3"> <TextBlock Text=""/> </phone:PanoramaItem> </phone:Panorama> </Grid> |
PivotControl și Panorama control sunt extrem de asemănătoare când vine vorba de implementare. Se tratează la fel, dar diferă puțin modul cum arată.
By: Adrian Coman