Navigatie met een MainPage

Het navigatie frame niet als root

 

Het navigatie frame zoals we dat in Windows8 hebben is niet nieuw. Het idee is geintroduceerd in Silverlight 3 en later hebben we het ook terug zien komen voor Windows Phone.  Het is een krachtige manier van navigeren door je pagina en eenvoudig deeplinks te maken naar een specifieke onderdeel van je applicatie. Voor Silverlight kon dit handig zijn zodat gebruikers links met elkaar konden delen en in Windows Phone en Windows 8 erg handig voor de seconday tiles.

 

In silverlight word het frame op een UserControl gezet. Deze usercontrol word vervolgens als RootObject gezet op de App class. Het frame word vervolgens naar een Page gestuurd waar de content opstaat.

 

Voor WP7 is het iets simpeler, Microsoft gaf aan dat het ze vaak de UserControl die als Root werd gebruikt enkel een frame bevatte die vervolgens de hele pagina vulde. Wat Microsoft heeft gedaan is de UserControl er tussen uitgehaald en het frame als root object gezet. Hierdoor werd het iets eenvoudiger in de meeste gevallen. Dit werd standaard voor je gedaan en in de manifest file geef je aan wat de pagina is waar de applicatie bij default naar toe moet navigeren.

 

Voor WinRT development zien we ook wer deze manier van navigatie terug. Ook word (wanneer je een project vanuit Visual Studio aanmaakt) het frame als root object gezet. Dit gebeurd in de App.xaml.cs en hier word ook regeld waar het frame naar toe moet navigeren voor de eerste pagina. Doordat het frame in de app.xaml.cs als root object word gezet is het gelukkig ook mogelijk om hier van af te stappen. Juist wanneer je gebruik maakt van bijvoorbeeld het MediaElement. Je wilt (vaak) niet dat deze stopt wanneer je een pagina verlaat.

 

Wat te doen:

1.  Maak een UserControl aan. In de layout root (het root grid) voeg je een frame toe:
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

 

        <Frame x:Name="NavFrame" />

 

    </Grid>

 

2.       Voeg een event handler aan loaded event toe voor de UserControl en stuur het frame daarin naar de eerste pagina:
NavFrame.Navigate(typeof(MainPage));

 

3.  In de App.xaml.cs ga naar de OnLaunch override. Vervang hier de volgende code:
var rootFrame = newFrame();

 

       if (!rootFrame.Navigate(typeof(MainPage)))

 

       {

 

                thrownewException("Failed to create initial page");

 

 }
Door:

 

var rootObject = newMainView();

 

Laat nu Window.Current.Content wijzen naar het rootObject