U2U all posts

Building C# custom controls in WinRT Metro

Sat, 21 Jan 2012 21:08:00 -1300

This article describes how to build custom WinRT Metro controls in C# and XAML, with the Developer Preview version of Visual Studio 11. WPF, Silverlight, and WinRT Metro have two ways to roll your own controls: custom controls, and user controls. User controls are composite controls that are created by dragging and dropping other controls onto a XAML surface. They are nothing more than content controls that are optimized for design-time use. User controls are typically for sharing within an application, but not with other applications. Custom controls on the other hand, are created by defining a class that derives -directly or indirectly- from Control, together with a definition of a default style. Custom controls are typically hosted in control libraries, and shared between multiple applications. Custom controls are much more flexible in terms of reuse, styling, templating, and theming.

For this article I created a simplified version of the Slider control. It's called SimpleSlider. It has a Minimum, Maximum, and Value property. Visually it only consists of a moving part -the thumb- and a colored rectangle of which the width is bound to the Value property:

I first created a project in .NET 4.0 WPF with Visual Studio 10. Then I tried to implement the same functionality in a .NET 4.5 Metro-style app. Here are screenshots of both versions:

Creation of the control

For WPF there is a WPF Custom Control Library project template. It creates a custom control derived from the most common base class: Control. You might want to change that into a more appropriate class, like ItemsControl or Selector. RangeBase would have been the ideal base class for a Slider, but I wanted to build everything from scratch, so I kept the default.

The Visual Studio template assigns the DefaultStyleKey dependency property through an OverrideMetaData call in a static constructor. It also creates a Themes folder with a generic.xaml with an (almost) empty default control template for the new user control. The project's assembly information gets a ThemeInfo attribute that contains the locations where that default style will be searched when the control needs to be displayed.

That's how it goes in Silverlight and WPF. For Metro style apps there is NO such project template - there's not even a class template for a custom control. The reason is that things like DefaultStyleKey, ThemeInfo and generic.xaml are not supported (yet?). So you have to create the SimpleSlider class and its generic.xaml manually. To inject the style file into the application, add it as a resource dictionary in app.xaml:

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="Generic.xaml" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

Adding Bindable Properties

By deriving from Control, a custom control inherits a set of useful dependency properties. These are properties to which the user of the control can databind: things like Background, FontSize, and Template. You can add custom dependency properties yourself - Visual Studio has a code snippet for that: propdp. It generates the dependency property registration for you:

public static readonly DependencyProperty ValueProperty =
    DependencyProperty.Register("Value", "Object", typeof(SimpleSlider).FullName, new PropertyMetadata(0.0, OnValueChanged));
        
public double Value
{
    get { return (double)GetValue(ValueProperty); }
    set { SetValue(ValueProperty, value); }
}

The PropertyMetadata allows you to define the default value and the method that should be called when the property's value is changed. When the Value property of the SimpleSlider is changed, we're going to redraw it:

private static void OnValueChanged(DependencyObject dependencyObject, DependencyPropertyChangedEventArgs e)
{
    var customSlider = (SimpleSlider)dependencyObject;
    customSlider.UpdateControls();
}

Contrary to WPF and Silverlight, the Register method takes strings instead of types. This is just temporary: Microsoft will regain compatibility with Silverlight and WPF in the upcoming beta of WinRT.

In the Developer Preview you need to specify 'Object' as the property type to make the bindings work, but that's also just a temporary bug.

Styling

Defining the default style for your custom control is not different from current technologies. You just define a style with the corresponding target type in a resource dictionary. Here's the full definition of the default style for the simple slider:

<Style TargetType="ctrl:SimpleSlider">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ctrl:SimpleSlider">
                <Grid>
                    <Border Height="8"
                            VerticalAlignment="Stretch"
                            Background="LightGray" />
                    <Canvas Margin="0"
                            MinHeight="8">
                        <Rectangle x:Name="PART_Rectangle"
                                    Height="8"
                                    Fill="Yellow" />
                        <Thumb x:Name="PART_Thumb"
                                Width="8"
                                Height="8" />
                    </Canvas>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

I would suggest to NOT use TemplateBinding in a style definition, since this doesn't seem to work yet. The following code, where I replaced the Border in the template by a Rectangle with its Width bound to the actual width of the control, does not work in the Developer Preview:

<Rectangle Height="8"
           Width="{TemplateBinding ActualWidth}"
           VerticalAlignment="Stretch"
           Fill="LightGray" />

If you're looking for inspiration about styles: all the default styles for WPF and Silverlight controls are on MSDN. You can find the full style for the WPF Slider here. The WinRT Metro styles are not published yet, but if you open the Basic Controls Sample, you'll find a light_generic.xaml file that has all the information. You'll immediately see why my control is called 'Simple' Slider...

Templating

The user of your custom control should be able to decide for 200% on how your control should look like in his application. But of course he needs to respect some basic requirements: a slider will always have a moveable part (the Thumb) and an indication of its Value (the Rectangle). The required elements in a style are by convention named with a 'PART_' prefix. The code behind file also exposes these elements' name and type through a TemplatePart attribute:

[TemplatePart(Name = ThumbPartName, Type = typeof(Thumb))]
[TemplatePart(Name = RectanglePartName, Type = typeof(Rectangle))]
public class SimpleSlider : Control
{
    private const string ThumbPartName = "PART_Thumb";
    private const string RectanglePartName = "PART_Rectangle";

    // ...
}

This indicates to potential control re-stylers that the code-behind relies on these parts. So if you override the default style, you should make sure that it contains elements with the expected name and type.

The style -default or custom- is typically applied in the OnApplyTemplateCore method, that's Metro's version of the OnApplyTemplate method that we know from Silverlight and WPF. As a developer of custom controls, you should wrap the template part manipulation in defensive code. After all, you never know what template you will be dealing with at run-time. Use GetTemplateChild to find the template part you're interested in, since WPF's Template.Find does not exist in Silverlight and Metro:

protected override void OnApplyTemplateCore()
{
    base.OnApplyTemplateCore();

    this.thumb = this.GetTemplateChild(ThumbPartName) as Thumb;
    if (this.thumb != null)
    {
        this.thumb.DragDelta += this.Thumb_DragDelta;
    }
    
    // ...
}

All changes to a dependency property fire the INotifyPropertyChanged event. Unfortunately, in the Developer Preview something goes wrong in the central binding mechanism when the ElementName property is used. The following code displays the initial slider value correctly in a textblock. But when the thumb is moved, the textbox just disappears:

<TextBlock Text="{Binding Path=Value, ElementName=SimpleSlider}" />

If you bring a viewmodel in the equation and use it as datacontext for slider and textbox, then everything works as expected. This looks like overkill, but as a die-hard MVVM developer I can live with that. Here's the -working- code for the value binding of the pacman-shaped slider:

<TextBlock Text="{Binding SliderValue}" />

Overriding a style

To override the default style, you just need to provide a new one, e.g. through XAML:

<ctrl:SimpleSlider.Style>
    <Style TargetType="ctrl:SimpleSlider">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ctrl:SimpleSlider">
                    <!-- Your template here -->
                    <!-- ... -->
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ctrl:SimpleSlider.Style>

Just make sure you use the required template parts.

Conclusion

There are a couple of glitches in the Developer Preview, but in general the WinRT Metro framework already has most of the foundations to build reusable custom control libraries. In a couple of weeks there will be a new release: not a true beta release, but a so-called 'consumer preview'. I can't wait to get my hands on it...

Code

Here's the full code, the WinRT version was built with the Visual Studio 11 Developer Preview:
WPF: U2UConsult.WPF.SimpleSlider.zip (24,81 kb)
WinRT: U2UConsult.WinRT.SimpleSlider.zip (34,84 kb)

Enjoy!

Afterthought

I realize that it was unfair to compare WinRT Metro directly to WPF. The WinRT Metro mechanisms are much closer to Silverlight than they are to WPF. WinRT Metro currently feels like a stripped-down version of Silverlight (which itself is a stripped-down version of WPF). At first, I found that a bit strange. After all, the WinRT runtime is not restrained by footprint size: it doesn't have to be smaller than the Flash plugin. It's also not constrained by browser and operating system compatibility: it doesn't have to run in Opera on a Windows Server 2000, nor in Safari on a Mac. On the other hand, WinRT is targeted to run on cheap (well, hopefully) tablets powered by ARM processors, the 32-bit cores that drive smartphones, MP3-players, and the Nintendo DS. That counts as a constraint.

Hello ObservableVector, goodbye ObservableCollection

Tue, 03 Jan 2012 06:12:00 -1300

WinRT, the new Windows 8 runtime for Metro applications, introduces a new interface for collection change notification. IObservableVector<T> replaces ye olde INotifyCollectionChanged. The ObservableCollection class still exists, you can continue to use it. Unfortunately its collection change events are ignored by the WinRT framework. I can assure you that this will give cross-platform developers a serious headache - or worse. Don't say I didn't warn you:

The IObservableVector<T> interface is defined, but the framework does not contain an implementation yet. There's no built-in collection that raises the new VectorChanged events. The fresh cocoon framework on CodePlex contains an implementation of ObservableVector<T>. Unsurprisingly it's a light-weight wrapper around an IList<T>. The class is described here.

Here's my own version of the class - I just adapted it to my property change notification mechanism:

namespace Mvvm
{
    using System.Collections.Generic;
    using System.Collections.ObjectModel;
    using Windows.Foundation.Collections;
    using Windows.UI.Xaml.Data;

    /// <summary>
    /// IObservableVector<T> implementation.
    /// </summary>
    public class ObservableVector<T> : Collection<T>, INotifyPropertyChanged, IObservableVector<T>
    {
        // *** Events ***

        public event PropertyChangedEventHandler PropertyChanged;
        public event VectorChangedEventHandler<T> VectorChanged;

        // *** Constructors ***

        public ObservableVector()
            : base()
        {}

        public ObservableVector(IList<T> list)
            : base(list)
        {}

        // *** Protected Methods ***   

        protected override void ClearItems()
        {
            base.ClearItems();
            this.PropertyChanged.Raise(this, o => o.Count);
            this.PropertyChanged.Raise(this, o => o.Items);
            this.OnVectorChanged(CollectionChange.Reset, 0);
        }

        protected override void InsertItem(int index, T item)
        {
            base.InsertItem(index, item);
            this.PropertyChanged.Raise(this, o => o.Count);
            this.PropertyChanged.Raise(this, o => o.Items);
            this.OnVectorChanged(CollectionChange.ItemInserted, (uint)index);
        }

        protected override void RemoveItem(int index)
        {
            base.RemoveItem(index);
            this.PropertyChanged.Raise(this, o => o.Count);
            this.PropertyChanged.Raise(this, o => o.Items);
            this.OnVectorChanged(CollectionChange.ItemRemoved, (uint)index);
        }

        protected override void SetItem(int index, T item)
        {
            base.SetItem(index, item);
            this.PropertyChanged.Raise(this, o => o.Items);
            this.OnVectorChanged(CollectionChange.ItemChanged, (uint)index);
        }

        // *** Event Handlers ***

        protected void OnVectorChanged(CollectionChange collectionChange, uint index)
        {
           this.OnVectorChanged(new VectorChangedEventArgs(collectionChange, index));
        }

        protected virtual void OnVectorChanged(IVectorChangedEventArgs e)
        {
            if (this.VectorChanged != null)
                this.VectorChanged(this, e);
        }

        // *** Private Sub-classes ***

        private class VectorChangedEventArgs : IVectorChangedEventArgs
        {
            // *** Fields ***

            private readonly CollectionChange collectionChange;
            private readonly uint index;

            // *** Constructors ***

            public VectorChangedEventArgs(CollectionChange collectionChange, uint index)
            {
                this.collectionChange = collectionChange;
                this.index = index;
            }

            // *** Properties ***

            public CollectionChange CollectionChange
            {
                get
                {
                    return this.collectionChange;
                }
            }

            public uint Index
            {
                get
                {
                    return this.index;
                }
            }
        }
    }
}

I consider this temporary code - I assume that next versions of WinRT will have a native version of ObservableVector<T>.

I built a small sample application around to demonstrate the usage of the class in a MVVM application: all the work is done through data and command bindings. The app just manages two collections of Dragons: 'All Dragons' and 'Favorites'. The selected Dragon in each ListBox can be moved to the other collection by clicking the buttons in the middle. Here's how the app looks like:

By the way, in the current version of WinRT -Developer Preview- the collection changed events are only handled if T is object, so you have to define the collection as follows:

public ObservableVector<object> Dragons { get; set; }

For any other type -like ObservableVector<string> or ObservableVector<Dragon>- the change events will be simply ignored by the binding mechanism. That's another headache.

You use the class exactly the same way as good old ObservableCollection, e.g. as ItemsSource to a an ItemControl:

<ListBox DataContext="{Binding}"
         ItemsSource="{Binding Dragons}"
         SelectedItem="{Binding SelectedDragon, Mode=TwoWay}" />

Here's the full source code, it's built with Visual Studio 11 Developer Preview: U2UConsult.WinRT.ObservableVector.Sample.zip (47,83 kb)

Enjoy!

Databinding to an enumeration in WinRT

Tue, 27 Dec 2011 00:04:00 -1300

This article demonstrates how to databind a radiobutton to an enumeration element, in a WinRT Metro application. The MVVM viewmodel has a property of an enumeration type, which is bound to the IsChecked property of some radiobuttons. A value converter compares the value from the viewmodel with an enumeration element that is provided as parameter to the converter. The Convert method returns true if both match, the ConvertBack method updates the bound value when the radiobutton is clicked or tapped.

Here's a screenshot of the attached sample application. The radiobuttons are bound to the CarColor property -an enumeration- of the viewmodel. The Vote-button updates that same property through a command:

The converter is much more complex than the WPF version from my previous article, it's even more complex than its corresponding Silverlight version that you can find here.

Here's a list of reasons why the implementation was not so straightforward:

The x:Static markup extension is not allowed in a Metro application,
Binding.DoNothing does not exist in WinRT, and
unlike in WPF or Silverlight, the converter receives the enumeration value as an integer instead of a string.

When I observed all of this, my first reaction was AARGH!!! Don't worry: it was not a call of anger and frustration. In the noble Antwerp language aerg just means 'this is bad'. Non-believers: just follow this link.

As a result, the converter is much more complex than expected. It reconstructs the enumeration parameter from the binding expression by string parsing and reflection. Here's how it looks like:

namespace U2UConsult.WinRT.Converters
{
    using System;
    using System.Globalization;
    using Windows.UI.Xaml;
    using Windows.UI.Xaml.Data;

    /// <summary>
    /// Converts an enum to a boolean.
    /// </summary>
    public class EnumToBooleanConverter : IValueConverter
    {
        /// <summary>
        /// Compares the bound value with an enum param. Returns true when they match.
        /// </summary>
        public object Convert(object value, string typeName, object parameter, string language)
        {
            try
            {
                string parm = parameter.ToString();
                int lastDot = parm.LastIndexOf(".");
                string enumName = parm.Substring(0, lastDot);
                string enumValue = parm.Substring(lastDot + 1);

                Type t = Type.GetType(enumName);
                string s = Enum.GetName(t, value);
                object b = Enum.Parse(t, enumValue);
                return b.ToString() == s;
            }
            catch (Exception)
            {
                return false;
            }
        }

        /// <summary>
        /// Converts the boolean back into an enum.
        /// </summary>
        public object ConvertBack(object value, string typeName, object parameter, string language)
        {
            try
            {
                string parm = parameter.ToString();
                int lastDot = parm.LastIndexOf(".");
                string enumName = parm.Substring(0, lastDot);
                string enumValue = parm.Substring(lastDot + 1);

                Type t = Type.GetType(enumName);
                object b = Enum.Parse(t, enumValue);

                return b;
            }
            catch (Exception)
            {
                return DependencyProperty.UnsetValue;
            }
        }
    }
}

In your application, all you need to do is create an enumeration:

public enum CarColor
{
    Yellow,
    Red,
    Pink,
    Black
}

In the viewmodel, create a property of the enumeration type:

private CarColor carColor = CarColor.Black;

public event PropertyChangedEventHandler PropertyChanged;

public CarColor CarColor
{
    get { return carColor; }
    set {
        this.carColor = value;
        this.PropertyChanged.Raise(this, (o) => o.CarColor);
    }
}

The propertychanged notification makes sure that the radiobutton follows all modifications of the property.

In the view, define the converter instance as a resource in XAML:

<UserControl.Resources>
    <cv:EnumToBooleanConverter x:Key="EnumToBooleanConverter" />
</UserControl.Resources>

Bind the viewmodel's CarColor property to the Ischecked property of each radioButton. The enumeration value is provided as parameter to the converter with its fully qualified name. Also, you have to set the binding mode to TwoWay, and make sure that every radiobutton has its own GroupName. This is because we can't use Binding.DoNothing in the IValueConverter.ConvertBack Method. We always have to return the parameter, or DependencyProperty.UnsetValue. Both (re-)trigger all radiobuttons in the same group and that's not what we want; more info here.

