I’m using an EdgeNavigator to show a menu. All the pages are nested within the control. In some situations (showing a webview) I like to disable the edge slide detection because the side menu will not the topmost layer (which is the case f.e. when displaying a webview). I can’t find something the docs. Is this possible?
Something like you’re describing can usually be achieved by calling a Change, targeting IsEnabled property (changing it to false essentially) on a visual from within an WhileActive on a Page that you don’t want the edge to be active on.
However, again - there’s not much else we can suggest unless you share some code and explain what you have tried to do so far.
Because the whole page structure is nested in the EdgeNavigator, like in the examples, setting IsEnabled is not an option because it’s disabling the whole structure. Think of the Material sidebar examble with a hosted webview. The menu will not visible because the webview is always topmost (native view host). If the page has a top toolbar the edge there is still active. If I have time I will create a small demo.
Who said you need to disable the whole structure?
As for the last sentence… I understand you’re very busy, but hey, so are we. You will need to invest the time if you expect further assistance.
So, here is an example:
<App>
<iOS.StatusBarConfig Style="Light" />
<Router ux:Name="router" />
<JavaScript>
var Observable = require("FuseJS/Observable");
showMenu = Observable(true);
module.exports = {
gotoFirst: function() { router.goBack(); showMenu.value = true; },
gotoSecond: function() { router.push("secondPage"); showMenu.value = false; },
showMenu: showMenu
};
</JavaScript>
<EdgeNavigator>
<Panel ux:Name="sidebar" Edge="Left" Width="100%" Margin="0,0,56,0" Background="#37474F">
<Shadow ux:Name="shadow" Angle="180" Distance="8" Size="16" Color="#0000" />
<ActivatingAnimation>
<Change shadow.Color="#0004" />
<Change sidebarFade.Opacity="1" />
</ActivatingAnimation>
</Panel>
<Panel Height="56" Background="#2196F3" Alignment="Top">
<WhileTrue Value="{showMenu}">
<Hamburger Alignment="Left">
<Clicked>
<NavigateToggle Target="sidebar" />
</Clicked>
</Hamburger>
</WhileTrue>
</Panel>
<Rectangle ux:Name="sidebarFade" Layer="Overlay" Color="#0005" Opacity="0" HitTestMode="None" />
<Page ux:InnerClass="aPage">
<Clicked>
<NavigateToggle Target="sidebar" />
</Clicked>
</Page>
<DockPanel Margin="0,80,0,0">
<Navigator DefaultPath="firstPage">
<Page ux:Template="firstPage">
<StackPanel Alignment="Center">
<Text Alignment="Center">This is the first page.</Text>
<Button Text="Second page" Padding="20" Clicked="{gotoSecond}" />
</StackPanel>
</Page>
<Page ux:Template="secondPage">
<StackPanel Alignment="Center">
<Text Alignment="Center">This is the second page.</Text>
<Button Text="go back" Padding="20" Clicked="{gotoFirst}" />
</StackPanel>
</Page>
</Navigator>
</DockPanel>
</EdgeNavigator>
</App>
On the second page the edge of the Edge Navigator should be inactive.
Is that possible?
Thanks for the complete repro. Much easier to work with!
My first thought looking at this is: “Why do you want to keep the edge navigator on a page where you don’t need one?”
There might be a good reason for that, so you’re welcome to explain what that reason is. If there isn’t one, here I modified your code so that the edge navigator only exists on the pages that need it:
<App>
<iOS.StatusBarConfig Style="Light" />
<Router ux:Name="router" />
<JavaScript>
module.exports = {
gotoFirst: function() { router.goBack(); },
gotoSecond: function() { router.push("secondPage"); },
gotoThird: function() { router.push("pagesWithEdge", {}, "pageThree", {}); }
};
</JavaScript>
<Navigator DefaultPath="pagesWithEdge">
<EdgeNavigator ux:Template="pagesWithEdge">
<Panel ux:Name="sidebar" Edge="Left" Width="100%" Margin="0,0,56,0" Background="#37474F">
<Shadow ux:Name="shadow" Angle="180" Distance="8" Size="16" Color="#0000" />
<ActivatingAnimation>
<Change shadow.Color="#0004" />
<Change sidebarFade.Opacity="1" />
</ActivatingAnimation>
</Panel>
<DockPanel>
<Rectangle ux:Name="sidebarFade" Layer="Overlay" Color="#0005" Opacity="0" HitTestMode="None" />
<Panel Height="56" Background="#2196F3" Dock="Top">
<Panel Width="56" Alignment="Left" Color="#fffa">
<Clicked>
<NavigateToggle Target="sidebar" />
</Clicked>
</Panel>
</Panel>
<Navigator DefaultPath="pageOne">
<Panel ux:Template="pageOne">
<StackPanel Alignment="Center">
<Text Alignment="Center">This is a page WITH edge.</Text>
<Button Text="Open another page WITH edge" Padding="20" Clicked="{gotoThird}" />
<Button Text="Open page WITHOUT edge" Padding="20" Clicked="{gotoSecond}" />
</StackPanel>
</Panel>
<Panel ux:Template="pageThree">
<StackPanel Alignment="Center">
<Text Alignment="Center">This is another page WITH edge.</Text>
<Button Text="go back" Padding="20" Clicked="{gotoFirst}" />
</StackPanel>
</Panel>
</Navigator>
</DockPanel>
</EdgeNavigator>
<Page ux:Template="secondPage">
<StackPanel Alignment="Center">
<Text Alignment="Center">This is a page WITHOUT edge.</Text>
<Button Text="go back" Padding="20" Clicked="{gotoFirst}" />
</StackPanel>
</Page>
</Navigator>
</App>
Good point. The challange came up with the web view.
Here the long story:
From ui pesperktive the hamburger menu should be reachable form every view. But the web view is always topmost. The use case is selecting a pdf and display it with the web view. The navigation framework (title bar, back buttons, etc.) should stay 'cause it’s not a page thing. So the user known interface is the go back mimic: the hamburger is replaced with the < sign. In this case the edge has to be disabled.
You can still achieve all that with the code that I posted. All you need to do is either add a component-local top bar on that page without edge (I deliberately left it completely empty), or change the whole structure so that there’s a global top bar.
Hi…How can I put menu/button on the edge, click the button, edge close automatically then goto page without edge…helpppppp
@arimpranata: please make a new forum post and share the code you have written so far. It’s impossible to help without a complete, minimal reproduction, and you shouldn’t hijack other threads.
@Uldis
No im not hijack the thread
Im asking on your code!
See above, your code…i try it and i know this is what i want…but, then i realize on the edge menu there is no menu/button at all…how can i add button that when i click it…the edge close then goto new page without edge…
I guess no need new thread for replay your answer…
Thanks
@arimpranata: your question is in no way related to the question asked originally on this thread. It does not matter if it’s about the code posted here.
See this example for adding a button. See Tutorial for navigation.
If you have more questions, ask them in a new forum post.