Wednesday, 19 September 2012

Implementing Windows 8 style apps with XAML and C#

This is the third in a series of posts that accompany a series of video tutorials and demos that I am producing to do with Windows 8 development.

In this video, I will cover the following topics.
  • Create a Windows 8 Grid style app in Visual Studio 2012
  • Create a Windows 8 Split style app in Visual Studio 2012
  • Create a Windows 8 app in Visual Studio 2012 using an online template to explore the WinRT library.

This demo is taken from the course:

I have included the transcript below.

HTML5 player


I will begin by launching Visual Studio 2012.

The first thing you might notice is that  Visual Studio 2012 now has two built in themes. Just like Expression Blend. Dark and Light.

The Dark theme is used by default but you can always change it if you prefer by clicking on the Tool / Options menu and selecting the General tab. 

I will stick with Dark for now.

The first project template that I will show you is the Windows Store Grid app. 

In fact, there is no requirement for an app to be deployed via the Windows Store.

In a later demo, I will show you how a Windows 8 app can be installed directly onto your own machines in the enterprise using a technique called Side loading

If I select the Grid template and click the OK button, a new project will be created for me. 

I don't need to worry about a name or location for the project. 

Let me press F5 to launch the app. 

As you can see, this Grid style app adheres to the Windows 8 UI style. Similar to theFinance app. 

I can scroll or flick left and right. 

I can press or click tiles to move into detail views. 

I can use the Back button which is located in the top left hand corner to navigate back to the top level. 

Now then. I would like to switch back to Visual Studio 2012 to create a new project. 

There is a clever way to do so in Windows 8. 

Move your mouse to the top left hand corner and your previous app (Visual Studio 2012) will appear in miniature. 

I'll click that image to return to Visual Studio 2012 and then stop the project running.

Now I'll create a second project. 

This time, I'll create a Windows Store Split app. 

Once again, I am not concerned about a name or location for the project. 

Let me press F5 to run the project. 

This app conforms to the Windows Split app style. Similar to the Settings app. 

As you can see, if I click on a top level tile, the next level comprises two halves. Each of which can be scrolled up or down. There is a master-detail relationship between the two. 

I.e. if I select an item on the left hand side, the detail on the right hand side updates. 

I would like to create one more project. This time to show you something of theWinRT library. 

I am going to ask Visual Studio 2012 to download an online sample

The sample that I want is called the 'XAML essential controls sample - C#' and is actually available with many of the others in the Windows 8 SDK. However, I find this technique more convenient than downloading the entire SDK. For example, as soon as Windows 8 moved to RTM, the online samples were updated. 

If it's the first time that you have downloaded a sample, you are prompted to accept alicence agreement

I am presented with an HTML document that describes the content and purpose of the project. 

It is intended to show off the wide variety of controls and how you might use them in your app. 

Let me launch the app. 

As you can see, there are a number of views available that each show off a different group of controls. For example Sliders, Progress controls and Buttons etc. 

Let me return to Visual Studio 2012 (by clicking the small preview window in the top left hand corner) and stop the program. 

If I open slider-intro.xaml from the Solution Explorer window, you will see that the UI is represented in XAML which will be familiar to Silverlight or WPF developers. 

In fact, Windows 8 apps can also be written using a combination of HTML and Javascript. I will show that off in my next video. 

Here we can see the mark-up declaring a Slider control. 

If I open progress-intro.xaml, you will see the mark-up defining ProgressBarcontrols. 

And if I open up buttons.xaml, you will see the mark-up declaring the Buttoncontrols. 

Well that's it for this short demo. 

In this session, I have shown you Visual Studio 2012 templates for the two most common Windows 8 app styles: Grid and Split

I have also shown you a sample app that includes examples of many of the controls included in the WinRT library. 

I shall be producing several more videos on Windows 8 development as there is plenty to see. 

See you soon

Phil Stirpé
"I don't do average!"

No comments:

Post a Comment