ManipulationMode explained - windows-8

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?

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.

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.