Accessing SplitView control from a different page than it's host - C# XAML Windows 10 UWP

Question

Pre-warning, I'm new to C# and XAML, but I'm really enjoying Windows 10 UWP apps. I've got a question on how to appropriately handle a SplitView.

I've got a Main Page, in which I have a SplitView control. In the SplitView Content, I've added a Frame for navigation to other pages. I want to add the Hamburger button on the child page to open the SplitView on the Main Page, but I can't access the SplitView control from the child page. How can I make the SplitView control accessible so that the hamburger button within the sub-page can open the SplitView pane?

The alternative is to add a header in the Main Page and have a static hamburger button there, but I don't like this option as it makes handling the text header content more difficult. Another is to copy the SplitView to each page. I don't want to do this either.

Any advice would be fantastic! Thank you.

Answer 1

I would highly recommend you take your alternative option of including the hamburger button in the main page. Users always expect it to be in the same location every time and changing this approach will probably result in a bad user experience.

You also don't want to be repeating code and thus you don't want to recreate the button on every page as well as any additional functionality like the open/close commands.

Rather than referencing elements from one page to another, a better practice is to keep things loosely coupled. This can be done with a messenger plugin which sends an event from one page to the other which can give it instructions on what you want to do. That way the other page only has to listen for the event instead of holding strong references. To streamline some of this process you could inherit from a base class which implements the messenger functionality.

That would provide a solution to your button and your header text situations but setting them up is out of the scope of this question. Depending on the size of you app and your goals, you might like to look into existing frameworks which helps in designing maintainable apps. A good Mvvm framework I would recommend checking out is MvvmCross which also cross platform and contains a messenger plugin .

Good luck with your app.

Answer 2

I found that solution :

In the MainPage, in your SplitView pane button method, add a SplitView reference as parameter in Navigate() :

private void SlitViewPaneButton_Tapped(object sender, TappedRoutedEventArgs e)
    {
        var frame = contentFrame;
        Page page = frame?.Content as Page;
        if (page?.GetType() != typeof(ChildPage))
        {              
            frame.Navigate(typeof(ChildPage), SplitViewName);
        }
    }

In your ChildPage.xaml.cs :

protected override void OnNavigatedTo(NavigationEventArgs e)
    {
         SplitView sv = new SplitView();
         sv = e.Parameter as NavigateControls;
    }

You can now do sv.IsPaneOpen = false, in your ChildFrame code.

Note : if you want to pass several Controls, create a Class with these Controls as variables, and use an instance as parameter.

Answer 3

As stated above, it is better to keep your hamburger button in your main page for a couple of reasons. One is the consistency mentioned above. Second, you would have to recreate the hamburger button in each of your content pages instead of just once in the MainPage.xaml. Additionally, keep in mind, there are different kinds of interactions with the SplitView menu in terms of how it pops in and out and how it is displayed, all listed below.

Inline – When the menu pane is opened, it pushes the content over. When it's closed, the content goes back to its original location

Overlay – When the menu pane is opened, it lays on top of the content. When it's closed, it is invisible.

Compact Overlay – When the menu pane is opened, it lays on top of the content. When it's closed, the pane is still visible in Compact Mode.

Compact Inline – When the menu pane is opened, it pushes the content over. When it's closed, the content goes back to its original position but the pane is still visible in Compact Mode.

You can also see a quick intro into the SplitView here. http://jamesqquick.com/windows-10-splitview-intro/