Here's the full binding syntax in XAML:

<RadioButton Content="Giallo Modena"
                GroupName="Yellow"
                IsChecked="{Binding CarColor, Mode=TwoWay, Converter={StaticResource EnumToBooleanConverter}, ConverterParameter=U2UConsult.WinRT.DataBindingToEnum.ViewModels.CarColor.Yellow}" />
<RadioButton Content="Rosso Corsa"
                GroupName="Red"
                IsChecked="{Binding CarColor, Mode=TwoWay, Converter={StaticResource EnumToBooleanConverter}, ConverterParameter=U2UConsult.WinRT.DataBindingToEnum.ViewModels.CarColor.Red}" />
<RadioButton Content="Rosa Insapora"
                GroupName="Pink"
                IsChecked="{Binding CarColor, Mode=TwoWay, Converter={StaticResource EnumToBooleanConverter}, ConverterParameter=U2UConsult.WinRT.DataBindingToEnum.ViewModels.CarColor.Pink}" />
<RadioButton Content="Matte Nero"
                GroupName="Black"
                IsChecked="{Binding CarColor, Mode=TwoWay, Converter={StaticResource EnumToBooleanConverter}, ConverterParameter=U2UConsult.WinRT.DataBindingToEnum.ViewModels.CarColor.Black}" />

This solution is more error-prone and definitely slower than the WPF version, but it does the job. That's the good news. I also have bad news: the pink Ferrari photo is NOT photoshopped, aerg.

Anyway, here's the full source code. It was developed with Visual Studio 11 Developer Preview: U2UConsult.WinRT.DataBindingToEnum.zip (364,11 kb)

Enjoy!

Databinding to an enumeration in WPF

Sat, 24 Dec 2011 17:41:00 -1300

This article demonstrates how to databind a radiobutton to an enumeration element, in a WPF application. The MVVM viewmodel has a property of an enumeration type, which is bound to the IsChecked property of the radiobutton. A value converter compares the value from the viewmodel with an enumeration element that is provided as parameter to the converter. The Convert method returns true if both match, the ConvertBack method updates the bound value if there's no match.

Here's a screenshot of the attached sample application. The radiobuttons are bound to the Reindeer property -an enumeration- of the viewmodel. The Vote-button updates that same property through a command:

Here's the converter:

namespace U2UConsult.WPF.Converters
{
    using System;
    using System.Globalization;
    using System.Windows.Data;

    /// <summary>
    /// Converts an enum to a boolean.
    /// </summary>
    public class EnumToBooleanConverter : IValueConverter
    {
        /// <summary>
        /// Compares the bound value with an enum param. Returns true when they match.
        /// </summary>
        public object Convert(object value, Type targetType, object param, CultureInfo culture)
        {
            return value.Equals(param);
        }

        /// <summary>
        /// Updates the bound value if it's different from the parameter.
        /// </summary>
        public object ConvertBack(object value, Type targetType, object param, CultureInfo culture)
        {
            return (bool)value ? param : Binding.DoNothing;
        }
    }
}

In your application, all you need to do is create an enumeration:

public enum Reindeer
{
    Donner,
    Blitzen,
    Rudolph,
    SantasLittleHelper
}

In the viewmodel, create a property of the enumeration type:

private Reindeer reindeer;
        
public event PropertyChangedEventHandler PropertyChanged;

public Reindeer Reindeer
{
    get { return reindeer; }
    set {
        reindeer = value;
        this.PropertyChanged.Raise(this, o => o.Reindeer);
    }
}

The propertychanged notification makes sure that the radiobutton follows all modifications of the property.

In the view, define the converter instance as a resource in XAML:

<Window.Resources>
  <cv:EnumToBooleanConverter x:Key="EnumToBooleanConverter" />
</Window.Resources>

Bind the viewmodel's property to the Ischecked property of each radioButton. The enumeration value is provided as parameter to the converter. Don't use the string representation of the element's value, but use the x:Static markup extension:

<RadioButton Content="Donner"
             IsChecked="{Binding Reindeer, 
                        Converter={StaticResource EnumToBooleanConverter}, 
                        ConverterParameter={x:Static vm:Reindeer.Donner}}" />
<RadioButton Content="Blitzen"
             IsChecked="{Binding Reindeer, 
                        Converter={StaticResource EnumToBooleanConverter}, 
                        ConverterParameter={x:Static vm:Reindeer.Blitzen}}" />

There you go!

Here's the WPF project: U2UConsult.WPF.DataBindingToEnum.zip (41,39 kb)

Enjoy!

Building WPF forms without GDI decoration

Thu, 15 Dec 2011 01:08:00 -1300

This article describes a base class for WPF windows. It hides all GDI chrome, without losing functionality. WPF promises entire freedom in look-and-feel of your application. In its standard configuration, however, a WPF Window is still hosted in a classic GDI-based WinForm. Its border and header are rendered by the operating system. This takes away a lot of styling opportunities: things like a custom close button or rounded borders become impossible. On top of that, the GDI chrome eats a lot of pixels away from your application. That waste of space becomes obvious if you use custom controls like the popular Ribbon.

I created the NoGdiWindow base class to solve all of these problems. The following screenshots from the attached sample application show the same WPF window - with and without using the base class. If you prefer the left window, you may stop reading now .

Hiding the GDI header

Setting the WindowStyle to System.Windows.WindowStyle.None removes the window header:

this.WindowStyle = System.Windows.WindowStyle.None;

You obviously loose the icon, the title and the minimize, maximize/restore, and close buttons. These are relatively easy to recover: the NoGdiWindow class contains the necessary commands and properties to rapidly create custom buttons in XAML. Here's an overview of the relevant class members:

Here's an example of a custom button:

<Button ToolTip="Maximize" Command="{Binding ElementName=Window, Path=MaximizeCommand}" Visibility="{Binding ElementName=Window, Path=MaximizeButtonVisibility}" />

Restoring the buttons is not sufficient: the beheaded window doesn't have a region anymore by which you can drag it, or minimize/restore by double-clicking. When using NoGdiWindow, all you need to do is create a region at the appropriate position and hook in the MouseLeftButtonDown event handler:

<Grid MouseLeftButtonDown="Header_MouseLeftButtonDown" Background="Transparent" VerticalAlignment="Top" HorizontalAlignment="Stretch" Height="32" Margin="80 0 0 0">

You may want to implement this functionality as a behavior instead of an event handler.

In the following screenshot, the region is highlighted. The left margin of 80 pixels keeps the ribbon's application menu accessible:

When you use WindowStyle.None your window will overlap the task bar if it's maximized. I personally don't mind at all. If you (or our end users) have a problem with this, you find some possible workarounds here.

Hiding the GDI border

You can make the remaining GDI border disappear by setting the AllowsTransparency property to True and your form's background to Transparent:

this.AllowsTransparency = true;
this.Background = new SolidColorBrush(Colors.Transparent);

This allows you to provide a rounded border around your window, or create an irregular shape. Unfortunately the native GDI border also hosts the resize handles, so you need to get these back. The NoGdiWindow draws a series of rectangles on the form, with the necessary mouse down handlers. Therefor, your main panel should be a Grid. In the following screenshot these rectangles are highlighted:

When the window is opened, it fetches its Win32 handle:

this.hwndSource = PresentationSource.FromVisual((Visual)sender) as HwndSource;

When you hold the left mouse button inside one of the resize rectangles, the resize message is sent to the operating system through a SendMessage call:

SendMessage(this.hwndSource.Handle, 0x112, (IntPtr)(61440 + direction), IntPtr.Zero);

The resize code is based on this article by Joshua. Here's an overview of the relevant class members:

The AllowsTransparency is implemented through a technique called 'layered windows'. If you type these keywords in your [insert favorite search engine here], you'll immediately see that there are some issues under Windows XP. Your user interface may run without hardware acceleration on older XP releases, and it definitely ruins some WPF controls (tooltips, popups, comboboxes). There there are also issues with WindowsFormHost controls, regardless of the operating system you use. NoGdiWindow is aware or this, and has some defensive code around the property:

if ((Environment.OSVersion.Version.Major > 5) & (!this.UsesWindowsFormsHost))
 {
    // Activate Transparency
  // ...
 }

Code

Here's the sample project :U2UConsult.WPF.NoGdiWindow.zip (1.31 mb)

Enjoy!

A BooleanToVisibilityConverter for WinRT

Mon, 14 Nov 2011 18:09:00 -1300

This article describes a reversible boolean-to-visibility valueconverter for WinRT and Metro.

Silverlight and WPF share lots of common ground, but Silverlight is restricted by the (lack of) complexity in its host, and certainly by the size of its footprint. As a result, Silverlight is missing some essential functionality: there's quite a lot of classes that we need to manually add to each and every project. WinRT and its Metro GUI are hardly restricted by footprint size, but they're still a lot closer to Silverlight than to the -ok, somewhat bloated- WPF.

As a result, WinRT is also missing some of that essential functionality. One example is the lack of a BooleanToVisibilityConverter. Any application that applies the MVVM pattern definitely has some places where boolean properties of a viewmodel determine whether or not parts of the GUI will be displayed. This is typically done through a valueconverter that translates boolean values into a Visibility. WPF has such a converter, but these ten lines of code seem to be too heavy for Silverlight and WinRT .

Anyway, here's my version of a reversible converter for WinRT and Metro. It's based on Kent Boogaart's mother of all BooleanToVisibility converters:

namespace Mvvm
{
    using System;
    using Windows.UI.Xaml;
    using Windows.UI.Xaml.Data;

    /// <summary>
    /// Converts a Boolean into a Visibility.
    /// </summary>
    public class BooleanToVisibilityConverter : IValueConverter
    {
        /// <summary>
        /// If set to True, conversion is reversed: True will become Collapsed.
        /// </summary>
        public bool IsReversed { get; set; }

        public object Convert(object value, string typeName, object parameter, string language)
        {
            var val = System.Convert.ToBoolean(value);
            if (this.IsReversed) 
            {
                val = !val;
            }

            if (val) 
            {
                return Visibility.Visible; 
            }

            return Visibility.Collapsed;
        }

        public object ConvertBack(object value, string typeName, object parameter, string language)
        {
            throw new NotImplementedException();
        }
    }
}

You probably need one of each (True-to-Visible and False-to-Visible), and use these converters in a lot of different places. So it'a good idea to define the following application level resources, in App.xaml:

<Application xmlns="..."
             xmlns:x="..."
             xmlns:mvvm="using:Mvvm"
             x:Class="...">
    <Application.Resources>
        <mvvm:BooleanToVisibilityConverter x:Key="TrueToVisibleConverter" />
        <mvvm:BooleanToVisibilityConverter x:Key="FalseToVisibleConverter" IsReversed="True" />
    </Application.Resources>
</Application>

Your viewmodels just need to define a boolean property, and notify its changes (see my previous article for the change notification methods):

public bool IsDay
{
    get { return isDay; }
    set
    {
        isDay = value;
        this.PropertyChanged.Raise(this, o => o.IsDay);
    }
}

Now the views can easily bind to the property and let the converters do their stuff:

<Image Source="/Images/Day.jpg"
        Visibility="{Binding IsDay, Converter={StaticResource TrueToVisibleConverter}}" />

<Image Source="/Images/Night.jpg"
        Visibility="{Binding IsDay, Converter={StaticResource FalseToVisibleConverter}}" />

Here are some screenshots from the attached sample project:

And here's the whole code: U2UConsult.WinRT.Boolean2Visibility.zip (311.89 kb)

Enjoy!

A core MVVM framework for WinRT

Thu, 27 Oct 2011 05:53:00 -1300

This article presents a core MVVM framework for building Metro applications on the WinRT runtime.

With the WinRT runtime, Microsoft launched its fourth XAML-based platform - after WPf, Silverlight, and the Windows Phone. It's the fourth time they strongly advice development teams all over the world to get the maximum out of the power of XAML bindings, hence use the MVVM pattern in their applications. Strangely enough it's also the fourth time that they ship a runtime without the basic support for that same pattern. So it's up to the developers community to fill the gap.

