Navigation between XAML pages

[lix2k3]

Microsoft has done page navigation a few different ways, with Frames, Navigationservice in WP7, etc. How do we implement it here in cshtml5? What model are you guys following to get this working in my app?

[JS-Support @Userware]

Hi lix2k3 and welcome to the forums.

The "Frame" control and the "NavigationService" (with URI mappings) will be available in 2016.

In the meantime, to navigate between XAML pages, you can do the same thing as in the same Showcase application:
http://cshtml5.com/samples/showcase/index.html?20150526
The source code is included in the product (under VS, click File -> New Project -> C#/XAML for HTML5 -> sample Showcase application).

The simplest way to do what you are trying to do is the following:
- place a <Border x:Name="PageContainer"/> control inside your MainPage. Your XAML pages will go there.
- call the following C# code to change the page:

Code: Select all

PageContainer.Child = new MyPage1();

By the way, you can use Pages or UserControls interchangeably. They are the same thing at the moment.

Please let me know if something is not very clear.

Regards,
JS-Support

[lix2k3]

Perfect. Thanks for your help.

[Mark Stega]

Is the current thought that Frame & Navigation will still make a 2016 release?

[Amrutha]

Hello Team,

I wanted to implement the Frame and Navigation feature in my project.

The sample code provided by you [PageContainer.Child = new MyPage1();] is a good alternative but in my case I need to use the Frame and Navigation feature.

Please suggest if there are any other alternative.

Kindly let me know in which roadmap the Frame and Navigation feature will be released.

Thanks,
Amrutha

[JS-Support @Userware]

Hi,

This is indeed a very important feature. We hope to be able to deliver this feature in the coming weeks. I'll keep you updated as soon as I have more information.

Thank you.
Regards,
JS-Support

[ScottM]

Still evaluating (using the 2.0 0.3 preview), and wondering if there is a better way to navigate between xaml pages.

Code: Select all

PageContainer.Child = new ProspectingPage();

works, but the back arrow in the browser (Edge) doesn't take me back to the original page. This is an older thread, is there now a better way?

Thanks.

[JS-Support @Userware]

Hi

Yes, there is now the Frame contrôle as well as the UriMapper. They handle the browser history and more.

Please refer to the large Showcase for an example:

https://github.com/cshtml5/CSHTML5.Samples.Showcase

(Use the "Bridge" branch for the version 2.x Preview-compatible version)

Regards
JS-Support

[ScottM]

Thanks. The example there does a frame navigation, which is fine thing and I might eventually have a use for that, but for now, I'm just trying to do a "bear of little brain" or (in other words) KISS navigation. I just want to launch a sibling page in the solution replacing the present page in the browser, rather than replace a portion of a page. And then have navigation back. If a pic helps:

Navigate.png (6.24 KiB) Viewed 73841 times

I just want to be able to navigate from the MainPage.xaml to a different page, ProspectingPage.xaml (red arrow) and have the browser back button take me back (green arrow).

I started something like this to incorporate the mapping from the example in code:

Code: Select all

            UriMapper uriMapper = new UriMapper();
            UriMapping uriMapping = new UriMapping();
            uriMapping.Uri = new Uri("/ProspectingPage", UriKind.Relative);
            uriMapping.MappedUri = new Uri("/ProspectingPage.xaml", UriKind.Relative);
            uriMapper.UriMappings.Add(uriMapping);

But it feels wrong and overwrought.

[JS-Support @Userware]

Hi,

CSHTML5 produces a "Single Page App" (SPA) (wikipedia).

You need to put a <Frame> control somewhere in your visual tree and navigate with the Frame in order to support the browser back and forward buttons. You don't necessary need to use the UriMapper (it's useful only if you want to customize the text that appears after the "#" in the URL).

If you don't want to put the Frame control in MainPage.xaml, you can alternatively put it in App.xaml.cs. Just replace the following code:

Code: Select all

    public sealed partial class App : Application
    {
        public App()
        {
            this.InitializeComponent();

            // Enter construction logic here...

            var mainPage = new MainPage();
            Window.Current.Content = mainPage;
        }
    }

with:

Code: Select all

    public sealed partial class App : Application
    {
        public App()
        {
            this.InitializeComponent();

            // Enter construction logic here...

            var frame = new Frame();
            frame.Navigate(new Uri("MainPage.xaml", UriKind.Relative));
            Window.Current.Content = frame;
        }
    }

The Frame control is lightweight in terms of GUI structure.

Regards

[ScottM]

Thank you. Sorry for my ignorance about the SPA aspect. But what you gave me worked. Here is what I ended up with, in case it helps anyone else...

Code: Select all

    public sealed partial class App : Application
    {
        public Frame mFrame;

        public App()
        {
            this.InitializeComponent();

            // Enter construction logic here...

            mFrame = new Frame();
            mFrame.Navigate(new Uri("MainPage.xaml", UriKind.Relative));
            Window.Current.Content = mFrame;
            // var mainPage = new MainPage();
            // Window.Current.Content = mainPage;
        }
    }

and then on the navigation event:

Code: Select all

    public partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();

            // Enter construction logic here...
        }

        private void ProspectingButton_Click(object sender, RoutedEventArgs e)
        {
            ((App)Application.Current).mFrame.Navigate(new Uri("ProspectingPage.xaml", UriKind.Relative));
        }

    }

One last question (for now, at least). If I want the user to be able to navigate away to a completely different web page (replacing the SPA), how can I do that? (I tried a URI with UriKind.Absoloute above in the Click event and it didn't work.) Not sure I need that function, but while it's on my mind...

[JS-Support @Userware]

Thanks.

If I want the user to be able to navigate away to a completely different web page (replacing the SPA), how can I do that?

You can use the following code:

Code: Select all

string uriString = "http://google.com";
CSHTML5.Interop.ExecuteJavaScript("window.location.href = $0", uriString);

Regards