Page 1 of 1
Navigation between XAML pages
Posted: Wed Jul 15, 2015 10:06 pm
by 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?
Re: Navigation between XAML pages
Posted: Thu Jul 16, 2015 7:40 am
by 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?20150526The 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
Re: Navigation between XAML pages
Posted: Fri Jul 17, 2015 11:20 pm
by lix2k3
Perfect. Thanks for your help.
Re: Navigation between XAML pages
Posted: Wed Nov 16, 2016 3:04 pm
by Mark Stega
Is the current thought that Frame & Navigation will still make a 2016 release?
Re: Navigation between XAML pages
Posted: Wed Dec 21, 2016 4:16 am
by 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
Re: Navigation between XAML pages
Posted: Wed Dec 21, 2016 7:56 am
by 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
Re: Navigation between XAML pages
Posted: Thu Apr 18, 2019 10:37 am
by 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.
Re: Navigation between XAML pages
Posted: Fri Apr 19, 2019 12:46 am
by 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
Re: Navigation between XAML pages
Posted: Tue Apr 23, 2019 6:36 am
by 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 22790 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.
Re: Navigation between XAML pages
Posted: Tue Apr 23, 2019 8:00 am
by 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
Re: Navigation between XAML pages
Posted: Wed Apr 24, 2019 7:20 am
by 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...
Re: Navigation between XAML pages
Posted: Wed Apr 24, 2019 7:47 am
by JS-Support @Userware
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