The gap will be filled rapidly. While Microsoft Patterns & Practice's Prism team is still hesitating, Laurent Bugnion with his MVVM Light Toolkit and Rob Eisenberg with Caliburn Micro are definitely going for a WinRT version of their popular frameworks. But we're not going to sit and wait for these frameworks, are we? We want to start developing MVVM applications (in Metro-speak they're called 'apps') here and now.

In my ever humble opinion, the following three are the core requirements for using MVVM in an application :

Raising the PropertyChanged event should be easy and typesafe.
Defining a bindable command in a ViewModel should be easy and typesafe.
Messaging between components should be easy and typesafe, and not create memory leaks.

I gleaned a core MVVM-framework with just three files - one for each requirement:

The namespace is Mvvm, so you can start each source code file with 'using Mvvm;'. Your manager will be impressed.

Change Notification

Most frameworks provide a base class that implements INotifyPropertyChanged. I'm a bit reluctant to use a scarse resource like inheritance- for such a triviality like just raising a standard event. Extension methods are much more flexible:

namespace Mvvm
{
    using System;
    using System.Collections.Generic;
    using System.Linq.Expressions;
    using Windows.UI.Xaml.Data;

    /// <summary>
    /// Generic extension methods used by the framework.
    /// </summary>
    public static class ExtensionMethods
    {
        /// <summary>
        /// Raises the PropertyChanged event.
        /// </summary>
        public static void Raise<T, P>(this PropertyChangedEventHandler pc, T source, Expression<Func<T, P>> pe)
        {
            if (pc != null)
            {
                pc.Invoke(source,
                    new PropertyChangedEventArgs(((MemberExpression)pe.Body).Member.Name));
            }
        }

        /// <summary>
        /// Raises the PropertyChanged event for all properties.
        /// </summary>
        public static void RaiseAll<T>(this PropertyChangedEventHandler pc, T source)
        {
            if (pc != null)
            {
                pc.Invoke(source, new PropertyChangedEventArgs(string.Empty));
            }
        }
    }
}

Here's how a typical property looks like in a viewmodel or a model that implements INotifyPropertyChanged. Broadcasting a property value change is easy, ànd you get Intellisense support:

private string message

public string Message
{
    get { return this.message; }
    set
    {
        this.message = value;
        this.PropertyChanged.Raise(this, o => o.Message);
    }
}

It also definitely makes a good candidate for a code snippet...

Command binding

Most frameworks have an implementation of ICommand to be used specifically in viewmodels. Microsoft's RoutedCommand makes no sense there. Caliburn uses a radically different paradigm based on triggers and actions - the result is the same but it's further away from MVVM. The ICommand implementations in Prism and MVVM Light Toolkit have a constructor with just delegates for the Executed and CanExecute members. I prefer the RelayCommand implementation of the MVVM Light Toolkit, but I also prefer to call it DelegateCommand (sorry, Laurent) - the Prism terminology.

It's easy to use and it comes with a generic version:

namespace Mvvm
{
    using System;
    using System.Diagnostics;
    using System.Diagnostics.CodeAnalysis;

    using Windows.UI.Xaml.Input;
    using EventHandler = Windows.UI.Xaml.EventHandler;

    public class DelegateCommand : ICommand
    {
        private readonly Action _execute;

        private readonly Func<bool> _canExecute;

        /// <summary>
        /// Initializes a new instance of the DelegateCommand class that 
        /// can always execute.
        /// </summary>
        /// <param name="execute">The execution logic.</param>
        /// <exception cref="ArgumentNullException">If the execute argument is null.</exception>
        public DelegateCommand(Action execute)
            : this(execute, null)
        {
        }

        /// <summary>
        /// Initializes a new instance of the DelegateCommand class.
        /// </summary>
        /// <param name="execute">The execution logic.</param>
        /// <param name="canExecute">The execution status logic.</param>
        /// <exception cref="ArgumentNullException">If the execute argument is null.</exception>
        public DelegateCommand(Action execute, Func<bool> canExecute)
        {
            if (execute == null)
            {
                throw new ArgumentNullException("execute");
            }

            _execute = execute;
            _canExecute = canExecute;
        }

        /// <summary>
        /// Occurs when changes occur that affect whether the command should execute.
        /// </summary>
        public event EventHandler CanExecuteChanged;

        /// <summary>
        /// Raises the <see cref="CanExecuteChanged" /> event.
        /// </summary>
        [SuppressMessage("Microsoft.Design", "CA1030:UseEventsWhereAppropriate",
            Justification = "This cannot be an event")]
        public void RaiseCanExecuteChanged()
        {
            var handler = CanExecuteChanged;
            if (handler != null)
            {
                handler(this, EventArgs.Empty);
            }
        }

        /// <summary>
        /// Defines the method that determines whether the command can execute in its current state.
        /// </summary>
        /// <param name="parameter">This parameter will always be ignored.</param>
        /// <returns>true if this command can be executed; otherwise, false.</returns>
        [DebuggerStepThrough]
        public bool CanExecute(object parameter)
        {
            return _canExecute == null ? true : _canExecute();
        }

        /// <summary>
        /// Defines the method to be called when the command is invoked. 
        /// </summary>
        /// <param name="parameter">This parameter will always be ignored.</param>
        public void Execute(object parameter)
        {
            if (CanExecute(parameter))
            {
                _execute();
            }
        }
    }
}

Here's how to use the DelegateCommand. The ViewModel defines a command by providing just delegates, and provides implementations:

public ICommand UpdateTextCommand
{
    get
    {
        return new DelegateCommand(this.UpdateTextCommand_Executed);
    }
}

private void UpdateTextCommand_Executed()
{
    // Command Logic
}

The View can bind to that command in XAML, no code-behind is needed:

<Button Content="Update Text" Command="{Binding UpdateTextCommand}" />

Event Aggregation

In an application that consists of different loosely-coupled components that need to publish and subscribe to events, it's not a good idea to rely on regular .NET events. More info can be found here. A so-called event aggregator is a much better solution. Prism's event aggregator may be the most powerful on the market, but the one from Caliburn Micro is easier to extract out of its framework. I just added the singleton pattern because I don't want to introduce an Inversion-of-Control container and bootstrappers in my three-file-framework.

Here's the full code of the Event Aggregator:

namespace Mvvm
{
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Reflection;

    /// <summary>
    ///   A marker interface for classes that subscribe to messages.
    /// </summary>
    public interface IHandle { }

    /// <summary>
    ///   Denotes a class which can handle a particular type of message.
    /// </summary>
    /// <typeparam name = "TMessage">The type of message to handle.</typeparam>
    public interface IHandle<TMessage> : IHandle
    {
        /// <summary>
        ///   Handles the message.
        /// </summary>
        /// <param name = "message">The message.</param>
        void Handle(TMessage message);
    }

    /// <summary>
    ///   Enables loosely-coupled publication of and subscription to events.
    /// </summary>
    public interface IEventAggregator
    {
        /// <summary>
        ///   Gets or sets the default publication thread marshaller.
        /// </summary>
        /// <value>
        ///   The default publication thread marshaller.
        /// </value>
        Action<System.Action> PublicationThreadMarshaller { get; set; }

        /// <summary>
        ///   Subscribes an instance to all events declared through implementations of <see cref = "IHandle{T}" />
        /// </summary>
        /// <param name = "instance">The instance to subscribe for event publication.</param>
        void Subscribe(object instance);

        /// <summary>
        ///   Unsubscribes the instance from all events.
        /// </summary>
        /// <param name = "instance">The instance to unsubscribe.</param>
        void Unsubscribe(object instance);

        /// <summary>
        ///   Publishes a message.
        /// </summary>
        /// <param name = "message">The message instance.</param>
        /// <remarks>
        ///   Uses the default thread marshaller during publication.
        /// </remarks>
        void Publish(object message);

        /// <summary>
        ///   Publishes a message.
        /// </summary>
        /// <param name = "message">The message instance.</param>
        /// <param name = "marshal">Allows the publisher to provide a custom thread marshaller for the message publication.</param>
        void Publish(object message, Action<System.Action> marshal);
    }

    /// <summary>
    ///   Enables loosely-coupled publication of and subscription to events.
    /// </summary>
    public class EventAggregator : IEventAggregator
    {
        /// <summary>
        ///   The default thread marshaller used for publication;
        /// </summary>
        public static Action<System.Action> DefaultPublicationThreadMarshaller = action => action();

        private static IEventAggregator instance;
        
        readonly List<Handler> handlers = new List<Handler>();

        /// <summary>
        ///   Initializes a new instance of the <see cref = "EventAggregator" /> class.
        /// </summary>
        public EventAggregator()
        {
            PublicationThreadMarshaller = DefaultPublicationThreadMarshaller;
        }

        /// <summary>
        /// Gets the singleton instance.
        /// </summary>
        public static IEventAggregator Instance
        {
            get
            {
                if (instance == null)
                {
                    instance = new EventAggregator();
                }
                return instance;
            }
        }

        /// <summary>
        ///   Gets or sets the default publication thread marshaller.
        /// </summary>
        /// <value>
        ///   The default publication thread marshaller.
        /// </value>
        public Action<System.Action> PublicationThreadMarshaller { get; set; }

        /// <summary>
        ///   Subscribes an instance to all events declared through implementations of <see cref = "IHandle{T}" />
        /// </summary>
        /// <param name = "instance">The instance to subscribe for event publication.</param>
        public virtual void Subscribe(object instance)
        {
            lock (handlers)
            {
                if (handlers.Any(x => x.Matches(instance)))
                    return;

                handlers.Add(new Handler(instance));
            }
        }

        /// <summary>
        ///   Unsubscribes the instance from all events.
        /// </summary>
        /// <param name = "instance">The instance to unsubscribe.</param>
        public virtual void Unsubscribe(object instance)
        {
            lock (handlers)
            {
                var found = handlers.FirstOrDefault(x => x.Matches(instance));

                if (found != null)
                    handlers.Remove(found);
            }
        }

        /// <summary>
        ///   Publishes a message.
        /// </summary>
        /// <param name = "message">The message instance.</param>
        /// <remarks>
        ///   Does not marshall the the publication to any special thread by default.
        /// </remarks>
        public virtual void Publish(object message)
        {
            Publish(message, PublicationThreadMarshaller);
        }

        /// <summary>
        ///   Publishes a message.
        /// </summary>
        /// <param name = "message">The message instance.</param>
        /// <param name = "marshal">Allows the publisher to provide a custom thread marshaller for the message publication.</param>
        public virtual void Publish(object message, Action<System.Action> marshal)
        {
            Handler[] toNotify;
            lock (handlers)
                toNotify = handlers.ToArray();

            marshal(() =>
            {
                var messageType = message.GetType();

                var dead = toNotify
                    .Where(handler => !handler.Handle(messageType, message))
                    .ToList();

                if (dead.Any())
                {
                    lock (handlers)
                    {
                        dead.Apply(x => handlers.Remove(x));
                    }
                }
            });
        }

        protected class Handler
        {
            readonly WeakReference reference;
            readonly Dictionary<TypeInfo, MethodInfo> supportedHandlers = new Dictionary<TypeInfo, MethodInfo>();

            public Handler(object handler)
            {
                reference = new WeakReference(handler);

                var handlerInfo = typeof(IHandle).GetTypeInfo();
                var interfaces = handler.GetType().GetTypeInfo().ImplementedInterfaces
                    .Where(x => handlerInfo.IsAssignableFrom(x.GetTypeInfo()) && x.IsGenericType);

                foreach (var @interface in interfaces)
                {
                    var type = @interface.GenericTypeArguments[0];
                    var method = @interface.GetTypeInfo().DeclaredMethods.First(x => x.Name == "Handle");
                    supportedHandlers[type.GetTypeInfo()] = method;
                }
            }

            public bool Matches(object instance)
            {
                return reference.Target == instance;
            }

            public bool Handle(Type messageType, object message)
            {
                var target = reference.Target;
                if (target == null)
                    return false;

                var typeInfo = messageType.GetTypeInfo();

                foreach (var pair in supportedHandlers)
                {
                    if (pair.Key.IsAssignableFrom(typeInfo))
                    {
                        pair.Value.Invoke(target, new[] { message });
                        return true;
                    }
                }

                return true;
            }
        }
    }

    /// <summary>
    /// Generic extension methods used by the framework.
    /// </summary>
    public static class EventAggregatorExtensionMethods
    {
        /// <summary>
        /// Applies the action to each element in the list.
        /// </summary>
        /// <typeparam name="T">The enumerable item's type.</typeparam>
        /// <param name="enumerable">The elements to enumerate.</param>
        /// <param name="action">The action to apply to each item in the list.</param>
        public static void Apply<T>(this IEnumerable<T> enumerable, Action<T> action)
        {
            foreach (var item in enumerable)
                action(item);
        }
    }
}

Here's how to use it. Please note that I'm just passing messages of type String, you might want to define your own event payload classes. A publisher just needs to get a reference to the central even handler, and publish its message:

EventAggregator.Instance.Publish(this.Message);

The subscriber registers himself to the same event aggregator. He specifies the type of message he's interested in by implementing the IHandle<T> interface:

class SubscriberViewModel : INotifyPropertyChanged, IHandle<string>
{ 
    public SubscriberViewModel()
    {
        // Subscribe
        EventAggregator.Instance.Subscribe(this);
    }

    public void Handle(string message)
    {
        // Event handling comes here
    }
}

Publisher and subscriber never have a reference to each other, while the event aggregator uses weak references. This results in a memory-leak free pattern.

Sample

I built a small and simple application (oops, I did it again: app) to test drive the framework. Here's how it looks like:

On the left side of the screen, there's a text balloon and a button. These belong to the publisher. Clicking the button updates the Message property and via the change notification extension methods also the GUI. It sends the new value as message through the event aggregator. The text balloon in the middle belongs to a subscriber that is instantiated using a view-first approach: the view instantiates its viewmodel. Typically this is done by defining its data context in XAML - but that does not seem to work yet, so I needed some code behind. The text balloon on the right belongs to another subscriber. This one is instantiated using the viewmodel-first approach. When the datacontext of a control is set to a viewmodel, the control decides what template to load. This is typically done with typed data templates in WPF, or with a value converter in Silverlight. Since typed data templates are not available in Metro, I used the Silverlight approach. [Note: The IValueConverter interface in Metro is different from its predecessors.] Both subscribers receive the message through the event aggregator subscription, and use the change notification extensions methods it to update their own Message property, populating the text balloon.

Source Code

Here's the full source code. It requires VS 2011 Developer Preview: U2UConsult.WinRT.MVVM.zip (205,86 kb)

Enjoy!

File IO in Windows 8

Fri, 14 Oct 2011 02:56:00 -1300

Let’s leave Windows Phone for a moment, and let’s have a look at Windows 8. Recently the U2U-team was present at the Microsoft Build-convention in Anaheim, California, where Microsoft unveiled Windows 8. Now, what we saw is still just a preview, but it clearly shows the direction in which Windows is evolving. Have a look at this video, to see Windows 8 in action :

The “new style” applications Windows 8 offers are “Metro”-applications (yes, like in Windows Phone Metro style), and these can be made using Xaml and managed code, or even using HTML5 + Javascript. Metro-apps will have to be installed through a marketplace, and are kind of sandboxed (Comparable to Silverlight, but different ;-) ). One of the effects of this sandboxing is that your options for working with files are limited. You cannot just access any folder on your machine ! Unfortunately you’re also unable to use Isolated Storage. So what can you use ? Let’s start by writing info into the “Local Folder”.

Windows.Storage.ApplicationData appData = Windows.Storage.ApplicationData.Current;

StorageFile file = await appData.LocalFolder.CreateFileAsync("EmployeeList.u2u");

Windows.Storage.Streams.IRandomAccessStream stream = await file.OpenAsync(FileAccessMode.ReadWrite);

No ordinary File here, but a StorageFile which I have to open to write in. The IRandomAccessStream I get back gives me the possibility to create an input- (for reading) or output-stream (for writing).
IOutputStream output = stream.GetOutputStreamAt(0);
And then I got stuck. The IOutputStream gives me a WriteAsync-function, but it ask me for an IBuffer-object. How to write data ? Luckily there’s already some MSDN-documentation available. That tells me to use a DataWriter which takes the IOutputStream as a constructor-argument.
DataWriter writer = new DataWriter(output);
writer.WriteString("HERE GOES DATA");
output.FlushAsync();

Not there yet ! The code I wrote starts fro; the assumption that File IO is much like the “ordinary” file IO: flush the stream and done. In Metro we have to ”commit” the data in the writer, and I have to start the flushing, so this is the working code :

   1:  DataWriter writer = new DataWriter(output);

   2:  writer.WriteString("HERE GOES DATA");

3:

   4:  await writer.StoreAsync();

   5:  output.FlushAsync().Start();

   6:  statusTxt.Text = "File Saved";

They could have made it simpler .
By localfolder I assumed the bin/debug-folder. Nothing there. It seems my file is located in C:\Users\michael\AppData\Local\Packages\d64899f1-9800-470a-9cb3-fa89210f4941_qs0a8q7rnpy8j\LocalState.

How about reading the file ? Well, simply reverse your writing-logic (writer becomes reader, output becomes input, store becomes load, …)

   1:  Windows.Storage.ApplicationData appData = Windows.Storage.ApplicationData.Current;

2:

   3:  var file = await appData.LocalFolder.GetFileAsync("EmployeeList.u2u");

   4:  Windows.Storage.Streams.IRandomAccessStream stream = await file.OpenAsync(FileAccessMode.Read);

5:

   6:  IInputStream input = stream.GetInputStreamAt(0);

7:

   8:  DataReader reader = new DataReader(input);

9:

  10:  var size = stream.Size;

  11:  await reader.LoadAsync((uint)size);

  12:  var data = reader.ReadString((uint)size);

There you go!

What about other folders than the “local” ? The KnownFolders=clqss gives me access to following locations :

Documents Library
Home Group
Media Server Devices (DLNA – Digital Living Network Alliance Devices, sounds interesting)
MusicLibrary
Pictures Library
Removable Devices
Videos Library

Let’s change the first 2 lines of my writing-code for using the documents library :

StorageFolder doclib = Windows.Storage.KnownFolders.DocumentsLibrary;

StorageFile file = await doclib.CreateFileAsync("EmployeeList.u2u");

As soon as you start running your code, it will fail on the first line (no exception though, simply stops). That’s because you explicitly have to give the app the capability to access the Document library. Double-clicking on Package.appxmanifest allows you to do that :

Still: this time your app will stop on the second line. You also need to associate your app with the u2u-fileextension. This is also done in the appxmanifest-file in the declarations-tab where we add a filetype association declaration :

There you go: the app works and saves my u2u-file in the doclibrary.

Metro Style Applications and MVVM

Thu, 06 Oct 2011 05:34:00 -1300

When working with windows 8 on a tablet, you quickly notice the different ways a user can interact with your application. Your application can control the full screen, both in landscape or portrait, or can share the screen with an other application. Basically, there are four modes your application will need to support:

Landscape
Portrait
Filled, i.e. when shared with an other application and our application receives the most space.
Snapped, i.e. when shared with an other application and your application receives only a small amount of space to the side.

There are several ways to achieve this. One way is to switch the visibility of several controls on and off in code. You can also use the VisualStateManager to achieve the same thing. But what if you want completely different views for different modes? The answer is MVVM.

The first thing that we need to take care of is the fact that each ViewModel has up to four views that it can use to display its content. In order to do so I added a class ViewModel which has a property for each of the views:

class ViewModel : INotifyPropertyChanged
{
    public DataTemplate LandscapeView { get; set; }
    public DataTemplate PortraitView { get; set; }
    public DataTemplate FilledView { get; set; }
    public DataTemplate SnappedView { get; set; }
}

public event PropertyChangedEventHandler PropertyChanged;

public void RaisePropertyChanged(string propertyName)
{
  if (PropertyChanged != null)
  {
    PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));
  }
}

Once we know that every ViewModel has these properties, we can set up our skeleton in MainPage.xaml

<UserControl x:Class="SheetReader.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" Loaded="Page_Loaded" Unloaded="Page_Unloaded">
  <Grid x:Name="LayoutRoot" Style="{StaticResource LayoutRootGridStyle}">
    <ContentControl x:Name="MainContent" Content="{Binding}" />
  </Grid>
</UserControl>

MainPage.xaml just contains a ContentControl bound to its DataContext, which is of type ViewModel. In the MainPage.xaml.cs file we can write the following code to switch between views:

private void SetCurrentView()
{
  var orientation = DisplayProperties.CurrentOrientation;
  if (orientation == DisplayOrientations.Portrait ||
      orientation == DisplayOrientations.PortraitFlipped)
    MainContent.ContentTemplate = CurrentViewModel.PortraitView;
  else
  {
    var layout = ApplicationLayout.Value;
    if (layout == ApplicationLayoutState.Filled)
      MainContent.ContentTemplate = CurrentViewModel.FilledView;
    else if (layout == ApplicationLayoutState.Snapped)
      MainContent.ContentTemplate = CurrentViewModel.SnappedView;
    else
      MainContent.ContentTemplate = CurrentViewModel.LandscapeView;
  }
}

So by checking some of the properties, we can decide which View we want to use by setting the ContentTemplate property of the ContentControl we added in MainPage.xaml.
We should call this piece of code every time this page loads, changes orientation or has to change it’s layout when sharing the screen.

private void Page_Loaded(object sender, RoutedEventArgs e)
{
  DisplayProperties.OrientationChanged += s => SetCurrentView();
  ApplicationLayout.GetForCurrentView().LayoutChanged +=
                                                (s,e) => SetCurrentView();
  SetCurrentView();
}

Then all we have to do is set the DataContext to some ViewModel:

public MainPage()
{
  InitializeComponent();
  this.DataContext = new SimpleViewModel();
}

So now we have a skeleton that shows the right View for our ViewModel, according to the mode your application might be in.
All we have to do now is, creating ViewModels and wiring up their Views. We can specify our Views in App.xaml:

<Application.Resources>
    <DataTemplate x:Key="SimpleLandscapeView">
        ...
    </DataTemplate>
    <DataTemplate x:Key="SimplePortraitView">
        ...
    </DataTemplate>
    <DataTemplate x:Key="SimpleFilledView">
        ...
    </DataTemplate>
    <DataTemplate x:Key="SimpleSnappedView">
        ...
    </DataTemplate>
</Application.Resources>

For example we can bind to fewer properties in the SnappedView, than in the LandscapeView, or we can organize our data in a different way when the device is in Portrait mode.

Once we are done with this, we can retrieve them in our ViewModel by setting the properties as follows:

public SimpleViewModel()
{
  ...

  this.LandscapeView = (DataTemplate)App.Current.Resources["SimpleLandscapeView"];
  this.PortraitView = (DataTemplate)App.Current.Resources["SimplePortraitView"];
  this.FilledView = (DataTemplate)App.Current.Resources["SimpleFilledView"];
  this.SnappedView = (DataTemplate)App.Current.Resources["SimpleSnappedView"];
}

Here is a example of a really simple ViewModel which has an Image property and a Text property, notice how the Snapped view doesn’t bind to the image.

LandscapeView:

PortraitView:

FilledView

SnappedView

For more detailed information you can download the source files:

MetroAndMVVM.zip (133,29 kb)

Creating WP7 prototypes with Sketchflow

Wed, 31 Aug 2011 01:47:00 -1300

With the upcoming release of Windows Phone Mango, you can create prototypes for Phone apps with Sketchflow. For people not knowing Sketchflow : it allows you to create prototypes that look like they have been drawn. When you present a “normal” prototype to a customer you get conversations like this :

Nice protoype, how long before you can deliver us the final product ?

I estimate we can deliver within 4 months.

What ? You created this prototype in just 3 days, it looks like it’s almost finished. How can it possibly take 4 months for completing ?

A sketchflow prototype looks more “unfinished”. It’s not new, it has been around for WPF and silverlight, but you can now also get the projecttemplate for WP7 for using in Blend. Just go to http://wp7sketchflow.codeplex.com/, download and install. Beware : you can only use this thing if you have the full paid version of Blend. The one you get for free with the phone developers tool will not do.

OK. Let’s open up Blend and create a Windows Phone SketchFlow application :

This project directly creates some an empty screen for my app and a fake start-up screen:

I also get an overview how I can move (“Flow”) between the different screens:

I created a little prototype for an application I sometimes create during WP7-courses : a complaints-application for my city (the well-know megacity Serskamp in Belgium). This application allows me to signal stuff like defective traffic lights a.o. I also need to be able to add a location (GPS) and a picture, and to track my filed complaints. I’m not going to create the app itself now, but just the screens.

I start by adding a Panorama on my start screen. This thing automatically gets 2 Panorama-items. The design of my item looks like this :

For the data I created a demo-datasource in the data-tab:

got some trouble for designing the second Panorama-item. Unlike Visual Studio, in which you simply have to select a Panorama-item for making it the active one, there’s no such thing in Blend. Or at least I didn’t find it. The only thing I could do was temporary setting the visibility of the other items to collapsed.

Inside the Flow-panel I can select to add a new Connected screen. This way I create a screen for the follow-up of my complaints, and one for setting the location. I also create connections for returning to Screen 1, and remove the connection from my new screens to Search and AppList.

The Follow-up screen looks like this :

For finishing I also change the start-screen, and I’m done.

Now I’ve finished my SketchFlow-prototype, there’s 2 thing I can do : print it, or run it. In the File-menu you have an option for exporting to Word. This will export all your designs and add a table of contents :

WindowsPhonePrototype2.doc (1,28 mb)

Creating a SketchFlow-prototype is essentially creating a Silverlight-application. This gives you a way of “running” the app, so you can demonstrate it to your customer (see video) :

Is that cool, or what ?

Make your startup task a Windows Azure startup plugin and easily re-use it

Tue, 30 Aug 2011 19:20:16 -1300

In a previous blog I showed you how to create a startup task to install certain requirements in Azure Compute. In this blog post I will show you how you can easily turn this startup task into a re-usable plugin. This post continues with the startup post.

Open the UsingStartupTasks lab solution. Right-click on the HelloMVC3 project and select “Open Folder in Windows Explorer”.

Right-click the StartupTasks folder and select Copy.

Open File Explorer and navigate to the Windows Azure SDK folder in Program files (at time of writing this is located on my machine at C:\Program Files\Windows Azure SDK\v1.4). Open the bin folder, then the plugins folder. Paste the StartupTasks folder here. Rename it to MVC3. You should end up with something like this:

As you can see, other Azure features also use this plugin model, for example Azure Connect uses this to install the proper network components in your azure role instance.

Open the folder you just created. Inside it create a new file called MVC3.csplugin (using notepad again, and take care that you use the right extension). Add following content to it (you can copy-paste most of it from the service definition file):

<?xml version="1.0" ?>
<RoleModule  xmlns="http://schemas.microsoft.com/ServiceHosting/2008/10/ServiceDefinition"
 namespace="U2U.WindowsAzure.Plugins.MVC3">
  <Startup>
    <Task commandLine="installmvc3.cmd" executionContext="elevated" />
  </Startup>
  <ConfigurationSettings>
    <!-- None -->
  </ConfigurationSettings>
  <Endpoints>
    <!-- None -->
  </Endpoints>
  <Certificates>
    <!-- None -->
  </Certificates>
</RoleModule>

Go back to the service definition file. Remove your startup task, and add your plugin to the modules section:

<?xml version="1.0" encoding="utf-8"?>
<ServiceDefinition name="UsingStartupTasks" xmlns="http://schemas.microsoft.com/ServiceHosting/2008/10/ServiceDefinition">
  <WebRole name="HelloMVC3">
    <Sites>
      <Site name="Web">
        <Bindings>
          <Binding name="Endpoint1" endpointName="Endpoint1" />
        </Bindings>
      </Site>
    </Sites>
    <Endpoints>
      <InputEndpoint name="Endpoint1" protocol="http" port="80" />
    </Endpoints>
    <Imports>
      <Import moduleName="Diagnostics" />
      <Import moduleName="RemoteAccess" />
      <Import moduleName="RemoteForwarder" />
      <Import moduleName="MVC3" />
    </Imports>
    <!--<Startup>
      <Task commandLine="StartupTasks\installmvc.cmd" 
            executionContext="elevated"
            taskType="simple"
      />
    </Startup>-->
  </WebRole>
</ServiceDefinition>

Right-click on the Cloud project and select Publish… The Deploy Windows Azure project dialog opens:

Select your credentials, environment and storage account.

Optionally you can configure remote desktop connections in case something went wrong, this will make it easier to see if MVC 3 was indeed installed.

Click on Ok and wait…

Deployment in Visual Studio should start:

Wait some more till complete (because the startup tasks are executing this will take a long time):

Click on the Url. You should now see the MVC 3 screen!

The return of SQL CE !

Thu, 11 Aug 2011 05:00:00 -1300

After playing a few weeks with the Mango-beta, I’m even more convinced that the Windows Phone 7 simply is the best smartphone available. Driving in your car, receiving a text-message, and suddenly a voice over Bluetooth asks me if the message should be read! And after the message has been read, it asks if I would like to dictate an answer (or call). How cool is that ? (unfortunately only in English for the moment, so when trying to dictate in Dutch, you get funny results ).

One of the things that Mango brings is SQL Server CE. I remember using this on Windows Mobile, when you had to use stuff like SqlCeConnection, SqlCeCommand, etc… It seems that these classes are not existing on Mango, but of course we have Linq to SQL we can use. Using IsolatedStorageFile’s for storing data is nice, but having a “real” database for storing relational data is nicer. Still, during my experiment I saw that there are a few things missing to make life easier. It’s still in beta of course, so hopefully it will get added in the near future.

I wanted to do a little trial showing the products and Categories out of the NorthWind-database. I decided to use SQL Integration Services for creating a SQL CE database for me, copying the needed data. Unfortunately this is not possible for CE. I needed to create the database and the tables myself. In the beta-version of Mango developer-tools it is yet impossible to select a SQLCE-file for item to add. I simply created it in a dummy console-app, and then copied it into my WP7-application. Double clicking on the sdf-file opens up the designer.

Adding a table is easy: Right-click the Tables-folder, select “Create Table” and you can start designing. This is what I created :

Specifying the Primary Key and the relationship between Products and Categories can be created by calling the table properties:

So far for the database structure. Copying the data from the “normal” Northwind to my CE-tables can be done through SQL Integration services. Now what about the LINQ to SQL classes ? No way of adding such an item in my project. The way to go, is like in the beginning of LINQ: use SQLMetal (You’ll find it here : C:\Program Files (x86)\Microsoft SDKs\Windows\v7.0A\Bin). The following command generates the necessary code:

Sqlmetal /code:NorthWindCE.cs Northwind.sdf

The generated code look nice, but if your looking for any navigation-properties: nowhere to find…

Next roadblock: I can only access databases stored in isolatedstorage. Makes sense, although it would be nice to be able to share data over multiple apps. Since there is no direct way of adding files for IsolatedStorage in VisualStudio, I wrote a bit of code for copying my sdf-file (which has been added as a resource) to IsolatedStorage:

   1:  private void CheckIsolatedStorageDb()

   2:  {

   3:      var storage = IsolatedStorageFile.GetUserStoreForApplication();

   4:      if (!storage.FileExists("NorthWind.sdf"))

   5:      {

   6:          Uri uri = new Uri("SQLTest;component/NorthWind.sdf",UriKind.Relative);

   7:          StreamResourceInfo info = App.GetResourceStream(uri);

8:

   9:          if (info!=null)

  10:          {

  11:              Stream stream = info.Stream;

  12:              BinaryReader reader = new BinaryReader(stream);

  13:              byte[] buffer = new byte[stream.Length];

  14:              reader.Read(buffer, 0, Convert.ToInt32(stream.Length));

  15:              reader.Dispose();

16:

  17:              IsolatedStorageFileStream iStream= storage.CreateFile("NorthWind.sdf");

  18:              iStream.Write(buffer, 0, buffer.Length);

  19:              iStream.Flush();

  20:              iStream.Dispose();

  21:              stream.Dispose();

  22:          }

  23:      }

  24:  }

I call this function on Application_launch, and my sdf-file gets copied. From now on I can start using my db, using LINQ. Let’s start by adding a listbox to our MainPage like this:

<ListBox DisplayMemberPath="ProductName" ItemsSource="{Binding}" />

Code looks like this :

private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)

    db = new NorthWind("Data Source=isostore:/NorthWind.sdf");

    this.DataContext = from p in db.Products

                       where p.UnitPrice < 20

                       select p;

As you can see, I provide a connectionstring pointing to Isolated storage, binding the datacontext to some LINQ-statement, and voila.

Now what about navigating between categories and products ? First I extend my SQLmetal-generated code with these (copied these by generating code for the “big” Northwind) :

In Products:

   1:  private EntityRef<Categories> _Category;

2:

   3:  [global::System.Data.Linq.Mapping.AssociationAttribute(Name = "Category_Product", Storage = "_Category",

   4:      ThisKey = "CategoryID", OtherKey = "CategoryID", IsForeignKey = true)]

   5:  public Categories Category

   6:  {

   7:      get

   8:      {

   9:          return this._Category.Entity;

  10:      }

  11:      set

  12:      {

  13:          Categories previousValue = this._Category.Entity;

  14:          if (((previousValue != value)

  15:                      || (this._Category.HasLoadedOrAssignedValue == false)))

  16:          {

  17:              this.SendPropertyChanging();

  18:              if ((previousValue != null))

  19:              {

  20:                  this._Category.Entity = null;

  21:                  previousValue.Products.Remove(this);

  22:              }

  23:              this._Category.Entity = value;

  24:              if ((value != null))

  25:              {

  26:                  value.Products.Add(this);

  27:                  this._CategoryID = value.CategoryID;

  28:              }

  29:              else

  30:              {

  31:                  this._CategoryID = default(Nullable<int>);

  32:              }

  33:              this.SendPropertyChanged("Category");

  34:          }

  35:      }

  36:  }

And in Categories:

   1:  private EntitySet<Products> _Products;

2:

   3:  [global::System.Data.Linq.Mapping.Association(Name="Category_Product", Storage="_Products",

   4:      ThisKey="CategoryID", OtherKey="CategoryID")]

   5:  public EntitySet<Products> Products

   6:  {

   7:      get { return this._Products; }

   8:      set { this._Products.Assign(value); }

   9:  }

Let’s now change our MainPage a little: I’ll have two Listboxes this time:

<ListBox DisplayMemberPath="CategoryName" Name="listBox2" ItemsSource="{Binding}" />
<ListBox Grid.Row="1" Name="listBox1" DataContext="{Binding ElementName=listBox2, Path=SelectedItem}"
         DisplayMemberPath="ProductName" ItemsSource="{Binding Products}" />

Also set the datacontext to categories this time :

private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)

    db = new NorthWind("Data Source=isostore:/NorthWind.sdf");

    this.DataContext = db.Categories;

And thanks to the powers of databinding, I get all products from the category I select.

Now I’m already happy to have this in the beta, but I’d like to have some extras in the final version:

- Give me an easy way of copying existing structures to my CE database
- Get me a way of creating my LINQ to SQL classes from within Visual Studio
- Make sure that my Navigation properties are being generated
- and give me something, so I can specify files to be directly saved in Isolated Storage. (Some Build Action ? Next to Resource, Content,… also an option IsolatedStorage ?)

Excellent intro to Windows Azure

Sat, 23 Jul 2011 16:31:41 -1300

If you want an excellent introduction into Windows Azure I can recommend “Windows Azure: Step by Step” from Roberto Brunetti. This book will teach you the basic components of Windows Azure and how to build an application with them. It will introduce you to Azure Compute, Azure Storage and Azure AppFabric Servicebus; in clear and easy-to-follow step-by-step instructions you build applications that use the different Azure features. In my opinion this is the best way to learn.

Unfortunately this book doesn’t have space to delve deeper into some subjects (or you would need a >1000 pages book), so if you want to learn more about all the other things I recommend our Azure training.

Windows Azure Toolkit for social games

Wed, 20 Jul 2011 16:01:30 -1300

Marrying Azure and HTML5: Microsoft released today the Windows Azure Toolkit for social games: http://blogs.msdn.com/b/windowsazure/archive/2011/07/20/build-your-next-game-with-the-windows-azure-toolkit-for-social-games.aspx

Installing requirements using Azure startup tasks

Tue, 12 Jul 2011 15:53:29 -1300

Windows Azure deploys your azure web or worker role in the cloud, on a machine with Windows Server 2008 and .NET 4 pre-installed. But what if you need an additional requirement? What if you need to install some performance counter, or if you need some other piece of software like the media encoder? Then you can use a startup task to get the job done. In this blog post you will create a simple web role using ASP.NET MVC 3, then add a startup task to ensure MVC 3 is also installed on the Azure instance. For this walkthrough you’ll need Visual Studio 2010 and ASP.NET MVC 3. You’ll also need the standalone MVC 3 installer, which you can find here.

Step 1: Create the Azure solution.

Start by creating a new Cloud project, call it UsingStartupTasks.

Click Ok. Don’t add any role just yet, so click Ok in the next screen. MVC 3 is not available from the “New Windows Azure project” dialog, so we’ll need to use another way to get an ASP.NET project in Azure…

Now add a new ASP.NET MVC 3 project, calling it HelloMVC3.

Select the Internet Application template, leave the rest to its defaults, then press Ok.

Right-click the Roles folder beneath your cloud project and select Add->Web Role Project in Solution…

Select the HelloMVC3 project in the next screen and hit Ok.

Adding the Startup task

Add a new folder StartupTasks to your MVC project and add the MVC installer AspNetMVC3Setup.exe to it. Open notepad.exe (don’t add the following file using Visual Studio because it will add a Byte Order Mark and the Azure runtime doesn’t like that) and create a new batch file called installmvc.cmd in the StartupTasks folder. To add it to the Visual Studio project first click on the Show All Files button in the solution explorer, and then right-click the installmvc.cmd file and select Include In Project. Do the same for the AspNetMVC3Setup.exe installer.

We’ll use this batch file to execute the installer as follows: enter following in installmvc.cmd:

%~dp0AspNetMVC3Setup.exe /q /log %~dp0mvc3_install.htm
exit /b 0

