Activating an animation from two different triggers (and similar for navigation and pages)

How-to Discussions
1

Case 1: I have a side-menu that I’m able to activate with an edge-swipe like so: Would be nice though, if this could be done by pressing a menu button as well. What’s the recommended way to do this? Is there a way the menu button can activate the same trigger?

Case 2, which is about navigation: I’m using a LinearNavigation to navigate between a set of Pages by button-press, like in your DemoApp2. How would I go about to also allow the user to swipe back and forth to change the pages?

Finally, would it maybe be possible to get access to some of your older example-apps (such as SquareUp, and maybe the things you show in your videos? I do understand that it may no longer be compiling!)

2

There is no nice way to enable or disable a WhileEdgeSwiped trigger from UX at the moment. You have to do it from a codebehind, calling either Enabled() or Disable() on the trigger. We feel like the WhileEdgeSwiped trigger is somewhat lowleve and are discussing a higher level Control for dealing with slide-in menus.

If you want to have use swiping to navigate in a panel that has a navigation behavior you just add the SwipeNavigate behavior and you are good to go (be sure to set the correct SwipeDirection according to your Enter/Exit triggers).

3

As for our older examples, they are so out of date since we have been iterating so hard on the fuse libraries that I do not think they will really have any value.

We are working hard on getting out more examples though.

And do not hesitate to ask in the forum if you have any questions for how to go about making stuff with fuse :slight_smile:

4

I have a similar problem. I have a animation that is trigger by a ManualTrigger (with Poniter.Pressed) and a WhileEdgeSwiped.

I have something like that:


< ManualTrigger ux:Name="MyTrigger">
< Move...... />
< /ManualTrigger>

< WhileEdgeSwiped Edge="Left" VelocityThreshold="200" EdgeThreshold="400" >
        < Change Target="MyTrigger.On" Value="true" />
< /WhileEdgeSwiped>

The problem is that when I trigger the ManualTrigger I cant back with the WhileEdgeSwiped.

How can I Activate the WhileEdgeSwiped in this code?:


    void PoPointerPressed(object sender, PointerPressedArgs args)
{
     MyTrigger.On = true;
}
5

Vegard: I don’t know if I understand you correctly, but as cpacheco says, I don’t want to disable the trigger, I want to be able to make the menu appear and disappear in two different ways: with an edge-swipe, and by pressing a menu button. Not sure if this was understood. Will try though to call Enable and Disable from the code-behind when the user presses the button…

Regarding the Navigator classes: There currently isn’t any form of documentation (neither API docs, examples, or tutorials) that show how to use other navigators than the LinearNavigator. I don’t currently understand what the difference is between them, and how to use even the DirectNavigator…

6

Is it possible to look at the source code for the built-in uno libraries?

7

What I meant is that you could use Enable/Disable on the WhileEdgeSwiped trigger as a means to make the menu appear and disappear by pressing a button.

I am sorry for the lack of examples we have at the moment, Ill try to flesh how the different navigation behaviors work.

  • LinearNavigation

     <Panel>
     <Panel ux:Name="p1" />
     <Panel ux:Name="p2" />
     <Panel ux:Name="p3" />
     <Panel ux:Name="p4" />
 </Panel>

    You start out with the first child (p1) being the Active element, if you navigate from p1 to p4 the navigation will navigate through the all the childs in between over the total duration specified on the navigation behavior

  • HierarchicalNavigation

     <Panel>
     <Panel ux:Name="p1" />  <-- Backward history
     <Panel ux:Name="p2" />  <-- Backward history
     <Panel ux:Name="p3" />  <-- Active
     <Panel ux:Name="p4" />  <-- Forward history
     <Panel ux:Name="p5" />  <-- Forward history
 </Panel>

    The children list act as the navigation history. In this case if p3 is the Active child, the children above it is the “Backward” history and the children below it is the forward history. So doing a GoForward on the navigation behavior would change the Active child to p4. And the opposite goes for GoBack

    However if you do a NavigateTo on p1 for example, the forward history would be cleard and p1 added to the end as the active child, yeilding this:

     <Panel>
     <Panel ux:Name="p2" />  <-- Backward history
     <Panel ux:Name="p3" />  <-- Backward history
     <Panel ux:Name="p1" />  <-- Active
     <!-- p4 and p5 are removed -->
 </Panel>

  • DirectNavigation

     <Panel>
     <Panel ux:Name="p1" />
     <Panel ux:Name="p2" />
     <Panel ux:Name="p3" />
     <Panel ux:Name="p4" />
 </Panel>

    If you navigate with a directnavigation behavior it will always go directly from the currently Active child to the target child. So if p1 is Active and you navigate to p4, DirectNavigation will (unlike LinearNavigation) go directly from p1 to p4. There is also now history tracking involved in this behavior.

I hope this explanation make some sense? If not, let me know :slight_smile:

If you want to look at the code you can use the Go to definition feature in sublime text :slight_smile:

8

cpacheco, if you give the WhileEdgeSwiped an ux:Name="..." you can call Enable/Disable on it from your codebehind :slight_smile:

9

Perfect! Now its work!

And a basic question… For example, how I put ux:Name=“p3” Active Panel? This is in UX?

Eivind Liland: To Active WhileEdgeSwiped is Enable() and to disable, Disable().

Like this:


< WhileEdgeSwiped ux:Name="MyTrigger">
< /WhileEdgeSwiped>

< Button PointerPressed="ActivateTrigger"/>

In codeBehind


    void ActivateTrigger(object sender, PointerPressedArgs args)
{
     MyTrigger.Enable();
}
10

Thank you! A few gems here from both of you :slight_smile:

11

Keep coming back to this post by Vegard. It was very helpful.

Question: With DirectNavigation now supporting history tracking, what’s the difference to HierarchicalNavigation?

Question 2: What is actually PageControl? It kind of just acts like a Panel with an embedded LinearNavigation, so what’s the point of it?

  • Same with EdgeNavigator - it seems you should be able to do the same with a combination of a Panel, a LinearNavigation, and an EdgeSwiped?

    Are PageControl and EdgeNavigator simply higher-level navigation tools to simplify the building of navigation pages, or do they have a purpose beyond that? What’s confusing me is that they do not seem to be internally constructed from the lower-level tools that I mention above.