Windows Metro Style Navigation Between Pages from codebehind (vb/xaml)

Question

Can annybody give an example on how i can navigate between pages in a "Metro Style" application (vb.net)?

Brgds Egil

Answer 1

@EgilR - Look at the Frame/Page objects.  The default templates currently don't use them unfortunately, but this would be the preferred way.  Looking at some of the tutorials on Silverlight navigation would give you a good understanding of how the mechanism works.

---

Tim Heuer | Program Manager, XAML | http://timheuer.com/blog | @timheuer

Answer 2

Also see http://channel9.msdn.com/Events/BUILD/BUILD2011/APP-741T (40 minutes into the presentation).

Marco talks about Navigation and shows an example (C# though).  If that doesn't help, let me know and I can generate a quick sample.

Joe

Answer 3

Hi Tim and Joe,

Thank you for pointing me in the right direction. I think that i understand the consept, but when I try to make a small sample program it does not work.´
The designer throws an unhandled exception when I type in the Frame component in the MainPage.xaml. (see image)

Do you have any idea of what can be wrong?

Brgds Egil

 

Answer 4

When you click 'reload the designer' does it refresh?  If not, this may be a preview bug.  One thing to try, remove the Source attribute and do that in code temporarily using the Navigate(typeof(yourtype).FullName) method.

---

Tim Heuer | Program Manager, XAML | http://timheuer.com/blog | @timheuer

Answer 5

Also - does your app run?  As Tim indicates above, this may be a designer bug and if so, your app should still run.

Joe

Answer 6

Hi Again,

1) 'Reload designer' does not work unhandled exception again

2) Removed 'source' from xaml and put the code _frame.Navigate("erlNav.BlankPage1")  in button click event handler: 
    No design time/run time error, but the program did not show "BlankPage1" in frame.

3) Tried to make the program in c# same error (have programmed VB for almost 2 decades so I prefer VB ;) )

I am missing something and cannot understand what.

Can I ask you a favour - try to make a small sample progroam and see if it works for you?

Brgds Egil

 

 

Answer 7

Here's a basic sample.  To get this working create a new Visual Basic Application and call it "Nav".

Put the following in MainPage.xaml:

<UserControl x:Class="Nav.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">  
  <Grid x:Name="LayoutRoot" Background="#FF0C0C0C">
    <Frame Source="Nav.Hello">
      <Frame.ContentTransitions>
        <TransitionCollection>
          <EntranceThemeTransition FromHorizontalOffset="200" />
        </TransitionCollection>
      </Frame.ContentTransitions>
    </Frame>
  </Grid>
</UserControl>

Then add a new UserControl called "Hello" to the project.  You really need a "Page" so you need to replace the contents of Hello.xaml and Hello.xaml.vb.  Replace Hello.xaml with the following:

<Page x:Class="Nav.Hello" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <TextBlock Text="Hello World" FontSize="50"/>
</Page>

And replace Hello.xaml.vb with the following:

Public NotInheritable Class Hello

End Class

The should get you the basics up and running.

Joe

 

Answer 8

 

Thank you Joe I am flying ;)

After looking at your sample I changed the <UserControl  ....  tag to <Page ... in all my pages and everything worked!!!

( I did not see that if you add the template "pages" 'Blank Page', 'Item Detail Page', "Collection Summary Page', etc they all have the "Usercontrol" tag not the "Page" tag in xaml !!! )

Thanks again.

/Egil