The %~dp0 actually returns the install folder for your azure project, so the first line will run the standalone MVC3 installer, this will write any install problems to a log file called mvc3_install.htm.

The %~dp0 is used to get the directory containing the startup tasks (an azure server local copy of the StartupTasks folder). The first statement will do a silent (quiet) install of MVC3, and the next line will return a success error code.

Make sure both files have a build action of “none” and Copy to Output Directory set to “Copy Always”.

Editing the Service definition file

Finally you need to open the ServiceDefinition.csdef file and add the task to it:

<?xml version="1.0" encoding="utf-8"?>
<ServiceDefinition name="UsingStartupTasks" xmlns="http://schemas.microsoft.com/ServiceHosting/2008/10/ServiceDefinition">
  <WebRole name="HelloMVC3">
    <Sites>
      <Site name="Web">
        <Bindings>
          <Binding name="Endpoint1" endpointName="Endpoint1" />
        </Bindings>
      </Site>
    </Sites>
    <Endpoints>
      <InputEndpoint name="Endpoint1" protocol="http" port="80" />
    </Endpoints>
    <Imports>
      …

    </Imports>
    <Startup>
      <Task commandLine="StartupTasks\installmvc.cmd" 
            executionContext="elevated"
            taskType="simple"
      />
    </Startup>
  </WebRole>
</ServiceDefinition>

In this <Startup> element you can add any number of Task elements. Each represents a commandLine that will be executed on the installing instance prior to installing your azure project. You also get a couple of options, first you can specify the executionContext: this can be elevated or limited. Elevated gives you administrator-like privileges and is ideal for installers (which normally only work with admin privileges). Limited gives you “normal user” privileges. You can also choose the taskType. This is how the task will be executed. You get three options: simple, background or foreground. Simple means that the installer will wait for this task to complete before continuing with the next task (or the actual installation of your azure role). Background and foreground means the same thing like in threading. Background will not block the installer from continuing with the next task, and these will run in parallel. So to get MVC3 installed we need to run elevated, and we don’t want installation to continue before MVC3 has been installed, so we choose simple as the task type…

Deploying to Azure

Right-click on the Cloud project and select Publish… The Deploy Windows Azure project dialog opens:

Select your credentials, environment and storage account. You may need to do some setup for this to work…

Optionally you can configure remote desktop connections in case something went wrong, this will make it easier to see if MVC 3 was indeed installed.

Click on Ok and wait…

Deployment in Visual Studio should start:

Wait some more till complete (because the startup tasks are executing this will take a long time):

Click on the Url. You should now see the MVC 3 screen!

In my next blog post I will show you how to turn this startup task into an azure startup plugin, which will make it easier to re-use this startup task.

Storing message in table storage

Sun, 10 Jul 2011 04:45:57 -1300

In my previous post I looked at getting started with table storage, in this one we will create a table for our entities and store them. As you’ll see, quite easy!

So, to store an entity in table storage you start by creating a TableServiceEntity derived class (recap from previous post):

public class MessageEntity : TableServiceEntity
{
  public MessageEntity() { }

  public MessageEntity(string partitionKey, string rowKey, string message)
    : base( partitionKey, rowKey )
  {
    Message = message;
  }

  public string Message { get; set; }
}

You also need a table class, this time deriving from TableServiceContext:

public class MessageContext : TableServiceContext
{
  public const string MessageTable = "Messages";

  public MessageContext(string baseAddress, StorageCredentials credentials)
    : base(baseAddress, credentials)
  {
  }
}

TableServiceContext requires a base address and credentials, and since our class derives from it we need a constructor taking the same arguments. I also have a const string for the table name.

If the table doesn’t exist yet you should create it. This is easy, just add the code to create the table in the MessageContext’s static constructor:

static MessageContext()
{
  var tableClient =  MyStorageAccount.Instance.CreateCloudTableClient();
  tableClient.CreateTableIfNotExist(MessageTable);
}

A static constructor is automatically called when you use the type. Note that I use the MyStorageAccount class, which uses the same static constructor trick to initialize the storage account.

public static class MyStorageAccount
{
  public static string DataConnection = "DataConnection";

  public static CloudStorageAccount Instance
  {
    get
    {
      return CloudStorageAccount.FromConfigurationSetting(DataConnection);
    }
  }

  static MyStorageAccount()
  {
    CloudStorageAccount.SetConfigurationSettingPublisher(
      (config, setter) =>
      {
        setter(
          RoleEnvironment.IsAvailable ?
            RoleEnvironment.GetConfigurationSettingValue(config)
            :
            ConfigurationManager.AppSettings[config]
        );

        RoleEnvironment.Changing += (_, changes) =>
        {
          if (changes.Changes
                     .OfType<RoleEnvironmentConfigurationSettingChange>()
                     .Any(change => change.ConfigurationSettingName == config))
          {
            if (!setter(RoleEnvironment.GetConfigurationSettingValue(config)))
            {
              RoleEnvironment.RequestRecycle();
            }
          }
        };
      });
  }
}

Now we are ready to add the code to create and add a message to our table. Add following code to MessageContext:

public static MessageEntity CreateMessage( string message )
{
  return new MessageEntity(MessageTable, Guid.NewGuid().ToString(), message);
}

public void AddMessage(MessageEntity msg)
{
  this.AddObject(MessageTable, msg);
  this.SaveChanges();
}

The CreateMessage method creates a new MessageEntity instance, with the same partition key (I don’t expect to store a lot of messages), a unique Guid as the row key, and of course the message. The AddMessage method adds this entity to the table, and then calls SaveChanges to send the new row to the table. This mechanism uses the same concepts as WCF Data Services.

In the previous post we created a web site with a textbox and a button. Implement the button’s click event as follows:

protected void postButton_Click(object sender, EventArgs e)
{
  string message = messageText.Text;
  var msg = MessageContext.CreateMessage(message);
  context.AddMessage(msg);
}

This will allow you to add messages to storage.

Before you can run this sample, you also need to setup the connection. Double-click the CloudMessages project beneath the Roles folder.

This open the project’s configuration window. Select the Settings tab and add a “DataConnection” setting, select “Connection String” as the type and then select your preferred storage account. In the beginning it is best to use development storage, and that is what I did here:

After running the web site you are of course wondering if your messages were actually added. So let’s add some code and UI to display the messages in the table.

Start by adding the following property to MessageContext:

public IQueryable<MessageEntity> Messages
{
  get { return CreateQuery<MessageEntity>(MessageTable); }
}

This property returns an IQueryable<MessageEntity>, which is then used by LINQ for writing queries. To actual query is performed in our web page class. But first we need to add some UI to display the messages. Add a repeater control beneath the TextBox and Button:

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
  <p>
    <asp:TextBox ID="messageText" runat="server" Width="396px"></asp:TextBox>
    <asp:Button ID="postButton" runat="server" OnClick="postButton_Click" Text="Post message" />
  </p>
  <p>
    <asp:Repeater ID="messageList" runat="server">
      <ItemTemplate>
        <p>
          <%# ((MessagesLib.MessageEntity) Container.DataItem).Message %>
        </p>
      </ItemTemplate>
    </asp:Repeater>
  </p>
</asp:Content>

Now that we can display the messages, let’s add a LoadMessages method below the click event handler of the page:

private void LoadMessages()
{
  var query = from msg in context.Messages
                           select msg;
  messageList.DataSource = query.ToList()
                                .OrderBy(m => m.Timestamp)
                                .Take(10);
  messageList.DataBind();
}

Call this method in the Load event of the page:

protected void Page_Load(object sender, EventArgs e)
{
  if (!IsPostBack)
  {
    LoadMessages();
  }
}

And again in the button’s click event:

protected void postButton_Click(object sender, EventArgs e)
{
  string message = messageText.Text;
  var msg = MessageContext.CreateMessage(message);
  context.AddMessage(msg);
  LoadMessages();
}

Run. Add some messages, and see them listed (only the first 10 messages will be displayed, change to query as you like).

Introducing Windows Azure Table Storage

Wed, 06 Jul 2011 08:49:22 -1300

Windows Azure storage gives you several persistent and durables storage options. In this blog post I want to look at Table storage (which I prefer to call Entity storage because you can store any mix of entities in these tables; so you can store products AND customers in the same table). For this walkthrough you’ll need the AZURE SDK and setup for development…

1. Getting ready

Start Visual Studio 2010 and create a new Azure project called MessageServiceWithTables:

In the New Windows Azure Project dialog select the ASP.NET Web Role and press the > button, then rename the project to CloudMessages:

Replace the content of default.aspx with the following:

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="CloudMessages._Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <p>
        <asp:TextBox ID="messageText" runat="server" Width="396px"></asp:TextBox>
        <asp:Button ID="postButton" runat="server" OnClick="postButton_Click" Text="Post message" />
    </p>
</asp:Content>

2. Creating the table store entity classes

Add a new Class Library project to your solution, and call it MessagesLib. Delete class1.cs. Add a new class called MessageEntity.

2.1 Creating the entity class

We want to derive this class from TableServiceEntity, but first we need to add a couple of references. So select Add Reference… on the library project.

Browse to Program Files\Windows Azure SDK\v1.4\ref and select following libraries (or simply select them all):

