Question

Within a XAML user control, the Frame object is null:

this.Frame.Navigate(typeof(FaxPropertiesPage));

How do I navigate between pages with a Windows 8 XAML User Control? I have placed the control within a Callisto Flyout on a XAML page.

The search button below must navigate the user to another XAML page.

Answer 1

There’s the nice way and the not-so-nice way:

Both of them start with a navigation service:

public interface INavigationService
{
    bool CanGoBack { get; }
    void GoBack();
    void GoForward();
    bool Navigate<T>(object parameter = null);
    bool Navigate(Type source, object parameter = null);
    void ClearHistory();
    event EventHandler<NavigatingCancelEventArgs> Navigating;
}

public class NavigationService : INavigationService
{
    private readonly Frame _frame;

    public NavigationService(Frame frame)
    {
        _frame = frame;
        frame.Navigating += FrameNavigating;
    }

    #region INavigationService Members

    public void GoBack()
    {
        _frame.GoBack();
    }

    public void GoForward()
    {
        _frame.GoForward();
    }

    public bool Navigate<T>(object parameter = null)
    {
        Type type = typeof (T);

        return Navigate(type, parameter);
    }

So, where do I get the Frame? In App.xaml.cs

protected async override void OnLaunched(LaunchActivatedEventArgs args)
{
    // Do not repeat app initialization when already running, just ensure that
    // the window is active
    if (args.PreviousExecutionState == ApplicationExecutionState.Running)
    {
        Window.Current.Activate();
        return;
    }

    // Create a Frame to act as the navigation context and navigate to the first page
    var rootFrame = new Frame();
    if (DesignMode.DesignModeEnabled)
        SimpleIoc.Default.Register<INavigationService, DesignTimeNavigationService>();
    else
        SimpleIoc.Default.Register<INavigationService>(() => new NavigationService(rootFrame));

I’m using MVVM Light here. This makes life easy because all my viewmodels get created using dependency injection and have their services injected into them.

If you’re not using something like MVVM Light and rely on code-behind then you can still make this work: Just make the navigation service static

  public class NavigationService : INavigationService
    {
        public static INavigationService Current{
get;set;}

blah blah blah
}

And change App.xaml.cs to:

    protected async override void OnLaunched(LaunchActivatedEventArgs args)
    {
        // Do not repeat app initialization when already running, just ensure that
        // the window is active
        if (args.PreviousExecutionState == ApplicationExecutionState.Running)
        {
            Window.Current.Activate();
            return;
        }

        // Create a Frame to act as the navigation context and navigate to the first page
        var rootFrame = new Frame();
        NavigationService.Current= new NavigationService(rootFrame));
}

And you can then access your main Frame anywhere in the app by saying:

NavigationService.Current.Navigate<MyView>();