How can I make menu in sidebar to become clickable and close the sidebar and change to page 2. after I create page in MyApp.ux
Thank you
Hey! I put together a small example of how you could do it.
<App Theme="Basic">
<Panel>
<Style>
<Page ux:Name="selfpage">
<EnteringAnimation>
<Move X="-1" RelativeTo="ParentSize"/>
</EnteringAnimation>
<ExitingAnimation>
<Move X="1" RelativeTo="ParentSize" Duration="0.5"/>
</ExitingAnimation>
<ActivatingAnimation>
<Set edgeNav.Active="mainPanel"/>
</ActivatingAnimation>
</Page>
</Style>
<EdgeNavigator ux:Name="edgeNav">
<StackPanel Width="100" Background="Red" EdgeNavigation.Edge="Left">
<Button Text="Page1">
<Clicked>
<NavigateTo NavigationContext="nav" Target="page1" />
</Clicked>
</Button>
<Button Text="Page2">
<Clicked>
<NavigateTo NavigationContext="nav" Target="page2" />
</Clicked>
</Button>
</StackPanel>
<Panel ux:Name="mainPanel">
<LinearNavigation ux:Name="nav"/>
<Page ux:Name="page1" Background="Yellow"/>
<Page ux:Name="page2" Background="Blue"/>
</Panel>
</EdgeNavigator>
</Panel>
</App>
Hope that helps 
Thank you, but how can I code it in Sidebar.ux so when I click the icon in the sidebar, the EdgeNavigator close and mainPanel change the page. below is my code for Sidebar for the menu.
<StackPanel>
<StackPanel ux:Name="abc">
<Clicked>
<DebugAction Message="ABC Clicked" />
</Clicked>
<SidebarIcon File="assets/icon/Browser.png" />
<MenuLabel>ABC</MenuLabel>
</StackPanel>
<StackPanel ux:Name="def">
<Clicked>
<DebugAction Message="DEF Clicked" />
</Clicked>
<SidebarIcon File="assets/icon/Chat.png" />
<MenuLabel>DEF</MenuLabel>
</StackPanel>
<StackPanel ux:Name="ghi">
<Clicked>
<DebugAction Message="GHI Clicked" />
</Clicked>
<SidebarIcon File="assets/icon/Chat.png" />
<MenuLabel>GHI</MenuLabel>
</StackPanel>
<StackPanel ux:Name="jkl">
<Clicked>
<DebugAction Message="JKL Clicked" />
</Clicked>
<SidebarIcon File="assets/icon/Feed.png" />
<MenuLabel>JKL</MenuLabel>
</StackPanel>
</StackPanel>
Hi,
I’m having the same problem. I’ve used the Social Media example to understand the EdgeNavigation behaviour. So, as in the example, the side navigation menu is in the SideMenu.ux. When I click the menu items on the side menu I’m setting the current page name to an observable variable which is bound to my DirectionNavigation’s Active property (this code is in HomePage.ux file). The navigation works correctly I see that the pages change. But I couldn’t find a way to hide the side menu.
Were you able to solve this problem?
Thanks in advance,
Ipek
Hi!
Since EdgeNavigation is a type of Navigation, you can use NavigateTo on it to do this:
<App Theme="Basic">
<EdgeNavigator HitTestMode="LocalBoundsAndChildren">
<Panel Width="150" EdgeNavigation.Edge="Left" Background="#f63">
<Button Alignment="Center" Text="Hide">
<Clicked>
<NavigateTo Target="mainPanel" />
</Clicked>
</Button>
</Panel>
<Panel ux:Name="mainPanel">
<Text Alignment="Center">
This is an example of EdgeNavigator!
</Text>
</Panel>
</EdgeNavigator>
</App>
Hey @Kristan could you explain the EdgeNavigation.Edge I know there’s also an Edge property but what’s the difference?
Or why is it Something.SomethingElse this is the only property that I’ve seen like so, are there anymore like so?
Hi!
This is called an attached property. There are several of these and they are have the form <ClassName>.<Property>. In the unambiguous cases (which are most cases), you can ommit the <ClassName> part and just use the property name directly. In the case above, you could have said Edge and it would mean the exact same thing.
Examples of other attached properties are DockPanel.Dock="Top/Bottom/Left/Right/Fill", which we usually use by just saying Dock. Same with Grid.Row and Grid.Column, where we normally just say Row and Column.
The only reason i did EdgeNavigation.Edge instead of Edge is because of an old habit.
I hope that made things more clear
Interesting thanks
Hi, can someone post an full working example?
I can’t get it work.
Thanks, Marco
Hi Marco, That’s exactly what Kristian has done in some of his above posts. If you have any specific issues with the code you’re writing then let’s try to work out those instead. Can you describe what problems you’re running into?
I have the same problem as alfan2305.
How can i get it work with the Sidebar.UX in the social media example?
Sorry, but how can I post code?
And the example from Kristian didn’t work with fuse 0.20
We use markdown in the forum. To paste code, indent all you lines with one tab and it should show up as code
<App>
<EdgeNavigator ux:Name="edgeNav" HitTestMode="LocalBoundsAndChildren">
<ActivatingAnimation>
<Set edgeNav.Active="mainPanel"/>
</ActivatingAnimation>
<StackPanel Width="180" ux:Name="menu" EdgeNavigation.Edge="Left" Background="#212831" >
<Button Text="Page1">
<Clicked>
<NavigateTo NavigationContext="nav" Target="page1" />
</Clicked>
</Button>
<Button Text="Page2">
<Clicked>
<NavigateTo NavigationContext="nav" Target="page2" />
</Clicked>
</Button>
<Button Text="Page3">
<Clicked>
<NavigateTo NavigationContext="nav" Target="page3" />
</Clicked>
</Button>
<Button Text="Page4">
<Clicked>
<NavigateTo NavigationContext="nav" Target="page4" />
</Clicked>
</Button>
<Button Text="Page5">
<Clicked>
<NavigateTo NavigationContext="nav" Target="page5" />
</Clicked>
</Button>
<Button Text="Page6">
<Clicked>
<NavigateTo NavigationContext="nav" Target="page6" />
</Clicked>
</Button>
<ActivatingAnimation>
<Change mainAppTranslation.X="180" />
<!-- Change to cross out -->
<Change topMenuTranslation.Y="0" />
<Change bottomMenuTranslation.Y="0" />
<Change middleRectangle.Opacity="0" Easing="CircularOut" />
<Change topMenuRotation.Degrees="45" Easing="ExponentialIn" />
<Change bottomMenuRotation.Degrees="-45" Easing="ExponentialIn" />
<Change topRectangle.Width="28" />
<Change bottomRectangle.Width="28" />
</ActivatingAnimation>
</StackPanel>
<DockPanel Background="#666">
<!-- Use this to move the main app area with the side menu -->
<Translation ux:Name="mainAppTranslation" />
<StackPanel Dock="Top"> <!-- Navbar Top -->
<!-- This is the top ledge -->
<Grid ColumnData="auto,1*,auto" Background="White">
<!-- Hamburger Button -->
<Panel Margin="7,8,5,8" Height="32" Width="32" HitTestMode="LocalBounds">
<Clicked>
<Set edgeNav.Active="menu" />
</Clicked>
<Rectangle ux:Name="topRectangle" Height="2" Width="26" Fill="#000">
<Translation Y="-9" ux:Name="topMenuTranslation" />
<Rotation ux:Name="topMenuRotation" />
</Rectangle>
<Rectangle ux:Name="middleRectangle" Height="2" Width="26" Fill="#000" />
<Rectangle ux:Name="bottomRectangle" Height="2" Width="26" Fill="#000">
<Translation Y="9" ux:Name="bottomMenuTranslation" />
<Rotation ux:Name="bottomMenuRotation" />
</Rectangle>
</Panel>
<!-- Page Title -->
<Panel Navigation="nav">
<Text FontSize="22" Alignment="VerticalCenter" TextAlignment="Center" Value="{Page title}" Padding="2" >
</Text>
</Panel>
<!-- Search Icon -->
<Panel Margin="5,8,7,8" Height="32" Width="32" HitTestMode="LocalBounds">
<Clicked>
<DebugAction Message="Search clicked" />
</Clicked>
<Circle Height="19" Width="19">
<Stroke Width="2" Brush="#000" />
</Circle>
<Rectangle Width="9" Height="2" Fill="#000">
<Translation X="10" Y="10" />
<Rotation Degrees="45" />
</Rectangle>
</Panel>
</Grid>
</StackPanel>
<Panel ux:Name="mainPanel">
<LinearNavigation ux:Name="nav" />
<Page Name="page1" ux:Name="page1" Background="Purple">
<string ux:Key="title" ux:Value="Page 1"/>
</Page>
<Page Name="page2" ux:Name="page2" Background="Black">
<string ux:Key="title" ux:Value="Page 2"/>
</Page>
<Page Name="page3" ux:Name="page3" Background="Yellow">
<string ux:Key="title" ux:Value="Page 3"/>
</Page>
<Page Name="page4" ux:Name="page4" Background="Red">
<string ux:Key="title" ux:Value="Page 4"/>
</Page>
<Page Name="page5" ux:Name="page5" Background="Blue">
<string ux:Key="title" ux:Value="Page 5"/>
</Page>
<Page Name="page6" ux:Name="page6" Background="Green">
<string ux:Key="title" ux:Value="Page 6"/>
</Page>
</Panel>
</DockPanel>
</EdgeNavigator>
</App>
This is my MainView.ux. I have all code in one file.
The page title changes, but not the page itself.
I need a direct navigation, if it’s possible.
Can someone help me? Thanks!
@marco Not sure if you got it or not. I had same problem, but I solve it through JS. Let me know if you need.