You also need to add a reference to System.Data.Services.Client (I’m using Power Tools, so the Add Reference looks different (excuse me, better!):

Now you’re ready to add the MessageEntity class deriving from the TableServiceEntity base class.

public class MessageEntity : TableServiceEntity
{
  public MessageEntity() { }

  public MessageEntity(string partitionKey, string rowKey, string message)
    : base( partitionKey, rowKey )
  {
    Message = message;
  }

  public string Message { get; set; }
}

This base class has three properties used by table storage: the partition key, the row key and the timestamp:

The partition key is used as follows: all entities sharing the same partition key share the same storage device, they are kept together. This make querying these objects faster. But on the other hand, entities with different partition keys can be stored on different machines, allowing queries to be distributed over these machines when there are many instances. So choosing the partition key is a tricky thing, and there are no automated tools to help you here. Some people will use buckets (like from 0 to 9) and evenly distribute their instances over all buckets.

The row key makes the entity unique and the timestamp is used for concurrency checking (optimistic concurrency).

So, what do we need to store? Since we just want to store messages we add a single Message property and constructors for easy instantiation.

In the next blog post we’ll be looking at creating the table in table storage and inserting new data…

Debugging those nasty Windows Azure startup-code problems with IntelliTrace

Sun, 03 Jul 2011 16:55:05 -1300

1. Introducing Intelli-Trace

How do engineers figure out what caused a plane crash? One of the things they use is the black-box recording, which recorded all mayor data from the plane prior to the crash. This recording allows them to step back in time and analyze step-by-step what happened. Microsoft Visual Studio 2010 Ultimate also has a black-box for your code, called IntelliTrace. While your code is running, Intellitrace writes a log file (called an iTrace file), and you can analyze this using Visual Studio Ultimate. Windows Azure also allows you to enable Intellitrace on the server running your code, and this is ideal to figure out why your code is crashing on the server, especially early code (because you cannot attach the debugger).

In the next part you’ll walkthrough this process. But first you need to download the AzureAndIntelliTrace solution.

2. Deploying the solution

We’ll start by deploying the solution, so open the AzureAndIntelliTrace solution with Visual Studio. Right-click the Azure project and choose Publish… The Deploy Windows Azure project dialog should open.

Make sure you check the “Enable IntelliTrace for .NET 4 roles” checkbox.

Let’s have a look at settings, so click the “Settings…” link. Open the Modules tab:

You can just leave everything to its default settings, but you could remove the StorageClient library if you would want to use intellitrace to track down a storage problem…

Wait for the deployment until it says “Busy…”. If something goes wrong during the startup fase of your role instance with IntelliTrace enabled, Azure will keep the role busy so you can download the iTrace file.

So you’re waiting for this:

Then it is time to download the iTrace file. You can do that from the Server Explorer window. Open the Windows Azure Compute tree item until you reach the instance (note the Busy state!):

The instance name will also mention whether or not it is IntelliTrace enabled.

Now you can right click the instance to download the iTrace file:

Wait for download to complete, the iTrace file should open automatically in Visual Studio:

Scroll down until you reach the Exception Data section. You should see that you got a FileNotFoundException, caused because it couldn’t find the Dependencies assembly:

3. Fixing the dependency problem

This kind of problem is easily solved, but first we need to stop this deployment. Go back to the Windows Azure Activity Log and right-click the deployment. Choose “Cancel and remove”.

The problem is that we have a reference to the dependencies assembly, but when deployed to Azure it is not copied onto the instance. Go back to the solution and open the DebugThis project. Open the References folder and select the Dependencies assembly.

In the properties window set the “Copy Local” property to true.

Try redeploying again. Now we will have another problem, so wait for the instance to go Busy again…

Download the iTrace file again. Scroll down to the exceptions section, select the FormatException and click the Start Debugging button. IntelliTrace will put you on the offending line.

It is easy to see that the string.Format is missing an argument…

You can start the debugger by clicking the “Set Debugger Context Here” button in the gutter.

Now you can step back using intellitrace…

As you can see, IntelliTrace is great for figuring out this kind of problem, especially if your code works in the compute emulator, but doesn’t on the real Azure server instance…

Building a Storage Account helper class (and forget about it)

Fri, 01 Jul 2011 18:19:26 -1300

When you use storage with the managed API’s, you always need to use a storage account, and make sure you setup the whole thing correctly. The way to do this is slightly different when building a web role versus a worker role, so I decided to tackle this problem by building a simple class that takes care of everything, and works the same in a web or worker role. All you need is to copy/reference this class in each of your projects.

1. The first problem – setting up the ConfigurationSettingPublisher

The storage account uses a connection string. This connection string can come from the normal web.config (when you use storage in a local web site) or the Azure project’s ServiceConfiguration.cscfg. To allow all connections to be available in both environments the storage account uses a ConfigurationSettingPublisher, which is a delegate that retrieves the connection.

Code Snippet
       CloudStorageAccount.SetConfigurationSettingPublisher( 
  (config, setter) => 
  { 
    setter( 
      RoleEnvironment.IsAvailable ? 
        RoleEnvironment.GetConfigurationSettingValue(config) 
        : 
        ConfigurationManager.AppSettings[config] 
    ); 
  }); 
     

Problem is where to put the code; in a web role you have to put the code in startup code, so you need to put this in Global.asax. In a worker role there is no such thing, so you put this in the worker role’s Start method. So, you might say, let’s also put this code in the Start method of the web role; this will run in another process so you end up without a proper initialized web role…

So here is my solution: create a new class MyStorageAccount which uses a static constructor (also known as the type constructor) so call this code. A static constructor will automatically be called by the runtime when you first use the class. So this way you will always have correct initialization, and only when you need it:

Code Snippet
       using System.Configuration; 
using Microsoft.WindowsAzure; 
using Microsoft.WindowsAzure.ServiceRuntime; 
  
namespace MessagesLib 
{ 
  public static class MyStorageAccount 
  { 
    public static string DataConnection = "DataConnection"; 
  
    public static CloudStorageAccount Instance 
    { 
      get 
      { 
        return CloudStorageAccount.FromConfigurationSetting(DataConnection); 
      } 
    } 
  
    static MyStorageAccount() 
    { 
      CloudStorageAccount.SetConfigurationSettingPublisher( 
        (config, setter) => 
        { 
          setter( 
            RoleEnvironment.IsAvailable ? 
              RoleEnvironment.GetConfigurationSettingValue(config) 
              : 
              ConfigurationManager.AppSettings[config] 
          ); 
        }); 
    } 
  } 
} 
     

This class uses the static constructor to setup the ConfigurationSettingPublisher, and also has an Instance property. This allows you to retrieve the storage account without always having to provide the connection configuration name. Most applications will only use a single connection, so this should work fine.

So instead of writing this all the time:

Code Snippet
       var account = CloudStorageAccount.FromConfigurationSetting("DataConnection"); 
var tableClient = 
  account.CreateCloudTableClient(); 
     

You can now write it like this:

Code Snippet
       var account = MyStorageAccount.Instance; 
var tableClient = 
  account.CreateCloudTableClient(); 
     

Or even shorter:

Code Snippet
       var tableClient =  MyStorageAccount.Instance.CreateCloudTableClient(); 
     

Much easier!

2. Handling configuration changes

Next problem is when the configuration of the role is updated. In this case you need to check if you can handle this change, if not, you should restart the role. Typical code for this looks like this:

Code Snippet
       RoleEnvironment.Changing += (_, changes) => 
{ 
  if (changes.Changes 
             .OfType<RoleEnvironmentConfigurationSettingChange>() 
             .Any(change => change.ConfigurationSettingName == config)) 
  { 
    if (!setter(RoleEnvironment.GetConfigurationSettingValue(config))) 
    { 
      RoleEnvironment.RequestRecycle(); 
    } 
  } 
}; 
     

We register for the Changing event. When this event gets raised, you receive all the changes in a collection. You walk the collection to see if the configuration you’re interested in is part of the collection. In that case you need to re-invoke the ConfigurationSettingPublisher, and when that method returns false you need the recycle the role. Please note that this will only happen when running as a role (not local web site) so we can use the cloud version to retrieve configuration…

So what is the result of this? No need to call special code in your Global.asax or worker role Start method. It just works!

Running multiple sites in one Windows Azure Web Role

Tue, 28 Jun 2011 16:32:24 -1300

Since the release of the Windows Azure SDK 1.3 it is possible to host multiple sites in one web role. In this blog post I will show you how to do this.

1. Creating the Azure project

Start by creating a new Azure Cloud project. Add a single WebRole project (call it MultiSitesWebRole) to it:

Hit Ok.

Now we just want to make sure we see each different web site, so open the default.aspx page and change the header, for example:

Code Snippet
 <%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>
 
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <h2>
        This is the main site!
    </h2>
    <p>
        To learn more about ASP.NET visit <a href="http://www.asp.net" title="ASP.NET Website">www.asp.net</a>.
    </p>
    <p>
        You can also find <a href="http://go.microsoft.com/fwlink/?LinkID=152368&amp;clcid=0x409"
            title="MSDN ASP.NET Docs">documentation on ASP.NET at MSDN</a>.
    </p>
</asp:Content>
 

Make sure the cloud project is set as the start project, and then run (F5) your solution.

Your web browser should open and display the site.

While this is still running open IIS manager. Open the list of sites, you should see the site for this solution (the name will be different):

The Windows Azure Compute emulator actually uses IIS to run your web role by creating a site on your local machine.

Stop your debugging session.

2. Adding the second site

Right-click your solution and add another ASP.NET web project.calling it “TheSecondWebSite”. Update the default.aspx again to show that this is the second site:

Code Snippet
 <%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="WebApplication2._Default" %>
 
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <h2>
        The second web site!
    </h2>
    <p>
        To learn more about ASP.NET visit <a href="http://www.asp.net" title="ASP.NET Website">www.asp.net</a>.
    </p>
    <p>
        You can also find <a href="http://go.microsoft.com/fwlink/?LinkID=152368&amp;clcid=0x409"
            title="MSDN ASP.NET Docs">documentation on ASP.NET at MSDN</a>.
    </p>
</asp:Content>
 

Now open the cloud service definition file (ServiceDefinition.csdef). Look at the <Sites> element and its children. Copy the <Site> element to create another one. Modify the site name and add a physicalDirectory element set to the path of the second site. Inside the <Site> element look for the <Binding> element and add another attribute hostHeader set to www.contoso.com. Ok, I’m using www.contoso.com for testing purposes, you can use your own site url if you want. We’ll be changing the host file on your machine so you can test everything, but this won’t work for other people. If you really want to make this work you will need to make the necessary DNS entries to redirect your site url to the cloud url…

ServiceDefinition.csdef

Code Snippet
 <Sites>
  <!-- First site -->
  <Site name="Check" physicalDirectory="C:\...\FullIIS_MultipleSites\WebApplication1">
    <Bindings>
      <Binding name="Endpoint1" endpointName="Endpoint1" />
    </Bindings>
  </Site>
  <!-- Second site -->
  <Site name="Encore" physicalDirectory="C:\...\FullIIS_MultipleSites\WebApplication2">
    <Bindings>
      <Binding name="Endpoint1" endpointName="Endpoint1" hostHeader="www.contoso.com" />
    </Bindings>
  </Site>
</Sites>
 

Before you run your solution we need to make sure that the hostHeader www.contoso.com is pointing to the local environment. You can do this by editing the hosts file, which can be found in <Windows>\System32\drivers\etc\hosts. You can edit this file using notepad. Make sure you have the following in this file:

127.0.0.1 www.contoso.com

Run your solution. Your browser should show the first site:

Note the port used by the first site (in this screenshot above this is port 81, the compute emulator will take the first available port above port 80).

Now you can open the second site by browsing to www.contoso.com:81 (use your own port here).

Before you stop debugging, open the IIS manager again, you should now see two sites (you may need to refresh the sites node):

3. Creating a nested virtual application

Add another web project, calling it TheThirdSite.

Change default.aspx again to reflect that this is the third site.

Open the service definition again, and add the VirtualApplication element inside the second site:

Servicedefinition.csdef

Code Snippet
 <Sites>
  <!-- First site -->
  <Site name="Check" 
        physicalDirectory="C:\...\FullIIS_MultipleSites\WebApplication1">
    <Bindings>
      <Binding name="Endpoint1" endpointName="Endpoint1" />
    </Bindings>
  </Site>
  <!-- Second site -->
  <Site name="Encore" 
        physicalDirectory="C:\...\FullIIS_MultipleSites\WebApplication2">
    <!-- Even a nested Virtual application -->
    <VirtualApplication name="More" 
                        physicalDirectory="C:\...\FullIIS_MultipleSites\MvcApplication1">
    </VirtualApplication>
    <Bindings>
      <Binding name="Endpoint1" endpointName="Endpoint1" hostHeader="www.contoso.com" />
    </Bindings>
  </Site>
</Sites>
 

Run again and browse to www.contoso.com:81/More. You should see the third site.

4 Deploying and testing in the cloud

Let’s test your project in the cloud.

Deploy your solution:

Once deployment is ready click on the link to open the first site.

Now open a command prompt and use the ping command to retrieve the site’s IP address. Open the hosts file and modify the www.contoso.com to use the new IP address.

Browse to www.contoso.com (no need to specify a port number now). You should see the second site.

If not, you might need to clear your DNS cache using the command:

ipconfig /flushdns
net stop dnscache
net start dnscache

Browse to the nested virtual application at www.contoso.com/More:

That’s it. You’ve just created your own web role in the cloud, hosting three different sites! To complete everything you now should go to your internet provider to make the necessary DNS entries to redirect your site url to the cloud url!

Remote debugging a Windows Azure Worker Role using Azure Connect, Remote desktop and the remote debugger, part 3

Sun, 26 Jun 2011 18:46:08 -1300

This is the third part of the “Remote debugging a Windows Azure Worker Role using Azure Connect, Remote desktop and the remote debugger”. In this part I will show you how to attach the remote debugger on your worker role and start debugging…

Step 3: Connect to the remove debugger

In the previous blog post we ended up copying the remote debugger to the worker role instance machine.

Open the remote debugger folder (the one you just copied) and start the remote debugger by double-clicking the msvsmon.exe application. The remote debugger should start:

Take note of the server name. Minimize the remote desktop session.

Open Visual Studio ( the one you used to publish the worker role project).

Select Debug->Attach to process… The Attach to Process windows should open. Type in the server name you got when you started the remote debugger.

Be patient while Visual Studio downloads the list of processes from the remote server…

WARNING: if you get authentication errors this means you are not using the same username and password from your local machine.

After a while you should get a list of all processes:

Select the WaWorkerHost.exe process and click the Attach button.

Step 4: debug!

Now you can add a breakpoint in your code and wait for the worker role to hit it. Again you will have to be patient…

Happy debugging!

Visual State Manager or rather Behavior ? (part 3)

Mon, 20 Jun 2011 15:59:00 -1300

So far, so good. I created a little application indicating the distance to my geographically closest friend. I used Visual State Manager for making my indicator change, depending on the distance I get from the Distance-service. It takes some practice to get used to it. Now, I have two little problems with VSM:

It's a lot to write, even for having a simple control like our distance-indicator.
Changes (e.g. adding another state) always have to be done in two locations : code and XAML.

Now, when using Blend, you might have seen Behaviors, which you can drag and drop on top of your controls. They add some, ehm 'Behavior' to these controls. It also adds a specific assembly needed for creating these Behaviors, i.e. Microsoft.Phone.Interop. Next to a few out-of-the-box behaviors that Blend provides, you can start creating your own Behaviors. And the way of doing that, is just child's play. Simply create your own class, inheriting from Behavior<T> with T being the control for which you create a behavior. Of course, nothing stops you from using FrameworkElement here.

I keep it simple, and I create a Behavior for the Ellipse. I also create 3 properties for specifying the colors for my distance-indicator:

   1:  public class DistanceBehavior : Behavior<Ellipse>

   2:  {

   3:      protected override void OnAttached()

   4:      {

   5:          base.OnAttached();

6:

   7:          Ellipse ao = AssociatedObject as Ellipse;

   8:          DistanceReader.DistanceChanged += (s, ea) =>

   9:          {

  10:              if (ea.Distance>5)

  11:              {

  12:                  ao.Fill = this.FarColor;

  13:              }

  14:              else if (ea.Distance>2)

  15:              {

  16:                  ao.Fill = this.AverageColor;

  17:              }

  18:              else

  19:              {

  20:                  ao.Fill = this.CloseColor;

  21:              }

  22:          };

  23:      }

24:

  25:      public Brush FarColor { get; set; }

26:

  27:      public Brush AverageColor { get; set; }

28:

  29:      public Brush CloseColor { get; set; }

  30:  }

Let's now use this behavior on an ellipse we add to our MainPage. We first need to add the necessary namespaces to our xaml:

xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"

xmlns:my="clr-namespace:WindowsPhoneApplication1"

(!! I'm only showing the my-namespace here for completeness. Since we already added it to App.xaml in Part 1, we don't need to add it here).

Let's now add our ellipse, and give it our Behavior :

<Ellipse>

    <i:Interaction.Behaviors>

        <my:DistanceBehavior FarColor="Red" AverageColor="Orange" CloseColor="Green"/>

    </i:Interaction.Behaviors>

</Ellipse>

Test your application again, and you'll see your ellipse change in the same way as your VSM-control, but this time with less coding and (in my opinion) easier to maintain.

Visual State Manager or rather Behavior ? (part 2)

Sun, 19 Jun 2011 16:23:00 -1300

In part 1 I set up the service and the WP7-application. The WP7-application will poll the service regularly for asking the distance to the closest friend. Let's now finish the WP7-app so we can show the distance by a little indicator. When closer than 2 (km? miles ? light-years ? You choose) the indicator will show green, less then 5 will be orange, and all the rest is red. Let's first create an indicator using Visual State Manager. In VSM we will define different states. In code we define the state our control is in, and in XAML we define how a state should look like.

Let's create our control:

   1:  [TemplatePart(Name="Core",Type=typeof(FrameworkElement))]

   2:  [TemplateVisualState(Name="Far",GroupName="DistanceStates")]

   3:  [TemplateVisualState(Name = "Close", GroupName = "DistanceStates")]

   4:  [TemplateVisualState(Name = "VeryClose", GroupName = "DistanceStates")]

   5:  public class DistanceIndicator: Button

   6:  {

   7:      Ellipse corePart;

8:

   9:      private Ellipse CorePart

  10:      {

  11:          get { return corePart; }

  12:          set { corePart = value; }

  13:      }

14:

  15:      public override void OnApplyTemplate()

  16:      {

  17:          base.OnApplyTemplate();

18:

  19:          CorePart = (Ellipse) GetTemplateChild("Core");

  20:          VisualStateManager.GoToState(this, "Far", true);

  21:          DistanceReader.DistanceChanged +=

  22:              new EventHandler<DistanceEventArgs>(DistanceReader_DistanceChanged);

  23:      }

24:

  25:      void DistanceReader_DistanceChanged(object sender, DistanceEventArgs e)

  26:      {

  27:          if (e.Distance>5)

  28:          {

  29:              VisualStateManager.GoToState(this,"Far",true);

  30:          }

  31:          else if (e.Distance > 2)

  32:          {

  33:              VisualStateManager.GoToState(this,"Close",true);

  34:          }

  35:          else

  36:          {

  37:              VisualStateManager.GoToState(this, "VeryClose", true);

  38:          }

  39:      }

  40:  }

The code-attributes already shows you the different states my Indicator can have : Far, Close and VeryClose (OutOfInspirationException occurred). I add the controltemplate to App.xaml, describing how my three states should look like :

   1:  <ControlTemplate x:Key="u2uCtrl" TargetType="my:DistanceIndicator">

   2:      <Ellipse x:Name="ellipse" Height="{TemplateBinding Height}" Fill="Yellow">

   3:          <VisualStateManager.VisualStateGroups>

   4:              <VisualStateGroup x:Name="DistanceStates">

   5:                  <VisualState x:Name="Close">

   6:                      <Storyboard>

   7:                          <ColorAnimation Duration="0" To="Orange"

   8:                                          Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"

   9:                                          Storyboard.TargetName="ellipse" d:IsOptimized="True"/>

  10:                      </Storyboard>

  11:                  </VisualState>

  12:                  <VisualState x:Name="VeryClose">

  13:                      <Storyboard>

  14:                          <ColorAnimation Duration="0" To="Green"

  15:                                          Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"

  16:                                          Storyboard.TargetName="ellipse" d:IsOptimized="True"/>

  17:                      </Storyboard>

  18:                  </VisualState>

  19:                  <VisualState x:Name="Far">

  20:                      <Storyboard>

  21:                          <ColorAnimation Duration="0" To="Red"

  22:                                          Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)"

  23:                                          Storyboard.TargetName="ellipse" d:IsOptimized="True"/>

  24:                      </Storyboard>

  25:                  </VisualState>

  26:              </VisualStateGroup>

  27:          </VisualStateManager.VisualStateGroups>

  28:      </Ellipse>

  29:  </ControlTemplate>

I cheated, of course: I used blend for creating this template. Nevertheless, I add my control to my MainPage:

<my:DistanceIndicator Content="" x:Name="distanceIndicator1" Template="{StaticResource u2uCtrl}" />

That's it. Open the WPF-application, change the slider. Run the WP7-application and there you go. Play with the slider, and the WP7-app responds visually (after some time). Nice stuff, but it get's nicer with Behavior. That's for part 3.

Visual State Manager or rather Behavior(part 1)

Wed, 15 Jun 2011 23:15:00 -1300

During an interesting event last week, discussing the virtues of Silverlight apps out of the browser, I was confronted with Behavior. I should probably be ashamed because I never heard of them before. Because they have a high coolness- and awesomeness-level I checked if they were also available for Windows Phone, and hooray, they are!

Now what are they about ? In WPF you can use Triggers, to react on certain "events", like this one :

<Button.Triggers>

    <EventTrigger RoutedEvent="Click">

        <BeginStoryboard Storyboard="{StaticResource mySB}"/>

    </EventTrigger>

</Button.Triggers>

Specially useful when you're creating your own Controltemplates. Unfortunately they're not available in Silverlight (except for the Loaded-event). When creating your own controls, and you need them to have some kind of visual feedback, we'll have to use the Visual State Manager.

In my little example I have a WP7-app that regularly calls a "Distance-service" that gives the shortest distance between you and your geographically closest friend (could be something Foursquare provides). The closest distance will be shown by some small colored ellipse. Whenever the distance changes, the color changes.

Let's start by the service: I have a little WCF library that I'm hosting in a WPF-app. Service looks like this:

public class DistanceService : IDistanceService

    public double GetDistance()

        return DistanceHelper.Distance;

Can't make them smaller than this. What about this DistanceHelper ?

public static class DistanceHelper

    private static double distance=10;

    public static double Distance

        get { return distance; }

        set { distance = value; }

My MainWindow only has a slider going from 0 to 10, with an eventhandler for the ValueChanged. In this eventhandler I simply set the DIstance-property from DIstanceHelper:

 1: private void distanceSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)

 2: {

 3:     DistanceHelper.Distance = distanceSlider.Value;

 4: }

5:

 6: private void Window_Loaded(object sender, RoutedEventArgs e)

 7: {

 8:     host = new ServiceHost(typeof(DistanceServiceLib.DistanceService));

 9:     host.Open();

 10: }

11:

 12: private void Window_Unloaded(object sender, RoutedEventArgs e)

 13: {

 14:     host.Close();

 15: }

I also configured my WCF-service to use simple basicHttpBinding.

In my WP7-app I start by creating a service reference towards my service. This will be used by a helper-class DistanceReader:

 1: public static class DistanceReader

 2: {

 3:     static DistanceReader()

 4:     {

 5:         DispatcherTimer timer = new DispatcherTimer();

 6:         timer.Interval = new TimeSpan(0, 0, 10);

 7:         timer.Tick += (s, ea) =>

 8:         {

 9:             var proxy = new DistanceServiceRef.DistanceServiceClient();

 10:             proxy.GetDistanceCompleted+=(s2,ea2)=>

 11:             {

 12:                 DistanceReader.LastDistance = ea2.Result;

 13:             };

 14:             proxy.GetDistanceAsync();

 15:         };

 16:         timer.Start();

 17:     }

18:

 19:     public static event EventHandler<DistanceEventArgs> DistanceChanged;

20:

 21:     public static void OnDistanceChanged(DistanceEventArgs e)

 22:     {

 23:         if (DistanceChanged!=null)

 24:         {

 25:             DistanceChanged(typeof(DistanceReader), e);

 26:         }

 27:     }

28:

 29:     private static double lastDistance;

 30:     public static double LastDistance

 31:     {

 32:         get { return lastDistance;}

 33:         set

 34:         {

 35:             if (lastDistance!=value)

 36:             {

 37:                 lastDistance = value;

 38:                 OnDistanceChanged(new DistanceEventArgs() { Distance=value});

 39:             }

 40:         }

 41:     }

 42: }

