How to use CharmFlyoutLibrary with master page?

Question

I have a Windows 8 app, and recently I refactored it to use a 'master page'. This means that there is one 'layout' that has a few generic components such as the header and footer. In that layout, I have a Frame. Every time I want to show a different view, I load it in the frame.

This means that my startup screen is no longer of type Frame but of type Layout, which is a LayoutAwarePage. This is how I initialize it in App.xaml.cs OnLaunched:

Layout rootFrame = Window.Current.Content as Layout;

if (rootFrame == null)
{
    rootFrame = new Layout();

Here comes the problem: I have a charms flyout that contains a few items like Settings. I made a nice view (Flayouts.xaml) that contains the layout of these flyouts. The code behind for that view looks like this:

public Flyouts()
{
    InitializeComponent();

    SettingsPane.GetForCurrentView().CommandsRequested += Flyouts_CommandsRequested;
}

void Flyouts_CommandsRequested(SettingsPane sender, SettingsPaneCommandsRequestedEventArgs args)
{
    // add some commands
}

And this is how you'd get this to work in your app:

Frame rootFrame = Window.Current.Content as Frame;

if (rootFrame == null)
{
    rootFrame = new CharmFlyoutLibrary.CharmFrame { CharmContent = new Flyouts() };

What they're doing here is assigning a Frame to 'rootFrame'. However, since I switched to a master page, I no longer have a Frame but a Layout/LayoutAwarePage type, so I can't assign the CharmFrame to it. How do I overcome this problem?

Anyone?

score 1 · Accepted Answer · answered Nov 12 '13 at 19:59

When navigating inside a frame the page that you navigate to is placed inside the navigate the Content property.

So if you navigate to you Layout first, then the content will be filled with your page and you can navigate to your child page's. I've placed a example below

        Frame rootFrame = Window.Current.Content as Frame;
        // Do not repeat app initialization when the Window already has content,
        // just ensure that the window is active

        if (rootFrame == null) {
            // Create a Frame to act as the navigation context and navigate to the first page

            rootFrame = new Frame();

            //Associate the frame with a SuspensionManager key                                

            SuspensionManager.RegisterFrame(rootFrame, "AppFrame");

            if (args.PreviousExecutionState == ApplicationExecutionState.Terminated) {
                // Restore the saved session state only when appropriate
                try {
                    await SuspensionManager.RestoreAsync();
                } catch (SuspensionManagerException) {
                    //Something went wrong restoring state.
                    //Assume there is no state and continue
                }
            }

            // Place the frame in the current Window
            Window.Current.Content = rootFrame;
        }
        if (rootFrame.Content == null) {
            if (rootFrame.Navigate(typeof(Layout))) {
                var secondFrame = rootFrame.Content as Layout;
                if (!secondFrame.ContentFrame.Navigate(typeof(YourPage)) {

                throw new Exception("Failed to create initial page");
                }
            }
        }

How to use CharmFlyoutLibrary with master page?

1 Answers1