{"id":221,"date":"2015-09-29T18:06:55","date_gmt":"2015-09-29T18:06:55","guid":{"rendered":"http:\/\/nofl.biz\/blog\/?p=221"},"modified":"2015-09-29T18:06:55","modified_gmt":"2015-09-29T18:06:55","slug":"visual-studio-2015-first-app-for-windows-8-110","status":"publish","type":"post","link":"https:\/\/beneford.com\/Blog\/index.php\/2015\/09\/29\/visual-studio-2015-first-app-for-windows-8-110\/","title":{"rendered":"Visual studio 2015 – First App for Windows 8.1\/10"},"content":{"rendered":"

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.<\/p>\n

The requirement<\/h3>\n

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.<\/p>\n

I’m using Visual Studio 2015, writing in C# and initially targeting Windows 8.1.<\/p>\n

Beginning<\/h3>\n

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

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

 Frame.Navigate(typeof(TargetPage),\"thisPageName\");<\/pre>\n
For ‘swipe’ navigation, we need to use Gestures, and the application framework support these ‘out of the box’.<\/p>\n
We have to catch the ManipulationStarted and ManipulationCompleted events. To do this:<\/p>\n
    \n
  • name the outermost gird object: P1Grid<\/li>\n
  • double click on the event: ManipulationStarted and code it as:<\/li>\n<\/ul>\n
    private void P1Grid_ManipulationStarted(object sender, ManipulationStartedRoutedEventArgs e)\n{\n     startX = e.Position.X;\n}\n<\/pre>\n
      \n
    • double click on the event: ManipulationCompleted. In this example,\u00a0startX\u00a0> e.Position.X means swipe\u00a0right to left. use < instead to swipe left to right:<\/li>\n<\/ul>\n
      private void P1Grid_ManipulationCompleted(object sender, ManipulationCompletedRoutedEventArgs e)\n{\n\u00a0\u00a0\u00a0 if (startX > e.Position.X)\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Frame.Navigate(typeof(SecondPage), this.pageTitle.Text);\n}<\/pre>\n
        \n
      • we also need to define a variable:<\/li>\n<\/ul>\n
        private double startX;<\/pre>\n
          \n
        • finally we need to change the Manipulation Mode of P1Grid to TranslateX.<\/li>\n<\/ul>\n
          Now, running the app lets you swipe from right to left to change the page.<\/p>\n
          Visual Feedback<\/h3>\n
          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.<\/p>\n
            \n
          • We need to modify the xaml code to give object names for the transformation controls. The following goes inside\u00a0definition of P2Grid:<\/li>\n<\/ul>\n
            <Grid.Projection>\n\u00a0\u00a0\u00a0 <PlaneProjection x:Name=\"P1Projection\" GlobalOffsetX=\"0\"\/>\n<\/Grid.Projection>\n<Grid.RenderTransform>\n\u00a0\u00a0\u00a0 <CompositeTransform x:Name=\"P1Transform\" ScaleX=\"1\"\/>\n<\/Grid.RenderTransform><\/pre>\n
              \n
            • 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:<\/li>\n<\/ul>\n
              private void P1Grid_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)\n{\n\u00a0\u00a0 double squash = (P1Grid.RenderSize.Width - (startX - e.Position.X) \/ 4) \/ P1Grid.RenderSize.Width;\n\u00a0\u00a0\u00a0 if (squash >= 1)\n\u00a0\u00a0\u00a0 {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 P1Projection.GlobalOffsetX = 0;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 P1Transform.ScaleX = 1;\n\u00a0\u00a0\u00a0 }\n\u00a0\u00a0\u00a0 else\n\u00a0\u00a0\u00a0 {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 P1Projection.GlobalOffsetX = P1Grid.RenderSize.Width * (1 - 1\/squash);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 P1Transform.ScaleX = 1\/squash;\n\/\/ or to animate in the opposite direction:\n\/\/\tP1Projection.GlobalOffsetX = P1Grid.RenderSize.Width * (squash-1);\n\/\/\tP1Transform.ScaleX = squash;\n\u00a0\u00a0\u00a0 }\n}<\/pre>\n
                \n
              • Finally, we need to reset the transformation when the swipe has finished. We add two lines to the ManipulationCompleted code:<\/li>\n<\/ul>\n
                P1Projection.GlobalOffsetX = 0;\nP1Transform.ScaleX = 1;<\/pre>\n
                For two pages moving back and forth, or for more pages, just combine the two directions of swiping.<\/p>\n","protected":false},"excerpt":{"rendered":"
                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 […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8,6],"tags":[],"class_list":["post-221","post","type-post","status-publish","format-standard","hentry","category-visual-studio","category-windows-development-2"],"_links":{"self":[{"href":"https:\/\/beneford.com\/Blog\/index.php\/wp-json\/wp\/v2\/posts\/221","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/beneford.com\/Blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/beneford.com\/Blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/beneford.com\/Blog\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/beneford.com\/Blog\/index.php\/wp-json\/wp\/v2\/comments?post=221"}],"version-history":[{"count":0,"href":"https:\/\/beneford.com\/Blog\/index.php\/wp-json\/wp\/v2\/posts\/221\/revisions"}],"wp:attachment":[{"href":"https:\/\/beneford.com\/Blog\/index.php\/wp-json\/wp\/v2\/media?parent=221"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/beneford.com\/Blog\/index.php\/wp-json\/wp\/v2\/categories?post=221"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/beneford.com\/Blog\/index.php\/wp-json\/wp\/v2\/tags?post=221"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}