EdgeNavigator. Close panel with back button but avoid history navigator going back

How-to Discussions
1

I’m really trying without any success to modify the EdgeNavigator example so that the user may close the edge panel by clicking the back button, but avoiding that Navigator goes back too.

Now infact I can close the panel using

<OnBackButton>
    <NavigateToggle Target="sidebar" />
</OnBackButton>

but this solution interferes with Navigator as even the page - on top of which the panel has opened - goes back too.

<Navigator DefaultPath="splash">
    <SplashPage ux:Template="splash" router="router" />
    <HomePage ux:Template="home" router="router" />
    <MusicPage ux:Template="music" router="router" /> 
</Navigator>

I would like that the back button acts only on one visual element at time: first on the edge panel, then (if pressed again) on the page. Now a single click closes the edge panel AND makes the page go back.

2

Hi Enrico,

I have a workaround in mind that might solve it for you. You could introduce a global Observable boolean that tracks the state of that sidebar - call it sidebarVisible and set it to true when the sidebar is up.

Then you can wrap your OnBackButton triggers inside of WhileTrue/WhileFalse, making them fire on the sidebar and in the page separately.

Sidebar:

<WhileTrue Value="{sidebarVisible}">
    <OnBackButton>
        <NavigateToggle Target="sidebar" />
    </OnBackButton>
</WhileTrue>

Page:

<WhileFalse Value="{sidebarVisible}">
    <OnBackButton>
        <Callback Handler="{handleGoBack}" />
    </OnBackButton>
</WhileFalse>

Hope this helps!

3

Thank you Uldis (as always!). I will work on your suggestion.