Essential XAML

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.

Displaying user Messages, Errors and Dialogs from a ViewModel using a Service – Part 2

Tomer Shamam — Tue, 18 Dec 2012 20:01:00 GMT

Displaying user Messages, Errors and Dialogs from a ViewModel using a Service – Part 1

In my previous post, I've discussed a bit about using the MVVM pattern and how to display a message or opening a dialog from within the view-model.

As part of the discussion, I've shown a possible way for displaying Messages, Errors and even Dialog or Popups.

In this post I would like to provide more details about the implementation of the Dialog part.

Recall previous post, we have the following two methods of the user interaction service:

bool? ShowDialog<TConductor>(string title) where TConductor : IDialogConductor;

bool? ShowDialog<TConductor, TParameters>(string title, TParameters parameters)

where TConductor : IDialogConductor<TParameters>;

TConductor – implements the IDialogConductor or IDialogConductor<TParameters>. The conductor is responsible for providing the view/view-model pair.

TParameters – an optional parameters can be passed to the dialog view-model. Using this parameters we can pass initial parameters, also get results back when closing the dialog.

From here, it's very simple. Let's take a look what's happening inside the service:

public bool? ShowDialog<TConductor, TParameters>(string title, TParameters parameters)

where TConductor : IDialogConductor<TParameters>

{

var conductor = ServiceLocator.Current.GetInstance<TConductor>();

var view = conductor.ResolveView();

var viewModel = conductor.ResolveViewModel(parameters);

return ShowDialog(title, view, viewModel);

}

private static bool? ShowDialog(

string title, DependencyObject view, DialogViewModel viewModel)

{

var element = view as FrameworkElement;

if (element == null)

{

throw new ArgumentException(

"Dialog view must be of type " + typeof(FrameworkElement).FullName);

}

element.DataContext = viewModel;

var dialogHost = new Window

{

Title = title,

SizeToContent = SizeToContent.WidthAndHeight,

Content = element,

};

CloseHandler.Create(dialogHost, viewModel);

return dialogHost.ShowDialog();

}

From what we're getting here, the process is simple:

Resolve a conductor from a DI container or other.
Use the conductor to resolve the view.
Use the conductor to resolve the view-model.
Now that we have both the view and view-model, connect them together, or let the conductor do that, then display Window, Popup, custom control, etc.

In case that you're using a DI container, coding is much simpler. To provide a dialog you should:

Create a dialog view and view-model pair.
Create a dialog-specific conductor interface and type and register the type with the container. If you're using MEF, just decorate it with Export using the relevant IDialogConductor interface as a contract. Also if you're lazy creating additional conductor type, like I did, let the View be the conductor. So it should implement the IDialogConductor and return itself as the view. Also make sure it's not Singleton!

Here's an example of the Save Image Dialog types:

/// <summary>

/// Represents the save image dialog conductor interface.

/// </summary>

public interface ISaveImageDialog : IDialogConductor<SaveImageDialogParameters>

{

}

/// <summary>

/// Interaction logic for SaveImageDialogView.xaml

/// </summary>

[Export(typeof(ISaveImageDialog)), PartCreationPolicy(CreationPolicy.NonShared)]

public partial class SaveImageDialogView : UserControl, ISaveImageDialog

