Hi guys,
Right now I’m trying to do some navigation between options of a side bar menu.
I used the Social Media Example as an example, along with the Navigation example.
To make it clearer I record a short video to try to explain my issue: Video
This had the problem that in the second time I choose an option in the menu, it doesn’t hide, I solved by using a UserEvent to close the menu when entering the page.
My goal is that the transition between pages when choosing from the menu becomes smoother. Something like, clicking the option, change the page and slide it along the menu while it’s closing.
I have no idea how to approach this, can someone give me some hints?
My pages all have this code:
<EdgeNavigator ux:Name="EdgeNavigator">
<TW Width="180" ux:Name="menuWidgets" EdgeNavigation.Edge="Left" OptionActive="Widgets" router="router">
<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>
</TW>
<DockPanel ux:Name="noMenu">
<Translation ux:Name="mainAppTranslation" />
<!-- Page Header -->
<Panel Color="HeaderBackground" Height="60" Dock="Top">
<Panel Height="32" Width="32" HitTestMode="LocalBounds" Alignment="Left" Margin="10,0,0,0">
<Clicked>
<Set EdgeNavigator.Active="menuWidgets" />
</Clicked>
<Rectangle ux:Name="topRectangle" Height="2" Width="26">
<SolidColor Color="HeaderIconColor" />
<Translation Y="-9" ux:Name="topMenuTranslation" />
<Rotation ux:Name="topMenuRotation" />
</Rectangle>
<Rectangle ux:Name="middleRectangle" Height="2" Width="26">
<SolidColor Color="HeaderIconColor" />
</Rectangle>
<Rectangle ux:Name="bottomRectangle" Height="2" Width="26" Fill="#000">
<SolidColor Color="HeaderIconColor" />
<Translation Y="9" ux:Name="bottomMenuTranslation" />
<Rotation ux:Name="bottomMenuRotation" />
</Rectangle>
</Panel>
…
</DockPanel>
</EdgeNavigator>
When selecting an option I simply perfomer a goto action.
function gotoSelectedPage(args){
var mainPage = "MainPage" + args.data.name;
router.goto(mainPage, {} , args.data.name, {});
}
Thank you.
