ManipulationMode explained

Question

Can someone explain the meaning of manipulation modes such as TranslateX, TranslateRailsX, TranslateInertia ? What is a rail mode? And what inertia they are talking about?

Administer

I think that API is in WinRT/XAML only and not WPF, so I removed the WPF tag from your question and added the windows runtime one for clarity. – Viewable

Answer 1

With rails - when the input processor detects whether the manipulation is mostly vertical or mostly horizontal it sticks to the respective axis when reporting translation delta/cumulative values. If not - it just allows to freely manipulate whatever you are manipulating. Rails flags have to be used in combination with the non-rails flags, so just TranslateRailsX doesn't work. You need both that and TranslateX to get anything going.

The TranslateInertia flag allows for simple handling for flicks or inertial rotations/scales in case of the other inertia flags. Basically if you add that flag to the TranslateX one for example and you do a quick flick gesture - you will keep getting the input events (ManipulationDelta) for a while even after the gesture is completed. You also get the ManipulationInertiaStarting event when you flick once the input stream ends, so you get to control how far the flick goes if you want to. You can check out my extensions to the argument of that event in WinRT XAML Toolkit to get some more control over the ballistics of the flick too.

Your ManipulationDeltaEventArgs have an IsIntertial property you can also use to check if the events you are getting are directly from input events or a result of a flick and also call Complete() if for some reason you don't want to continue getting the delta events for the flick.

Viewable

If you need both TranslateRailsX and TranslateX, then how come the msdn doc says: "Don't combine Translate* values with TranslateRails* values, these are treated as mutually exclusive values"? msdn.microsoft.com/en-us/library/windows/apps/… – Bunin

Answer 2

Here is a simple example that shows how I implemented TranslateRailsX/Y.

I wanted it to only register horizontal swipe but with just using TranslateX/Y it was picking up the left or right even if I was just swiping up or down.

So just a simple XAML and as in my instance I only want horizontal swipes not the vertical swipes.

xaml file:

<Grid Background="WhiteSmoke">
     <WebView Name="webview" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</Grid>

xaml.cs file:

    int x1;
    int x2;
    int y1;
    int y2;
public MainPage()
    {
        this.InitializeComponent();
        webview.ManipulationMode = ManipulationModes.TranslateRailsX |  ManipulationModes.TranslateRailsY;
        webview.ManipulationStarted += (s, e) => x1 = (int)e.Position.X;
        webview.ManipulationStarted += (s, e) => y1 = (int)e.Position.Y;

        webview.ManipulationCompleted += (s, e) =>
        {
            x2 = (int)e.Position.X;
            y2 = (int)e.Position.Y;

            System.Diagnostics.Debug.WriteLine(x1);
            System.Diagnostics.Debug.WriteLine(x2);
            System.Diagnostics.Debug.WriteLine(y1);
            System.Diagnostics.Debug.WriteLine(y2);

            if (x1  > x2)
            {
                System.Diagnostics.Debug.WriteLine("right");
            };
            if (x1 < x2 )
            {
                System.Diagnostics.Debug.WriteLine("left");

            }

        };

And now I get the following on a vertical swipe

x1 180 
x2 180  
y1 201  
y2 386

And horizontal swipe

 x1 89
 x2 293
 y1 371
 y2 371
 left or right 

Hope this helps someone in the same predicament.

Mccool