{

public SaveImageDialogView()

{

InitializeComponent();

}

DependencyObject IDialogConductor<SaveImageDialogParameters>.ResolveView()

{

return this;

}

DialogViewModel IDialogConductor<SaveImageDialogParameters>.ResolveViewModel(SaveImageDialogParameters parameters)

{

return new SaveImageDialogViewModel(parameters);

}

/// <summary>

/// The logic of the save image dialog view.

/// </summary>

internal class SaveImageDialogViewModel : DialogViewModel

{

private readonly SaveImageDialogParameters _parameters;

public SaveImageDialogViewModel(SaveImageDialogParameters parameters)

{

_parameters = parameters;

FullPath = _parameters.ImageFilePath;

}

public string FullPath { get; set; }

public DelegateCommandBase CancelCommand

{

get { return GetOrCreateCommand("CancelCommand", () => OnClosed(false)); }

}

public DelegateCommandBase SaveCommand

{

get

{

return GetOrCreateCommand("SaveCommand", () =>

{

_parameters.ImageFilePath = FullPath;

OnClosed(true);

});

}

/// <summary>

/// Parameters for the save image dialog.

/// </summary>

public class SaveImageDialogParameters

{

public string ImageFilePath { get; set; }

}

I've created a small, incomplete, working VS2012 code demonstrating this concept.

Feel free to download it from SkyDrive:

DialogUsingService.rar (http://sdrv.ms/12ynsEK)

Displaying user Messages, Errors and Dialogs from a ViewModel using a Service – Part 1

Tomer Shamam — Mon, 17 Dec 2012 15:29:00 GMT

Displaying user Messages, Errors and Dialogs from a ViewModel using a Service – Part 2

Years after the invention of the MVVM pattern and people are still asking many questions about how to do this and how to do that, and specifically, how to display a Message, Error or even opening a Dialog from a View Model without accessing the view layer or visual tree.

If we go straight with the MVVM pattern concept, the view-model must not directly access or manipulate the View/Visual Tree or part of it in any circumstances. As many of you may already familiar with the basics, this serves one purpose: Separated Presentation. With all the benefits of separated presentation, this restriction is the origin of the complexity of this pattern and the source of many questions.

If we keep in mind the separation rule, there are several patterns out there we can use to target this problem. For example, we can use a Service.

var userInteraction = container.Resolve<IUserInteraction>();
var result = userInteraction.ShowMessage(
    "Allow camera access?", UserMessageOptions.YesNo);
if (result == UserMessageResult.Yes)
{
    // ...
}

What we’re doing here is actually using a service to separate the presentation related logic from the view-model, placing it inside a presentation-service, in our case: IUserInteraction.

Given that the IUserInteraction service is implemented as part of the view layer, and this layer is restricted from within the view-model, we are using a DI container to resolve this service implementation. This way we’re having a real separation, yet we are able to interact with the user.

Same concept for displaying errors, using a different method or interface for handling exceptions and error codes.

Now, looking inside the implementation of such a service, located in the view-layer, we may see something like this:

UserMessageResult ShowMessage(string message, UserMessageOptions options);
        
void ShowError(Exception e);

The service is part of the view-layer, so it’s reasonable that it may access any presentation element and run presentation code. In our case accessing WPF MessageBox. Of course you may want to use your own WPF/SL specific implementation of a message box, but then you only need to replace the native MessageBox with your own implementation, later when it will be alive and kicking.

Now the tricky part here is displaying dialogs.

First, depends on the type of application we are developing: Desktop, Tablet, Phone, etc. We should ask if Dialogs/Popups are the right mechanism to use. Of course there are alternatives: Navigation for example.

Whatever mechanism we’ll use, it will be part of the view-layer (For example, in Windows 8 Store Apps it’s part of the Frame or Page), so we better separate that from the view-model using the same service concept I’ve presented above.

Here’s a simple usage:

var saveImageDialogParameters = new SaveImageDialogParameters
{
    ImageFilePath = @"c:\images"
};

_userInteraction.ShowDialog<ISaveImageDialog, SaveImageDialogParameters>(
    "Save Image", saveImageDialogParameters);

A dialog is a bit complex than a simple message box, hence it may have view logic and we may want to develop it using the MVVM pattern, so we have a dialog view and a dialog view-model.

Now we’re dealing with two parts, and additional option to pass parameters to the dialog view-model. In our case ImageFilePath. Since we really don’t want to interact directly with the dialog view-model not the view from the actual view-model, we need to find a generic way to combine all together.

Let’s take a look at possible method signatures for opening dialogs from the view-model:

bool? ShowDialog<TConductor>(string title)
    where TConductor : IDialogConductor;

bool? ShowDialog<TConductor, TParameters>(string title, TParameters parameters)
    where TConductor : IDialogConductor<TParameters>;

The concept here is using what I’m calling: a dialog conductor. A conductor is responsible for creating dialog view, view-model and initializing the view-model with the dialog parameters if any.

In our case, the ISaveImageDialog interface represents the conductor. Since the implementation is internal to the dialog, we resolve it from the container.

The first signature can be used for displaying a dialog without any parameters, and the second can be used in case that we want to provide both conductor and parameters.

In my next post about this topic I’ll provide the implementation details for the ShowDialog and complete code for the rest.

Stay tuned!

Displaying user Messages, Errors and Dialogs from a ViewModel using a Service – Part 2

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

Installing SQL Server R2 Management Studio on machine with VS2008 without SP1

Tomer Shamam — Sun, 25 Mar 2012 16:31:46 GMT

I’ve been trying to install SQL Server R2 Management Studio on my customer site DEV machine I’m working with, and suddenly the I’ve got an annoying message saying that I don’t have VS2008 SP1 installed and the installation failed.

Mainly I’m working with VS2010 only, and I really don’t care about VS2008, especially not in concern with Management Studio…

Now I have three options:

1. Uninstall Visual Studio 2008

2. Download and install VS 2008 SP1, which takes decades…

3. Fool installation app to think VS is not installed

Since I really don’t have time to waste, I’ve chosen option number 3. I‘ve downloaded the famous Process Monitor from Microsoft, and monitored registry access by the installation app. Then I’ve noticed it has something to deal with: HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Microsoft\DevDiv.

I’ve renamed it, and, what do you know… Setup Succeeded!

Few things to concern:

1. Rename the DevDiv key before installation begin to the end of installation.

2. Since the installation creates a new DevDiv, save it (export) to a file and then delete it.

3. Rename back the original DevDiv key and import the file you’ve just exported with the new changes.

AT YOUR OWN RISK

It works for me with one issue: XAML Package fails to load now on VS 2008. Really haven't checked this before so I really don’t know if it caused by the installation.

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 Devices User Group Meeting - Windows Phone Navigation & Life Cycle

Tomer Shamam — Fri, 17 Feb 2012 15:48:00 GMT

במפגש משתמשים Windows Devices השני, שיתקיים במיקרוסופט רעננה, בתאריך 28/2/2012, יום שלישי, אני מעביר הרצאה בנושא Windows Phone Navigation and Application Life Cycle.

בהרצאה זו אדבר על יכולות הניווט בין אפליקציות ובתוך אפליקציות Windows Phone, ואראה כיצד הן משפיעות על תהליך ריצת האפליקציה. כמו כן, נלמד להבדיל בין שני המצבים Dormancy ו- Tombstoning, וכיצד לקחת מצבים אלו בחשבון בזמן תכנון אפליקצית Windows Phone.

לפרטים נוספים אודות הארוע, ורישום:

http://windowsphonenavandlifecycle.eventbrite.com

אשמח לראותכם,

תומר שמם

Advanced Windows Phone 7.5 Applications – Presentation and Demo

Tomer Shamam — Tue, 14 Feb 2012 00:32:30 GMT

Thank you for participating my Advanced Windows Phone 7.5 Applications session at Microsoft, Raanana today. It was a great fun, and I’m very happy that you’ve enjoyed the session.

As I promissed, here is a SkyDrive link for both the Presentation and Demo code.

Please leave comments should you have any questions about the session.

Thanks,

Tomer Shamam

Developers Seminar at Microsoft about Advanced Windows Phone 7.5

Tomer Shamam — Thu, 26 Jan 2012 13:50:00 GMT

אני שמח להזמין אתכם ליום עיון למפתחים במיקרוסופט רעננה, בתאריך 13/2/2012 שיוצא ביום שני, בו אני מרצה בנושא Advanced Windows Phone 7.5 Applications.

בהרצאה זו נדבר על מרכיב חדש שהתווסף לגרסת מנגו, שמאפשר לתהליכים באפליקציה לרוץ ברקע בזמן שהאפליקציה אינה רצה. מה שבעצם מכונה Background Task, ונלמד כיצד בעזרת תהליכים מקביליים אלו תוכל האפליקציה לעדכן Tiles, לבדוק שינויי סטטוס, לבצע סנכרון מול השרת, ועוד, ובו זמנית לשמור על חיי סוללה תקינים וחווית משתמש איכותית.

פרטים נוספים אודות האירוע, והרשמה תוכלו למצוא בלינק הבא:

http://codevalue.net/events/event/applications-development-for-windows-phone

נשמח לראותכם,

תומר שמם

http://codevalue.net