How to enable/disable EdgaNavigator

How-to Discussions
1

Use-case: your app shows a modal view so you want to disable the (swipe) behaviour of the EdgeNavigator.

Setting IsEnabled="false" on the EdgeNavigator makes the app unresponsible because it wraps the whole UI (nevertheless I think it would be the most elegant solution).

I could probably wrap the EdgeNavigator into an outer node (not tried) but it would mean I have to put all the affected UI components into the same ux file which I’m trying to avoid in general.

Subclassing in uno have not worked for me as the important classes are internal/sealed.

I wonder if someone could come up with a solution?

Thx

(it’s a shame that I cannot edit the mistyped title)

2

Hi! Making your modal view a full screen panel on top of your whole app should disable (by not letting input events through) the edge navigation.

Here is an example demonstrating my suggestion:

<App Theme="Basic">
    <Panel>
        <Panel Background="#ddd7">
            <!-- put your modal stuff here -->
            <!-- also make sure you get rid of this Panel when you dont want your modal view shown -->
            <!-- for example by changing the HitTestMode to None. -->
        </Panel>
        <EdgeNavigator>
            <Panel Width="200" EdgeNavigation.Edge="Left" Background="Blue"/>
            <Panel Background="Red">
            </Panel>
        </EdgeNavigator>

    </Panel>
</App>
3

That’s the outer wrapper solution I mentioned, works as expected I’m sure. Thanks!

You know I was looking for a solution which doesn’t need the app restuctured. Restructuring wouldn’t be a problem at all if I could reference class instances from different ux files, but that’s not the case.

Anyway, you can mark this thread solved:)

4

It took me a while to find out but this simple solution works best for me:

<WhileTrue Value="{navigationEnabled}">
    <EdgeNavigation />
</WhileTrue>