Swipe Slides

How-to Discussions
1

Hi,

Which it is the best way to do the clasical Tutorial Swipe slides (Top of the image below)…

With WhileEdgeSwipe?

I try something like this but dont work fine:

<Panel Alignment="Top" WidthUnit="Percent" Width="100" HeightUnit="Percent" Height="80">


    <Panel ux:Name="Slide1" AnchorUnit="Percent" Anchor="50,50" WidthUnit="Percent" Width="100" HeightUnit="Percent" Height="100">

    <WhileEdgeSwiped Edge="Right" VelocityThreshold="50" EdgeThreshold="50" >
        <Change Target="Slide1.Anchor" Value="150,50" Duration="1" Easing="CubicInOut" />
        <Change Target="Slide2.Anchor" Value="50,50" Duration="1" Easing="CubicInOut" />
    </WhileEdgeSwiped>

    <Rectangle WidthUnit="Percent" Width="100" HeightUnit="Percent" Height="100">
        <SolidColor Color="#101010" />
    </Rectangle>
    </Panel>


    <Panel ux:Name="Slide2" AnchorUnit="Percent" Anchor="-50,50" WidthUnit="Percent" Width="100" HeightUnit="Percent" Height="100">

    <WhileEdgeSwiped Edge="Left" VelocityThreshold="50" EdgeThreshold="50" >
        <Change Target="Slide1.Anchor" Value="50,50" Duration="1" Easing="CubicInOut" />
        <Change Target="Slide2.Anchor" Value="-50,50" Duration="1" Easing="CubicInOut" />
    </WhileEdgeSwiped>

    <Rectangle WidthUnit="Percent" Width="100" HeightUnit="Percent" Height="100">
        <SolidColor Color="#434532" />
    </Rectangle>
    </Panel>

</Panel>

file
iiqhTZAyUuGS-legacy-files-0OzyhdwWerEWRYz2-CSY-i1W0XTqf-4uctHTPhSJl.jpg507×900

Thanks!!!

2

Are you trying to create a series of slides for the user to swipe through, or a panel that slides in/out from the side?

3

Im trying to create a series of slides for the user to swipe through…

4

Solved with

<SwipeNavigate SwipeDirection="Left" />

Thanks!

5

There is a new control called PageControl which makes these slides simple to make. I’ll be creating an example of this and I’ll post it here when I’m done. (I think the control may be available in the next release).

6

A slide show example: https://www.fusetools.com/developers/guides/examples/pagecontrol

7

It always says: "Data type not found: PageIndicator - C:\Users\Andre\Documents\Fuse\PageControl\Slides.ux(3:0):E

Object reference not set to an instance of an object. - …\Fuse\PageControl\Slides.ux(0:0):E"

8

Unfortunately it looks like I was a bit late with my merging of that feature for the release. It should be available in the next one. There’s unfortuantely no easy workaround.

9

The latest release (v0.1.2348) contains the missing feature and this example now builds. :slight_smile: