Essential XAML : Windows 8

New Windows 8 Store Apps Development with C# 6 days Course

Tomer Shamam — Mon, 14 Jan 2013 18:35:00 GMT

Recently, I've been working hard, developing a new Windows 8 Store Apps 6 days Course for C# developers.

Today I was very proud to deliver it to one of John Bryce customers, at Hi-Tech College, Herzliya, and it was a great beginning.

The course is very detailed and practical, just like I did with a previous 6 days WPF course I've developed. Different content, different college, but same mini-Me J.

So if you've enjoyed previous sessions with me, I'm sure you'll enjoy this course either, now with CodeValue.

Following is the agenda for the course arranged by Modules and Topics. Each topic contains many sub-topics not presented here.

Module 01: Introduction to Windows 8 Store Apps

Introduction to Windows Store Apps

Windows Store app Development

Module 02: Overview of the WinRT

Introduction to Windows Runtime

Async Programming

Module 03: UI Controls and Layout

UI Designer and XAML

Navigation Model

Built-in Controls

Layout and Orientation

Dependency Properties

Routed Events

Module 04: Data Binding and Data Controls

Data Binding and the MVVM Pattern

Data Templates and Content Model

Data Controls

Module 05: Graphics and UI Design

Control Styles

Control Templates

Graphics and Animations

Visual State Manager

Globalization and Localization

Module 06: Application Model and Life Cycle

Application Execution Model

Application and User Data

Module 07: Tiles, Badges and Toast notifications

Tiles and Badges

Secondary Tiles

Toast Notifications

Lock Screen Interaction

Module 08: Contracts and Extensions

Windows Store App Contracts

Windows Store App Extensions

Module 09: Background Tasks

Background task basics

Implementation concepts

Background task sample code

Resource management

Threading model

Best practices

Module 10: Accessing Device Hardware

Camera, Audio and Video

Motion and Device Orientation

Location Awareness

Module 11: Packaging and Deployment

Application Packaging

Install, Update and Removal

Side loading and Enterprise Apps

Introduction to the Windows Store

Please feel free to leave me a private message in this blog, or contact CodeValue, should you want to participate in future courses.

Just in case Input Language in Windows 8 is driving you nuts...

Tomer Shamam — Thu, 29 Nov 2012 14:42:57 GMT

In case you’re working with more than one input language in Windows 8 (EN, HE…), and you’re wondering “Why the hell the input language is HE in vs2012 or EN in Word, or the opposite, and not switching back automatically…”?

The answer for this question is: starting with Windows 8, the default for input language for any window is the last selected by the user (Users request from Microsoft…).

This situation is great for users who are working with only one language. This feature is annoying for users like me, switching languages back and forward, it drives me crazy!

So what can we do about that?

It’s simple, go to Start screen (Win Ley), search for “input language” in settings section

Select “Switch input methods”

On the left, select “Advanced Settings”

Then in the “Switching input methods” section set the “Let me set a different input method for each window”.

From now on, changing the input language will be kept for each Window and won’t be changing globally.

Using C# types from C++/CX in Windows 8 Store Apps

Tomer Shamam — Thu, 13 Sep 2012 01:22:48 GMT

One of the best things happened to Windows 8 Store Apps (aka Metro apps) is the option to write apps and games with pure, native C++, with the help of CX extensions.

Aside from performance gained by using C++, being able to develop with C++ in Windows 8 Apps addresses one of the most requested scenarios: Porting and Code Sharing.

Lets say that you’re the creator of a famous Mobile Application, developed using C++ for Android and other platforms, and you may want to port this great app, or pieces of it to run under Windows 8.

Before running and picking C++ as the main project for your application, first thing to ask: Is it really necessary to develop the UI using C++?

Believe me, it’s not! I’ve been doing it for the past few months, and it’s absolutely unnecessary. If you’re not going to write a Game, the performance benefits using C++ for developing “modern” (Metro) apps is not worth the pain. And it hurts!

