Category: Visual Studio

Gone are the days when you could pick up a copy of Delphi, drag a few widgets onto a form and have the beginnings of an application. Right now, I’m wrestling with creating a Windows app that will run on both phone and tablet (one app, two platforms). This post is an attempt to write down the steps I’m taking to create the skeleton of the app.

The requirement

The App will have several pages and you can swap between the pages by swiping left or right. The content of these pages is not important, so in this trial app, it will just be some plain text.

I’m using Visual Studio 2015, writing in C# and initially targeting Windows 8.1.

Beginning

Create a solution, and a skeleton app: C#\Windows\Windows 8\Universal –> Blank App
This creates two projects within the solution.

If you want the template navigation (forward and back pages), you can follow (eg) Mike Taulty’s blog post. to change the MainPages from ‘Blank’ to ‘Basic’ pages (delete the MainPage and create a Basic Page called MainPage). This gives a simple way to change pages by calling:

 Frame.Navigate(typeof(TargetPage),"thisPageName");

For ‘swipe’ navigation, we need to use Gestures, and the application framework support these ‘out of the box’.

We have to catch the ManipulationStarted and ManipulationCompleted events. To do this:

• name the outermost gird object: P1Grid
• double click on the event: ManipulationStarted and code it as:

private void P1Grid_ManipulationStarted(object sender, ManipulationStartedRoutedEventArgs e)
{
     startX = e.Position.X;
}

• double click on the event: ManipulationCompleted. In this example, startX > e.Position.X means swipe right to left. use < instead to swipe left to right:

private void P1Grid_ManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e)
{
    if (startX > e.Position.X)
       Frame.Navigate(typeof(SecondPage), this.pageTitle.Text);
}

• we also need to define a variable:

private double startX;

• finally we need to change the Manipulation Mode of P1Grid to TranslateX.

Now, running the app lets you swipe from right to left to change the page.

Visual Feedback

Users like some feedback when they’re doing something like swiping left/right, and we can add an effect where the showing page is squashed in the direction of the swipe. The XAML objects have transformation built in that do what we want.

• We need to modify the xaml code to give object names for the transformation controls. The following goes inside definition of P2Grid:

<Grid.Projection>
    <PlaneProjection x:Name="P1Projection" GlobalOffsetX="0"/>
</Grid.Projection>
<Grid.RenderTransform>
    <CompositeTransform x:Name="P1Transform" ScaleX="1"/>
</Grid.RenderTransform>

• then we add an event handler for ManipulationDelta. We calculate how much to squash and then set the transform to both squash and then offset P1Grid:

private void P1Grid_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
   double squash = (P1Grid.RenderSize.Width - (startX - e.Position.X) / 4) / P1Grid.RenderSize.Width;
    if (squash >= 1)
    {
        P1Projection.GlobalOffsetX = 0;
        P1Transform.ScaleX = 1;
    }
    else
    {
        P1Projection.GlobalOffsetX = P1Grid.RenderSize.Width * (1 - 1/squash);
        P1Transform.ScaleX = 1/squash;
// or to animate in the opposite direction:
//	P1Projection.GlobalOffsetX = P1Grid.RenderSize.Width * (squash-1);
//	P1Transform.ScaleX = squash;
    }
}

• Finally, we need to reset the transformation when the swipe has finished. We add two lines to the ManipulationCompleted code:

P1Projection.GlobalOffsetX = 0;
P1Transform.ScaleX = 1;

For two pages moving back and forth, or for more pages, just combine the two directions of swiping.