Fusetools Example - Overlay Menu - How to enable navigation in background?

How-to Discussions
1

Hello,

in your example “Overlay Menu” a new Panel gets triggered after the plus button is clicked. While this “new” black panel is open I am still able to navigate all elements behind this panel and can not interact with the elements displayed in the “new” black triggered panel.
How can I disable the background navigation?
And interact with all element within the “new” panel only?
How is it possible to set a trigger which gets activated, by tapping into the background of the “new” black panel, which then animates the new “black” panel backwards? -> Same animation as clicking onto the bottom x Button…

I just inserted two fuse Switches (One native) into the first previewed page + a Scroll View.
The native Button even gets displayed fully, after the “new” black panel lies above it? How is this possible?

Her is the link of the two buttons, which I inserted into the first previewed page (MainView.ux).
The rest of the code is identical to your example.

https://www.fusetools.com/docs/fuse/controls/switch

May thanks in advance.

Best regards,

Julien

2

I just inserted two fuse Switches (One native) into the first previewed page + a Scroll View. The native Button even gets displayed fully, after the “new” black panel lies above it? How is this possible?

Fuse supports two different UI modes: native and graphics. By default your <App> is in graphics mode. <NativeViewHost> switches to native mode for a subtree, and <GraphicsView> switches back to graphics.

Each <NativeViewHost> creates an always-on-top layer on top of the underlaying GraphicsView. OpenGL and native controls cannot share layers, unfortunately. There are a few strategies to solve this:

  • Go “all native” by putting <NativeViewHost> directly in your <App> containing everything. This creates a completely native app. This can make advanced animations slower and won’t support all features.

  • Use RenderToTexture="true" on the NativeViewHost. This however disables interaction with the control, so you would need to <Change that property at the right times to enable interaction with it when active.

3

Hello,

Many thanks for your reply.

The real issue is that, the navigation of the beneath lying elements (MainView.ux) is still possible even if the “new” black panel lies above it?
As questioned above:

How can I disable the background navigation?
And only interact with all element within the “new” panel only?

Many thanks.

Best regards,

Julien

4

Hi!
I’m assuming that the navigation you’re talking about is something you’ve added to the example yourself? As far as I know the example you’re referring to doesn’t have any other interactions at all, except for the button that opens and closes the the menu.

Anyway, to temporarily “disable” interaction with the controls in the background you can simply make sure that they are covered by a panel which consumes any user input. Here’s a simple example:

<App>
	<ClientPanel>
		<WhileTrue ux:Name="showMenu" Value="false">
			<Change otherPanel.Visibility="Visible"/>
		</WhileTrue>

		<!-- This panel covers the background -->
		<Panel ux:Name="otherPanel" Color="#0008" Visibility="Hidden">
			<StackPanel Color="#00f" Alignment="Center" Padding="20">
				<Text FontSize="30" TextColor="#fff">I am a submenu</Text>
				<Text FontSize="30" TextColor="#fff">Click to go back</Text>
				<Clicked>
					<Toggle Target="showMenu"/>
				</Clicked>
			</StackPanel>
		</Panel>

		<Panel>
			<Rectangle Width="50%" Height="50%" Color="#f00">
				<Clicked>
					<Scale Factor="2" Duration="0.1"/>
				</Clicked>
			</Rectangle>
			<Circle Alignment="Bottom" Height="10%" Width="10%" Color="#0f0">
				<Clicked>
					<Toggle Target="showMenu"/>
				</Clicked>
			</Circle>
		</Panel>
	</ClientPanel>
</App>

When you click the green circle it brings in our submenu. The outermost panel of the submenu, the one we’ve called otherPanel, completely covers the stuff in the background so that you can no longer interact with the red rectangle or the green circle.
When you click inside the blue rectangle of the submenu it is dismissed and everything is back to the initial state.

5

OMG what an awesome answer. Thank you very much Remi Pedersen !!!

This informations would be VERY useful for noobs like me. (perhaps it would be worth attaching it to the “fuse overlay-menu-example”)

Gratefully

Blade

6

If you want disable interaction only specific elements you can use HitTestMode for that:

   <ClientPanel>
        <WhileTrue ux:Name="showModal">
            <Change modal.Visibility="Visible"/>
            <Change underlayer.HitTestMode="None"/>
        </WhileTrue>

        <!-- This panel covers the background -->
        <StackPanel ux:Name="modal" Color="#00f" Alignment="Center" Padding="20" Visibility="Hidden">
            <Text FontSize="30" TextColor="#fff">I am a submenu</Text>
            <Text FontSize="30" TextColor="#fff">Click to go back</Text>
            <Clicked>
                <Toggle Target="showModal"/>
            </Clicked>
        </StackPanel>

        <Panel>
            <!-- disable only this element when modal is showing -->
            <Rectangle ux:Name="underlayer" Width="50%" Height="50%" Color="#f00">
                <Clicked>
                    <Scale Factor="2" Duration="0.1"/>
                </Clicked>
            </Rectangle>
            <Circle Alignment="Bottom" Height="10%" Width="10%" Color="#0f0">
                <Clicked>
                    <Toggle Target="showModal"/>
                </Clicked>
            </Circle>
        </Panel>
   </ClientPanel>
7

Max Graey wrote:

If you want disable interaction only specific elements you can use HitTestMode for that:
…

Thank you soo much!!! That was the last piece of the puzzle :slight_smile:

Gratefully

Blade