Windows Store-apps: WinRT XAML vs. Silverlight XAML

This post is part of a series about creating Windows Store-apps with XAML and C#. Find the Content of the series here:
Windows Store-apps with XAML and C# blog-series

Last weekend I’ve finished the XAML-chapter of my upcoming book about developing Windows Store-apps with XAML and C#. I want to share the things that you should know about the WinRT XAML – the way I call it here – if you’re familiar with Silverlight or WPF.

The WinRT XAML is much like the XAML we know from Silverlight. But there are some differences in WinRT XAML:

  • the way you use your custom namespaces is different
  • there are some missing things (TypeConverters, Custom MarkupExtensions)

Let’s look at the two parts

Use custom namespaces

There are two ways in XAML to use a namespace:

  • 1:1-Namespace-Mapping
  • 1:n-Namespace-Mapping

Read the difference for both in Silverlight- and WinRT-XAML below.

The 1:1-Namespace-Mapping

Let’s assume you’ve the following class:

namespace UIRocker.Special
{
  public class WindowsEight
  {
    public bool IsGreat { get; set; }
  }
}

To use this class in Silverlight-XAML, you’ve to add an Namespace-Mapping like this

xmlns:rocker="clr-namespace:UIRocker.Special"

or like this if the CLR-Namespace is in another assembly than the XAML-file containing the Namespace-Mapping below: 

xmlns:rocker="clr-namespace:UIRocker.Special; assembly=UIRockerLib"

With the Namespace-Mapping the classes from that Namespaces can be used with the chosen alias. The alias is “rocker” in the snippets above, so the WindowsEight-class can be used as below:

<rocker:WindowsEight IsGreat="True"/>

In WinRT-XAML you’re using the class in the same way as above, but the way of creating the Namespace-Mapping is different. Instead of using the syntax with “clr-namespace…” you use:

xmlns:rocker="using:UIRocker.Special"

You don’t care if the Namespace UIRocker.Special is in another assembly as the XAML-file or not. This works exactly the same way as the using-directive in C#, where you also don’t care if the Namespace is in another assembly than the .cs-File or not. So, great improvement, but creates a little incompability with Silverlight-XAML.

The 1:n-Namespace-Mapping with XmlnsDefinition-Attribute

The Namespace-Mappings above have been 1:1-Mappings. One XML-Namespace was mapped to one Silverlight/WinRT-Namespace.

In Silverlight-XAML you can create a 1:n-Namespace-Mapping by placing the XmlnsDefinitionAttribute (Namespace: System.Windows.Markup) on your assemblies like this:

[assembly: XmlnsDefinition(
 "http://thomasclaudiushuber.com/","UIRocker.Special")]
[assembly: XmlnsDefinition(
  "http://thomasclaudiushuber.com/", "UIRocker.Mvvm")]

Classes out of the Namespaces UIRocker.Special and UIRocker.Mvvm can be used in XAML with one alias by making a 1:n-Namespace-Mapping like this:

xmlns:rocker="http://thomasclaudiushuber.com/"

Unfortunately in WinRT-XAML there is no possibility for a 1:n-Mapping. The Namespace Windows.UI.Xaml.Markup contains a XmlnsDefinition, but it’s not an attribute, it’s a struct and therefore not usable.

Especially when you create a library with many Namespaces in it, it’s great to use just one alias for the library in XAML. Maybe the next Version of WinRT will contain such a mapping. By the way, first versions of Silverlight also didn’t support 1:n-Namespace-Mappings.

Missing things in WinRT-XAML

There are a few other things that are not in WinRT-XAML or behave differently. Let’s take a look at them.

Typeconverters

As XAML is XML, every Attribute contains a string-value. This string-value needs to be converted into the value of the property-type the attribute represents. For primitive types like double, float, int, bool, char etc., the conversion automatically is done by the XAML-Parser (Silverlight and WinRT). Also for Properties of type enum, the XAML-Parser tries to convert the specified string-value into the enum-type of the property. There is also a conversion for some central types hardcoded in the XAML-Parser of Silverlight and WinRT, e.g. the Brush-Type. This conversion allows you to assign a string in XAML where a Brush-Instance is required:

<ListBox Background="Red">

The XAML-Parser takes the “Red”-string, creates a SolidColorBrush with the Color Red and assigns it to the Background-property of the ListBox.

(Excourse to WPF-XAML: In WPF-XAML this conversion is not done by the XAML-Parser, it is done by the BrushConverter-class)

Now if you have properties that are of your own type, let’s look at this works in Silverlight and WinRT. Let’s assume we have the classes below:

public class Person
{
  public Address Address { get; set; }
}
public class Address
{
  public string City { get; set; }
  public string Country { get; set; }
}

In Silverlight-XAML, it is possible to create a Person-instance as below if a TypeConverter for the Address-type exists:

<local:Person Address="Müllheim Germany"/>

The corresponding typeconverter could look like this:

public class AddressConverter : TypeConverter
{
  public override bool CanConvertFrom(...Type sourceType)
  {
    if (sourceType == typeof(string))
      return true;
    return base.CanConvertFrom(context, sourceType);
  }
  public override object ConvertFrom(...object value)
  {
    if (value != null && value is string)
    {
      var array = value.ToString().Split(' ');
      if (array.Length != 2)
        throw new ArgumentOutOfRangeException(
          "Invalid format for address");
      return new Address
      {
        City = array[0],
        Country = array[0]
      };
    }
    return base.ConvertFrom(value);
  }
}

The only thing that is additionally required is to tell the XAML-Parser where to find the AddressConverter. You do this by specifying the TypeConverterAttribute either on the Address-Property in the Person-class or on the Address-class itself. Below an example that specifies it on the Address-class.

public class Person
{
  public Address Address { get; set; }
}
[TypeConverter(typeof(AddressConverter))]
public class Address
{
  public string City { get; set; }
  public string Country { get; set; }
}

So far to Silverlight-XAML, now let’s look at WinRT-XAML. As mentioned above, WinRT-XAML also supports conversion for

  • primitive Types like bool, char, double, int, float,…
  • enumeration-values
  • central types like e.g. the Brush-type.

If you’ve custom types like the Address-class, currently there’s no support. There’s no TypeConverter in WinRT. Dot.

Markup-Extensions

In Silverlight-XAML it’s possible to create custom subclasses from MarkupExtension and use them in XAML with curly braces. WinRT doesn’t support custom Markup-Extensions. Dot.

Did you find out other bigger differences about XAML?

See you next week with the next post about WinRT and Windows Store-apps.

Thomas

Silverlight 5 Beta is here

Yes, it felt like a very long time since the Firestarter-Event in December last year till now. As promised the Silverlight 5 Beta is available in the first half of 2011, and that’s now. Find the Links to the products below. Be sure to install SP1 of VS2011 first (you find that one here: VS2010SP1)

Silverlight 5 Tools
Dokumentation to Silverlight 5
Microsoft Expression Blend Preview for Silverlight 5

Have fun and enjoy. ;-)

BASTA! Spring – Silverlight und WCF RIA Services

Morgenstund hat Gold im Mund. Vielen Dank für den Besuch meiner Session diesen Morgen um 8:30. Wie versprochen stehen die Slides und die Live-Demo eine Stunde nach dem Session-Ende hier auf dem Blog zur Verfügung. Folgend die Links

Slides
Live-Demo

Falls es Fragen oder Anmerkungen gibt, immer wieder gerne. Einfach direkt per E-Mail an mich.

Thomas

Windows Phone 7 – the Maps-app and its functionality

I switched from iPhone 3GS to a Samsung Omnia 7 with Windows Phone 7. Windows Phone 7 has  a really great user experience, especially with a great display like my Samsung Omnia 7 has. I even like the user experience of Windows Phone 7 much more than the user experience of my iPhone 3GS. And the development of apps with Silverlight is totally awesome.

There are just a few things I miss from my iPhone:

  • A navigation-app like Navigon or TomTom. I think there’ll be one in the near future. (German Telekom already has Navigon, but it’s an exclusiv app that you only get there)
  • The “Maps”-Application.