So, what I’m suggesting here is that you develop you Windows 8 Store app UI using C#, but keep using your portable C++ code, having a thin, lightweight WinRT layer between them.

The WinRT layer contains Windows Runtime Components. These components are special objects, can be shared across C#/C++/JS thanks to the common type system and the Winmd format, which is the same format used by the .NET framework.

If you ask me, I would prefer developing these components using C++/CX. But you can also use C# with one disadvantage: Using a shared WinRT component written with C# from C++, causes the .NET runtime to be loaded into your application, even if it’s a C++ only application.

Inspired by one of the questions asked in the Windows 8 Apps Israeli forum I’m coordinating, I’ve prepared a small application, demonstrates a .NET WinRT component, consumed by C++ using Visual Studio 2012.

First, I’ve created a C#, Windows Store, Windows Runtime Component library (DLL with a Winmd).

Then I’ve renamed the “Class1” sealed class to “InteropType” (pick your own name of course) and added a public method should be exposed to C++.

   1:  namespace SharedWinRTLib.Calculator

   2:  {

   3:      public sealed class InteropType

   4:      {

   5:          public double Add(double a, double b)

   6:          {

   7:              return a + b;

   8:          }

   9:      }

  10:  }

As you can see (line 5), I’ve added the Add method, which gets two double type parameters, and returns double type.

Important thing to consider when creating WinRT components, is that you must use only platform supported types, such as int, double, string, custom WinRT type, etc.

You can’t use simple .NET types which are not WinRT types, but you can also use interfaces which adhere to these rules.

After creating this WinRT library, I’ve created a simple Windows Store C++ application, and added reference to this Winmd assembly:

Right click on the C++ project > References…, then I’ve picked my Winmd lib, named SharedWinRTLib.

Adding this reference, now I can instantiate and use the InteropType component directly from C++.

   1:  void CppStoreApp::MainPage::Button_Click_1(

   2:      Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)

   3:  {

   4:      auto calculator = ref new SharedWinRTLib::Calculator::InteropType();

5:

6:

   7:      double a = _wtof(textBoxA->Text->Data());

   8:      double b = _wtof(textBoxB->Text->Data());

   9:      double result = calculator->Add(a, b);

  10:      textBoxResult->Text = ref new Platform::String(to_wstring(result).c_str());

  11:  }

In the code snippet above, I’ve instantiated the InteropType component (line 4), which is located under the SharedWinRTLib::Calculator namespace.

Then I’ve converted the Text value of a text-box I’ve added to the UI (line 7, 8), to double, called the Add() method (line 9), and then converted the result to string again using the to_wstring C-Runtime function, and again to Platform::String, then placed the value in the result text-box (line 10).

Simple as that!

You can download the full code from here.

Microsoft has just released Windows 8 and VS 2012 for MSDN subscribers

Tomer Shamam — Thu, 16 Aug 2012 00:43:36 GMT

Microsoft has just released Windows 8 and Visual Studio 2012 for MSDN subscribers!

What are you waiting for? If you’ve MSDN subscription, go ahead, be first to download this long awaited release.

http://msdn.microsoft.com/en-us/subscriptions/downloads/hh442898.aspx

Now with the release of both, Windows 8 and Visual Studio 2012 we can develop Windows 8 apps and upload them to the online store.

Also don’t forget to check the Windows 8 Apps Development Microsoft’s Israeli forum I’m coordinating with two other community members.

In this forum I’m sure you will find all the answers for your Windows 8 Apps developments questions, in all languages: C++/CX, C#, VB and JS.

Get screen resolution in Windows 8 Metro style application

Tomer Shamam — Wed, 25 Jul 2012 03:50:22 GMT

Today, someone asked an interesting question in the Israeli Metro forum I’m moderating.

The question was: “How can I know what’s the screen resolution in a Metro style app?”

This is a tricky answer, since:

This capability has been removed from the RC.
We can’t rely on current window Width and Height, since it may not be fully opened (snapping).

Well, searching a bit over the API’s, I didn’t find anything that can help, but, we can always use DirectX.

