Navigation between XAML pages

lix2k3
Posts: 7
Joined: Wed Jul 15, 2015 10:04 pm

Navigation between XAML pages

Postby lix2k3 » Wed Jul 15, 2015 10:06 pm

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
Site Admin
Posts: 1066
Joined: Tue Apr 08, 2014 3:42 pm

Re: Navigation between XAML pages

Postby JS-Support @Userware » Thu Jul 16, 2015 7:40 am

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
Posts: 7
Joined: Wed Jul 15, 2015 10:04 pm

Re: Navigation between XAML pages

Postby lix2k3 » Fri Jul 17, 2015 11:20 pm

Perfect. Thanks for your help.

Mark Stega
Posts: 12
Joined: Wed Oct 07, 2015 2:10 pm

Re: Navigation between XAML pages

Postby Mark Stega » Wed Nov 16, 2016 3:04 pm

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

Amrutha
Posts: 21
Joined: Tue Nov 15, 2016 5:10 am

Re: Navigation between XAML pages

Postby Amrutha » Wed Dec 21, 2016 4:16 am

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
Site Admin
Posts: 1066
Joined: Tue Apr 08, 2014 3:42 pm

Re: Navigation between XAML pages

Postby JS-Support @Userware » Wed Dec 21, 2016 7:56 am

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
Posts: 38
Joined: Wed Mar 27, 2019 7:04 am

Re: Navigation between XAML pages

Postby ScottM » Thu Apr 18, 2019 10:37 am

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
Site Admin
Posts: 1066
Joined: Tue Apr 08, 2014 3:42 pm

Re: Navigation between XAML pages

Postby JS-Support @Userware » Fri Apr 19, 2019 12:46 am

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
Posts: 38
Joined: Wed Mar 27, 2019 7:04 am

Re: Navigation between XAML pages

Postby ScottM » Tue Apr 23, 2019 6:36 am

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
Navigate.png (6.24 KiB) Viewed 1904 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
Site Admin
Posts: 1066
Joined: Tue Apr 08, 2014 3:42 pm

Re: Navigation between XAML pages

Postby JS-Support @Userware » Tue Apr 23, 2019 8:00 am

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
Posts: 38
Joined: Wed Mar 27, 2019 7:04 am

Re: Navigation between XAML pages

Postby ScottM » Wed Apr 24, 2019 7:20 am

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
Site Admin
Posts: 1066
Joined: Tue Apr 08, 2014 3:42 pm

Re: Navigation between XAML pages

Postby JS-Support @Userware » Wed Apr 24, 2019 7:47 am

Thanks.
ScottM wrote: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


Return to “General Discussion and Other”

Who is online

Users browsing this forum: No registered users and 3 guests