The second one is very amazing. On my iPhone I was able to open the Maps-app, enter a street and streetnumber and the app displayed me the route to it from my current location.

The “Maps”-Application on Windows Phone 7 just displays my current location, it can’t display a route. Oh, I can hear you say “no, that’s not true, it can display a route”. You’re correct, but for some users the functionality is not there. And as I found out, it’s based on regional settings. Is this a bug or a wanted behavior? I don’t know. Maybe Microsoft can give a statement to that. For me it doesn’t make sense to show a different set of buttons for Switzerland than for Germany/US and other regions.

When you’ve set up your Phone with region German (Switzerland), in the maps-app you can just look at your location, but there’s no way to get a route to another location. When the region is switched to German (German), you can enter a route to another location. Let’s look at the screens.

Here is the screen with German (Switzerland) setting. Notice that there are just two Buttons in the ApplicationBar. One to jump to the current location (Ich) and one to search (Suchen). The latter one just opens Bing-Search with the current location.

P1020287

When I now go to the settings of my Windows Phone 7 and set everything from Deutsch (Schweiz) to Deutsch (Deutschland), I get an additional icon as you see on the following screenshot.

P1020281

The additional icon allows it to search an address to get a route. And that was what I wanted. You can check it out on your handy. Just go to the settings and set all region-based informations to Deutsch (Schweiz). There are three settings under region & language:

  • Region Format
  • System locale
  • Browser- and search language

If you’re a swiss guy, set all to Deutsch (Deutschland): Now enjoy your Maps-App. Winking smile

GUI & Desgin Konferenz – Slides

An der GUI & Design-Konferenz in Nürnberg durfte ich heute zwei Vorträge zu den Themen “Controls in WPF/Silverlight designen und entwickeln” und “Hardwarenahe Programmierung in WPF/Silverlight mit Pixelshadern” halten. Bei Ihnen als Teilnehmer möchte ich mich an dieser Stelle recht herzlich für das grosse Interesse und die Aufmerksamkeit bedanken. Ich hoffe, es hat Ihnen gefallen und Sie konnten das ein oder andere für die Praxis mitnehmen.

Zum Runterladen der versprochenen Slides klicken Sie bitte einfach auf einen der beiden Vorträge:

Viel Spass damit. Falls weitere Fragen auftauchen oder der Code zu den kurzen Live-Demos gewünscht ist, genügt eine kurze Mail an mich. Schreiben Sie mir auch, falls Sie individuelle Trainings oder Consulting im Bereich WPF/Silverlight benötigen: Mail an Thomas

Cheers,
Thomas

Silverlight 5 announced. Tons of new features. Beta next year

The Silverlight Firestarter-Event The Keynote of the Silverlight Firestarter Event has just ended. It started with a great business-application built by SAP, before Scott Guthrie mentioned Silverlight 5 the first time. Scott said Microsoft has implemented about 70% of the uservoice features requested by the community here http://dotnet.uservoice.com/forums/4325-silverlight-feature-suggestions

(more…)

Speaking at GUI & Design Conference in Nürnberg

It has been quiet here for some weeks. After I had finished my Silverlight book I just enjoyed the unfamiliar free time I had on Saturday and Sunday. I just used it for hanging around with my family and friends. Now I’m back in the optimum of work-life-balance. I’m going to start a series of blogposts about building apps with Silverlight for the Web and for Windows Phone 7 in the mid of december. So I hope you’re looking forward to that.

With this post I want to inform you about the GUI&Design-Conference. The conference about GUI and Design has a lot of experts and great sessions to offer. I think it’s a special and great conference that you shouldn’t miss as a UI-Developer or –Designer. It would be great to see you there.

I’ve two sessions. One about Pixelshader-Effects in WPF and Silverlight and one about developing and designing Custom Controls in WPF and Silverlight. Find the conference-website on http://www.gui-design.ppedv.de/ or just click on the image below to join it.

fullsize_468x60_1-4

Looking forward to see you there.

Thomas