Creating a C++ Metro style application, here’s a code snippet demonstrating how to extract the screen resolution of a given display device:

Using DirectX, we can query for the IDXGIAdapter, then make a call the EnumOutputs, which provides information for output devices. From there, we can make a call for IDXGIOutput::GetDesc to get the device description. From there we can extract the screen resolution.

Now, to be able getting this value from a C# or JS application, we should create a simple WinRT object, placing it in a WinRT dll, then use it from other projects.

To create a WinRT object with C++, we should create a class which looks like this:

Feel free to download the code (MetroScreenRes.zip) for both the WinRT object and a C# tester.

Running the application, you can click on the Button and see your screen resolution. Changing the resolution and click the button again, you may see it updated.

Windows Phone Summit – Live Blogging

Tomer Shamam — Wed, 20 Jun 2012 23:55:22 GMT

Windows Phone Summit is taking place right now, and I’m watching it Live over the the WEB at http://aka.ms/wpsummit

Frankly, there’s nothing new I didn’t know, but now it’s official by Microsoft.

There are about 9 new features in the future Windows Phone 8

Shared core between Windows 8 and Windows Phone 8, includes Native Code apps!
Support of Multi Core CPU’s
Support for additional 2 screen resolution: 720p, WXGA
Removable MicroSD support
Internet Explorer 10, with HTML5 and better JS performance
New start screen with more tiles and resizing options
Wallet experience
Nokia Map technology replaces Bing Maps
Support for NFC

UPDATE: Recommendation for W8/WP8 developers:

Build apps using XAML/C#/VB.NET and Games using DirectX/C++.

Now the more interesting question is: When the SDK will be ready so I can put my hands on.

Migrating your Windows 8 Consumer Preview app to Windows 8 Release Preview

Tomer Shamam — Sun, 03 Jun 2012 04:13:36 GMT

Lately, Microsoft released Windows 8 Release Preview, and also Visual Studio 2012 RC.

If you’re a Metro Style application developer, you might wonder what has changed from the last Beta.

As one who have already developed Metro Style apps, I can say that there are braking changes!

One of my favorite is in the Dispatcher (CoreDispatcher class) which no longer contains BeginInvoke pre-historic operation style of the old version of asynchronous pattern. Instead it contains the modern ‘async’ convention method called RunAync, which is of course Windows Runtime asynchronous method.

Here’s the signature of it:

public IAsyncAction RunAsync(CoreDispatcherPriority priority, DispatchedHandler agileCallback);

If you really want to spare the trial and error step, finding what was remove, what was change or replaced, you can find all changes in the following white paper:

http://go.microsoft.com/fwlink/?LinkId=251943

Windows 8 Development Tutorial – Part 1 – First Steps

Tomer Shamam — Sun, 04 Mar 2012 02:40:21 GMT

Now that both Windows 8 Consumer Preview and Visual Studio 11 Beta have been released, it’s a fantastic time posting about Windows 8 programming, especially about the new Metro style based applications.

For the sake of rapid-start, I’ll save the writing about what Metro Style application is, but I’ll give you a link in case that you’ve missed that:

http://msdn.microsoft.com/en-us/library/windows/apps/hh464920.aspx

Installing Windows 8 Customer Preview

Before we begin, I highly recommend you to install Windows 8 and learn about the new Metro UI language, since it’s totally different than what we are used to in current versions of windows.

Lets create a clean install of the Windows 8 Consumer on our Tablet, Laptop or Desktop PC, then we will install Visual Studio 11 Beta.

If you already have Windows 8 installed, skip this section.

There are several ways installing Windows 8 on our machine, and I think that the easiest and fastest is using a USB stick.

1. First go and download the full Windows 8 Consumer Preview ISO file from Microsoft.

2. Get a USB stick big enough to contain the 3.3GB (x64) or 2.5GB (x86) ISO file and use the Windows 7 USB/DVD download tool to make your USB stick bootable with Windows 8 installation.

3. Create a bootable USB device using the tool and the Windows 8 ISO file.

