ListDetails control BackButton not working

[CesGan]

Describe the bug

The back button is not behaving as expected when you're on Details only view.

Regression

No response

Reproducible in sample app?

• [ ] This bug can be reproduced in the sample app.

Steps to reproduce

1. Use the sample I've created:
[https://github.com/CesGan/ListDetails_BackButton_NotWorking]
2. Run the app.
3. On the NavigationView navigate to ListDetails
4. Resize the width app so that the ListDetails only shows the List.
5. Navigate to one of the details "name" or "name2"
6. The back button should be enabled. Click on it.
7. Exception is throwed.

There's a way for this to work.
Follow the same steps as above but before step 3 you click on the "Settings" button. This will set the frame.CanGoBack as true and thus enabling us to use the back button without throwing an exception.

Expected behavior

I expected to follow the steps mentioned above and no exception to be throwned.

Screenshots

No response

Windows Build Number

• [ ] Windows 10 1809 (Build 17763)
• [ ] Windows 10 1903 (Build 18362)
• [ ] Windows 10 1909 (Build 18363)
• [ ] Windows 10 2004 (Build 19041)
• [ ] Windows 10 20H2 (Build 19042)
• [ ] Windows 10 21H1 (Build 19043)
• [ ] Windows 11 21H2 (Build 22000)
• [ ] Other (specify)

Other Windows Build number

No response

App minimum and target SDK version

• [ ] Windows 10, version 1809 (Build 17763)
• [ ] Windows 10, version 1903 (Build 18362)
• [ ] Windows 10, version 1909 (Build 18363)
• [ ] Windows 10, version 2004 (Build 19041)
• [ ] Other (specify)

Other SDK version

No response

Visual Studio Version

2022

Visual Studio Build Number

No response

Device form factor

No response

Nuget packages

No response

Additional context

No response

Help us help you

Yes, but only if others can assist.

[msftbot[bot]]

Hello CesGan, thank you for opening an issue with us!

I have automatically added a "needs triage" label to help get things started. Our team will analyze and investigate the issue, and escalate it to the relevant team if possible. Other community members may also look into the issue and provide feedback 🙌

[michael-hawker]

This sounds really familiar, and I thought we had resolved it, but maybe I'm thinking of something else... 🤔

[niels9001]

Reproducable in UWP as well. See repro project (using a local copy of the ListDetail control): https://github.com/niels9001/ListDetailNavigationBug

[michael-hawker]

@CesGan I think this is the general workaround for now:

        private void NavigationView_BackRequested(Microsoft.UI.Xaml.Controls.NavigationView sender, Microsoft.UI.Xaml.Controls.NavigationViewBackRequestedEventArgs args)
        {
            var listDetails = sender.FindDescendant<ListDetailsView>();
            if (listDetails?.ViewState == ListDetailsViewState.Details)
            {
                listDetails.ClearSelectedItem();
            }
            else
            {
                 frame.GoBack();
            }
        }

The issue is that the back button needs to be enabled on the NavigationView, but you're telling the frame to go back in every case. We can't intercept/know that, so instead you need to check if you're in the Details mode and clear the item instead.

This isn't really something we can fix based on how these systems interact with one another and the intricacies of different setups. We should rethink the design of this control in 8.0 and separate the concerns between the base ListDetailsView (and giving it abilities to 'navigate' between states cleanly like with the ClearSelectedItem method) and have a separate helper or guidance on how to integrate navigation between all these different scenarios (system/app/frame vs. navigationview, etc...), if we have code that could be a behavior?