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

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:

• October 2018 Update (17763)

Device form factor:

• Desktop

[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]

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:

<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:

• 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.