Persistant height of rectangle while using Change on SwipeGesture

How-to Discussions
1

Hey, I’m relatively new to Fuse, just installed it and learning. While building a simple mobile app I came to a problem which I can’t find solution for on documentation page.

Lets say I have this:

<StackPanel Alignment="Bottom">
    <Rectangle ux:Name="botPan" Fill="#534444" Height="150" Alignment="Bottom" Opacity="0.65">
        <!--<Clicked>
            <Set botPan.Height="200" Delay="1" /> 
            <Set botPan.Height="200" />
        </Clicked>-->

        <SwipeGesture ux:Name="swipePan" Direction="Up" Length="100" />
        <SwipingAnimation Source="swipePan">
            <Change botPan.Height="200" />
        </SwipingAnimation>
        ....
    </Rectangle>

So, the height of the rectangle is working fine when swiping up, but, I want to have persistant height of it and in this example, it returns to it’s original heigh after I remove my finger. I know I can use < Set botPan.Height> but there is no animation there.

So my questions is:
Is there a way to use < Change > to set a persistant value, and then use < SwipeGesture > to bottom to set it to default.

OR

Should I use < Set > to set a persistant value, but in this case, how do I animate the swiping animation?

Thank you in advance.

2

Edit:
this

3

Solved!

Thanks to @fahad & @86fernandolins from slack @ #general.

        <SwipeGesture ux:Name="swipePan" Direction="Up" Length="100" />
        <SwipingAnimation Source="swipePan">
                <Toggle Target="togglePanUp" />
        </SwipingAnimation>

        <WhileTrue ux:Name="togglePanUp">
            <Change botPan.Height="200"
                Duration="0.1"/>
        </WhileTrue>
4

You may instead be looking for the Type="Active" property on the SwipeGesture. This creates a tray-like swiping gesture instead. The user can swipe to open/close the tray. When open your SwipingAnimation will be applied to 100% until the user closes it.

You can also use the SetSwipeActive and ToggleSwipeActive to programmatically modify the open/closed state of the gesture. There is also WhileSwipeActive which is active while the gesture is “open”.

In any case, if you decide to keep using the toggle you have now, you should not use SwipingAnimation to do these. Placing actions inside such triggers is a delicate situation – it is deterministic and defined, but rarely what you want. Use the Swiped trigger instead.

<Swiped Source="swipePan">
    <Toggle Target="togglePanUp"/>
</Swiped>
5

I learn something every day. Swiped also worked which is great to see, especailly if it’s more appropriate for this situation, but I question tied to this:

How would I make the Swipe bi-directional? For example, using <Swiped> currently works, but what should I do if I want to make a gesture down (swipe down) to make tray close? Currently, both opening and closing the tray works if I swipe up. Opening should be as current, swipe up, but closing should be swipe down.

Thank you for the input.
Cheers.

6

That’s what the Type="Active" does for you automatically. Just make a SwipingAniamtion that exposes the panel and nothing more – put your Height change directly in the swiping animation.

This will be a panel that swipes up to open and down to close.

7

Thats awesome and I love your approach!

I thought I need to set Type="Active" to the SwipingAnimation itself, but I was wrong. For others: The Type="Active" actually goes to <SwipeGesture>.

Thank you and kind regards.