This class calls the service (every 10 seconds) and raises an event whenever the distance changes. Now, how to show this ? Let's start by the VSM-approach. But that is something I'll leave for part 2.

Updating WP7 live tiles without push notifications

Sun, 01 May 2011 09:59:00 -1300

While experimenting with push notifications for updating your live tiles, I found the ShellTileSchedule-class. It sounded interesting enough to play around with it.

On MSDN I found following description for this class : Creates an object which allows an application to schedule updates of its tile's background image. The ShellTileSchedule has some properties like the recurrence and the interval. The interval is an enumeration which goes from hourly to monthly :

Another Property is the RemoteImageUri. Because of the word "Remote" I assume that the image has to be remote (that was a hard one ). So for testing this thing I first set up a website, with simply a png-image (62*62 – I copied Background.png and changed it a bit with Paint). Let's set up our schedule. This has to be done in the Application_Launching:

private void Application_Launching(object sender, LaunchingEventArgs e)

    sts = new ShellTileSchedule();

    sts.Interval = UpdateInterval.

    sts.Recurrence = UpdateRecurrence.Interval;

    sts.RemoteImageUri = new Uri(String.Format("http://localhost:51177/Site/Tiles/1.png", TileNr.ToString()));

    sts.Start();

After starting the application I had to wait for an hour before my tile changed. Changing the clock settings didn't do the job either, but after an hour, finally the tile changed.

This could be useful for pulling tiles, instead of pushing. Get a tile every hour for showing the weather conditions in your area.

Now about this "Remote"-thing. Can I use a local png-file for changing the tile this way ? My first try was to add a png-file, and than refer to it this way:

sts.RemoteImageUri = new Uri("/LocalTile/5.png",UriKind.Relative);

That was not good.

Also tried it with "/TilesTest;component/LocalTile/5.png", but also no success. I needed to get the absolute path. In Silverlight I can use App.Current.Host.Source and Windows Phone is Silverlight, right. But I cannot use the Source-property here, although I can see it in my Locals-window:

OK, another try : let's use this code:

Uri uri = new Uri(new Uri(

    "file:///Applications//Install//27F6C4CB-1192-44AD-A970-635F12689A08//Install"),

    "//LocalTile//5.png");

sts.RemoteImageUri = uri;

OK, I know it's not very useful, because every user that has this application, will also have another GUID. Still : I do it for serving science . Result :

What happened to my GUID and stuff jQuery152010964315148992043_1315308924440 Last try, Let's simplify by using this :

Uri uri = new Uri(
    "file:///Applications//Install//27F6C4CB-1192-44AD-A970-635F12689A08//Install//LocalTile//5.png");

And now I get this :

OK, I quit. Remote indeed means Remote.

Saving an Image to the Pictures Hub

Thu, 28 Apr 2011 10:21:00 -1300

Something that will also be discussed during the upcoming Windows Phone course, here at U2U, is the cooperation between Silverlight for Windows Phone and XNA.

At the end of my previous blog post, I was left with one more challenge: saving my modified picture to the Pictures Hub. Until shortly I thought that the only way of using the Pictures Hub was through the PhotoChooserTask or the CameraCaptureTask. Luckily I came across the MediaLibrary-class from the XNA-framework, who gives much more possibilities for accessing your pictures.

To start I needed to add a reference to Microsoft.Xna.Framework. This results in an alarming message :

At first I tried to do some experimenting with the MediaLibrary. Let’s start by simply getting the number of pictures I have on the emulator :

ml = new MediaLibrary();

nrOfPics = ml.Pictures.Count;

MessageBox.Show(nrOfPics.ToString());

That works nice. The Medialibrary has several collection I can use, like Pictures, Songs, Genres,…

Next step : lets create a little slideshow-app for iterating through my pictures. I start out with a simple page :

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

    <Grid.RowDefinitions>

        <RowDefinition Height="523*" />

        <RowDefinition Height="84*" />

    </Grid.RowDefinitions>

    <Image Name="image1" Stretch="Fill" />

    <Grid Grid.Row="1" Name="grid1">

        <Grid.ColumnDefinitions>

            <ColumnDefinition/>

            <ColumnDefinition/>

        </Grid.ColumnDefinitions>

        <Button Content="&gt;&gt;" Grid.Column="1" Name="btnGoForward"

                Click="btnGoForward_Click" />

        <Button Content="&lt;&lt;" Name="btnGoBack" Click="btnGoBack_Click" />

    </Grid>

</Grid>

The code looks like this :

 1: public partial class MainPage : PhoneApplicationPage

 2: {

 3:     int nrOfPics;

 4:     int picNr = 0;

 5:     MediaLibrary ml;

 6:     BitmapImage img = new BitmapImage();

7:

 8:     // Constructor

 9:     public MainPage()

 10:     {

 11:         InitializeComponent();

 12:     }

13:

 14:     private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)

 15:     {

 16:         ml = new MediaLibrary();

 17:         nrOfPics = ml.Pictures.Count;

 18:         MessageBox.Show(nrOfPics.ToString());

19:

 20:         ShowImage();

 21:     }

22:

 23:     private void ShowImage()

 24:     {

 25:         img.SetSource(ml.Pictures[picNr].GetImage());

 26:         image1.Source = img;

 27:     }

28:

 29:     private void btnGoBack_Click(object sender, RoutedEventArgs e)

 30:     {

 31:         if (--picNr<0)

 32:         {

 33:             picNr = nrOfPics - 1;

 34:         }

 35:         ShowImage();

 36:     }

37:

 38:     private void btnGoForward_Click(object sender, RoutedEventArgs e)

 39:     {

 40:         if (++picNr>=nrOfPics)

 41:         {

 42:             picNr = 0;

 43:         }

 44:         ShowImage();

 45:     }

 46: }

Let's now return to the application created during my previous blog post. In the "Save Img" code we opened another page that simply showed the image with copyright-message. Let's now change the loaded-event of the WrittenImage-page so we can save the image :

WriteableBitmap bmp = PhoneApplicationService.Current.State["bmp"] as WriteableBitmap;

writtenImage.Source = bmp;

MediaLibrary ml = new MediaLibrary();

Stream stream = new MemoryStream();

bmp.SaveJpeg(stream, bmp.PixelWidth, bmp.PixelHeight, 0, 100);

ml.SavePicture("u2uPic.jpg", stream);

MessageBox.Show("Picture Saved...");

The SaveJpeg-method from WritableBitmap gives me a Stream containing the image in jpg-format. SavePicture saves the image in the MediaLibrary. However: it doesn't work ! It took me some time to find out why: It seems that the position of the stream remains at the end-position. Insert this line of code just before the SavePicture-call to make it work:

stream.Position=0;

It's working !! Cool.

Next step: let's deploy these two apps to my device and test. Not working ! How the hell is that possible ? Retesting in the emulator : works fine. Retesting on device: not working. Aaaaargh !! Disconnecting my device, going over to a colleague to ventilate my frustration and see that all of a sudden it is working !! Seems that for this thing to work, it needs to be disconnected from the PC.

U2U Consult TechDays 2011 CD Available for Download

Mon, 25 Apr 2011 05:15:19 -1300

At TechDays 2011 in Antwerp, U2U Consult distributed a CD-ROM with two free tools. I’m happy to announce that the CD-ROM contents is now also available for download from our web site.

The U2U Consult SQL Database Analyzer is a tool for SQL Server database administrators and developers. It displays diagnostic information about a database and its hosting instance that is hard to collect when you only use the standard SQL Server tools. Just point the tool at a SQL Server database of your choice, and have a look at the reports generated by the tool.

The U2U Consult Code Analysis Rules for Visual Studio 2010 are a series of additional code analysis rules for Visual Studio 2010 Premium or Ultimate, and two rule sets with recommended rules for libraries and applications. The rules include additional general performance and design rules, as well as a series of rules specifically for WCF. All rules are documented on the CD-ROM. Obviously, they are applicable to all .NET languages, including C# and VB.

With this CD, for the first time we make two of our own tools available to you. These are only two small components out of the U2U Consult Framework, but we hope they are as useful to you as they are to us and our clients. Enjoy.

Using a server side Prism module catalog in Silverlight

Sun, 24 Apr 2011 09:03:00 -1300

Prism 4.0, Managed Extensibility Framework, and Silverlight 4.0 provide an ideal combination to develop robust and flexible enterprise applications. This article explains how you can keep the Prism module catalog in such an application on the server side. In most of the Prism Quickstarts, the module catalog is embedded in the shell:

The application class starts the bootstrapper:

privatevoid Application_Startup(object sender, StartupEventArgs e)
{
    ApplicationBootstrapper bootstrapper = new ApplicationBootstrapper();
    bootstrapper.Run();
}

The bootstrapper builds the catalog from the local file:

protectedoverrideIModuleCatalog CreateModuleCatalog()
{
    ModuleCatalog catalog = Microsoft.Practices.Prism.Modularity.ModuleCatalog.CreateFromXaml(new Uri("Prism.Sample.Shell;component/Modules/ModuleCatalog.xaml", UriKind.Relative));
    return catalog;
}

Unfortunately, this setup requires a rebuild and a redeploy of the shell application whenever a change in the catalog is needed (e.g. to add an extra module, or to remove a buggy module). In most -if not all- real-world scenarios it makes more sense to place the catalog in an area that allows easy modification. The following solution has the catalog in a file on the server side, but you can easily go for other storage locations, like a database table, a WCF service or a SharePoint list. Here's where the file is kept:

The bootstrapper gets an extra constructor that takes a stream:

privateStream stream;
 
public ApplicationBootstrapper(Stream stream)
{
    this.stream = stream;
}

This stream is used to build the catalog:

protectedoverrideIModuleCatalog CreateModuleCatalog()
{
    ModuleCatalog catalog = Microsoft.Practices.Prism.Modularity.ModuleCatalog.CreateFromXaml(this.stream);
    return catalog;
}

On application startup, the file is read, wrapped in a stream, and handed over to the bootstrapper:

privatevoid Application_Startup(object sender, StartupEventArgs e)
{
    WebClient client = new WebClient();
    client.OpenReadCompleted += this.Client_OpenReadCompleted;
    client.OpenReadAsync(new System.Uri(@"Modules\ModuleCatalog.xaml", System.UriKind.Relative));
}
 
private void Client_OpenReadCompleted(object sender, OpenReadCompletedEventArgs e)
{
    ApplicationBootstrapper bootstrapper = new ApplicationBootstrapper(e.Result);
    bootstrapper.Run();
}

The following two projects demonstrate both approaches. The application is a small Prism-MEF-Silverlight tutorial application that I wrote a couple of months ago. Here's how it looks like:

Here's the project before and after the modification (it contains the Prism dll's, so you might need to unblock these):

Catalog in the Shell xap: U2UConsult.Prism.Sample.Application.1.zip (1,99 mb)
Catalog on the server: U2UConsult.Prism.Sample.Application.2.zip (1,03 mb)

Enjoy !

Adding a text to an image in WP7

Wed, 20 Apr 2011 20:57:00 -1300

Some time ago, somebody asked me if it was possible to add some text to an image, and then use the combination image-text as a new image. It seems that it’s rather easy to do, and it’s very similar to the way you could achieve this in regular Silverlight.

I started out by adding this piece of XAML to my MainPage :

</Grid>

This creates something like this :

What I need to do now, is to use the grid, combining the Image and the TextBlock, as a new Image. To make it a bit more complete I also added a Button for fetching a picture from the PictureHub:

private void button1_Click(object sender, RoutedEventArgs e)

{
PhotoChooserTask task = new PhotoChooserTask();

task.Completed += (s, ea) =>

{

img = new BitmapImage();

img.SetSource(ea.ChosenPhoto);

sourceImg.Source = img;

};

task.Show();

}
For creating an new Image, out of the original one plus the added TextBlock, I use the WriteableBitmap-class, which has a constructor that takes a UIElement as input. This one I save in the service-state, and I open another page (WrittenImage.xaml).

WriteableBitmap wbm = new WriteableBitmap(TheImage, null);

PhoneApplicationService.Current.State["bmp"] = wbm;

NavigationService.Navigate(new Uri(“/WrittenImage.xaml”, UriKind.Relative));

WrittenImage.xaml is a simple Page that only has one Image-control (called writtenImage, to make a little bit confusing – I like confusion, sometimes). In the loaded-event I have following code :

if (PhoneApplicationService.Current.State.ContainsKey(“bmp”))

{

writtenImage.Source = PhoneApplicationService.Current.State["bmp"] as WriteableBitmap;

}

Nice. The next question is then if it’s possible to save this image in the Picture-hub. That’s for a next time…

If you know of a more elegant way of adding text to an image, let it know !

How to migrate a TFS team project to a new process template

Fri, 01 Apr 2011 19:20:00 -1300

Here's the bad news: there are two very common things that should be easy, but can NOT be done in Team Foundation Server.

You can not switch an existing team project to a new set of process templates.
You can not rename a team project.

These are two show stoppers when you have a team project containing a couple of man years of coding, and you want to migrate to e.g. the Microsoft Visual Studio Scrum 1.0 templates.

Here's the good news: the show can go on! You cán migrate a TFS team project to an new process template in a supported way, and with just minimum loss of information. It just takes a lot more effort -and guts- than it should take.

Here's a procedure:

Step 1: Create a (new) backup team project.

You need a backup project to temporarily host all data. It doesn't matter what process templates you select for this project, since you're going to lose the work item tracking anyway. In most situations that's not a real problem: you probably decided to migrate to another process template because you didn't like your current work items...

Step 2: Copy the files and their version history to this new project.

This sounds easy, but it can't be done with the standard toolset. For this task you need to download and install the Team Foundation Integration Tools, a platform developed by the Visual Studio ALM Rangers. The TFS Integration Tools come in two flavors:

the bleeding edge version on Codeplex, and
the supported product in the Visual Studio Gallery.

For this type of TFS-to-TFS migration the March 2011 release of the non-bleeding version is OK, and it's fully supported by our friends in Redmond - you never know...

The TFS Integration Tools are not really lightweight. You'll need an extra SQL Server database -SQL Express is good enough if you don't hit the 4GB size limit- and two Windows services will be installed:

The backup project should be populated through a new migration from TFS to TFS, with VersionHistory only. Your project's work item tracking will be lost if you migrate to a project with another process template. Here are the two configuration screens. The configuration will be persisted in the database:

The tool will store the source project's metadata in a database. It then populates the target project by replaying all check-in activities through the API of TFS, controlled by a windows service.

During the process, you might need to solve some minor conflicts, e.g. regarding the build template xaml files:

Whilst the migration is running, you can sit back and relax, and keep an eye on the process:

Step 3: Delete the original team project.

This is by far the most scary step, but it's necessary if you want to reuse the original project name. It's a step that can not be performed from Visual Studio: you need to do this via the TFS Administration Console. Here are the buttons and the checkboxes that will remove all traces of several man years of development in just a couple of seconds:

The rest of the story is obvious: you need to re-run everything in the opposite direction.

Step 4: Recreate the project.

Make sure to select the correct process templates.

Step 5: Repopulate the new project from the the backup project.

Reselect TFS-to-TFS, and keep VersionHistory.

And there you are!

Cloning Entities in Silverlight

Sat, 26 Mar 2011 05:15:00 -1300

Here's a nice little extension method that returns a deep copy of a relatively simple object - like an Entity or a Data Transfer Object. It is based on the DataContractSerializer, so the object should be serializable through XML or a DataContract.

The extension works from Silverlight 2 upwards:

public static class GenericExtensions
{
    public static T Clone<T>(this T source)
    {
        DataContractSerializer dcs = new DataContractSerializer(typeof(T));
        using (MemoryStream ms = new MemoryStream())
        {
            dcs.WriteObject(ms, source);
            ms.Position = 0;
            return (T)dcs.ReadObject(ms);
        }
    }
}

Enjoy!

Using reporting services with Oracle package / stored procedure

Thu, 16 Dec 2010 09:42:47 -1300

Reporting services can create data sets on top of Oracle stored procedures. Sure, the manual says so, but this afternoon, I tried to get things up and running, and I want to share some of the dead ends and problems I experienced in that, maybe it can help you avoid these obstacles. Don’t panic, not all paths are dead ends, we got to the stored procs in Oracle via Reporting Services .

Please note that I’m not an oracle expert, nor did I spend days figuring these things out. So please, if you can share your experience, please do so!

Getting started

There are two important decisions that can cause this querying to go wrong:

Which data provider do we use?
How do we create the procedure in Oracle

First the data provider. I installed Oracle 10g Express edition on the same machine that was running Microsoft Reporting Services 2008 R2. To test the connection with Oracle independent of the Microsoft product stack, I also installed the freeware version of Toad. A first frustration that I ran into was that I was unable to connect to Oracle from Toad on my 64 bit version of windows 7. I could access Oracle from the web interface, but not from Toad. Installing the client tools for Oracle express didn’t help .

So I moved to 32 bit box of Win7. Installing Oracle Express with client tools on this box and… hurray, Toad can talk to Oracle. Next, I used Integration Services to push the DimGeography table from AdventureworksDW into my Oracle.

Time to query the data from Reporting Services. I first try sending an explicit query with the three data providers that I have on my machine:

Microsoft OleDb Provider for Oracle (MSDAORA)
Oracle Provider for OLE DB (OraOLEDB)
Oracle (OracleClient .Net)

MSDAORA

Configuring the data provider is straight forward, only remember to not use “.” or “(local)” as the name of the local machine, but use localhost (or 127.0.0.1) instead.

When I create a dataset with query type Text, I can start the graphical query builder. The query builder lists nicely all tables and views, and is clever enough to put double quotes around my object names.

Also query type Table is available, but unfortunately, this one does not list the available tables, I must type the table name myself. Don’t forget to put double quotes around the table name, or Oracle can become angry at you!

Query type Stored Procedure is available as well, but whatever I tried, I could not get it working. Nothing shows up in the drop-down box, typing the procedure name results in an error asking for parameters, when I start adding parameters in the call as well, it either claims
ORA-06550 PLS-00201 identifier must be declared, or
ORA-06550 PLS-00306 wrong number or types of arguments, or
ORA-01008 not all variables bound

I gave up on this one.

OraOLEDB

Also easy to configure this Oracle OleDb driver, just as MSDAORA. When building a query in the graphical query builder environment, the query builder doesn’t put double quotes around table and column names, which causes error
ORA-00942: table or view does not exist.
Of course, we can manually add the quotes, but it’s nice if computers work for us, not the other way around. Besides this, the driver seems to give the same results as MSDAORA, and I can’t seem to get the stored procedure calls up and running. Next!

OracleClient

Last one down the list. Configuring the DataSource is comparable with the two previous: local connections should refer to Localhost or 127.0.0.1, not just “.”. As query type, only Text and Stored procedure is available, not Table. The Text graphical query builder behaves as with MSDORA.

But the very good news is that if you create an Oracle stored procedure in the proper way (more on that in a second), that you can select the stored procedure radio button and the drop-down box will be populated with the Oracle stored procedures! Just select one from the list and it will behave exactly as on sql server: All the regular parameters of the stored procedure become report parameters, and a data set is built based on the first table returned by the stored procedure.

Building the Oracle stored procedure

Oracle is somewhat different from SQL Server when it comes to stored procedures. In Oracle you can create a package, a container in which you can declare and implement variables, stored procedures, functions,…. In contrast to SQL Server, a stored procedure in Oracle cannot return a table, only functions can do so. But … we still need to use the stored procedure anyhow, if we want it to show up in the Reporting services drop-down box. The trick is to make sure this stored procedure builds up the result in a REF CURSOR, and make this ref cursor a parameter! To illustrate this, I show you the code to get a list of all cities in a particular country (a lot of thanks to Philippe Clercq for writing this!)

CREATE OR REPLACE PACKAGE sp_country AS
type ref_cursor is REF CURSOR;
PROCEDURE get_city(country_name IN varchar2 default null,po_cursor out ref_cursor);
END sp_country;

CREATE OR REPLACE PACKAGE sp_country AS

PROCEDURE get_city(country_name IN varchar2,po_cursor out ref_cursor) IS
BEGIN
open po_cursor for SELECT
"GeographyKey", "City", "StateProvinceCode",
   "StateProvinceName", "CountryRegionCode", "EnglishCountryRegionName",
   "SpanishCountryRegionName", "FrenchCountryRegionName", "PostalCode",
   "SalesTerritoryKey"
FROM DW."DimGeography" g
where upper(g."EnglishCountryRegionName") like upper(country_name||'%');
    END;
END sp_country;

And with that, we could finally build our Reporting Services report on top of Oracle Express Edition (XE) and have the stored procedures show up in the drop down box. Of course, once your data is in, it doesn’t matter anymore whether you build your reports on top of SQL Server or Oracle.

Nico

Farewell Visitor

Tue, 30 Nov 2010 20:35:46 -1300

The Visitor design pattern was first documented in 1995 by the Gang of Four. It’s a workaround for the fact that most strongly typed object oriented languages only support single dispatch, even when sometimes double dispatch is required. With C# 4, we no longer need this workaround. We now have something better, more on that below. Let’s look at an example.

The traditional Visitor pattern

The System.Linq.Expressions namespace contains types that enable code expressions to be represented as objects in the form of expression trees. For example, the following C# statement creates an expression tree:

Expression<Func<double, double>> f = x => Math.Sin(1 + 2 * x);

There are many kinds of expressions. The above example creates several objects of different types, including ParameterExpression, ConstantExpression, BinaryExpression and MethodCallExpression, all of which inherit from Expression.

There are many ways to represent expressions as text. For example, we can use an infix notation (as most programming languages do), but we can also use prefix or postfix notation. Anyone who as ever worked with an HP scientific calculator, or a programming language such as Forth, will appreciate postfix notation, also known as reverse polish notation.

As a result, the way to translate a particular expression into a text representation depends on two things: the kind of expression and the kind of notation. More precisely, the method to execute to translate an expression object into a string object depends on the type of the expression, and on the type of the translation algorithm. Using a virtual function would allow the system to choose a method based on one of these dimensions, e.g. the type of expression, but not on both. Virtual functions provide single dispatch, but we need dual dispatch.

In fact, the expression class has a virtual ToString() method, inherited from object. Every type inheriting from Expression has its own version, making the algorithm depend on the type of expression. But it’s a hardcoded implementation, using an infix notation. What if we want a postfix ToString? Or Prefix? Or a C# or F# syntax? This is where the Visitor pattern can help us, and luckily the Expression class has support for it. The class ExpressionVisitor is an abstract base class for algorithms working on expressions. Now when I say algorithms, you probably think of methods with parameters and return values, but that’s not how a Visitor works. A Visitor is an object of some class, and parameters must be passed in, typically via the constructor. The return value, i.e. the result of the algorithm must be read back from a property. Let’s create a base class for our ToString visitors:

public abstract class ToStringVisitor : ExpressionVisitor
{
    protected readonly StringBuilder resultAccumulator = new StringBuilder();

    public string Result
    {
        get { return resultAccumulator.ToString(); }
    }
}

This provides us with a base class for Visitors that have a string Result property. There are some issues with it, such as when to Clear() the StringBuilder when the Visitor is reused, but let’s not get into those. We can now create a ToPostfixStringVisitor, and encapsulate it behind a static method:

public static class ExpressionExtensions
{
    public static string ToPostfixString(this Expression<Func<double, double>> function)
    {
        var visitor = new ToPostFixStringVisitor();
 
        visitor.Visit(function);
 
        return visitor.Result;
    }
 
    private class ToPostFixStringVisitor : ToStringVisitor
    {
        protected override Expression VisitLambda<T>(Expression<T> node)
        {
            // enables reusing the visitor – not absolutely required here as the only

            // place where an instance can be created is in the ToPostfixString method.
            this.resultAccumulator.Clear();
 
            foreach (var parameter in node.Parameters)
            {
                this.Visit(parameter);
            }
 
            this.resultAccumulator.Append("-> ");
 
            this.Visit(node.Body);
 
            return node;
        }
 
        protected override Expression VisitParameter(ParameterExpression node)
        {
            this.resultAccumulator.Append(node.Name);
            this.resultAccumulator.Append(' ');
 
            return node;
        }
 
        protected override Expression VisitBinary(BinaryExpression node)
        {
            this.Visit(node.Left);
            this.Visit(node.Right);
 
            switch (node.NodeType)
            {
                case ExpressionType.Add:
                case ExpressionType.AddChecked:
                    this.resultAccumulator.Append('+');
                    break;
                case ExpressionType.Multiply:
                case ExpressionType.MultiplyChecked:
                    this.resultAccumulator.Append('*');
                    break;
                case ExpressionType.Subtract:
                case ExpressionType.SubtractChecked:
                    this.resultAccumulator.Append('-');
                    break;
                case ExpressionType.Divide:
                    this.resultAccumulator.Append('/');
                    break;
                case ExpressionType.Modulo:
                    this.resultAccumulator.Append('%');
                    break;
                default:
                    throw new NotSupportedException();
            }
 
            this.resultAccumulator.Append(' ');
 
            return node;
        }
 
        protected override Expression VisitMethodCall(MethodCallExpression node)
        {
            foreach (var arg in node.Arguments)
            {
                this.Visit(arg);
            }
 
            this.resultAccumulator.Append(node.Method.Name);
            this.resultAccumulator.Append(' ');
 
            return node;
        }
 
        protected override Expression VisitConstant(ConstantExpression node)
        {
            this.resultAccumulator.Append(node.Value);
 
            this.resultAccumulator.Append(' ');
 
            return node;
        }
    }
}

For example, the following line outputs x -> 1 2 x * + Sin

Console.WriteLine(ExpressionExtensions.ToPostfixString(x => Math.Sin(1 + 2 * x)));

It works, even though for the sake of example it only supports a very small subset of all expressions. At least in the case of binary operators, it throws a NotSupportedException for operators that are, well, not supported. I really should add a bunch of other methods, for example:

        protected override Expression VisitConditional(ConditionalExpression node)
        {
            throw new NotSupportedException();
        }

        protected override Expression VisitBlock(BlockExpression node)
        {
            throw new NotSupportedException();
        }

Anyway, how does it work? The Visit() method calls an internal virtual method on Expression called Accept. Being virtual, this chooses what kind of expression to work on an it calls the appropriate VisitX method in the visitor. This one is virtual as well, and it chooses the correct algorithm, our ToPostfixStringVisitor in this case.

So we have double dispatch, via a combination of two single dispatch calls.

Dynamic dispatch to the rescue

As of C# 4, we are not restricted to single dispatch, we now have dynamic dispatch. Let’s see what this example looks like using dynamic:

public static class ExpressionExtensions
{
    public static string ToPostfixString(this Expression<Func<double, double>> function)
    {
        StringBuilder resultAccumulator = new StringBuilder();
 
        Visit(function, resultAccumulator);
 
        return resultAccumulator.ToString();
    }
 
    private static void Visit(Expression expression, StringBuilder resultAccumulator)
    {
        dynamic dynamicExpression = expression;
 
        VisitCore(dynamicExpression, resultAccumulator);
    }
 
    private static void VisitCore(LambdaExpression node, StringBuilder resultAccumulator)
    {
        foreach (var parameter in node.Parameters)
        {
            Visit(parameter, resultAccumulator);
        }
 
        resultAccumulator.Append("-> ");
 
        Visit(node.Body, resultAccumulator);
    }
 
    private static void VisitCore(ParameterExpression node, StringBuilder resultAccumulator)
    {
        resultAccumulator.Append(node.Name);
        resultAccumulator.Append(' ');
    }
 
    private static void VisitCore(BinaryExpression node, StringBuilder resultAccumulator)
    {
        Visit(node.Left, resultAccumulator);
        Visit(node.Right, resultAccumulator);
 
        switch (node.NodeType)
        {
            case ExpressionType.Add:
            case ExpressionType.AddChecked:
                resultAccumulator.Append('+');
                break;
            case ExpressionType.Multiply:
            case ExpressionType.MultiplyChecked:
                resultAccumulator.Append('*');
                break;
            case ExpressionType.Subtract:
            case ExpressionType.SubtractChecked:
                resultAccumulator.Append('-');
                break;
            case ExpressionType.Divide:
                resultAccumulator.Append('/');
                break;
            case ExpressionType.Modulo:
                resultAccumulator.Append('%');
                break;
            default:
                throw new NotSupportedException();
        }
 
        resultAccumulator.Append(' ');
    }
 
    private static void VisitCore(MethodCallExpression node, StringBuilder resultAccumulator)
    {
        foreach (var arg in node.Arguments)
        {
            Visit(arg, resultAccumulator);
        }
 
        resultAccumulator.Append(node.Method.Name);
        resultAccumulator.Append(' ');
    }
 
    private static void VisitCore(ConstantExpression node, StringBuilder resultAccumulator)
    {
        resultAccumulator.Append(node.Value);
        resultAccumulator.Append(' ');
    }
 
    private static void VisitCore(Expression node, StringBuilder resultAccumulator)
    {
        throw new NotSupportedException();
    }
}

The dynamic dispatch is achieved by the Visit method. To learn more about how this works, see http://blogs.msdn.com/b/samng/archive/2008/11/06/dynamic-in-c-iii-a-slight-twist.aspx.

So how is this better?

First of all, this approach works with all classes. The Expression class does have visitor support baked in, but most classes don’t. The dynamic approach also works if the target classes don’t support the visitor pattern. That also means that you don’t have to do anything special with your own classes to enable this technique.

The dynamic approach is also simpler. I’ve noticed that most people don’t immediately “see” the visitor pattern, but the dynamic approach is easier to understand.

Visitor implementations typically have methods that return void, and producing a result must be accomplished via fields and properties (the ExpressionVisitor is a notable exception here, it is optimized for rewriting expressions, i.e. calculating a new expression based on an existing one). With dynamic methods, you choose your parameter and return types (the StringBuilder in this example). Not only is that much simpler to code, the entire thing has no state in fields, only in stack local variables. As a result, it’s completely reentrant and thread-safe.

Note also that the last VisitCore method specifies what to do with expressions that aren’t handled by any of the other methods. Much more convenient than with a Visitor, where you always have to specify a method for each concrete type, unless it just so happens that the behavior you want is the default behavior from the base class.

Conclusion

The dynamic keyword was introduced to facilitate interoperability with dynamic languages and systems, including COM. C# remains primarily a strongly typed language. As such, some people suggested that dynamic has no place in plain C# programs that don’t require such interoperability. However, the above example shows that dynamic dispatch can be very useful in the context of strongly typed C# programs, as an alternative to the Visitor pattern.

Scripting in integration services data flow

Wed, 24 Nov 2010 11:47:53 -1300

If you wander how we can program our own conditional splits in SSIS data flow, or implement our own asynchronous transformations, or implement things such as a Year-To-Date, then you forgot to attend my session at the SQL Server Day. Luckily you can catch up with the slides and code samples on my web page at http://www.u2u.be/res/Nico.aspx#Presentations

Happy coding!

Lambda Curry in F#

Sat, 30 Oct 2010 03:40:18 -1300

Bart De Smet commented on my post about Lambda Curry in C#, saying (amongst other things) that F# supports currying out of the box.

That’s true, and it’s a nice feature of the language. However, it is a mechanical operation, almost identical to what the following C# extension method does:

public static class FunctionalExtensions
{
    public static Func<T2, TResult> Curry<T1, T2, TResult>(this Func<T1, T2, TResult> func, T1 value)
    {
        return value2 => func(value, value2);
    }
}

The important point to note is that F# does not perform partial evaluation automatically, which is where in my mind most of the benefit comes from.

To illustrate, consider the following function definition in F#:

open System

let compute x y = Math.Sin(float x) * Math.Sin(float y)

This is exactly the same as the following, illustrating the automatic currying:

let compute x = fun y -> Math.Sin(float x) * Math.Sin(float y)

And when I say “exactly the same”, I do mean just that: they compile to the exact same IL.

If you want the partial evaluation, and the performance benefit of it, you’ll have to do it manually, also in F#:

let compute' x =
let sinx = Math.Sin(float x)
fun y -> sinx * Math.Sin(float y)

To illustrate, consider the following program, which is more or less analogous to my previous example:

open System
open System.Diagnostics

let compute x y = Math.Sin(float x) * Math.Sin(float y)

let compute' x =
    let sinx = Math.Sin(float x)
    fun y -> sinx * Math.Sin(float y)

let sum f =
    let mutable sum = 0.0
    for x = -1000 to 1000 do
        let f' = f x
        for y = -1000 to 1000 do
            sum <- sum + f' y
    sum

let measureTime f =
    let sw = Stopwatch.StartNew()
    let _ = sum f
    sw.ElapsedMilliseconds

printfn "%d" (measureTime compute)
printfn "%d" (measureTime compute')

On the machine I’m testing this, it prints 329 milliseconds for the compute function, and 137 for the compute’ function.

To be honest, this should not come as a surprise. Even if F# wanted to perform a partial evaluation, how could it? It does not know that Math.Sin is a pure function. So it has no choice but to play safe. It does what the developer tells it to do. So if you want partial evaluation, do it yourself, explicitly, no matter what language you’re using.