4. Now that you have a bootable USB stick you can use it to create a clean installation of Windows 8 on your machine. Just plug the USB stick in the target machine, and boot from it. You can also run setup or use automatic startup if you already have Windows 7 or Windows 8 Preview installed on the target machine.

HINT: If you have the Windows 8 Samsung Tablet handed for free in the last Microsoft’s Build conference, you can boot from the USB stick by Holding the Window button while powering it on. A blue screen with three options should appear. Tap on Troubleshoot, and then tap on Reset your PC.

5. Booting from the USB stick or running the setup file directly from Windows, the installation process is very simple. Note that you may need to enter the following public product key: NF32V-Q9P3W-7DR7Y-JGWRW-JFCK8.

6. The installation process may take a while and you may notice your device restarting at least one time before done. So seat back and continue reading this post… After few minutes, Windows 8 Installed! I’ve Signed-in with my Live account, and also installed some free-apps from the Windows Store, including Cut-the-Rope famous game.

This new Beta is equipped with many Built-in apps, such as People, Mail, Calendar, Camera, SkyDrive, Video, Xbox LIVE Games, Maps, and more.

In case you’ve installed Windows 8 on existing Windows, don’t forget to remove the remaining old Windows version, setup files, follows this link:

http://windows.microsoft.com/en-US/windows7/How-do-I-remove-the-Windows-old-folder

Installing Visual Studio 11 Beta

Ok, Now that you have a Windows 8 machine running, and of course, played a bit with the awesome Metro style UI, lets install Visual Studio 11 Beta. We will use it for developing our Windows 8 Metro style applications. Note that you can install it on a different machine and test the applications you developed on the Emulator or on the Windows 8 machine, connecting remotely. Personally, I prefer installing it on my Samsung i5 Slate device.

1. Download Visual Studio 11 Beta from here:http://www.microsoft.com/visualstudio/11/en-us.

NOTE: I recommend downloading the ISO file.

2. Copy the ISO file you’ve just downloaded to a USB stick, or directly to a drive in your development Machine.

HINT: Windows 8 has a new feature for mounting an ISO file as a Virtual Drive. I will use this feature to install Visual Studio 11 Beta directly from the ISO file. You can burn the ISO file on a DVD, extract it to USB disk or use a virtual DVD drive application such as Daemon tools lite.

3. In case of Windows 8, go to Desktop mode (click on Desktop tile from the start screen), open the ISO file location, right click on it, then choose Mount. Then run the setup file.

4. After installing Visual Studio 11 Beta, it will be automatically starting, and you would have have to choose a proffered development settings. I’ve chosen C#. This will arrange the templates so C# development comes first, and the rest after.

Windows Runtime

One moment before diving into code, lets describe what is Windows Runtime, or WinRT:

“The Windows Runtime is designed to make it easy for you to create apps using the technologies that you know. You can write apps that are tailored to every hardware form factor. Your Metro style apps participate in the breadth and diversity of the Windows ecosystem. They're optimized for touch, aware of the user's location and identity, and hosted in the Windows Store. Metro style apps are always on and available for instant use, and always connected with the latest content from the web. Users can discover and purchase your apps in the Windows Store, and they can be confident that apps install quickly and uninstall cleanly.”

In other words, WinRT provides common runtime and type system for creating Metro style applications. It also provides set of classes and APIs which are common to several technologies such as C#/XAML, C++/XAML, JavaScript/HTML5. WinRT is based on native code, exposing its types using Meta Data, very similar to .NET, provides you an option to create a Metro style application using the technology you like, and share components between these technologies. Comparing to .NET Framework, WinRT is not limited only to .NET languages, it’s common to Managed, Native C++ and JavaScript.

First Metro Style Application

Now that you have Visual Studio 11 Beta installed, you may want to create your first “Hello World” Windows 8 Metro style application.

1. On the menu, choose File –> New –> Project.

2. On the left, pick Windows Metro style, then select Blank Application. I’ll demonstrates other templates on my next posts of this series.

