Als je wel eens met Silverlight 3 aan het het werkt bent geweest, kom je soms tot de conclusie dat je verschillende pagina’s wil in je silverlight applicatie. Dit is standaard niet zo eenvoudig maar door het maken van een nieuwe class aan je programma toe te voegen kom je een heel eind.

Maak een standaard silverlight webapplicatie aan vanuit een template in Visual Studio 2008 of Visual Studio 2010.

Maak in je silverlight applicatie een nieuwe class genaamd frame. (Dit doe je door rechts op de solution te klikken en add new class te selecteren)

Hierin moet het volgende komen:

 C# | 
 copy code |
?
 
01
02
// Contents of Frame.cs
03
        public class NavigationFrame : UserControl
04
        {
05
 
06
            // Navigate the frame to the specified content
07
            public void Navigate(UIElement content)
08
            {
09
                // the existing content of this user control is
10
                // discarded and the specified param is plugged in
11
                // its place
12
                this.Content = content;
13
            }
14
        }
15
 
16
        // Optional abstraction for page config
17
        public static class Pages
18
        {
19
            // for simplicity we're using static properties,
20
            // but this could just as easily be a URI to
21
            // Type mapping table
22
            public static UserControl verdieping3 = new verdieping3(); //verdieping3 is een naam van mijn te openen usercontrol
23
            public static UserControl verdieping4 = new verdieping4(); //verdieping4 is een naam van mijn te openen usercontrol
24
// Hier kan je dus ook nog andere aan toevoegen.
25
        }

Hierna gaan we app.xaml aanpassen. Standaard zal die gewoon page.xaml aanroepen bij het starten van de applicatie. Dit gaan we veranderen in dat die ons net aangemaakte frame gebruikt. Met daarin de pagina. Dat heeft als voordeel dat we aan het frame de opdracht kunnen geven om de andere pagina te laten zien.

 C# | 
 copy code |
?
 
01
02
//Zo ziet het eruit dit stuk moet vervangen worden.
03
private void Application_Startup(object sender, StartupEventArgs e)
04
        {
05
            this.RootVisual = new Page();
06
        }
07
//Bovenstaande dient te worden vervangen door onderstaande code.
08
private void Application_Startup(object sender, StartupEventArgs e)
09
        {
10
            // Navigate to home page
11
           //Dus in plaats van de hoofdpagina laden we hier het navigatie frame met daarin de pagina.
12
            Navigate(Pages.verdieping3);
13
 
14
        }
15
 
16
        public void Navigate(UIElement content)
17
        {
18
            // Create frame on an as-needed basis
19
            if (this.frame == null)
20
            {
21
                this.frame = new NavigationFrame();
22
                this.RootVisual = this.frame;
23
            }
24
 
25
            // Navigate to content
26
            this.frame.Navigate(content);
27
 
28
        } 

Wat er nu is gebeurt is het volgende. De pagina wordt nu niet meer als hoofdcontrol geladen, maar er wordt een frame geladen met daarin onze pagina. Met onderstaande code kunnen we vervolgens het frame de opdracht geven om de pagina te wisselen.

 C# | 
 copy code |
?
 
1
(Application.Current as App).Navigate(Pages.verdieping4);