How do I access a page frame to navigate a page through a UserControl object in a UWP?

Question

I'm developing a UWP application that involves several UserControl objects inside a Map using Windows.UI.Xaml.Navigation.

Sometimes, the user should be able to click a button in these objects to go to a new page. However, I can't access the page's frame, so I can't use the following method.

Frame.Navigate(typeof([page])); 

How could I access the page frame to use the method?

Let me know of any alternatives; I've been stuck on this for most of the day! Thanks in advance for any help you guys offer!

Solution 1

We can let the page to navigate itself. Just define an event in your custom usercontrol and listen to the event in its parent(the page).

Take the following as an example:

1. Create a custom user control and put a button on it for test purpose.
2. In test button's click event, raise the event to navigate parent page.
3. In Parent page, listen to the UserControl's event and call Frame.Navigate.

MyControl's Xaml:

<UserControl
x:Class="App6.MyControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App6"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">

<Grid>
    <Button x:Name="testbtn" Margin="168,134,0,134" Click="testbtn_Click">test</Button>
</Grid>
</UserControl>

MyControl's CodeBehind:

public sealed partial class MyControl : UserControl
{

    public delegate void MyEventHandler(object source, EventArgs e);

    public event MyEventHandler OnNavigateParentReady;

    public MyControl()
    {
        this.InitializeComponent();
    }

    private void testbtn_Click(object sender, RoutedEventArgs e)
    {
        OnNavigateParentReady(this, null);
    }


}

Navigate MainPage to SecondPage:

    public MainPage()
    {
        this.InitializeComponent();

        myControl.OnNavigateParentReady += myControl_OnNavigateParentReady;
    }

    private void MyControl_OnNavigateParentReady(object source, EventArgs e)
    {
        Frame.Navigate(typeof(SecondPage));
    }

Solution 2

You could get a reference to the Frame from the Current Window's Content. In your user control's code behind try:

Frame navigationFrame = Window.Current.Content as Frame;
navigationFrame.Navigate(typeof([page]));

Comments

[kgyts]

Fantastic! Thank you for this. Worked like a charm.

[dav1dsm1th]

I needed to change public event to public static event, so that I could use this solution in a UserControl within a DataTemplate within a GridView.ItemTemplate within a GridView within a Grid within a Page... Thanks for a great solution.

[ystan-]

@dav1dsm1th i have the same requirement. can you elaborate how you added that? Was it in XAML or code behind?