Microsoft-ui-xaml: Navigation fails/ refuses to work if removed and re-added from SpliView.Pane

[MuziburRahman]

Describe the bug
When a WinUI NavigationView is inside a Splitview.Pane, removing and re-adding it in runtime stops it's navigation behavior.

Steps to reproduce the bug

Simplest steps to reproduce the behavior:

1. Create a blank UWP/C# app
2. Add WinUI nuget package (Microsoft.UI.Xaml)
3. Edit App.Xaml to add WinUI:

<Application
    x:Class="Test2.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Test2">

    <Application.Resources>
        <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls"/>
    </Application.Resources>

</Application>

1. Add a SplitView in MainPage.xaml. Add WinUI NavigationView inside the pane of the SpliView. Add a button in the Splitview.Content which will add/remove the NavigationView from SpliView.Pane.

MainPage.xaml:

<Page
    x:Class="Test2.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Test2"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:WinUI="using:Microsoft.UI.Xaml.Controls"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Grid>
        <SplitView x:Name="Split" DisplayMode="Inline" IsPaneOpen="True">
            <SplitView.Pane>
                <WinUI:NavigationView x:Name="NavView" IsSettingsVisible="False" IsBackButtonVisible="Collapsed" PaneDisplayMode="Top">
                    <WinUI:NavigationView.MenuItems>
                        <WinUI:NavigationViewItem Content="item 1"/>
                        <WinUI:NavigationViewItem Content="item 2"/>
                    </WinUI:NavigationView.MenuItems>
                </WinUI:NavigationView>
            </SplitView.Pane>

            <Button Content="Add/Remove NavigationView" Click="Button_Click"/>

        </SplitView>
    </Grid>
</Page>

MainPage.xaml.cs:

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace Test2
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            if (Split.Pane is null)
                Split.Pane = NavView;
            else Split.Pane = null;
        }
    }
}

1. Build and Run the app. Tap on the navigation items (Item1 and Item2) to ensure that everything works fine.
2. Remove and Re-add the NavigationView by pressing the Add/Remove NavigationView Button twice.
3. Now try the navigation items again. It doesn't work !

Expected behavior
Normal navigation behavior.

Version Info

NuGet package version:
Microsoft.UI.Xaml 2.0.181018003

Windows 10 version:

• [x] October 2018 Update (17763)

Device form factor:

• [x] Desktop

[licanhua]

Muzib,

Thank you for reporting this, and I can reproduce your problem. Will let you if we have update.

You may workaround the problem by collapsing navigationview other than removing/re-adding.

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        //if (Split.Pane is null)
        //    Split.Pane = NavView;
        //else Split.Pane = null;
        if (NavView.Visibility == Visibility.Collapsed)
        {
            NavView.Visibility = Visibility.Visible;
        }
        else
        {
            NavView.Visibility = Visibility.Collapsed;
        }
    }

Sent from Mailhttps://go.microsoft.com/fwlink/?LinkId=550986 for Windows 10

---

From: Muzib [e-mail]
Sent: Tuesday, November 13, 2018 9:59:27 PM
To: Microsoft/microsoft-ui-xaml
Cc: Subscribed
Subject: [Microsoft/microsoft-ui-xaml] Navigation fails/ refuses to work if removed and re-added from SpliView.Pane (#18)

Describe the bug
When a WinUI NavigationView is inside a Splitview.Pane, removing and re-adding it in runtime stops it's navigation behavior.

Steps to reproduce the bug

Simplest steps to reproduce the behavior:

1. Create a blank UWP/C# app
2. Add WinUI nuget package (Microsoft.UI.Xaml)
3. Edit App.Xaml to add WinUI:

x:Class="Test2.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Test2">

<Application.Resources>
    <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls"/>
</Application.Resources>

1. Add a SplitView in MainPage.xaml. Add WinUI NavigationView inside the pane of the SpliView. Add a button in the Splitview.Content which will add/remove the NavigationView from SpliView.Pane.

MainPage.xaml:

x:Class="Test2.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Test2"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:WinUI="using:Microsoft.UI.Xaml.Controls"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

<Grid>
    <SplitView x:Name="Split" DisplayMode="Inline" IsPaneOpen="True">
        <SplitView.Pane>
            <WinUI:NavigationView x:Name="NavView" IsSettingsVisible="False" IsBackButtonVisible="Collapsed" PaneDisplayMode="Top">
                <WinUI:NavigationView.MenuItems>
                    <WinUI:NavigationViewItem Content="item 1"/>
                    <WinUI:NavigationViewItem Content="item 2"/>
                </WinUI:NavigationView.MenuItems>
            </WinUI:NavigationView>
        </SplitView.Pane>

        <Button Content="Add/Remove NavigationView" Click="Button_Click"/>

    </SplitView>
</Grid>

MainPage.xaml.cs:

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace Test2
{
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
}

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        if (Split.Pane is null)
            Split.Pane = NavView;
        else Split.Pane = null;
    }
}

}

1. Build and Run the app. Tap on the navigation items (Item1 and Item2) to ensure that everything works fine.
2. Remove and Re-add the NavigationView by pressing the Add/Remove NavigationView Button twice.
3. Now try the navigation items again. It doesn't work !

Expected behavior
Normal navigation behavior.

Version Info

NuGet package version:
Microsoft.UI.Xaml 2.0.181018003

Windows 10 version:

• October 2018 Update (17763)

Device form factor:

• Desktop

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHubhttps://github.com/Microsoft/microsoft-ui-xaml/issues/18, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AF_9BOKHaUKe2AqDX2T-sA5pDdtzip83ks5uu7E_gaJpZM4YdE5y.

[YuliKl]

@MuziburRahman, can you explain your scenario? Putting NavigationView into a SplitView isn't expected usage of this control. Can you help me understand what behavior you're trying to achieve by adding/removing NavigationView?

[MuziburRahman]

@YuliKl I don't know how you decide which uses are appropriate and which are not, but look at the portion inside red rectangle, which is using Pivot control now (as NavigationView had it's problem), but my 1st try was NavigationView here, the animated focus follower of NaviagtionView looked kinda cool. Also, the header area of the Pivot control takes so much space. But I am out of option now.

[jevansaks]

That seems like a reasonable usage, but not one we've encountered before. Is @licanhua's workaround suggestion an option for you, @MuziburRahman ?

[MuziburRahman]

It might be a workaround, but I have not tried it yet, I am using Pivot now.

[MuziburRahman]

Hi @jevansaks , I have tested @licanhua 's workaround. No, it doesn't work.
Even if I don't remove the NavigationView, just close the pane and open it, the NavigationView doesn't work.

[YuliKl]

Hi @MuziburRahman , thank you for the explanation and screenshot! If Pivot is accomplishing what you need it to, that's great and please continue using Pivot. If things still aren't working to your liking, you can also look into using the Windows Community Toolkit's TabView control.

[licanhua]

@MuziburRahman , could you please share a small project with the workaround if you still stick with navview? I verified the 'Collapse NavView then make it visible' workaround before and it should work.

[MuziburRahman]

@licanhua sorry, I couldn't reproduce it in a new project. Your workaround works fine in the new project, but however, it doesn't in my original project. I'll try though.

[msft-github-bot]

:tada:This issue was addressed in #249, which has now been successfully released as Microsoft.UI.Xaml v2.1.190131001-prerelease.:tada:

Handy links:

• Release Notes
• Official Nuget Release

[msft-github-bot]

:tada:This issue was addressed in #249, which has now been successfully released as Microsoft.UI.Xaml v2.1.190219001-prerelease.:tada:

Handy links:

• Release Notes
• Official Nuget Release