SilverlightShow: Silverlight Community

Windows 8 Metro: Layout, view states and navigation

editorial@silverlightshow.net (Andrea Boschin ) — Mon, 07 May 2012 00:21:25 GMT

Download the source code for this article

The target devices where it is expected Windows 8 to runs are something of really amazing, since it should run from tablet devices of the most various sizes to the the widest monitor.

Don't miss...

All SilverlightShow Ebooks

Dealing with various display sizes and with mobile devices requires new capabilities that go beyond the ones required to run on a simple smartphone. First of all you need to adapt the size of your app to the screen, probably reducing or increasing the amount of content you show to the user. Connected with the use of fingers instead of mouse, it is required you are able to use all available space on the screen, expecially with low resolutions. Finally you have to deal with orientation. It is easy and natural to rotate the screen to best fit the content you are using, as an example using a vertical orientation while reading a page.

All these constraints change the game and have been answered by metro-style application. From the point of view of screen size, you are able to deal with it in different ways, adapting the content or introducing additional elements. You are also able to detect changes in orientation and you can take advantage of the whole screen snapping applications on the side and using a navigation paradigm.

Navigate your apps...

Navigation applications are something you already know for sure. They exists in WPF and in Silverlight but probably you know the benefits of this paradigm from the web that has originally introduced it with the browser. A metro-style application is by default a navigation application, since in the very first rows of code they runs the Window content is injected with a Frame control. There isn't anything preventing you from using something of different from a Frame as main element but if you want to give the better experience to your user this is a one-way street.

protected override void OnLaunched(LaunchActivatedEventArgs args)

{

    // Create a Frame to act navigation context and navigate to the first page

    var rootFrame = new Frame();

    rootFrame.Navigate(typeof(BlankPage));

    

    // Place the frame in the current Window and ensure that it is active

    Window.Current.Content = rootFrame;

    Window.Current.Activate();

}

In these lines, from the default App.xaml.cs file you see how the frame is injected and then the Window activated. Having in you hands the code to initialize the frame is important just because you can wrap the fram itself with some application-wide service like, an example, a wait layer that appears when the application is busy with asynchronous activities.

Inside the Frame you can navigate Page instances. A page of your application directly of indirectly inherits from the Page class so it is a good candidate to be navigated to. Differently from Silverlight you didn't use an Uri to navigate to a page but its Type. This choice comes probably from the fact that metro-style applications does not need to have deep-linking from a web page, so there is not any reason of having a complete Uri.

The Frame control exposes all the methods and properties you may need to perform navigation and to detect navigation state. Here is the main:

Navigate(Type page): Perform navigation to a page. This have also an overload you can use to pass a parameter to the destination page. The parameter is of type object so you can pass complex objects.

GoBack(), GoForward(): There go along the navigation stack, back of forward. Side by side with these methods there are two properties, CanGoBack and CanGoForward used if you reached one end of the stack.

StopLoading(): Stop le loading of a page, e.g. if it is taking longer to load.

CurrentSourcePageType: The type of the page currently loaded.

Navigated, Navigating, NavigationFailed, NavigationStopped: These events, exposed also as overridable methods on the Page class let you know when something related to navigation happens.

Given that your application is subject to be freezed and/or terminated under particular circumstances, the Frame control provides a way to persist the navigation backstack, so it may be resumed when the application is loaded again. In the example project attached to this article, I wrote a simple code to persist and restore navigation across different sessions. No matter if the application is suspended or terminated, the navigation starts always from the last point where it was interrupted:

private void GoToNext(object sender, RoutedEventArgs e)

{

    this.Frame.Navigate(typeof(FirstPage));

    this.SaveAsync();

}

  

public async void SaveAsync()

{

    Dictionary<string, string> values = new Dictionary<string, string>();

  

    values[Consts.NavigationKey] = this.Frame.GetNavigationState();

  

    if (this.Frame.CurrentSourcePageType != null)

        values[Consts.CurrentKey] = this.Frame.CurrentSourcePageType.FullName;

  

    await Utilities.SaveDictionaryAsync(Consts.FileName, values);

}

This code, inside a page persists the navigation state every time it changes. You have simply to call the SaveAsync methos every time you move across pages, just after the call to the navigation method. It saves the current page and the navigation state using the GetNavigationState() method. Then, in the App.xaml.cs you ar requested to restore the state:

protected override void OnLaunched(LaunchActivatedEventArgs args)

{

    // Create a Frame to act navigation context and navigate to the first page

    var rootFrame = new Frame();

  

    if (args.PreviousExecutionState != ApplicationExecutionState.Running)

        this.LoadAsync(rootFrame, typeof(FirstPage));

  

    // Place the frame in the current Window and ensure that it is active

    Window.Current.Content = rootFrame;

    Window.Current.Activate();

}

  

private async void LoadAsync(Frame frame, Type defaultPage = null)

{

    var values = await Utilities.LoadDictionaryAsync(Consts.FileName);

  

    if (values.ContainsKey(Consts.NavigationKey))

    {

        frame.SetNavigationState((string)values[Consts.NavigationKey]);

  

        if (values.ContainsKey(Consts.CurrentKey))

        {

            Type page = Type.GetType((string)values[Consts.CurrentKey]);

            frame.Navigate(page);

        }

    }

    else if (defaultPage != null)

        frame.Navigate(defaultPage);

}

To restore the navigation it reads the string representing the navigation from the filesystem and use the SetNavigationState method to load it in the frame. Then it navigates again to the last page hit by the user. The result is awesome since the application always remember the entire set of actions made by the user.

As for Silverlight, navigation implies caching. The Page class exposes a NavigationCacheMode property useful to define if your page have to be cached after it is loaded the first time. This means you have to handle your page slight differently. The first time your page ctor will be called and the load event raised. All the following calls omit to call ctor and Load so you have to handle the OnNavigated event to know when the page is loaded again.

Layout and ViewState

Once in front of your empty page, there are a number of options to dispose your content on the page. If you ever used layout controls in Silverlight and WPF, you already know the whole story. Grid, StackPanel and Canvas are still there and they works as you already know.

The real problem with layout in metro-style application comes from two points of view. First of all, applications are requested to go beyond the boundaries of the screen to maximize the space available, and for this aspect there are a set of controls available, but also to handle different size of the screen. The size of the screen can vary from the minimum of 1024x768 (10.6") to huge sizes like 2560x1440. The size of 1366x768 is considered a reference point.

If you try to start the simulator, on the right side you will find a button that opens a menu with a set of resolutions. Playing with this menu may be interesting to understand what it happens at different resolutions. When you are in start menu and change the value between the 10.6" resolutions, you will notice that the actual size of the tiles remains unchanged also if the pixel density drastically increases. What Windows does is to adapt the size of the elements to three steps: 100%, 140% and 180%. if you take 1366x768 corresponding to 100% you can easily calculate that 1920x1080 corresponds to 140% and 2560x1440 to 180%. The reason to operate this automatic scaling is to always have a size good for finger manipulation. If this scale would not applied the size of a tile at the maximum resolution will be too small to be hit accurately from a finger.

This automatic resize is good for vector-based graphics but may be drastically bad for bitmap images. It is the reason why you can use a trick to specify three sizes of every image. If you use a Image tag in XAML, since you specify a fixed name for the image you can create three versions and use a name pattern to let the system load the better for the current resolution:

   1: <Image Source="Assets/image.jpg" Width="100" Height="100" />

So after this create three versions of the image adding "scale-*" between the file name and the extension. Windows automatically loads the better image according with the selected resolution. Here is an example:

image.scale-100.jpg
image.scale-140.jpg
image.scale-180.jpg

While designing the layout of your application there are two strategies you can embrace. You can go for a fixed or adaptive layout. Every choose best fit a specific scenario:

Fixed: While in fixed layout your application will be scaled according with the screen resolution. The trick is to use a ViewBox control to wrap the entire content of the screen so when the resolution increases it is scaled automatically. This scenario is mostly choosed with games and dashboards where the screen does not go outside the screen boundaries.

Adaptive: In this layout, the size of items is fixed (according to pixel density rules) but when the screen il larger the number of items presented increases to fill the empty space left. Handling this layout is most difficult then the other but the common applications requires it.


23" - 1920x1080	10.6" - 1366x768

According with user actions, an application can assume 4 different state. FullScreenLandscape, Filled, Snapped and FullScreenPortrait. The figure behind shows the states:

The application have to support all the states to give an effective experience to the user. To detect the states changes you have to subscribe the ViewStateChanged event on the ApplicationView object. When the event raises the arguments let you know the new state so you have to switch on or off the parts of your application to best fit the available space. The best way to accomplish this task is using the LayoutAwarePage class, created by VisualStudio in the Common folder of the project. This class automatically handles states and map them to VisualStateManager states. Thanks to this mapping you can easily use Blend to edit the page like you are defining the states of a control.

An important argument

In this article I've scratched the surface of layout and navigation. Especially layout is something that needs to be deeply understand to create effective apps, able to give a good experience to the user. I suggesto to read some good MSDN articles:

In the next article I will go depth in the lifetime matter to understand suspension and how to handle this important task.

Windows 8 and the future of XAML Part 6: Tiles, toasts and badges

editorial@silverlightshow.net (Gill Cleeren ) — Tue, 01 May 2012 13:47:22 GMT

Download the source code for this article

Welcome to part 6 already in this Windows 8 series. Since the goal of this articles is bringing you in touch with all the important aspects of Windows 8 development, we need to dive into tiles.

Don't miss...

All SilverlightShow Ebooks

Tiles are therefore the main topic of this very article. If you’re coming from a Windows Phone 7 background, the concept of tiles is probably already familiar to you. However, Windows 8 brings quite a few new things to the table, including the concept of badges. Toasts are also covered here; conceptually, these already existed in Windows Phone 7 development as well but have been adapted for use in a Windows 8 environment.

The concepts of tiles

In Windows 8, due to the new way application lifetime management, only one application can be running at any point in time (except when the user has two applications side-by-side using snap view; in that case, two applications are running at the same time).

If not running, the application is suspended. We’ll cover the lifetime management in a coming article.

If an application wants to inform the user about an event or any update really, by default, it can only do so while it’s running in the foreground. Because this wouldn’t lead to a great user experience, Microsoft invented tiles. Tiles are the little blocks, pinned to the start screen. The image below shows some tiles.

While a tile is a way to launch an application, it can be much more. Users will pin applications they use most to their start screen. A tile can be made a live tile. A live tile is being updated with new information while the application is or isn’t running. Therefore, the tile can be seen as an extension of the application, allowing the developer to convey information while the application is not the foreground application (read: when it’s not running).

Like in Windows Phone 7, the start screen is a means of giving the user access to his most important info. Using a live tile, this becomes possible. The tile can be a way of engaging the user back in the application: imagine you’ve written an RSS application. Using a live tile, you can update the information shown in the start screen. When the user notices the article showing, it can result in a launch of the application.

Looking at the live tiles (and frankly, screenshots don’t do them justice), they may seem a bit complicated for developers to create at first sight. All the animations and different types that exist however, are all based on templates which are pure XML. Indeed, there’s no need to create tiles from scratch, Microsoft did the hard part. For developers, it’s just using these templates and Windows 8 will handle the rest. We’ll see these templates in a minute.

Tiles: basic ones and live ones

Let’s now look at how we can create these tiles. Up first, basic tiles.

Basic tiles

In Visual Studio, we can as a bare minimum, include the default tile, which is a square. When installing the application, the tile that’s shown by default is the square tile. It’s the user who can select that your application gets a wide tile. However, it’s up to the developer on the other hand to include a wide tile in Visual Studio as well. In the screenshot below, you can see the package manifest editor where we are selecting images. Notice that Visual Studio hints at what the sizes of these should be.

At this point, our application has a basic tile, which isn’t doing anything at all. It’s acting like an icon on the desktop basically. Below is the wide tile.

And here’s the square tile.

Both wide and square tiles can get updates. When receiving updates, tiles become live tiles.

Live tiles

Live tiles are where the fun begins. A live tile can display updates to the user. Below you can see a tile displaying different statuses.

It’s easy to understand that this way of displaying information extends the way the application works: in many apps, the information on the tile is some summary of the most important information of the application. Apart from text, tiles can also display images or a combination of the two.

To make a tile become a live tile, we need to send it a message. This message consists of XML in the form of a predefined template. Microsoft has included quite a few templates for both the square and the wide templates; below we can see a sample of this XML:

<tile>

  <visual version='1' lang='en-US'>

    <binding template='TileWideText03'>

      <text id='1'>Hello World! My very own tile notification

      text>

    binding>

    <binding template='TileSquareText04'>

      <text id='1'>Hello World! My very own tile notification

      text>

    binding>

  visual>

tile>

The template takes complete care of the display of the tile: rendering of the tile as well as all animations are done entirely based on the XML. We as developers don’t need to worry about these; the only thing we need to do is sending the tile updated XML. In a tile, we can include text (in some predefined fields in the XML) as well as images. Images can be *.png or *.jpg files (we’ve seen these in the above screenshots).

Let’s see how we can create a live tile. In this article, we are working with an application called “WorkingWithTiles”. The UI is very simple, it contains a few buttons which will trigger the execution of a tile update.

We can work with the raw XML (shown above) where we modify the XML and send that XML directly to the tile.

void UpdateTileWithText(string text)

    XmlDocument tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideText03);

    XmlNodeList textElements = tileXml.GetElementsByTagName("text");

    textElements.Item(0).AppendChild(tileXml.CreateTextNode(text));

    TileNotification tile = new TileNotification(tileXml);

    TileUpdateManager.CreateTileUpdaterForApplication().Update(tile);

