Windows Universal Implementing Custom SplitView Issues

Question

I'm trying to implement a SplitView Menue with the Hamburger Button on the bottom. In the Designer powered by VisualStudio it is looking like this:

The xaml code is that:

As you can see I'm Binding the ListView Items to an ObservableCollection of type MenueButtons.

Now I'm trying to nest the Frame in the SplitView Content in App.xaml.cs like this:

 protected override void OnLaunched(LaunchActivatedEventArgs e)
        {

            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)
            {
                var shell = Window.Current.Content as Shell;
                rootFrame = null;
                if (shell == null)
                {
                    shell = new Shell();
                    if (rootFrame == null)
                    {
                        rootFrame = new Frame();
                        rootFrame.Language = Windows.Globalization.ApplicationLanguages.Languages[0];

                        rootFrame.NavigationFailed += OnNavigationFailed;

                        if (e.PreviousExecutionState == ApplicationExecutionState.Terminated)
                        {
                        }
                    }

                    shell.DataContext = rootFrame;

                    Window.Current.Content = shell;
                }
            }

            if (rootFrame.Content == null)
            {
                // When the navigation stack isn't restored navigate to the first page,
                // configuring the new page by passing required information as a navigation
                // parameter
                rootFrame.Navigate(typeof(MainPage), e.Arguments);
            }
            // Ensure the current window is active
            Window.Current.Activate();
        }

The code behind Shell.xaml.cs is empty because I'm using the MVVM pattern. But here is the code from the ShellViewModel:

   public class ShellViewModel:INotifyPropertyChanged
{
    #region INotifyPropertyChanged Members
    private ObservableCollection  _menueButtons;

    public ObservableCollection MenueButtons
    {
        get { return _menueButtons; }
        set { _menueButtons = value; OnPropertyChanged("MenueButtons"); }
    }
    #endregion INotifyPropertyChanged Members

    public event PropertyChangedEventHandler PropertyChanged;
    private void OnPropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
    public ShellViewModel()
    {
        MenueButtons = new ObservableCollection();
        MenueButtons.Add(new Models.SplitView.MenueButton { Description = "Statistic", SymbolIndex = "\uEA40" });
        MenueButtons.Add(new Models.SplitView.MenueButton { Description = "Settings", SymbolIndex = "\uE713" });
        MenueButtons.Add(new Models.SplitView.MenueButton { Description = "Home", SymbolIndex = " \uE80F", Highlighted = true });

    }
}

Now to the Issues I'm having:

The mainpage should be displayed after the App has been launched but it doesn't work
I'm getting a binding error which doesn't occurr in the Designer

The binding error:

Error: BindingExpression path error: 'MenueButtons' property not found on 'Windows.UI.Xaml.Controls.Frame'. BindingExpression: Path='MenueButtons' DataItem='Windows.UI.Xaml.Controls.Frame'; target element is 'Windows.UI.Xaml.Controls.ListView' (Name='null'); target property is 'ItemsSource' (type 'Object')

And I think because the SplitView is so small the nested frame won't use the whole screen width and height.

Further Information: The ShellViewModel.cs is containing the ObservableCollection. After launching the App I can only see the green hamburger menue button.

How can I fix this errors?

Jerin · Accepted Answer

There were two problems in your code.
1) Binding of Splitview Content
2) Defined Splitview Width

Now for first major problem you are using ShellViewModel as the dataContext for binding but inside your App.xaml you are initializing datacontext to null frame of rootFrame. The workaround fix would be keeping binding to ShellViewmodel and passing frames.

 protected override void OnLaunched(LaunchActivatedEventArgs e)
        {
            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
            var shell = Window.Current.Content as Shell;
            if (rootFrame == null)
            {
                rootFrame = null;
                if (shell == null)
                {

                    if (rootFrame == null)
                    {
                        rootFrame = new Frame();
                        rootFrame.Language = Windows.Globalization.ApplicationLanguages.Languages[0];

                        rootFrame.NavigationFailed += OnNavigationFailed;

                        if (e.PreviousExecutionState == ApplicationExecutionState.Terminated)
                        {
                        }
                    }

                    //shell.NewFrame = rootFrame;
                    shell = new Shell(rootFrame);
                    Window.Current.Content = shell;
                }
            }

            if (rootFrame.Content == null)
            {
                // When the navigation stack isn't restored navigate to the first page,
                // configuring the new page by passing required information as a navigation
                // parameter
                rootFrame.Navigate(typeof(MainPage), e.Arguments);
            }
            // Ensure the current window is active
            Window.Current.Activate();
        }

And shell code behind would become

public Shell(Frame frame)
        {
            this.InitializeComponent();
            SplitViewNew.Content = frame;   //this is SplitviewName      
        }

Now Width="200" defines complete Splitview width frame and overlay. I am guessing you intended to use OpenPaneLength="200"
Shell view

I am uploading Workable Sample so that its easier to see it in working condition. You can now easily make changes if you want to remove code behind completely.

Windows Universal Implementing Custom SplitView Issues

Answers (1)

Related Questions