3. In the “Name” field, select a name for the new project – “HelloWorldUI”, also for the solution name “HelloWorld”, and then click OK.

NOTE: Clicking OK you be asked to have a Developer License. Just stay connected and provide you Live ID when asked.

As you can see, there’s a solution called HelloWorld and one project called HelloWorldUI on the right side of the screen. The project has one empty page called BlankPage.xaml. Expanding this file by clicking the arrow on the left, reveals additional file called BlankPage.cs.xaml.

Typically, a Metro style application contains at least one page. This page is the UI container of the Metro style application. The .xaml file is an XML file which defines the structure of the UI declaratively using an XML language called XAML. If you’re familiar with other XAML based UI technologies, such as WPF, Silverlight and Silverlight for WP7, you may be familiar with XAML for Metro style applications since it’s same concept.

The XAML file is used for describing the UI declaratively with UI elements such as Buttons, Lists, Layout panels and so on, where the CS file is used for specifying the logic behind the XAML.

NOTE: In case that you’re familiar with WEB programming, you can create a JavaScript Metro style based application, using HTML5 instead of XAML for the UI, and JavaScript instead of C# for code behind.

4. Open the Metro UI designer by double clicking on the BlankPage.xaml file. On the top half of the screen you may see the Designer, and on the bottom you may see the XAML editor.

Looking inside the XAML markup, you may see that it comprises root element named Page and few xmlns namespaces, and one child element named Grid. Running the application, a Page and Grid instances will be created and initialized. The XAML actually describes the Visual tree of WinRT objects should be created when running the application.

NOTE: WinRT stands for Windows Runtime, and it’s a native, common framework, providing common type system for all metro style based technologies and languages, such as C#, C++ and JavaScript.

5. On the left, click on the TOOLBOX pane. The toolbox contains the UI element you can drop into a page.

6. Select Button and drag it into the UI designer. Inside the designer, you can choose the button, drag it and change the size of it a bit.

7. Selecting the button, you may see its properties on the right pane, find the Content property and change its value to Hello!

8. Double click on the Button. This will register the button’s Click event, and automatically open the C# editor. This is a good place to display the Hello World message.

9. Add the following code to the event handler created:

   1: var dialog = new MessageDialog("Hellow World!");   2: await dialog.ShowAsync();

Also add the C# 4.5 new keyword called ‘async’ to the event handler method, since from now on, everything in a Metro style application is Asynchronous (ShowAsync).

   1: private async void Button_Click_1(object sender, RoutedEventArgs e)   2: {   3:     var dialog = new MessageDialog("Hellow World!");   4:     await dialog.ShowAsync();   5: }

10. Run the application you’ve created by clicking F% in Visual Studio.

NOTE: If you’re not running VS on Windows 8, we may choose to run your application on the Windows 8 Simulator installed as part of the Visual Studio 11. To run on the Simulator, replace “Local Machine” on the toolbar to “Simulator”, then click F5. Now clicking on the Hello button you may see the Hello World message.

Congra! Now that you have the pre-basics of developing a Windows 8 Metro style application, you can start playing with VS and Windows 8 to create basic apps.

I’ll finish here, but next time I’ll explain a bit more about the Metro style application and UI. Stay tuned.

Windows 8 Consumer Preview (beta) is out!

Tomer Shamam — Wed, 29 Feb 2012 22:13:43 GMT

Windows 8 Beta build 8250 is out, and you can download it from here:

http://windows.microsoft.com/en-US/windows-8/download

The new beta is called Consumer Preview and it contains some installed apps and other 100 can be downloaded from the Windows Store.

Here are some of the new features you can find:

New bootscreen
New branding
New shortcut menu
New way to close Immersive Apps
New start button
New Aero lite theme
New Ribbon organization
New splitted touch keyboard organisation

Windows 8 Dilemma – Could it run your Enterprise Applications?

Tomer Shamam — Thu, 29 Dec 2011 03:58:50 GMT

As it was cleared out by Microsoft about three months ago, Windows 8 based devices, running on top of ARM based CPU’s won’t be able to run existing x86 and x64 software. The only option will be running Windows 8 Metro Style applications (though the OS API’s are the same, meaning you can recompile the application and device drivers with few difficulties and have them running on top of ARM based CPU’s in desktop mode).

Having this in mind, and that the Desktop mode should be considered for “legacy” applications, the questions are: Does Metro Style based application is good enough for replacing our Enterprise application? Is it worth the investment? Should I take the risk?

Well, it’s hard to tell, but based on what I’ve read over here, Microsoft are going to develop Office Metro style. So if Office, one of the most complicated software beast I know, with so many years of investment is going to have Metro style application version, be sure your enterprise could be a Metro style app.

So I will say, go for it! if Microsoft does be sure that they rely on it, and the more Microsoft's in-house applications based on Metro, the better, stable, bug fixed and full of features it would be.

Think of it!

Programming Windows 8 Metro style apps using C# and XAML

Tomer Shamam — Mon, 05 Dec 2011 14:59:30 GMT

This Wednesday, 07-Dec-2011, I’m having a whole day tutorial, showing how to develop Windows 8 Metro Style applications using C# and XAML from scratch. In this day you’ll learn what is a Metro style app, and how to use the API’s provided with the first Windows 8 Preview to develop great Metro style apps.

Here are the abstract & agenda:

Abstract

Windows 8, Microsoft's next generation OS designed to run on top of Desktop and Tablet machines, introduces the next step in the evolution of the Metro design style and application model. In this full-day tutorial we will learn how to build Metro style apps from scratch, based on C# and XAML. We will learn how to create immersive, touch-first user interface, based on powerful and flexible Metro style controls. We will talk about Metro style application lifetime and navigation models, live tiles and push notifications and see how to integrate all with our next-gen applications.

Agenda

09:00 – 09:15 – Metro style application introduction

09:15 – 10:30 – Metro style application Lifetime and Navigation models

10:30 – 10:45 – Coffee break

10:45 – 12:00 – Metro style UI and Build-in controls

12:00 – 13:00 – Lunch

13:00 – 14:15 – Metro style data-driven collection and list apps

14:15 – 15:30 – Metro style application Tiles and Notifications

15:30 – 15:45 – Coffee break

15:45 – 16:30 – Metro style application trials and Windows Store

Hope to see you there.

http://www.sela.co.il/s/SDP/Dec2011/index.html

My Windows 8 Contracts Keynote Session at SDP

Tomer Shamam — Mon, 05 Dec 2011 14:22:41 GMT

Thank you for participating my Windows 8 Contracts session at Sela’s SDP conference, it was a great pleasure and I hope you’ve enjoyed the conference.

In this session I’ve talked about Windows 8 Contracts in general and demonstrated how to implement both share source and target contracts, in a Metro Style app to share data between Metro style applications.

Here are the presentation and demo code:

Note that in the presentation and demo code you can also find how to implement a Search Contract.

Hope you’ve enjoyed my session.

Windows 8 Keyboard Shortcuts

Tomer Shamam — Thu, 01 Dec 2011 21:39:00 GMT

Just though it would be a great idea to share Windows 8 Keyboard Shortcuts, in case you’re going to present Windows 8 Session, or just have fun with Windows 8 and you don’t have touch screen.

Key	Action
WINKEY	Switch between Start Screen and last Metro app
WINKEY + L	Log off
WINKEY + P	Change Monitors layout
WINKEY + D	Show desktop
WINKEY + Y	Temporarily look at the desktop
WINKEY + Enter	Launches Narrator
WINKEY + F	File Search
WINKEY + I	Settings
WINKEY + K	Connections
WINKEY + H	Share
WINKEY + Q	Search
WINKEY + W	Settings search
WINKEY + Z	Flip open apps
WINKEY + C	Open charms bar
WINKEY + Tab	Toggle between opened apps
WINKEY + Space	Toggle between input language
WINKEY + Any	Search for content

- Using a mouse, don’t forget you’ve also got Right Click (open menu, etc.).