In the code above, we first retrieve the content using the TileUpdateManager.GetTemplateContent. TileTemplateType is an enumeration that contains all templates. In the following lines, we replace the contents of the text field. Finally, we create a TileNotification instance, which in the next line is sent to the TileUpdateManager.

Below you can see the updated tile.

Now we’ll take a look at updating both text and an image. The code is similar although a bit longer since we are adding an image and text. Notice that we are also including the contents of the square tile here, since we don’t know if the user has a wide tile or a square tile pinned from our app.

void UpdateTileWithImage(string text, string imageSrc)

    XmlDocument tileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileWideImageAndText01);

    XmlNodeList textElements = tileXml.GetElementsByTagName("text");

    textElements.Item(0).AppendChild(tileXml.CreateTextNode(text));

    XmlNodeList imageElements = tileXml.GetElementsByTagName("image");

    XmlElement imageElement = (XmlElement)imageElements.Item(0);

    imageElement.SetAttribute("src", imageSrc);

    imageElement.SetAttribute("alt", "Image description");

    XmlDocument squareTileXml = TileUpdateManager.GetTemplateContent(TileTemplateType.TileSquareImage);

    XmlNodeList squareImageElements = squareTileXml.GetElementsByTagName("image");

    XmlElement squareImageElement = (XmlElement)squareImageElements.Item(0);

    squareImageElement.SetAttribute("src", imageSrc);

    squareImageElement.SetAttribute("alt", "Image description");

    IXmlNode subnode = tileXml.ImportNode(squareTileXml.GetElementsByTagName("binding").Item(0), true);

    tileXml.GetElementsByTagName("visual").Item(0).AppendChild(subnode);

    TileNotification tile = new TileNotification(tileXml);

    TileUpdateManager.CreateTileUpdaterForApplication().Update(tile);

When we look at the start screen now, we’ll see the following tile.

Using the XML directly is maybe a bit cumbersome. In the SDK samples, a handy library is included called NotificationExtensions. This wraps the XML editing and gives us types to work with. The XML editing is abstracted away. Below you can see the code for the text -only tile update.

void UpdateTileWithTextExtensions(string text)

    ITileWideText03 tileContent = TileContentFactory.CreateTileWideText03();

    tileContent.TextHeadingWrap.Text = text;

    ITileSquareText04 squareContent = TileContentFactory.CreateTileSquareText04();

    squareContent.TextBodyWrap.Text = text;

    tileContent.SquareContent = squareContent;

    TileUpdateManager.CreateTileUpdaterForApplication().Update(tileContent.CreateNotification());

And below is the tile update containing an image and text.

void UpdateTextAndImageExtensions(string text, string imageSrc)

    ITileWideImageAndText01 tileContent = TileContentFactory.CreateTileWideImageAndText01();

    tileContent.TextCaptionWrap.Text = text;

    tileContent.Image.Src = imageSrc;

    tileContent.Image.Alt = "Web image";

    ITileSquareImage squareContent = TileContentFactory.CreateTileSquareImage();

    squareContent.Image.Src = imageSrc;

    squareContent.Image.Alt = "Web image";

    tileContent.SquareContent = squareContent;

    TileUpdateManager.CreateTileUpdaterForApplication().Update(tileContent.CreateNotification());

As you can see, it’s much easier to work with these instead of directly editing the XML. The result is of course exactly the same.

Secondary tiles

By default, an app can only have a single tile. There are quite a few scenarios however where the user may want more than one tile of your application pinned to his start screen. Imagine you’re building a weather application. The user may want to pin to his start screen his current location but also the cities he’s to visit in the coming time. Or imagine you have again that RSS application. In such an app, a user may want to pin one or more RSS feeds so he gets notified about their updates on the start screen.

To cover this, we have secondary tiles. Such a tile works in the same way as a regular live tile, but it can be added to the start screen by the user from within the application. To be able to pin content, the developer however has to build in this option in the application (for example adding a Pin to Start button in the App Bar on the detail page of the weather for a city). Let’s look at this in some code.

private async void CreateSecondaryTile_Click_1(object sender, RoutedEventArgs e)

    Uri logo = new Uri("ms-appx:///assets/small.png");

    Uri smallLogo = new Uri("ms-appx:///assets/secondary.png");

    string tileActivationArguments = "timeTileWasPinned=" + DateTime.Now.ToLocalTime().ToString();

    // Create a 1x1 Secondary tile

    SecondaryTile secondaryTile = new SecondaryTile("AppSecondaryTile",

                                                    "Next webinar",

"",

                                                    tileActivationArguments,

                                                    TileOptions.ShowNameOnLogo,

                                                    smallLogo);

    secondaryTile.ForegroundText = ForegroundText.Light;

    bool isPinned = await secondaryTile.RequestCreateForSelectionAsync

        (GetElementRect((FrameworkElement)sender), Windows.UI.Popups.Placement.Right);

Notice that it’s also possible to pass contextual information from the tile. It wouldn’t be a good experience if the user clicks the tile and arrives on the default landing page of the application. Creating a secondary tile is done by using asynchronous code, hence the use of the await/async pattern.

The user has to approve the secondary tile. This is done using the RequestCreateForSelectionAsync. The result of this is shown below.

If we run this code now, we get the following secondary tile.

Badges

Finally, as developers, we have the ability to display badges on the tile. A badge consists of a number between 0 and 99 or a glyph. The badge is an overlay on top of the tile. Adding a badge is done again using XML templates: by sending some XML to the tile (or to the secondary tile), the badge gets added to the tile. Let’s take a look at adding the badge from code. In here, we are updating the tile with a number.

void UpdateBadgeWithNumber(int number)

    BadgeNumericNotificationContent badgeContent = new BadgeNumericNotificationContent((uint)number);

    BadgeUpdateManager.CreateBadgeUpdaterForApplication().Update(badgeContent.CreateNotification());

The tile now looks as follows.

Now that we’ve seen tiles and their options, let’s look at notifications.

Notifications

A tile update isn’t guaranteed to be seen by the user. If our application has an important update to convey to the user, it might not be a good idea to just update the tile. In this case, it might be better to send a notification that the user will see on top of the running application. If you’ve been doing Windows Phone 7 development, you’ll probably recognize this pattern.

Like a tile, notifications are also built using XML templates. Because of the fact they are displayed over the running application, they are bound to get the user’s attention more quickly. Notifications aren’t permanent (they disappear automatically) and only 4 are shown at the same time. Just like with secondary tiles, it’s possible to pass context so that the user is brought automatically to the correct location within the application.

Notifications shouldn’t be used to spam the user though. Ultimately, the user remains in control: he can decide to turn off notifications for your app or for the entire system altogether. Therefore, don’t count on the fact that the user has seen the update!

Let’s add a notification message to the code now.

private void CreateToast()

    IToastNotificationContent toastContent = null;

    IToastText01 templateContent = ToastContentFactory.CreateToastText01();

    templateContent.TextBodyWrap.Text = "SilverlightShow webinar starts now!";

    toastContent = templateContent;

    ToastNotification toast = toastContent.CreateNotification();

    ToastNotificationManager.CreateToastNotifier().Show(toast);

Below you can see the notification being shown to the user.

If your toasts aren’t displaying, check that in the manifest declaration, this has been set to enabled.

But what about non-running applications?

We’ve now seen how we can update the tiles as well as send notifications from the main code of the application? But what if the app isn’t running? That will be covered in the next part of this series!

Summary

In this article, we’ve looked at the different types of updates applications can send to the user. We haven’t looked at how to do so from the cloud. That will be covered in the next article. Stay tuned!

About the author

Gill Cleeren is Microsoft Regional Director (www.theregion.com), Silverlight MVP (former ASP.NET MVP) and Telerik MVP. He lives in Belgium where he works as .NET architect at Ordina (http://www.ordina.be/). Passionate about .NET, he’s always playing with the newest bits. In his role as Regional Director, Gill has given many sessions, webcasts and trainings on new as well as existing technologies, such as Silverlight, ASP.NET and WPF at conferences including TechEd Berlin 2010, TechDays Belgium – Switzerland - Sweden, DevDays NL, NDC Oslo Norway, SQL Server Saturday Switserland, Spring Conference UK, Silverlight Roadshow in Sweden, Telerik RoadShow UK… He’s also the author of many articles in various developer magazines and for SilverlightShow.net and he organizes the yearly Community Day event in Belgium. He also leads Visug (www.visug.be), the largest .NET user group in Belgium. Gill is the author of “Silverlight 4 Data and Services Cookbook”. In 2012, the second edition, “Silverlight 5 Data and Services Cookbook” is released.

You can find his blog at www.snowball.be.

Twitter: @gillcleeren

Windows 8 Metro: Starting your first App from scratch

editorial@silverlightshow.net (Andrea Boschin ) — Wed, 18 Apr 2012 01:18:00 GMT

Download the source code for this article

After the first article in this series, where I briefly discussed about design aspects of the new Metro interface, involving simplicity, flatness, emptiness and the pillars of this new beautiful paradigm, as promised, it is now time to start exploring the tools available to start create your applications.

Don't miss...

All SilverlightShow Ebooks

At the date of this article, you have to be aware that I'm discussing about the "Windows 8 Consumer Preview" bits so, when then next releases will be available, something I've written might become obsolete due to changes made by the team. However, being at the second public preview of Windows 8 means that it is sufficiently stable to write something of reliable.

To follow this article and probably the next ones, it is obviously required an installation of Windows 8 CP. You can download it from this page. After you installed the operating system, you have to install Visual Studio 11 Express beta and Blend. These tools are included in the SDK you can download from the same page. My suggestion is to use a Virtual Machine to host all this software because when it will be obsoleted by a new version you can easily delete the virtual machine and create another one from scratch. Finally, it is important to download the "design assets", a 48MB zip files that contains a number of templates and images to help designers and developer to work with Metro constraints. I will be back to some of these templates in following articles.

Meet the Visual Studio IDE

Give that you downloaded and installed all the requirements, I guess you have firstly opened Visual Studio 2011 and problably you have been doomed by the great difference between its IDE and the previous versions. Since Visual Studio 2010 has been a big step with its new user interface, the IDE you have just opened makes a triple jump forward and embraces a number of Metro UI pillars, first of all the one I posed at the first in my list, that says "Be Authentically Digital". The new Visual Studio IDE have lost any minimal skeuomorphism in favor of a more flat appearance.

At the moment I've suspended my judgement about this new look&feel. The reason for this suspension is that I'm too much accustomed to the older interface and I'm now too much confused to be objective in my judgment but I need to be in touch with it for sometime to understand if this interpretation of Metro pillars makes me happy. What I can say at the moment is that I do not have any nostalgia of the skeuomorphic UI of VS2010 but I think they should have to use a more wide palette to avoid to make interface flatness to be semantically flat.

From the functional point of view, the IDE has a number of advantages. As an example I've added a screenshoot of the new Solution Explorer. What immediately catches the eye is the new hierarchy that is able to show the structure of the classes, methods, properties and so on. Another new feature is the automatic preview of files. When you select a file in the explorer, it is automatically opened as an interactive preview and if you make a change in the code, the file is finally opened. Hard to explain but simple to try if you select *.cs files in the tree.

Create and understand the project structure

Once you gained the "New Project" window from the start screen or from the File menu, you choose between a number of templates. Metro applications can be created using two ways. If you like you can embrace HTML5 and Javascript or you can choose to use XAML coupled with C#, VB.NET or C++. The choose of the language to use currently is not matter of features because there are very few differences between what you can do in HTML or XAML. It is for sure matter of skills and development effort. Coupling XAML with C# is the most effective and fast way to develop a Metro application and it should be the primary choice when you are doing something more than an exercise. C# let you have real object orientation, compile time checking and other facilities. If you or your team have strong HTML skills, nothing prevent you from use it and Javascript but you have to plan for almost double or triple of the development time. It is for this reason in this series I will cover primary XAML and C#.

The templates in Visual Studio are modeled on this choice; you have templates for HTML+Javascript, XAML+C#, XAML+VB and XAML+C++. As the figure shows you have three templatates available:

Blank: is the most simple template and probably it will be always the better point to start from.
Grid: It creates an application the uses the new GridView control as the main Application Hub.
Split: It is an example of an application that splits contents in columns.

If Grid and Split templates are good for the first exercises, the Blank Application template is probably to most useful for real world purposes. After you create the project you will get the structure shown in the Solution Explorer screenshot in the previous paragraph. There is a number of items in the project, mostly of them are known to people that have already used Silverlight but other are specific to Metro applications. Here is the most important elements:

App.xaml/App.xaml.cs - Silverlight, Windows Phone and WPF developers already known this file. It handles the lifetime of the application. In Metro apps it handles events like Launched, Suspending, Activated and Resume. These can be used to manage the state of the application when it is suspended by the operating system. In the OnLaunched method, called when the application starts, it is initialized the main Frame. Metro applications are basically navigable applications; nothing prevents to inject directly a page instead of a Frame but you lose the entire navigation facilities.
BlankPage.xaml - This is the first page your application will show. If you want you can change it by editing the App.xaml.cs file and it does not have nothing different from every other page. Every page takes a reference to the main frame and can use it to navigate from one to another.

Application1_TemporaryKey.pfx - This file is a self generated certificate, required to sign the application package. To run in the metro AppContainer, an application needs to be signed so Visual Studio automatically generates a certificate and adds it to the project. The certificate is used for development purposes. It happened sometimes I've got errors caused by a not trusted certificate. In the case, you can manually regenerate the certificate or try to add it to the Windows Trust Root store of the machine where you work.
Package.appxmanifest - This represents the manifest of the application. The manifest contains all the informations required to run the application, define its capabilities, the way it communicate with other apps and how it is packaged. If you double click the file you get an editor that let you easily change its content. There is a number of things you can define: application logos, orientation, titles and notifications. You can also determine capabilities that is what the application can and can't do. Finally if you needs to manage the certificate this is the right place, going to the packaging tab.
Common (directory) - The content of this directory is someway strange. Inside it there are a number of classes that helps to manage layout, databinding and a bunch of converters. It contains also a ResourceDictionary (StandardStyles.xaml) with a series of styles. I think it is strange because I expect to have mosto of them compiled inside an assembly but have a look at this directory because i may contains something you really need.

The first time you compile or run an application, Visual Studio (but also Blend) asks you to create a developer account. To accomplish this task you have to enter a live id account and you will be granted of a 1 month long license that you can use for free. Every time you activate another instance of Visual Studio (e.g. creating another virtual machine) your license is renewed and the month starts again.

Create your first app

Now that the project has been created you can start to implement your application interface and logic. For the first touch I will avoid a simple Hallo World but I'll drive you to create a single page application that is able to download a rss feed and display the titles in a grid layout. Inside this very basic app (view a screenshot on the right side) I used some of the interesting features of XAML for Metro.

All the code of the application is inside the BlankPage.xaml and BlankPage.xaml.cs files. As usual the xaml file represents the user interface description and the cs file is the codebehind of the page. Here is the very basic XAML content of my application. You have simply to cut & paste it in the BankPage.xaml file (be aware I called it Application1):

<Page

    x:Class="Application1.BlankPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:Application1"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

  

    <Grid Background="White">

        <ItemsControl x:Name="items" VerticalAlignment="Center" HorizontalAlignment="Stretch">

            <ItemsControl.ItemContainerTransitions>

                <TransitionCollection>

                    <EntranceThemeTransition />

                TransitionCollection>

            ItemsControl.ItemContainerTransitions>

            <ItemsControl.ItemsPanel>

                <ItemsPanelTemplate>

                    <VariableSizedWrapGrid Orientation="Horizontal" MaximumRowsOrColumns="3" 

                                           ItemWidth="240" ItemHeight="120" HorizontalAlignment="Center" VerticalAlignment="Center" />

                ItemsPanelTemplate>

            ItemsControl.ItemsPanel>

            <ItemsControl.ItemTemplate>

                <DataTemplate>

                    <Border Padding="10" Margin="10" d:DesignWidth="387.5" d:DesignHeight="101.5" 

                            PointerReleased="HandlePointerReleased"

                            BorderBrush="#FF666666" BorderThickness="1" 

                            Background="#FFFF9900" Tag="{Binding}">

                        <TextBlock Text="{Binding Title.Text}" TextWrapping="Wrap" Foreground="White" FontSize="16" />

                    Border>

                DataTemplate>

            ItemsControl.ItemTemplate>

        ItemsControl>

    Grid>

Page>

The main content of the screen is a simple ItemsControl. This control let you display a collection and apply a DataTemplate to define the elements used to visually represent each item in the collection. The ItemsControl usually have a stacked layout; to display elements in a grid I use a layout element called "VariableSizedWrapGrid". This element organizes the items in a grid using a layout similar to the Silverlight's WrapPanel.

In the ItemTemplate property I've created a DataTemplate with a simple Border and TextBlock. This will display the title of an item into a rectangle. Finally, to make the application a bit more pleasant, I've added a EntranceThemeTransition that gives a beautiful entrance effect hard to describe using words. Then go to the BlankPage.xaml.cs file and change the OnNavigatedTo method and enter the following code:

protected async override void OnNavigatedTo(NavigationEventArgs e)

{

    this.items.ItemsSource = await GetFeed();

}

  

private async Task> GetFeed()

{

    try

    {

        Uri uri = new Uri("http://www.xamlplayground.org/syndication.axd");

  

        SyndicationClient client = new SyndicationClient();

  

        var feed = await client.RetrieveFeedAsync(uri);

  

        return feed.Items;

    }

    catch(Exception ex)

    {

        Windows.UI.Popups.MessageDialog dlg = new Windows.UI.Popups.MessageDialog(ex.Message);

        dlg.ShowAsync();

        throw ex;

    }

}

  

private void HandlePointerReleased(object sender, PointerEventArgs e)

{

    FrameworkElement border = sender as FrameworkElement;

  

    if (border != null)

    {

        SyndicationItem item = border.Tag as SyndicationItem;

        Windows.System.Launcher.LaunchUriAsync(new Uri(item.Id));

    }

}

The code here downloads the feed of my weblog at http://xamlplayground.org and then load it into the ItemsControl using the ItemsSource property. Pay attention to this code that use the awesome async and wait keywords. I will be back on asynchronous programming later in this series, but to full understand this code think at these keywords like your best friends to simplify the calling of asynchronous methods thanks to the integration of the Task Parallel Library. Take note also the that asynchronicity hightly pervades Metro applications and WinRT at a level you don't expect for sure.

After you completed the code in XAML and C# as I described you can run the application using F5 in Visual Studio. This task deployes the application to the AppContainer and runs it in debug mode like every other application you are habit to develop. Using the Metro UI of your operating system is probably good to appreciate the user interface aspects, but if you do not have a touch enabled monitor you can use the simulator. It allows to use the mouse like a finger on your touch device and includes the simulation of gestures like drag, hold, pinch and rotate but also a gps tool to inject locations in tested applications. It is not like having a true touch enabled device but you can spare a lot of money and start today your development.

Deploy and run

But, what it happens when the application is compiled and then deployed? Visual Studio is a good friend for the developer but it hides the details that are automatically accomplished when you hit F5. This is good for most of the times but annoying if you are curious to know the insides of Metro apps. I will start saying that your C# code is simply an abstraction created on top of WinRT, the core runtime that is shared between all the consumer languages (C#, Javascript, VB.NET and Managed C++). This abstraction is made to (luckily) hide the fact that under the hoods of WinRT there is still C++ and COM. These APIs are exposed to your C# code with a bunch of metadata files that "translates" them to the C# compiler like normal assembly references. These metadata containers are known as .winmd files.

So, when you hit F5 in Visual Studio the very first operation is to compile your C# code connecting all the referenced APIs and, the product of this compilation is a exe file paired with a AppManifest.xml file and all the resources (mostly are xaml and images). All these files are created in the bin directory related to the target configuration. See the image on the side for an example.

This is only the first stage. If you try to run the exe that is output of this stage you get an error stating that it can run only in the context of an AppContainer. This is because the compilation follows a new target output "appcontainerexe". So, after the compilation, the application needs to be packaged into a zip file (do you remember xap files?) called APPX before it is deployed. To create this package Visual Studio uses the MakeAppx.exe utility. You can manually pack or unpack appx using this executable from a command prompt targeting Visual Studio 2011.

The last step before the package is deployed is the signing process. For this purpose Visual Studio takes the certificate linked to the project and using the signtool.exe utility it signs the package then deployes it to the Metro AppContainer. To fully satisfy your curiosity you can manually accomplish this task using the Add-AppxPackage cmdlet included in powershell. Here is a reference to all the cmdlets available for common tasks: http://technet.microsoft.com/en-us/library/hh856045.aspx. For example running the Get-AppxPackage without parameters you will get the full listing of installed apps.

Moving forward to the next step

In this article I've introduced a numeber of features, some have been explained and other remains open for the next articles in this series. Now that that you have been introduced to the concepts of Metro an you wrote your first example it is time to take in serious consideration the programming aspects of a Metro application. In the next article I will introduce how to handle the layout and navigation. Layout is a very important aspect in Metro since it involves the orientation and the view states. Navigation let you expand your scope to multipage apps. For the moment enjoy yourself with attached code.

Windows 8 and the future of XAML: Part 5: More contracts in WinRT/Windows 8

editorial@silverlightshow.net (Gill Cleeren ) — Tue, 17 Apr 2012 09:04:00 GMT

In the previous article, we’ve introduced contracts in Windows 8. To quickly recapitulate, a contract allows Metro style applications in Windows 8 to communicate which each other or with Windows, without there being a hard reference between the participants of the communication. We’ve seen how the search contract allows applications to open themselves up to Windows so they can be search. There’s of course a contract that specifies how this searching is to be done: an application has to follow the rules specified in the contract so that Windows can communicate with the app in the way it needs to do.

In this article, we’ll dive some more in contracts, more specifically, the share contract.

The code for this article can be downloaded here.

Don't miss...

All SilverlightShow Ebooks

We love sharing

Sharing information has become something very trivial. Millions of sites out there have sharing options. “Share this on Twitter”, “Post on Facebook”, “Share via mail” and tons of other options have been popping up everywhere on the internet. Why? People love sharing. When they find something cool or they’ve just read the most interesting article, people want to share that with their contacts. Perhaps they want to broadcast it, using a social network. Or perhaps they want to target a specific contact and send the information via mail. Also, people sometimes want to share information related to something they have done or found inside an application. Perhaps they’ve achieved a high-score in some game and they want to brag with it. Or, they have found a great recipe in a cookbook application.

As you can see, sharing is all around us. One problem though is the fact that it’s sometimes still too hard for people to quickly share the information they want to share. As said, a lot of sites have embedded sharing icons. But are they always easy to find? Or what happens if you use a social network that the site you’re using isn’t listed? In that case you need to go and paste the link to the social networking site. Or as mentioned with the game high-scores: if the game doesn’t support sharing, how are you going to proof that you’ve really attained that high-score? Perhaps through a screenshot that you manually have to take, copy and paste to another site or application.

From a developer’s perspective as well, implementing the right sharing options can be hard. Sites offer often quite a few sharing options and maintaining all these external links can be a time-consuming task. What if tomorrow Twitter decides they want to implement that option differently? You as the developer need to go and change your implementation. And even then, perhaps the visitor of your site (or user from your application) uses some obscure social network (perhaps one that’s relevant in his home country) that you haven’t implemented…

Microsoft thought about offering an integrated sharing experience in Windows 8. It’s built into the system to offer both the end-user and the developer an easy and universal way of sharing information. This is the share contract.

The share contract

Through the share contract, Windows 8 makes it possible for 2 applications to share information with each other. The big plus for developers is that the 2 application don’t have to know each other. Sharing is always done between two applications: the share source and the share target. The share source will share information in a specific format defined by the contract; the share target will be getting that information through Windows. Since the information is in a specific format, the developer of the share target can anticipate on this and write his code based on this format.

Note that Windows is the mediator between the two apps. It handles the process of getting the information from the share source and getting it to the share target. It’s safe to say that we have some kind of pub/sub architecture.

Let’s take a look at the share contract in action. Below you can see the CookBook application. I’m not very much of a cook but I can image that people would love to share a recipe with someone via mail or perhaps on Facebook. From within the Cookbook application, we use the Charms (swipe in from the right or use Win + C) and select Share.

In most apps (at least from the list of apps currently available), it’s the developer who has chosen what we can share. In the CookBook app, it’s created this way as well. Of course, the developer of the application can also select to allow the user to specify the information he wants to share. After clicking/tapping on Share, the list of share targets appears. If you’ve read the previous article, it’s easy to see a similarity between this and the list of apps that registered for Search. Indeed, being a Share target is done through a declaration (as we’ll see later in this article). Based on the contents of the data being shared, this list is filtered automatically by Windows.

Now that the user made a selection, the share target app opens. In most cases, the app doesn’t open in its default view. Instead, it opens a specific view for handling the sharing operation. Below, we see the SDK Sample Target application accepting the share data.

Let’s now look at how we can create both an application that is a share source and an application that is a share target. We’ll start with the source.

Making your application a share source

Implementing the share contract as source in your application comes down to the following steps:

Via code, registering your application with the DataTransferManager.
Your application should register itself for the DataRequested event of the DataTransferManager.
Filling up the DataPackage when the above mentioned event is fired by Windows

Let’s look at these steps in a sample application. Create a new C# Metro style application and name it MyShareSource. The UI is nothing more than a basic Button that triggers the display of the Share UI. We are going to share basic text here. The UI of the app is shown below.

The registration with the DataTransferManager is done in a separate method named RegisterForSharing() which we’ve called from the constructor. We retrieve the DataTransferManager and then register for the DataRequested event. This event will be triggered when the user indicates he/she wants to share data from the application. This event is triggered by Windows; in fact, it is triggered by the Share Broker. The Share Broker is the component that sits between the source and the target applications. The first thing it does is handling the incoming sharing request (triggered by the user willing to share) and routing it to the source application. Below we see the RegisterForSharing() method.

public BlankPage()

    this.InitializeComponent();

    RegisterForSharing();

private void RegisterForSharing()

    DataTransferManager datatransferManager;

    datatransferManager = DataTransferManager.GetForCurrentView();

    datatransferManager.DataRequested += newTypedEventHandler(this.DataRequested);

In the DataRequested event, we create the something called the Data Package. This can be seen as a container for data; it contains the data that the source application shares with the target. It can contain several formats, varying from simple text and URIs to images and even custom data formats. The latter should mostly be used if you want to target a specific share target app (for example, you’ve created 2 Metro style apps between which you want to exchange data). You can add more than one type of format (for example, an image, text, URI and a custom format all at once). Based on the contents, the Share Broker will filter the list of target applications. Below is the code for the DataRequested event where we build up the Data Package.

void DataRequested(DataTransferManager sender, DataRequestedEventArgs e)

    e.Request.Data.Properties.Title = "Sample sharing source";

    e.Request.Data.Properties.Description = "This is some Lorem ipsum text";

    e.Request.Data.SetText(ShareContent.Text);

Run the application now and notice that when clicking, you’ll see that the Share UI is shown. If you have any apps registered as target, you can go ahead and share the text.

Now that we can share data, let’s see what we need to do to accept data.

Making your application a share target

We’ve seen that the Share Broker has asked the source application to create the Data Package. Once ready, it will inspect it and look at the different data types included. Based on this, the long list of all registered target apps is filtered to only those that can handle at least one of the included types. This is something we don’t have to worry about, it’s done for us.

When the user selects an application, the Share Broker will start the target app. It gets activated (remember the search activation from the last article) and gets passed in the data package (the target app gets read-access). The target app can (but is not forced) to send a completion so that the source app knows it can continue its normal run.

Notice that the sharing experience is in-context, meaning that the user doesn’t leave the application to go and copy/paste some information in another application!

Let’s see how we can make this working. Create a new Metro style app and name it MyShareTarget.

First, add a new Share Target Contract from the Project template window and name it SimpleShareTarget.

Adding this template does a number of things. First, it adds a declaration to your manifest: the Share Target declaration. Based on this, Windows will know that your application can be the target of a share operation. We need to specify the types of content, shared via the Data Package, we want to receive. Since we are sharing text in the MyShareSource application, we specify that as the only type here.

Secondly, your App.xaml.cs is modified: it overrides the OnShareTargetActivated, accepting a ShareTargetActivatedEventArgs instance. The code is shown below.

protected override void OnShareTargetActivated(Windows.ApplicationModel.Activation.ShareTargetActivatedEventArgs args)

    var shareTargetPage = new MyShareTarget.SimpleShareTarget();

    shareTargetPage.Activate(args);

Notice what this code does: it doesn’t load the default start page, instead it activates a new page of type SimpleShareTarget. The code for this Activate() method is also generated. We need to make some changes to it so that the shared text will also appear. Below is the code for this method.

public async void Activate(ShareTargetActivatedEventArgs args)

    this._shareOperation = args.ShareOperation;

    // Communicate metadata about the shared content through the view model

    var shareProperties = this._shareOperation.Data.Properties;

    var thumbnailImage = new BitmapImage();

    this.DefaultViewModel["Title"] = shareProperties.Title;

    this.DefaultViewModel["Description"] = shareProperties.Description;

    this.DefaultViewModel["Image"] = thumbnailImage;

    this.DefaultViewModel["Sharing"] = false;

    this.DefaultViewModel["ShowImage"] = false;

    if (_shareOperation.Data.Contains(StandardDataFormats.Text))

        this.DefaultViewModel["MainText"] = await _shareOperation.Data.GetTextAsync();

    Window.Current.Content = this;

    Window.Current.Activate();

    // Update the shared content's thumbnail image in the background

    if (shareProperties.Thumbnail != null)

        var stream = await shareProperties.Thumbnail.OpenReadAsync();

        thumbnailImage.SetSource(stream);

        this.DefaultViewModel["ShowImage"] = true;

We also need to update the UI for the SimpleShareTarget.xaml view so that we see the text.

<Grid Grid.Row="1" Grid.ColumnSpan="2">

    <TextBlock

        Text="{Binding MainText}"

        Foreground="{StaticResource ApplicationSecondaryTextBrush}"

        Style="{StaticResource BodyTextStyle}"/>

Grid>

Now run the MyShareTarget app. You won’t see anything, since now the BlankPage.xaml is running. Behind the scenes though, your app has registered itself to be a share target.

To see that in action, run the MyShareSource application again. Now when you click on Share, you’ll see your application listed. Select it and watch your content being shared with the target application!

Summary

In this article, we’ve taken a look at a second interesting contract in Windows 8: the sharing contract. It allows two applications to communicate with each other without there being a hard reference between the two.

In the next article, we’ll dive into the creation of tiles! Stay tuned!

About the author

Gill Cleeren is Microsoft Regional Director (www.theregion.com), Silverlight MVP (former ASP.NET MVP) and Telerik MVP. He lives in Belgium where he works as .NET architect at Ordina (http://www.ordina.be). Passionate about .NET, he’s always playing with the newest bits. In his role as Regional Director, Gill has given many sessions, webcasts and trainings on new as well as existing technologies, such as Silverlight, ASP.NET and WPF at conferences including TechEd Berlin 2010, TechDays Belgium – Switzerland - Sweden, DevDays NL, NDC Oslo Norway, SQL Server Saturday Switserland, Spring Conference UK, Silverlight Roadshow in Sweden, Telerik RoadShow UK… He’s also the author of many articles in various developer magazines and for SilverlightShow.net and he organizes the yearly Community Day event in Belgium. He also leads Visug (www.visug.be), the largest .NET user group in Belgium. Gill recently published his first book: “Silverlight 4 Data and Services Cookbook” (Packt Publishing). His second book, Silverlight 5 Data and Services Cookbook will be released early 2012. You can find his blog at www.snowball.be.

Twitter: @gillcleeren

Windows 8 and the future of XAML: Part 4: Contracts in WinRT/Windows 8

editorial@silverlightshow.net (Gill Cleeren ) — Tue, 10 Apr 2012 00:40:05 GMT

In the previous article of this series, we wrote our first lines of code for WinRT. The main message was that although WinRT is a new API, we can still use our familiar languages to create Metro style applications. We have used the XAML/C# combination, but it’s perfectly possible to use XAML/VB or XAML/C++ as well. We’ll be using more of the API in the coming articles but in this article, we’ll focus on some specifics around contracts, more specifically, the Search contract. Contracts enable Metro applications to communicate with each other or with Windows itself without there being a hard reference in place.

The code for this article is available here.

Contracts: what are they

You are probably familiar with the term and meaning of a contract. It’s basically an agreement between two parties where they agree on some mutual aspect.

Don't miss...

All SilverlightShow Ebooks

When you use an interface, you’re using a software contract: your interface defines a contract that classes implementing this interface need to oblige to. If they don’t, they are breaking the contract, hence the functionality is not guaranteed.

Windows 8 defines contracts as well. Like with other contracts, they are a way of making sure that the users of the contract will oblige certain rules. In the case of Windows 8, the participants for the contract are the apps: some contracts take place between two applications, mediated by Windows itself, others are between an app and Windows.

Windows 8 defines quite a few contracts. The most important ones are the search contract, the share contract, the settings contract and the App-To-App picker contract. There are more contracts available, but when you start with implementing these in your application, you’ll definitely be adding a good experience to your app. For the other contracts, head over to this page on MSDN.

Now that we have a basic understanding of what a contract is, let’s take a look at how the end-user will experience these contracts. We’ll start our exploration by looking at the search contract.

The Search contract from the end-user perspective

Searching for information is very important in today’s world. We are constantly searching on the web but also locally on our machine/device. During a regular day, I often enter a search query in my Outlook search bar (thank God it still likes searching over 15GB of mails…) or I enter a short string as search query in my start menu. Quite often, I (and countless of users worldwide) rely on search to quickly find the information we need on our machine without remembering where we put it in the first place. The same thing happens when I need to find something in my control panel: when I look for the administrative tools, I don’t start clicking my way to them. Instead, I enter a query and find them, probably faster than when I would have started navigating.

Windows 8 is built around apps. These apps have a lot of information available as well. This information is by default reachable by opening the app and then searching from within the app.

In Windows 8, Microsoft has built in an integrated way of searching. When we enter a search query when we are in the Metro environment, Windows will by default search for apps, settings and files as can be seen on the image below. Note that this search is conducted from within Windows itself (you’ll see why this is important in just a second).

When we select any of the top 3 options, we can see that the list of results is being shown. Here we see results for apps.

Below we see results for files being shown.

Down at the bottom of the search pane, we see a list of apps. This list is composed out of all the apps that have implemented the search contract. To do so, they have made it clear through a declaration (we’ll see what exactly is a declaration later in this article) that they can be searched from within Windows. When selecting an app (here we have used the Store app), the app will open and we are immediately transported to the search results page. Below, you can see the Store app showing search results. The app was activated through search.

With this app open, we can search again. Notice now that at the top, we are searching within the app. Searching is made consistent all throughout Windows. The active app can now send query suggestions and result suggestions. Query suggestions are returned by the running application to help the end user in finding what he’s probably looking for. Result suggestions are more specific in that they also contain an icon of the search result. Both of these can be implemented through code inside your application.

Below you can see result suggestions.

Let’s now take a look at how we can build an app that implements the search contract.

The Search contract from the developer perspective

If we think of the possible ways of searching we just saw above, we can see the following items to be implemented by the developer to make his application implement the search contract:

Declare that the application can be search through a declaration
Write code that reacts to the application being activated ( while it wasn’t running) for search and show the results of that search query
Write code to accept a search query while it was already running
Send search suggestions and query suggestions to Windows to be shown in the search pane while it’s running

We’ll now build a sample application that implements the search contract in full in the steps below. Create a new Windows 8 Metro style application and name it SearchTest.

Adding the declaration for search

Metro style apps are using a specific way of letting Windows know about their intentions and capabilities once installed on a user’s device.

By adding one or more capabilities, they are saying that they need to use a specific API for them to run properly on the system. For example, when an application needs to use the webcam, the developer needs to check the Webcam capability. This will then be shown in the Windows store so that the end user can decide on not using the application. Also, while running, the capabilities are checked by the runtime broker.

A declaration is different. It’s a way for the application to say to Windows that it will take part in some operations or contracts. One of the possible declarations is search. By enabling the search declaration, Windows will show your application in the list of possible search targets. We’ll see other declarations being used later in this article series.

We can enable the declaration in 2 ways. To do things manually, go to the manifest editor by double clicking on the Package.appxmanifest. In the Declarations tab, check Search as shown below.

A better way that will save us quite some work is adding a Search contract to the application. To do so, in the Add new item dialog, select Search contract. Files are being updated and added as well as the declaration being enabled for you.

To test things out, let’s run the application now. When selecting the Search charm on the right, the Search pane pops up. Notice that it’s now scoped to search the current running application.

Also, when searching from within Windows, the application is now shown in the list.

Both cases of searching don’t work yet (which is quite logical since we haven’t implemented searching yet). Let’s work on that!

React to search activation

Another things that’s done automatically by the Search contract template, is adding code in the OnSearchActivated() in the App.xaml.cs. Before we look at the code, a word on activation.

A Metro application in Windows 8 can be “started” in several ways. The most normal way is starting the app by tapping/clicking the tile. This triggers the OnLaunched() to be called in the App.xaml.cs. When the app isn’t running though and the user selects the app as the target for his/her search query, the application also executes the OnSearchActivated(). Effectively, the application gets activated for search. Through this event handler, the search query entered by the user is also passed in via the SearchActivatedEventArgs instance. This way, we know what the user wanted to find in our application. The code generated by the template is shown below.

protected override voidOnSearchActivated(Windows.ApplicationModel.Activation.SearchActivatedEventArgsargs)

    SearchTest.MainSearch.Activate(args.QueryText);

    //TODO: Move the following code to OnLaunched to speed up searches when your

    //       application is already running:

    //Windows.ApplicationModel.Search.SearchPane.GetForCurrentView().QuerySubmitted+=

    //(sender,queryArgs)=>

//{

    //    SearchTest.MainSearch.Activate(queryArgs.QueryText);

    //};

In the first line of the code, what happens is that MainSearch.Activate() event is called. This is code, generated in the MainSearch.xaml.cs (I called my search result page MainSearch here, you can give it any name of course) sets an instance of the MainSearch page through navigation of the application frame as the content of the application. This way, when the application is activated for search, the search results page is navigated to. If we start the application now again, go to Metro, enter a search query and target our application, the application activates and automatically goes to the search result page as you can see below.

In the commented-out code, we see that VS11 is pointing us to the next topic: reacting to queries being submitted with the application running.

Reacting to submitting queries

When the application is running as the main foreground application (that does not include running in snap mode), the user can search by using the search charm the current application. To do so, we as developers need to subscribe to the QuerySubmitted() event. In the constructor of the BlankPage.xaml.cs, we can do so using the code below.

private SearchPanesearchPane;

public BlankPage()

    this.InitializeComponent();

    //Get SearchPane object

    this.searchPane=SearchPane.GetForCurrentView();

    //Register for SearchPaneQuerySubmitted event

    this.searchPane.QuerySubmitted+=searchPane_QuerySubmitted;

When we run the application now and hit search (the search is of course scoped to the application since it has the search declaration), the entered query is returned to our application. We are automatically redirected to the event handler of the QuerySubmitted event. In there, we can get hold of the value through the SearchPaneQuerySubmittedEventArgs instance that is passed in, as shown below.

void searchPane_QuerySubmitted(SearchPanesender,SearchPaneQuerySubmittedEventArgsargs)

    SearchResultTextBlock.Text="You've searched for: " + args.QueryText;

Of course, in a real-life application, we can write code to perform a search (perhaps by calling a service) and then redirect the user to the search results page.

Sending query suggestions

An application that is running as the main application in the foreground can send query and result suggestions to Windows. Windows will show a maximum of 5. Note that by default, Windows will also show a search history. This comes for free; we don’t have to develop anything for this. Let’s see how we can make search suggestions work.

The first thing we need to do is registering for the SuggestionRequested event coming in. This event will be raised by Windows when the user starts typing in the search box.

this.searchPane.SuggestionsRequested += searchPane_SuggestionsRequested;

When the event is effectively raised, we need to send suggestions. Just like with queries, the results can come from a service. In this sample code, we have hard-coded the list of possible suggestions. In the SearchPageSuggestionsRequestedEventArgs instance, we add our suggestions to the SearchSuggestionCollection. This list is then shown by Windows. Every time the user types something, this code is again executed. Therefore, be cautious what you place in there!

void searchPane_SuggestionsRequested(SearchPane sender, SearchPaneSuggestionsRequestedEventArgs args)

    string[] suggestions={"AAA","AAABBB","AAACCC","AAADDD","EEE","FFF","GGG","HHH","III","JJJ","KKK","LLL","MMM","NNN","OOO","PPP","QQQ"};

    foreach(string suggestion in suggestions)

        if(suggestion.StartsWith(args.QueryText, StringComparison.CurrentCultureIgnoreCase))

            args.Request.SearchSuggestionCollection.AppendQuerySuggestion(suggestion);

        if(args.Request.SearchSuggestionCollection.Size >= 5)

            break;

Below we can see the result of the search suggestions being sent by our application.

We have successfully implemented the Search contract in our application.

Summary

Implementing the right contracts in your application is vital to its success. The user will come to expect that applications work as prescribed by the OS. In this sample, we saw how we could use WinRT code to implement the search contract in our applications. In the next article, we’ll see how to implement the share contract.

About the author

Gill Cleeren is Microsoft Regional Director (www.theregion.com), Silverlight MVP (former ASP.NET MVP) and Telerik MVP. He lives in Belgium where he works as .NET architect at Ordina (http://www.ordina.be/). Passionate about .NET, he’s always playing with the newest bits. In his role as Regional Director, Gill has given many sessions, webcasts and trainings on new as well as existing technologies, such as Silverlight, ASP.NET and WPF at conferences including TechEd Berlin 2010, TechDays Belgium – Switzerland - Sweden, DevDays NL, NDC Oslo Norway, SQL Server Saturday Switserland, Spring Conference UK, Silverlight Roadshow in Sweden, Telerik RoadShow UK… He’s also the author of many articles in various developer magazines and for SilverlightShow.net and he organizes the yearly Community Day event in Belgium. He also leads Visug (www.visug.be), the largest .NET user group in Belgium. Gill recently published his first book: “Silverlight 4 Data and Services Cookbook” (Packt Publishing). His second book, Silverlight 5 Data and Services Cookbook will be released early 2012. You can find his blog at www.snowball.be.

Twitter: @gillcleeren

Creating the SilverlightShow Windows Phone App: part 1

editorial@silverlightshow.net (Peter Kuhn ) — Wed, 21 Mar 2012 10:06:00 GMT

At the end of February, the official SilverlightShow Windows Phone app has been accepted into the Marketplace. The app gives you access to some of the content of this website, including news, articles and events, and is completely free for use (also ad-free!). Some of the convenience features include the possibility to create reminders for upcoming events and webinars directly on your phone, to get notifications about new content in the form of live tiles, and to maintain a local list of favorites that allows you to permanently store items for later reading. If you haven’t checked out the app yet, you can find more details and a quick intro video here, or visit its Marketplace page here.

More resources...

All SilverlightShow Ebooks

The creation of the app was an interesting experience, because unlike other phone projects I had worked on in the past, this one wasn’t a greenfield development. Obviously the SilverlightShow portal already existed, had a long-established production infrastructure and already a lot of existing content available.

During the course of developing the application, we thought it would be a nice idea to share some of the experiences with the SilverlightShow readers, because it is a nice example of discussing a real-world application, with real-world problems (and solutions :)). The idea of this mini-series of articles was born, where you will discover both details about the development process as well as some technical challenges we came across. This first part will deal with the process itself, so prepare for some more text and less code (read: no code) than usual.

Prerequisites

With almost every piece of software you are developing, you usually (hopefully?) don’t start coding right away, but begin with some sort of requirements engineering, and then create the concept of your software. You may not be aware of the order and existence of these actions if you’re only a hobby programmer, or you may not be familiar with the formal terms and definitions, but even if you’re only creating a really small app, these steps are part of the development process in one form or the other. We can sum up these two elements by two simple questions:

What is it our software is intended to do?
How shall our software achieve this goal?

As I wrote, the details on how sophisticated you analyze these questions and the ways you maintain the results of this analysis is a direct result of several factors, like the development process you intend to use, your personal experience, external requirements, and the complexity of the project you’re taking on. Sometimes all this information may only exist in your head, in other situations it will result in huge documents being produced upfront.

When you’re developing an app based on an already existing eco system, there are additional steps you need to perform. In particular, you have to do an analysis of the existing infrastructure to see what parts you can make use of and integrate with your own development, how you can achieve this, whether other parts require work or need to change, and what features you rely on are missing completely. Sometimes, the intended requirements of the result even depend on what’s possible to achieve with a reasonable amount of effort, taking the given system into consideration. This is how extending an existing system can be both good and evil: it may speed up your development when you’re able to reuse components that are already available, but it may also limit your possibilities, and even bring up whole new problems that you wouldn’t have to face if you started from scratch.

The Existing Infrastructure

Building an app for the SilverlightShow portal wasn’t any different in this. The web site obviously existed already, and a great variety of people, consisting of both the SilverlightShow staff as well as external authors, actively contributes to the content. To allow comfortable and easy editing, the SilverlightShow team has put a great amount of work into integrating the site nicely with WYSIWYG tools, especially Windows Live Writer. As a result, the content available on the site is maintained in a blog-like manner, and stored as rich content in a corresponding data store.

On the consuming side of things, we have the web user interface you’re directly interacting with at the moment, but there are other options to access the content of the site which are optimized for machine/automated access. This includes several RSS feeds that can be consumed by special reader software, so you can access the site through your favorite client and presentation software. Some other areas of the site also offer specialized web services tailored for being accessed by Silverlight clients.

Since both working with the site itself as well as the authoring of content is a well-known, proven process that has evolved and been established over a longer period of time, it was a logical consequence to put the Windows Phone app on top of this existing infrastructure, and introduce as little changes as possible to the existing system. This was one of the first and most central requirements established in the development process of the app.

Requirements

Starting with the above information, we established a set of features we wanted to see in the app. In particular, we wanted to expose the most popular content of the site (news, articles, events/webinars), and at the same time make sure that we blend in nicely with the phone platform, by implementing typical features the user would expect: notifications, reminders, and a Metro-style native experience.

Concept

If you carefully read through the requirements and the result of the infrastructure analysis listed above, then maybe you can see how a lot of this more or less determined fundamental parts of the concept and later implementation already. Let’s pick some of the more interesting details, all of which will be covered over the course of this mini-series:

Like said, we wanted to make use of the existing system and introduce as little changes as possible. A logical consequence of this was that we would make use of the already existing rich content directly if possible, so both the web interface and phone app could work directly on the same data.
Another logical step of this was to use the already existing RSS feeds to get access to that data, instead of creating a whole new solution that would exist in parallel (and require additional implementation and maintenance costs).
Consequently, that same premise also affected features of the app you would not expect or think about at first. Take the notifications requirement, for example. Implementing a full-blown push notification solution would’ve required setting up quite some additional server infrastructure and server-side logic, something that we didn’t want to do. Eventually, this resulted in the decision to use a local background agent to add the notification features to the app.
Since we wanted to create a nice and smooth Metro-style experience with the app, we ruled out alternate ways of creating such an accompanying app pretty quickly. For example, I have seen quite some “wrapper” apps in the Marketplace that are using a web browser control to display a mobile version of a web site – simple, quick to set up, but in no way living up to the expectations of the SilverlightShow users and definitely not what we were looking for. We wanted to present a rich, familiar look and feel based on a native Silverlight implementation. And, after all, this is SilverlightShow.net, not WebBrowserControlWrapper.net :-).

Prototype

In some areas, we weren’t sure whether it really would be possible to achieve good results in terms of performance and user experience by using the concept we created. This is a common problem when you’re developing software: sometimes the complexity is just too high, or the involved technology is not understood well enough or has too many dependencies to allow for a definite answer and final design just by thinking about it in theory. In these cases, the way you should probably take into consideration is to create a prototype. This is a small piece of software that takes on the most pressing aspects of your concept and delivers a proof that what you intend to do will work as expected, or can work by modifying some details of the concept or add tuning – hence the naming “proof of concept”.

This is exactly what we did with some of the fundamental topics I have listed above. The small prototype allowed us to eliminate some mistakes in the concept that had slipped through, and to identify other issues we would be running into later on, which we now could plan for accordingly, early in the process. This very short phase of the development process helped enormously with clarifying some details and laying out the foundation and basic structure of the app.

By the way, the result of creating a prototype can also be that what you intended to do is not feasible – you should not think of a situation like that as a defeat, but a huge success. Imagine the wasted effort if you discovered the dead end only months after starting development. It’s much better to return to the drawing board early.

Implementation

For a passionate developer, starting with the actual implementation is the most exciting moment during a development process like this, after having built up all the excitement during the previous phases. And if you have worked on some projects like that before, you know that during implementation you get to crack the real problems, low-level, that nobody anticipated when they wrote the specs. Even when you have used advanced techniques like prototyping you will run into those pesky little details in your daily work that you hate, curse, and love to beat. So did we during the implementation phase of the app – some of these details and experiences will be covered in the next part of the series, and it will become a lot more technical then.

Conclusion

I didn’t go into the details of specific techniques of requirements engineering, creating specifications or even the implementation process itself. This of course exceeds the scope of this article. But whether you’re using agile processes or classic approaches doesn’t matter. What I wanted to show you is that things you may know from your day job can also be applied to this much smaller scale of creating relatively simple phone apps, and that it in fact helps with being more effective. I hope you enjoyed this first part, and are looking forward to dive into some of the technical problems we were facing next time.

SilverlightShow Interview with Tim Huckaby - Keynote Speaker at Visual Studio Live! Las Vegas 5-day Conference

editorial@silverlightshow.net (Silverlight Show ) — Mon, 05 Mar 2012 14:27:00 GMT

In this SilverlightShow interview, we talk with Tim Huckaby – keynote speaker on the 3^rd day of Visual Studio Live! Las Vegas conference (March 26-30, 2012). The keynote will be focused on The Future of User Experience: The Natural User Interface (NUI).
As we have announced, SilverlightShow is the Social Media Premiere Partner for this conference and we are sending one SilverlightShow member to this conference for free.

About Tim: Tim Huckaby is focused on the Natural User Interface (NUI)- Touch, Gesture, and Neural in Rich Client Technologies like HTML5, Silverlight, WPF, & IOS on a broad spectrum of devices that include computers, tablets, the Surface, the Kinect, and mobile devices.

Tim has been called a “Pioneer of the Smart Client Revolution” by the press. Tim has been awarded many times for the highest rated technical presentations and keynotes for Microsoft and many other technology conferences around the world. Tim is consistently rated in the top 10% of all speakers at these events. Having worked for or with Microsoft for over 20 years, Tim has been on stage with, and done numerous keynote demos for many Microsoft executives including Bill Gates and Steve Ballmer.

Tim founded InterKnowlogy, experts in .NET and Microsoft Platforms in 1999 and Actus Interactive Software in 2011 and has over 30 years of experience including serving on a Microsoft product team as a development lead on an architecture team on a Server Product. Tim is a Microsoft Regional Director, a Microsoft MVP and serves on many Microsoft councils and boards like the Microsoft .NET Partner Advisory Council.

SilverlightShow: Hi Tim! Your upcoming keynote at Visual Studio Live!Las Vegas is one of the most awaited ones, according to the conference organizers. What aspect or direction of development of Natural User Experience (NUI) is currently important for developers, what’s bringing them to your keynote?

TH: Well, thanks for the kind words. Clearly the conference organizers are friends of mine. I really am looking forward to doing this keynote for numerous reasons. Firstly, because I will strive to make the message clear: You may not be doing natural user interfaces in your software solutions now, but you will be. It’s just a matter of time. I reinforce that with demos of some of the most compelling NUI software out there. And then I will speculate about the future of NUI with more compelling use cases. I bring it back to reality by going through the past 30 years of user interfaces. I was there when the mouse came out. I remember thinking how unnatural is was to take my right hand off the keyboard and grab the mouse. Now we consider that second nature. I will argue that in a timely manner we’ll say the same thing about waving at software…using simple gestures to manipulate the interface.

SilverlightShow: What are the main difficulties developers have when building NUI in their applications, and how will the technology evolve to allow easier creation and integration of such interfaces?

TH: Great question. I find it so interesting that the challenges of NUI software are not as much technical as they are of usability. Let’s face it. CRUD applications are simply not a good use case for NUI. Nothing that I know of can produce text as quickly as a keyboard. So finding the right use cases for touching, or gesturing or voice controlled software is the real challenge. It’s also very interesting to me that Microsoft has pretty much dominated and paved the way for multi-touch support in .NET for years. Yet, it wasn’t until that magically expensive Apple device to make multi-touch a mainstream way to use software. Now with the Kinect for Windows SDK shipping we have an extremely powerful and compelling dev stack for NUI based applications.

SilverlightShow: NUI is already available in Win8, mobile platforms, Kinect and others. On which platforms do you think it will have the biggest potential to evolve, to become a standard, and push related innovations?

TH: Let’s add Windows 7 in all forms, and the Microsoft Surface to your list. And then we can say on the Microsoft and IOS platforms we will have multi-touch covered end to end. What I tell developers is that from here on in you are going to get multi-touch capability in the hardware whether you want it or not. So, now is the time to start leveraging it. Kinect clearly is an awesome differentiator on the Microsoft side. But, what is most exciting to me, and is really not well known, is that the HTML5 spec calls for multi-touch capability and programmatic access. In that respect the Multi-touch part of NUI truly can be called a standard.

SilverlightShow: Can you name 1 or 2 applications that are best using NUI at this current moment, and why?

TH: Well, let’s be clear. I’m a Kinect fanatic. I have not seen anything so powerful and cool from Microsoft in years. So, that being said, the work we do in health care and life sciences is truly futuristic cool because of the complexity, the 3d, and the gesture and voice controlled interfaces with Kinect. I’ll be demoing a good number of these apps in my keynote. On the other side of the spectrum of Kinect is simple gesture based interfaces to control an interactive kiosk. In many environments, especially in a public place you do not want to touch anything. So a simple wave of the right hand from right to left is a very legitimate use case for next. An important part of my professional life right now is interactive kiosk and active digital signage solutions, and with Actus Interactive software we plan to rock that world. In fact, we already are.

SilverlightShow: How do you see the future of NUI? In which areas of life should we also expect to see NUIs very soon?

TH: In the keynote I will talk about the future. And I will show off some of the innovative work that is being done now for the future of NUI. It’s high tech stuff: it’s holodeck like software and it’s neural interfaces to software. Imagine a world where you think at software to use it. it’s not so far in the future. And Microsoft research is already doing proofs of concepts in totally virtual environments. Crazy exciting stuff.

SilverlightShow: How and where may conference attendees meet you during the conference?

TH: I just love talking to technologists… not just developers, but everyone involved in the computing lifecycle. So, it is absolutely my pleasure to hang out and talk to as many VSLive attendees as possible.

Thanks Tim for this interview! Wish you, as well as our free pass winner a great conference event!

Do you know about applications that give an outstanding example of successful use of Natural User Interfaces? Share it with us by commenting below this interview!

SilverlightShow Interview with Billy Hollis - Presenter in a Visual Studio Live! Las Vegas Workshop

editorial@silverlightshow.net (Silverlight Show ) — Tue, 28 Feb 2012 13:44:14 GMT

In this SilverlightShow interview, we talk with Billy Hollis – the presenter at the most-awaited workshop at Visual Studio Live! Las Vegas conference (March 26-30, 2012) - ‘Creating Today’s User Experiences - An Entry Point for Developers’.
As we have announced, SilverlightShow is the Social Media Premiere Partner for this conference and we’ll be sending one SilverlightShow member to this conference for free.

About Billy: Billy Hollis is an author and software developer from Nashville, Tennessee. Billy is co-author of the first book ever published on Visual Basic .NET, VB .NET Programming on the Public Beta. He has written many articles, and is a frequent speaker at conferences. He is the Regional Director of Developer Relations in Nashville for Microsoft, and runs a consulting company focusing on user experience design and rich client applications. You can visit his website at: www.billyhollis.com

SilverlightShow: Hi Billy! According to info from the kitchen of Visual Studio Live!Las Vegas, your workshop has so far attracted most interest by the conference registrants. The topic of the workshop is: ‘Creating Today’s User Experiences - An Entry Point for Developers’. Why do you think user experience has become an important topic for developers right now? Isn’t it better for developers to just leave this work to a UX expert, and focus on development only?

BH: The biggest reason developers are shifting focus to user experience is simple. Apple is kicking us to the curb in some key spaces. Executives are demanding, for example, that corporate apps be made available on iPads, and the users just expect the experience on such devices to be excellent.

I believe that the notion that developers can delegate user experience design to a UX expert, and then just stop worrying about it, is just not feasible for most applications. First, such UX experts are hard to find. If you’re in, say, Springfield, Illinois, where do you get one? Certainly small to medium teams often can’t find or can’t afford such help. Second, designing great user experience requires a deep understanding of the application domain. Developers usually have that, and pure designers generally don’t. Designers do a lot better in the consumer space, because they are themselves consumers, but it’s much harder for them to put themselves inside the mind of a typical corporate application user.

Finally, I think the best designs, particularly for complex business applications, come through collaboration. Even if a designer is involved, the end product will be better if there is collaboration with developers, and developers will be better collaborators if they understand the principles and speak the language of design.

SilverlightShow: What are some of the key user experience concepts you plan to touch upon in this workshop, why should attendees join it?

BH: I’ll be covering over two dozen key concepts, out of a universe of about 150 design principles that I’ve studied in the past five years. The ones I zero in on are the ones that have helped me most in doing designs for my own clients.

I cover them in families of related concepts. One family concerns how users efficiently select options and navigate through an application. It includes Hick’s Law, inattentional blindness, and gestalt principles, among others. These principles are mostly concerned with how the user’s visual and cognitive systems work. Then there’s another family of design principles based on the human preference for natural things. It includes whitespace, proper use of gradients and animation, layering to get 3D effects, and so forth.

Then I talk some about purely aesthetic concepts, plus ideas such as mapping and affordances. I also discuss the need to use context to decide good designs, because sometimes design principles involve tradeoffs, and the right balance depends on circumstances.

SilverlightShow: That sounds like a lot of material! Can attendees really learn all that in one day?

BH: It is a lot, and that’s why I used the term “entry point” in the workshop title. I can’t teach everything, but I can build a skeleton that will enable attendees to keep learning on their own.

But I think it’s quite true that they would walk out with their heads spinning if I just talked all day. So instead, we do regular exercises to help them apply the concepts themselves, and I require class interaction at certain points. That makes it real to them.

Some exercises are just a minute or two – for example, analyzing an elevator panel to see what’s wrong with it. Others take as long as twenty minutes. I think there are about ten or twelve exercises scattered throughout the day. In that sense, it really is a workshop, not a day long technical lecture session.

SilverlightShow: What knowledge do you expect attendees to gain after this workshop, and how would you advise them to continue their education?

BH: First, they should walk out with a sense of how important this material is. In fact, I actually scare them at certain points. I’ve seen an entire dominant ecosystem of this industry become irrelevant in ten years – IBM, from 1985 to 1995. I don’t want that to happen to the Microsoft side of the industry, and meeting rising user expectations is, I think, one of the essential foundations to prevent that.

Then I hope they find out if this kind of work resonates with them. I believe almost all developers can do a lot better in user experience design than they realize, but some just don’t take to it. Others get really lit up about it.

Finally, they will have learned the raw essentials, and be directed to resources that will take them further. If they really like this area, they’ll be studying it for years. But I think they can take some of the basic ideas out of the workshop and begin applying them in their own projects the day they get back home.

SilverlightShow: What is the trickiest part in building user interfaces, where do you think developers stumble most?

BH: The trickiest part by far is breaking out of the ruts they’ve formed from old technologies. Modern technologies, such as HTML5 and XAML, give us enormous freedom in the way we interact with the user. But most developers have ingrained habits to just divide the screen up into rectangles and pour something into each one. Some of my exercises are designed, in fact, primarily to force them out of their ruts.

Another tricky part is finding the right level of understanding of the problem space before beginning design. With our current emphasis on agile, a lot of developers interpret that to mean they need to get down to coding really early in the process, and figure out requirements as they go. For certain phases of development, that works OK, but to come up with, say, the central navigation theme for the entire application, it doesn’t. A certain breadth of understanding of the problem space is needed to do that, and even then usually some experimentation and user feedback is needed to get a good design.

SilverlightShow: Most SilverlightShow community members are already quite fluent with Windows Phone development and have created one or more applications for this platform. In your opinion, to what extent does user experience contribute to the success of such an application, compared to functionality?

BH: Functionality comes first, in the sense that no one will use an application without functionality they need, regardless of how pretty or well designed it is.

However, if you assume that most developers can get the functionality part figured out, then user experience becomes the differentiator. User experience also weighs as heavy as functionality on how much value the user perceives in the typical application. Plus, to be blunt, really bad user experience repels users, especially when they’ve become accustomed to better UX in other apps.

I like to put it like this. For most of our careers, success has been measured by our ability to make something possible. That’s not enough anymore. Now, we are also expected to make it easy.

SilverlightShow: How and where may conference attendees meet you during the conference (outside the workshop)?

BH: Oh, I’m pretty easy to find. I spend a fair amount of time in the areas outside sessions, lounging around, and I’m there specifically for people to come up and talk if they need to. I usually come to lunch too, even though I don’t usually eat lunch, and anyone who sees me wandering through the lunch hall is welcome to flag me down for a discussion. Finally, I’ll be MC at the evening event, Wild Wednesday. I do about twenty minutes of comedy ranting there, plus draw the tickets to give away prizes and such. I’m usually available afterwards for a conversation or two.

Thanks Billy for this interview! Wish you, as well as our free pass winner, a successful workshop and conference event!

Do you, as a developer, manage to create good user experience for your apps, what are the difficulties you face? Feel free to comment below this interview.

Windows Phone + SignalR = Awesome Possibilities!

editorial@silverlightshow.net (Samidip Basu ) — Mon, 27 Feb 2012 04:29:00 GMT

Real-time communication. Many software applications on variety of platforms & form factors have a genuine need for it. But persistent networks, real-time connectivity & asynchrony continue to challenge us developers in building such applications. Is there a silver lining? Could we have near-real-time communication in our mobile apps? Imagine the possibilities.

Download Source Code

Live Demo

Now, let’s do something a little fun before we get to the crux of what this article is about.

Don't miss...

All SilverlightShow Ebooks

How about a live demo of the sample application in action? Works from anywhere on earth with a data connection; in fact, more & diverse the user demographics, the merrier. Let’s do this:

This demo will work with your Windows Phone emulator; but better with your unlocked Windows Phone that can side-load apps, given XAP or source code.
Download the Source Code & extract the Windows Phone solution.
Load in Visual Studio, build & Deploy to emulator/phone.
The sample Windows Phone app essentially shares your location & connects you to a backend SignalR server for continuous real-time chat.
Go to http://signalrserver.cloudapp.net/ and keep it open.
Fire up the app and give yourself a name for the Chatroom.
Share your location & join the fun.
If on a Windows Phone, you should see a pushpin on the Bing map for your actual location (if allowed by your settings). On the emulator, you’ll start out at the mothership, that is, Seattle. Feel free to use the location simulator to fake your position.
See yourself pop up in the chat dialog box?
Now fire away what you want to say .. no profanity please.
See what you say show up in your phone’s chat dialog & on the Server almost immediately? Fun, eh?
Exit the chatroom and you’ll see yourself leave, along with a disappearing pushpin on map.

The result should be something like this:

I’m hoping if we keep the site running, we can see Pushpins show up on different parts of the world map; the Bing map used should zoom in & out to accommodate all pins. Having said that, the server side code isn’t hosted on massive hardware. I’ll try to keep it up; but if load or other issues force it down, please feel free unpack the server code & run it locally. It is a simple MVC3 app that should run just fine on your machine. Only change you would have to do is to point your Windows Phone app to Localhost, instead of the above server. So, let’s hope the site stays up & we can see folks from different places show up on live map & chatroom.

Introduction

SignalR is an async persistent connection library for client-server communication that aids in building real-time, multi-user connected applications across multiple platforms. The connection between clients & server is persisted over best possible transport mechanism, which could be a combination of long polling, periodic polling & sockets. The point is the transport layer is abstracted away to provide a seamless persistent connection for ease of development in making connected applications across the web, mobile & other form factors.

SignalR was started by Damian Edwards & David Fowler from the ASP.NET team and is now an OSS on GitHub (https://github.com/SignalR/SignalR). Want to chat with these & other cool folks working with SignalR? Join the conversations @ http://jabbr.net/#/rooms/signalr. The easiest way to start using SignalR is to utilize the Nugets as need in your application. They are:

SignalR - Package for SignalR.Server and SignalR.Js
SignalR.Server - Server components needed for SignalR endpoints
SignalR.Js - Javascript client for SignalR
SignalR.Client - .NET client for SignalR
SignalR.Ninject - Ninject dependeny resolver for SignalR

These can be incorporated in your project by using the visual Nuget Library Manager or the command-based Management console. This one statement gets you all dependencies:

While there are other technologies that have tried to solve the real-time communication problem, like Socket.IO or HTML5 WebSockets, few do it as simply as SignalR and support cross-platform between the web and mobile platforms like Windows Phone, iOS & Android (through Mono). While the low-level PersistenceConnection class might give you more control, most times the abstraction over it called the Hub class & your implementation of it, will provide easy persistence between client & Server. Want to learn more about SignalR? Try these wonderful posts:

The Sample

So, having learnt a little about SignalR, do you think it would work with and have applications in Windows Phone development? Absolutely! Real-time communication with a backend server on a personal device like the Windows Phone has potentially tons of ways to leverage the technology in Apps. Allow me to show you two here – mapping Windows Phone App users across the globe and real-time chat dialog between multiple Windows Phones & the web. The rest is up to your imagination ..

The Server

You obviously have choices here. I started with a default MVC3 web application; but wanted to change the look to showing mapping & chat dialog. First up, let’s get it ready to be a SignalR server. Here’s how to add the Nuget package:

With that, we know what a Hub is. Let us extend it to make something our own. We essentially want to uniquely keep track of Windows Phone users using our app; so let’s define a class for the phone clients:

// Individual Phone clients.

public class PhoneClient

{

    public string PhoneClientId { get; set; }

    public float Latitude { get; set; }

    public float Longitude { get; set; }

}

Next, let’s add functionality to add phone clients to Hub, disconnect & broadcast messages to all:

// The Hub of communication.

public class MessagingHub : Hub

{

    private static List PhoneClientList = new List();        

  

    public void JoinFromPhone(string phoneID, float latitude, float longitude)

    {

        PhoneClient phoneClientToAdd = new PhoneClient();

        phoneClientToAdd.PhoneClientId = phoneID;            

        phoneClientToAdd.Latitude = latitude;

        phoneClientToAdd.Longitude = longitude;

  

        PhoneClientList.Add(phoneClientToAdd);

        Clients.addClient(phoneClientToAdd);

        this.Caller.addClients(PhoneClientList.ToArray());

    }

  

    public void Disconnect(string phoneID)

    {

        PhoneClient client = null;

  

        foreach (PhoneClient existingClient in PhoneClientList)

        {

            if (phoneID == existingClient.PhoneClientId)

            {

                client = existingClient;

                break;

            }

        }

  

        PhoneClientList.Remove(client);

        Clients.removeClient(client);

    }

  

    public void PushMessageToClients(string message)

    {

        Clients.addChatMessage(message);

    }        

}

Wondering what some of the function calls are within our Hub? Well .. that’s the magic! These are actually JavaScript methods defined in our web UI view. So, let’s shoot for a UI like this (in the Index view off our Home controller).. Chat dialog on left & Bing Maps to show the pushpins on the right:

Here’s what’s on the view, along with subtle styling included in the downloadable code:

1:

2:

3:

4:

5:

   6: 'container'>

   7:     'chat'>

   8:         Chatroom:

9:

  10:         "text" id="message" maxlength="20" />

  11:         "button" id="broadcast" value="Broadcast" />

  12:         "button" id="clear" value="Clear" />

13:

  14:         "chatdialog">

15:

  16:     'map'>

17:

18:

  19: "legend">

  20:     for="userCount">Mapped Users:

  21:     "userCount">0

22:

The Bing Maps on the page would be using the Bing Maps Ajax/JavaScript SDK. If you need to use this on your own, please make sure to get yourself a developer ID that you could pass along to Bing; get it HERE.

Now, most of the connectivity magic offered by the SignalR server will be in the code bits below. You’ll see how we open a connection to our SignalR Hub from the web client and define JavaScript methods to manipulate the UI that will be used by the Hub. You’ll notice how we add/remove PushPins on the map using JavaScript & location of phone clients joining the Hub. Also, you’ll see the code sending off Chat messages typed in from the web and appending those received from the server. So, here goes:

1:

The Windows Phone Client

Now that we have the SignalR server all set up and waiting for interaction from phone clients, let us develop our Windows Phone client app. We’ll build a regular one page Windows Phone application just to demo functionality & connectivity to the SignalR Hub. Let’s begin by adding the appropriate SignalR nuget as below:

As we launch the app, we ask for a one-time user name so the phone client can be identified in the chatroom. For brevity, let us skip showing the simple XAML markup; you may find it in the downloadable code. Both UIs as below:

As the user indicates with button click that he/she wants to join, we use location awareness in Windows Phone to figure out current geo-coordinates of the user with a physical device or read mock emulator inputs. Here’s some code:

private GeoCoordinateWatcher gcw;

private double phoneLatitude;

private double phoneLongitude;

  

private void connectButton_Click(object sender, RoutedEventArgs e)

 {

     if (gcw == null)

     {

         // Look for present geo-location with GPS.

         gcw = new GeoCoordinateWatcher(GeoPositionAccuracy.High);

         gcw.MovementThreshold = 10;

         gcw.StatusChanged += new EventHandler(gcw_StatusChanged);

     }

  

     gcw.Start();            

 }

Once we have location, it’s time to fire up the reference to the SignalR server and try to connect. Here’s the sample code:

IHubProxy SignalRServerHub;

HubConnection connection = new HubConnection("http://localhost:49968/");

  

private void gcw_StatusChanged(object sender, GeoPositionStatusChangedEventArgs e)

 {

     if (e.Status == GeoPositionStatus.Ready)

     {

         // Get position from watcher & stop it to conserve battery.

         phoneLatitude = gcw.Position.Location.Latitude;

         phoneLongitude = gcw.Position.Location.Longitude;

         gcw.Stop();

  

         // Reference to SignalR Server Hub & Proxy.                      

         var messagingHub = connection.CreateProxy("SignalRServer.MessagingHub");

         SignalRServerHub = messagingHub;               

  

         // Fire up SignalR Connection & share location.  

         connection.Start().ContinueWith(task =>

         {

             if (task.IsFaulted)

             {

                 // Oopsie, do some error handling.

             }

  

             // Join the Server's list of mapped clients.

             messagingHub.Invoke("JoinFromPhone", deviceID, phoneLatitude, phoneLongitude).Wait();

  

             // Tell the chatroom that you joined.

             SignalRServerHub.Invoke("PushMessageToClients", App.Current.userName + " just joined!").Wait();                  

         });

      }

   }

Notice how we build a proxy on the fly (not tight-binding though) and invoke the “JoinFromPhone()” method of the server from the phone app, passing in some identifying information & location coordinates. The point is, you can pass in whatever your server needs. The unique qualifier that we pass in for every phone client to the server is the unique Device ID of the phone. Once pinged, the SignalR Hub wakes up, adds the incoming phone client to an internal collection (which you can persist) and reaches back to each web client (MVC3 view) to invoke some JavaScript functions that actually add a Pushpin on the map. Next up, we also announce on the Chatroom that a new user has joined the Hub by invoking the “PushMessageToClients()” server method. Simple enough, right?

When the user types in some content and hits the Chat button, we got to let the SignalR server know, so that the chat message gets posted on the web front-end & all connected Windows Phone clients. Here’s how we achieve that .. notice that we are making some of these server calls on background threads so as to not hose up our UI:

private void chatButton_Click(object sender, RoutedEventArgs e)

 {

     if (chatTextbox.Text != string.Empty && chatTextbox.Text != null)

     {

         // Fire off background thread to post message to server Chatroom.

         chatMessage = chatTextbox.Text.Trim();

         chatTextbox.Text = string.Empty;

         ChatBackgroundDataWorker.RunWorkerAsync();

     }

 }

  

private void ChatBackgroundDataWorker_DoWork(object sender, DoWorkEventArgs e)

 {

     // Post message to server chatroom.

     SignalRServerHub.Invoke("PushMessageToClients", chatMessage).Wait();

     chatMessage = string.Empty;

 }

Now, this takes care of the chat message posting part where the server informs all other clients. However, if someone posts a chat message from the web front-end or other phone clients, how does our app know to update the chat dialog with content? There has to be a trigger, right? Unlike JavaScript clients which the SignalR server can directly reach out to in case something of interest happens, there isn’t an easy proposition for .NET clients since we do not have a reference. But, we do have a persistent connection and there is an “On” method on the connection that can be rigged up to fire anytime a certain event happens on the server. Let us do that any time the server posts a message to all clients. Here’s the code .. you’ll be surprised how instantaneously this mechanism posts the chat message to all connected Windows Phone clients:

// Listen in on when Server posts anything to Chatroom.

 SignalRServerHub.On<string>("addChatMessage", message =>

 {

     // Add to local ChatRoom.

     chatDialog.Text += "\r\n";

     chatDialog.Text += message.Trim();

 });

Now, when you are done chit-chatting with your fellow geeks, you would like to disconnect officially and take your Pushpin out, right? Let’s add this code to disconnect, so that the corresponding Disconnect method is fired on the server. Again, notice how we do this on the background thread and officially sign out of the chatroom:

private void disconnectButton_Click(object sender, RoutedEventArgs e)

{            

    DisconnectBackgroundDataWorker.RunWorkerAsync();

  

    chatTextbox.IsEnabled = false;

    chatButton.IsEnabled = false;

    disconnectButton.IsEnabled = false;

    connectButton.IsEnabled = true;

}

  

private void DisconnectBackgroundDataWorker_DoWork(object sender, DoWorkEventArgs e)

{

    // Send Farewell to Chatroom.

    SignalRServerHub.Invoke("PushMessageToClients", App.Current.userName + " just left!").Wait();

  

    // Disconnect from Hub.

    SignalRServerHub.Invoke("Disconnect", deviceID).Wait();

}

Conclusion

That’s it. A functional Windows Phone client that connects to a SignalR server backend and allows us to see the interactions on a web front-end. The SignalR magic simply provides the persistent connectivity through whatever transport means feasible. Now, could there be potential benefit in leveraging such technology in our Windows Phone apps? Think, think ...

About the Author

Samidip Basu (@samidip) is a technologist & gadget-lover working as a Manager & Solutions Lead for Sogeti USA out of the Columbus Unit. With a strong developer background in Microsoft technology stack, he now spends much of his time in spreading the word to discover the full potential of the Windows Phone platform & cloud-backed mobile solutions in general. He passionately runs the Central Ohio Windows Phone User Group (http://cowpug.org), labors in M3 Conf (http://m3conf.com/) organization and can be found with at-least a couple of hobbyist projects at any time. His spare times call for travel and culinary adventures with the wife. Find out more at http://samidipbasu.com.

Windows 8 and the future of XAML: Part 3: Using WinRT

editorial@silverlightshow.net (Gill Cleeren ) — Mon, 20 Feb 2012 17:33:00 GMT

In this third part of our exploration of Windows 8 and WinRT, we’re going to start applying the concepts we learned about in the 2 first parts by using them in code. By now, you should have a good understanding of what Windows 8 Metro style applications are all about. In part 1, we’ve thoroughly explained how Windows 8 applications work inside the Metro environment. We’ve also looked at the improvements made to the desktop mode of Windows 8, which is a place where a lot of us will be spending most of their time I assume.

Don't miss...

All SilverlightShow Ebooks

In Part 2, we’ve seen some very important concepts. We’ve covered WinRT itself: we’ve looked at its architecture and its cornerstones, such as the runtime broker, Windows Metadata and asynchronous development. We’ve also touched on the Windows 8 tailored profile.

This brings us to Part 3. In this article, we’ll start writing code that makes use of WinRT components. Although most of us like to write XAML and C# code, we’ll leave the regular path for once and we’ll write some JavaScript/HTML as well. After some “Hello Worlds”, we’ll dive in more advanced concepts including Capabilities, the Share contract, working with the webcam and some more. Here we go!

Hello World… This time for real

In part 2, I already had the same heading. However, we hadn’t really written any code yet. So let’s do that right now. Note that for all the code we are writing here, you need Visual Studio 11 Express for Windows Developer Preview installed on a Windows 8 machine. To keep things simple, when I use the term”Visual Studio” from now on, it’s this version I’m referring to. If you have Visual Studio 11 installed on your Windows 8 environment as well, the templates that come with the Express edition will also be added to VS11.

A small disclaimer is in place here: the code written in this article is written and tested on the developer preview and may not work correctly with later releases.

Hello Visual Studio

When opening Visual Studio, you’ll notice that things haven’t changed a lot (of course, at the time of writing, we’re using a very early version). When clicking on the New Project link on the Start Page, you get the New Project dialog, shown below.

In part 2, we talked about the so-called language projections of WinRT. A language projection makes it possible to use WinRT, which is written in native code, from another language. Because of this, developers can keep using the language of their choice to write Metro style applications. The language projection makes sure that language constructs remain intact. Things like a constructor, the var keyword, the await keyword all remain the same if you choose to use WinRT from C#. The language projections that are available can be seen here: we can build Metro style apps from JavaScript, C#, VB and C++. All languages have the same project templates available as well.

Let’s start by selecting the C# option. Create a new project (just select the regular Application template for now) and name it HelloWinRTFromCs. Visual Studio opens a designer that should look familiar to the Silverlight developer. We have our regular drag-and drop interface and a XAML editor, as shown below.

In the XAML editor, we can start writing our typical “Hello World” application as follows:

<UserControlx:Class="HelloWinRTFromCs.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d"

    d:DesignHeight="768"d:DesignWidth="1366">

    <Grid x:Name="LayoutRoot"Background="#FF0C0C0C">

        <TextBlock Name="HelloWorldTextBlock" FontSize="42" Margin="20">TextBlock>

        <Button Content="I'm the Hello World generator button" Name="HelloWorldButton"

            Click="HelloWorldButton_Click">Button>

    Grid>

UserControl>

In the event handler of the Button, we write the following code:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Threading.Tasks;

using Windows.Foundation;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Data;

namespace HelloWinRTFromCs

    partial class MainPage

        public MainPage()

            InitializeComponent();

        private void HelloWorldButton_Click(object sender, RoutedEventArgs e)

            HelloWorldTextBlock.Text = "Hello World from SilverlightShow";

Ready? Start your debugging engines! Simply hit F5 as you’re used to. Your first Windows is now being prepared. If you take a look in the Output Window, you can see that an *.exe is being created and that *.exe is being packaged into an *.appxrecipe. This file is basically the deployment file that will be “hosted” inside of the Metro environment. After a few seconds, you’ll see your Metro app up and running as shown below. Hit the Button and you’ll be greeted with a nice Hello World from your app when you click the button.

Visual Studio also comes with a simulator. To use it to test your app on, simply select it from the debug options. The simulator is shown below.

Hello C++

Managed developers should feel reassured already a bit now that they’ve seen that it’s pretty much the same thing we’re doing to build a Metro style app. But what about C++ developers? Let’s build the same app but now from C++. The XAML code can be directly copied and pasted inside the new project. This will work since all XAML classes (such as Button and TextBlock) have now moved into the Windows.UI.Xaml namespace. This namespace is part of WinRT and it is thus the same one we’re using in both C# and C++.

The C++ code for the event handler is shown below.

void Application33::MainPage::HelloWorldButton_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)

HelloWorldTextBlock->Text = "Hello World";

When running the application, you should get the exact same result. Behind the scenes, our C++ code is being compiled into a native x86 instruction stream (if we would be running this on an ARM-based device, this would be an ARM instruction stream). C++ is directly interacting with the WinRT components.

And why not… Hello JavaScript and HTML

To make the circle complete, let’s write a Hello World app from JavaScript as well. Of course, we’re unable to copy the XAML; JavaScript works in combination with HTML code. Create a new project and select JavaScript this time.

In the HTML code, write your Hello World app as follows:

DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>WinWebApp6title>

    <link rel="stylesheet" href="/winjs/css/ui-dark.css" />

    <script src="/winjs/js/base.js">script>   1:  

   2:     

   2:     

   3:     "stylesheet" href="/css/default.css" />

   4: