U2U all posts

Using the Documents Library as a database in Windows 8 Store apps

Sun, 12 May 2013 19:08:00 -1200

Many Windows 8 Store apps require some amount of structured storage on the client. But in WinRT, local and roaming storage is limited in size, and a client-side relational database does not come out of the box yet. This article describes how to use a folder in the user’s Documents library to store serialized business objects. This gives the app an almost unlimited amount of client-side structured storage. I created a small but representative sample project (code is attached at the end of the article) to illustrate this. Its purpose is to maintain a list of Trappist beers. Here’s how the app looks like:

By default, a Windows 8 Store app runs in the smallest possible sandbox: it does not have the right to directly access the user’s Documents. If you need this capability, you have to register it through the app manifest:

Even with the capability declared, the app’s rights on the documents folder are limited to the registered file types. More on that later.
The sample app uses a specific folder to store its Trappist beers in. Store apps don’t not come with an installer à la .msi, so the app should create the working folder at run time:

private static string AppFolderName = "Trappist Beers";

public static async Task<StorageFolder> AppFolder()
{
    return await KnownFolders.DocumentsLibrary.GetFolderAsync(AppFolderName);
}

public static async Task EnsureFolderExists()
{
    StorageFolder folder = null;

    try
    {
        folder = await KnownFolders.DocumentsLibrary.GetFolderAsync(AppFolderName);
    }
    catch (Exception)
    {
        // Folder does not exist, but we cannot await in a catch block, so we can not create it here.
    }

    if (folder == null)
    {
        folder = await KnownFolders.DocumentsLibrary.CreateFolderAsync(AppFolderName, CreationCollisionOption.OpenIfExists);
    }
}

protected async override void OnLaunched(LaunchActivatedEventArgs args)
{
    await AppModel.EnsureFolderExists();

    // Rest of the app initialization
    // ...
}

We now have a container to store the objects, let’s generate some content. The WinRT framework comes with a whole range of serializers that can serialize business objects to a string that can be persisted in a file and deserialize it back to an object when needed. You can choose between plain XML as explained by Iris Classon, WCF DataContract XML as explained by Sara Silva, and JSON as explained by Bart Lannoeye. I’m using the XmlSerializer in the sample app, it focuses on the public properties of the class. Here’s how to use this one to serialize and deserialize a Trappist:

// Serialize
XmlSerializer serializer = new XmlSerializer(typeof(Trappist));
using (StringWriter writer = new StringWriter())
{
    serializer.Serialize(writer, trappist);
    String xmlString = writer.ToString();
}

// Deserialize
string xml = await FileIO.ReadTextAsync(file);
XmlSerializer serializer = new XmlSerializer(typeof(Trappist));
trappist = serializer.Deserialize(new StringReader(xml)) as Trappist;

We have a folder now, and we know how to serialize and deserialize its content. Let’s see how our app can access the folder. There are actually two ways to achieve this:
• Through the classic File and Folder API. This requires asynchronous calls.
• Through the MostRecentlyUsed API. This requires less programmatic maintenance, and uses synchronous calls.

For the sample app, I’m assuming that the user will work most of the times with one of the 25 most recent objects that he manipulated. In the case of Trappist beers, that is a fair assumption: there are only 8 authentic Trappist breweries in the world, and together they have not even created 25 Trappist beers. By the way: they’re excellent, I tasted all of them (except the two from Engelszell which are hard to get outside Austria). Anyway, a scenario in which a user mainly works with his most recent business objects, is common.

Each Windows 8 Store app can maintain its own Most Recently Used file list. When registering a file in the MRU list, you are allowed to store some metadata with it. The file itself is indexed through a token (not unsurprisingly based on a GUID). The sample app stores the name of the Trappist beer in the metadata. That name is also used as the physical file name. So I’m actually treating the name of the beer as primary key. Here’s how to add a file to the MRU list:

StorageApplicationPermissions.MostRecentlyUsedList.Add(file, trappist.Name);

We execute this registration when saving a new file, and when opening an existing file. Here’s how to fetch the list of most recently used Trappist names, the most recently accessed file always comes first:

public static ObservableCollection<string> MostRecentTrappists
{
    get
    {
        var result = new ObservableCollection<string>();

        foreach (var item in StorageApplicationPermissions.MostRecentlyUsedList.Entries)
        {
            result.Add(item.Metadata);
        }

        return result;
    }
}

Observe that the call is synchronous. We’re actually not accessing the folder or files themselves.

Of course, the user may add, delete, move, and rename these files with other apps, or directly with the File Explorer. After all: it is *his* Documents folder. So the app’s GUI should also expose that real situation from disk. Here’s how to get the alphabetical list of Trappist names in the app’s working folder:

public async static Task<ObservableCollection<string>> FolderTrappists()
{
    var result = new ObservableCollection<string>();

    var folder = await AppFolder();
    var files = await folder.GetFilesAsync();
    var names = from file in files
                where file.FileType == AppFileExtension
                orderby file.DisplayName
                select file.DisplayName;

    foreach (var name in names)
    {
        result.Add(name);
    }

    return result;
}

This is an asynchronous method because in WinRT we cannot access the file system synchronously.

I use a toggle switch to change between ‘MRU’ and ‘Folder’ mode. In a production app the control would end up in the app bar or the settings panel:

To save memory, the app only displays the list of Trappist names, not the list of full business objects. When saving, opening or deleting a Trappist, we need to make the link with the corresponding physical file. Therefor we first need to fetch the identification token from the MRU list. Here’s how to do this:

private static string GetMruToken(string trappistName)
{
    var token = (from e in StorageApplicationPermissions.MostRecentlyUsedList.Entries
                    where e.Metadata == trappistName
                    select e.Token).FirstOrDefault();
    return token;
}

Using the token, we can get the file, like this:

var token = GetMruToken(trappistName);

if (!String.IsNullOrEmpty(token))
{
    try
    {
        // Get file through MRU list
        file = await StorageApplicationPermissions.MostRecentlyUsedList.GetFileAsync(token);
        return file;
    }
    catch (Exception)
    {
        // File was probably deleted, so continue with app folder.
    }
}

If something went wrong (e.g. the Trappist is not in the MRU anymore), then you should go for the physical file directly:

try
{
    var folder = await AppFolder();
    file = await folder.GetFileAsync(trappistName + AppFileExtension);
}
catch (Exception)
{
    // Ignore
}

return file;

Now you can save, open, and delete the corresponding file for a Trappist name in the list.

So far for the Model and the Data Access Layer, let’s now take a look to the ViewModel. It has the classic CRUD commands to open, create, rename, and delete a Trappist. I’m using the RelayCommand from MVVM Light for this. To get the name for a newly created or renamed Trappist, I’m using an InputDialog control from the WinRTXamlToolkit. Here’s how to work with it:

var dialog = new InputDialog();
var result = await dialog.ShowAsync(
    "Add new Trappist",
    "Please enter the name:",
    "Create",
    "Cancel");

if (result == "Create" && !String.IsNullOrEmpty(dialog.InputText))
{
    // ...
}

This is how it looks like by default:

Since some of the interactions require asynchronous calls under the hood, I decorated the ViewModel with some internal events and local event handlers to bridge the period between setting a property and notifying its change:

private event EventHandler TrappistNamesChanged;

public MainPageViewModel()
{
    // Initialization
    // ...
    this.TrappistNamesChanged += this.MainPageViewModel_TrappistNamesChanged;
}

public ObservableCollection<string> TrappistNames
{
    get
    {
        return this.trappistNames;
    }
}

private async void MainPageViewModel_TrappistNamesChanged(object sender, EventArgs e)
{
    if (this.ShowAll)
    {
        this.trappistNames = await AppModel.FolderTrappists();
    }
    else
    {
        this.trappistNames = AppModel.MostRecentTrappists;
    }

    this.OnPropertyChanged("TrappistNames");
}

I’m not evangelizing this as a best practice, but it seems to do the trick.

I already revealed one advantage of using the file system over a local database: the user can easily copy, move, rename, and delete objects through the File Explorer (admitted: that’s not always an advantage). Let’s take this one step further. Through the app manifest you can register your app as the default app to open files with the corresponding extension(s), and at the same time define a default icon for the files. The declaration of these extensions is mandatory, since it defines the files to which the app has access:

When the user is now browsing through his Documents, he’ll easily recognize the files:

You can let the app open on the selected business object when the user double clicks (or taps) the file. Here’s the code to do that (in app.xaml.cs):

protected override void OnFileActivated(FileActivatedEventArgs args)
{
    if (args.Files.Count > 0)
    {
        var file = args.Files[0];

        Frame rootFrame = Window.Current.Content as Frame;

        if (rootFrame == null)
        {
            rootFrame = new Frame();
            Window.Current.Content = rootFrame;
        }

        // MRU list
        var name = Path.GetFileNameWithoutExtension(file.Name);
        StorageApplicationPermissions.MostRecentlyUsedList.Add(file, name);

        if (!rootFrame.Navigate(typeof(MainPage), name))
        {
            throw new Exception("Failed to create initial page");
        }

        Window.Current.Activate();
    }
}

That’s it, I tried to structure the code to make it as reusable as possible. I have at least three apps waiting for this pattern.

Here’s the code: U2UConsult.Win8.documentLibrarySample.zip (643.43 kb)

Enjoy!
Diederik

A convention-based data template selector for Windows 8 XAML Store apps

Sun, 21 Apr 2013 18:54:00 -1200

This article describes how you can use naming conventions to hook a XAML Data Template to a ViewModel or a Model in a Windows 8 Store app. The last couple of years, convention-based coding became more and more popular in the .NET world. The MVC framework was one of the first managed environments where the constituents of an application (in this case Models, Views, and Controllers) were automatically linked to each other based on their name, instead of letting a developer create references and interfaces. The latest version of the Managed Extensibility Framework –a.k.a. MEF- also comes with a convention-based programming model: the RegistrationBuilder and PartBuilder classes provide an alternative for MEF attributes: they let you specify the rules to infer Parts, Imports, and Exports from the names of your classes and properties. Also in the XAML world, convention-based coding is not new. Most of the popular MVVM frameworks rely heavily on naming conventions to link components together. Caliburn.micro has several classes to lookup the View for a ViewModel (and vice-versa) and to generate data bindings solely based on class and property names: ViewLocator, ViewModelLocator, and ViewModelBinder.

This article presents a way to link a XAML DataTemplate in a View to its corresponding Model or ViewModel data context class. Here are some screenshots of the attached sample project: it shows a FlipView control (with an associated FlipViewIndicator) that has a different type of Model for each item, so each page should look differently:

In ye olde XAML platforms, you could specify the default data template for a class with the DataType property. In Windows 8 Store app XAML, that property is not supported anymore. So when you want an ItemsControl to display a list of objects of different types, you have to use a DataTemplateSelector. I already explained the mechanisms in this blog post.

The following class defines a data template selector that looks up a data template in the app’s resources, based on the name of the data context class. It just adds “Template” to the name of the data context class, so if you want to display an instance of “Person”, you just have to provide a data template with as x:Key “PersonTemplate”:

/// <summary>
/// Convention-based DataTemplate Selector.
/// </summary>
public sealed class DynamicDataTemplateSelector : DataTemplateSelector
{
    protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
    {
        DataTemplate result = null;
        string typeName = item.GetType().Name;

        try
        {
            result = App.Current.Resources[typeName + "Template"] as DataTemplate;
        }
        catch (Exception)
        {
            Debug.Assert(false, string.Format("No data template found to display '{0}' instances.", typeName));
        }

        return result;
    }
}

The try-catch block is necessary because the resource manager throws an exception when a resource is not found.
Here’s how to apply the selector in an ItemsControl. It is declared as a resource:

<Page.Resources>
    <templates:DynamicDataTemplateSelector x:Key="DynamicDataTemplateSelector" />
</Page.Resources>

And then applied to the FlipView:

<FlipView x:Name="TheFlipView"
            ItemsSource="{Binding Models}"
            ItemTemplateSelector="{StaticResource DynamicDataTemplateSelector}" />

Here are some of the data templates from the resource dictionary:

<!-- Biography -->
<DataTemplate x:Key="BiographyTemplate">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <TextBlock Text="{Binding Name}"
                    Foreground="Yellow"
                    FontSize="28"
                    HorizontalAlignment="Center"
                    Margin="0 48 0 0" />
        <TextBlock Text="{Binding  Description}"
                    Grid.Row="1"
                    FontSize="20"
                    TextWrapping="Wrap"
                    Margin="0 48 0 0" />
    </Grid>
</DataTemplate>

<!-- Powers And Abilities -->
<DataTemplate x:Key="PowersAndAbilitiesTemplate">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto" />
            <RowDefinition Height="auto" />
            <RowDefinition Height="auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <TextBlock Text="{Binding Name}"
                    Foreground="Yellow"
                    FontSize="28"
                    HorizontalAlignment="Center"
                    Margin="0 48 0 0" />
        <ItemsControl ItemsSource="{Binding Powers}"
                        Grid.Row="1"
                        Margin="0 48 0 0"
                        HorizontalAlignment="Center">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <TextBlock FontSize="20">
                        <Run Text="● " />
                        <Run Text="{Binding}" />
                    </TextBlock>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
        <TextBlock Text="Weaknesses"
                    Grid.Row="2"
                    Foreground="Yellow"
                    FontSize="28"
                    HorizontalAlignment="Center"
                    Margin="0 48 0 0" />
        <ItemsControl ItemsSource="{Binding Weaknesses}"
                        Grid.Row="3"
                        Margin="0 48 0 0"
                        HorizontalAlignment="Center">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <TextBlock FontSize="20">
                        <Run Text="● " />
                        <Run Text="{Binding}" />
                    </TextBlock>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>
</DataTemplate>

When a data template is not found in the resources, the selector returns a Null value. The data binding engine then applies a default template, with the fully qualified type name in a text box. Here’s how this looks like:

During debugging, the Assert statement writes an exception to the output window when the template is not found, like this:

That’s all there is. Actually, the title of this article was longer than its source code. Here is the sample app: U2UConsult.Win8.DataTemplating.zip (692.39 kb)

Enjoy!
Diederik

Creating touch-based rotation in Windows 8 XAML Store apps

Thu, 28 Mar 2013 00:22:00 -1200

This article illustrates two ways of using touch or mouse input to rotate a UI element in a XAML-based Windows 8 Store app. I’m sharing this code because I believe that the corresponding official MSDN sample is too complex. Don't get me wrong: the Windows 8 gestures sample looks nice and gives a complete overview of all gestures and their mouse equivalent. But it uses three entire classes to do something that you can literally do in three lines of code. In this article, I’ll describe the guidelines-compliant way of rotating an element using a two-finger gesture, but I also provide a one-finger alternative. Since not everyone has a touch screen (yet), I also give you two ways for using the mouse to rotate an element. As usual, the article comes with a downloadable sample app. It just displays two round rotatable images. Here’s a screenshot of it:

Multi Touch Rotation

A UI Element can register for rotation by setting its ManipulationMode to Rotate, optionally adding inertia. Multiple manipulation modes can be set in XAML through a comma-separated list. Just ignore Intellisense and don’t use the property editor:

<Image ...
       ManipulationMode="Rotate,RotateInertia"  />

Setting the manipulation mode causes the corresponding manipulation events (starting, inertiaStarting, started, delta, and completed) to fire. You find the complete list of events and event argument classes in the Touch Input Quickstart.
You still have to code what should happen in your app. Typically that boils down to configuring the element’s RenderTransform. To simplify the code in the event handlers, I gave the image a named rotation transformation:

<Image x:Name="Left"
        ManipulationMode="Rotate,RotateInertia"
        ManipulationDelta="Left_ManipulationDelta">
    <Image.RenderTransform>
        <RotateTransform x:Name="LeftRotateTransform" />
    </Image.RenderTransform>
</Image>

All you have to do to manually rotate the image, is to subscribe to the ManipulationDelta event, and add the delta's rotation to the element’s rotation transform:

// Called when rotate by touch.
private void Left_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
    this.LeftRotateTransform.Angle += e.Delta.Rotation;
}

[Tip: You could use the ManipulationCompleted event to implement snap points.]

The pivot point of the rotation is set to the center of the element. For images you can do this in the ImageOpened event. It’s the first event that guarantees that ActualHeight and ActualWidth are set. I must say that every now and then I still get zero values here.

// Called when the image is ready to be rendered. ActualHeight and ActualWidth are known.
private void Image_Opened(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
    Image img = sender as Image;
    RotateTransform rt = img.RenderTransform as RotateTransform;
    rt.CenterX = img.ActualWidth / 2;
    rt.CenterY = img.ActualHeight / 2;
}

The standard touch-based rotation requires two touch points or more:

In Visual Studio's Touch Simulator, you can test it with the ‘Rotation touch mode’ button. Press it, hover over the UI element on the page, and scroll the mouse wheel:

On a non-touch device, the guidelines for common user interactions prescribe that a rotation gesture should be triggered by the mouse wheel, with ctrl and shift buttons pressed. So we add an event handler for PointerWheelChanged:

<Image x:Name="Left"
        Grid.Row="1"
        Margin="64 36"
        Source="../Assets/Wheel_of_Fortune.png"
        ManipulationMode="Rotate,RotateInertia"
        ManipulationDelta="Left_ManipulationDelta"
        ImageOpened="Image_Opened"
        PointerWheelChanged="Left_PointerWheelChanged">
    <Image.RenderTransform>
        <RotateTransform x:Name="LeftRotateTransform" />
    </Image.RenderTransform>
</Image>

In the handler, we check whether the shift and control buttons are pressed, and then apply the MouseWheelDelta to the rotation angle. Look at the weird code to get that mouse wheel delta:

// Called when rotate by mousewheel.
private void Left_PointerWheelChanged(object sender, PointerRoutedEventArgs e)
{
    bool shift = (e.KeyModifiers & VirtualKeyModifiers.Shift) == VirtualKeyModifiers.Shift;
    bool ctrl = (e.KeyModifiers & VirtualKeyModifiers.Control) == VirtualKeyModifiers.Control;

    if (shift && ctrl)
    {
        var delta = PointerPoint.GetCurrentPoint(e.Pointer.PointerId).Properties.MouseWheelDelta;
        // With my mouse, delta is a multiple of 30.
        this.LeftRotateTransform.Angle -= delta / 15;
    }
}

Use cases
In scenarios where inertia is needed (e.g. spinning a wheel) the two finger touch rotation is the right match. That manipulation is also very useful for rotating larger elements, with a high precision. For rotating a small element, I wouldn’t recommend this gesture, simply because you don’t see what you’re doing with two or more fingers on it.
For non-touch environments, I’m not sure that the shift-control-mousewheel combination will become popular.

Single Touch Rotation

As an alternative, you can allow a user to put a finger on the element and start dragging. You just need to transform the translation into a rotation with a pinch of trigonometry. It’s easy to build, intuitive, and the code immediately works for the mouse too: click and start dragging. Just enable the TranslateX and TranslateY manipulation modes (and optionally add inertia), register a handler for ManipulationDelta, and initialize the RenderTransform:

<Image ...
       ManipulationMode="TranslateX,TranslateY,TranslateInertia"
       ManipulationDelta="Right_ManipulationDelta"
       ImageOpened="Image_Opened">
    <Image.RenderTransform>
        <RotateTransform x:Name="RightRotateTransform" />
    </Image.RenderTransform>
</Image>

In the ManipulationDelta handler, you transform the translation into a rotation by calculating the angle of the delta. Add this angle to the angle of the element’s RotateTransform. I took some time to make a small drawing to illustrate this. Alpha is the angle to be calculated:

From a performance standpoint, I assume that the law of cosines would be the most appropriate solution here. But I have the right to be lazy sometimes, so I went for the “least C#” option: calculate Alpha as the difference of Alpha1 and Alpha2 on the image. Here’s that code:

// Called by touch and mouse.
private void Right_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
    // Alternatively, use Triangle Cosines Law.
    // It uses just one trigonometric function (Acos), but you first need to calculate the lengths of all sides.

    var x = this.RightRotateTransform.CenterX - e.Position.X;
    var y = this.RightRotateTransform.CenterY - e.Position.Y;
            
    double a1 = Math.Atan(y / x);
    double a2 = Math.Atan((e.Delta.Translation.Y - y) / (x - e.Delta.Translation.X));

    this.RightRotateTransform.Angle += a1 - a2;
}

Use cases
I would definitely recommend this type of rotation in non-touch scenarios: it reacts naturally and it does not require the shift and control buttons (or the user’s recollection to press these). In a touch environment, it does not occlude the element you're manipulating. There’s a lag in reaction time, and it’s easy to outpace the algorithm by moving too fast. So I would not use single point rotation to e.g. spin a wheel. The roulette wheel in the sample app is a bad choice - it just looked nice next to that wheel of fortune.

Code

Here’s the full code: U2UConsult.RotationManipulation.Sample.zip (587.17 kb)

Enjoy!
Diederik

The Slider’s Guide to the MVVM Galaxy

Mon, 18 Mar 2013 22:44:00 -1200

This article describes two behaviors of the native XAML Slider control that reduce the joy of using it in MVVM Windows 8 Store apps. We all agree that XAML is one of the nicest technologies to develop Windows 8 Store apps, right? We all agree that you should use MVVM to build XAML apps, right? No, we don’t: unfortunately some of the native controls strongly disagree with us. The most well-known example of an MVVM-unfriendly XAML control is the radio button. A radio button is cleared by selecting another radio button in the same group. That’s OK, but at that moment it also clears its binding. It breaks the link to the viewmodels to which it was bound. This classic MVVM problem is generally solved by assigning a unique GroupName to each radio button, and deal with the mutual exclusiveness programmatically on the viewmodels’ side. Ouch!

Recently I observed that the native slider control has a similar issue. Even worse: two issues. Ouch! Ouch!

Seeing is believing, so I created a small demo app to illustrate these issues. The app shows two sliders that display temperature values from a viewmodel. The user may switch between Celsius and Fahrenheit scales using a data bound toggle switch. [My shoulder devil tried to convince me to use radio buttons instead of a toggle switch. It was a close fight, but the angel won.]
Here’s a screenshot of the app:

Here are the two issues, and their impact on the MVVM app:

A Slider dies when its Minimum becomes greater than its Maximum

Whenever a slider control –even temporarily- reaches a state where its Minimum value becomes greater than is Maximum, it simply blocks. So when you create a slider of which the range is bound to values in the viewmodel, you could be in trouble. The sliders in the sample app show a range from 0 °C to 28 °C, that’s (more or less) from 32 °F to 82 °F. These values are provided by the viewmodel, and they’re updated when the settings change. Here are the bindings for one of the sliders:

<Slider Value="{Binding SomeTemperature, Mode=TwoWay}"
        Minimum="{Binding MinimumTemperature}"
        Maximum="{Binding MaximumTemperature}" />

In a regular MVVM app, we would safely rely on the data binding engine to propagate the modifications from the viewmodels to the controls. Well, that does not work if there are sliders involved: whenever the sample app reaches a sub state where the MinimumValue is in Fahrenheit (32) and the MaximumValue is still or already in Celsius (28), the sliders simply die with an unmovable thumb docked to the maximum end, like this:

As a work around, you can take control of the order in which the property changes are notified, just to make sure there’s always a valid range. Here’s an example; this is part of the code that is triggered by the temperature unit toggle switch:

// Workaround: control change propagation order.
if (this.isCelsius)
{
    this.OnPropertyChanged("MinimumTemperature");
    this.OnPropertyChanged("MaximumTemperature");
}
else
{
    this.OnPropertyChanged("MaximumTemperature");
    this.OnPropertyChanged("MinimumTemperature");
}

If we switch to Celsius, we first change the MinimumValue (from 32 to 0) and then the MaximumValue (from 82 to 28), and the other way around when we switch to Fahrenheit. We should never be forced to write this kind of code, but it does the trick.
Let’s move to another issue:

A Slider modifies its Value to keep it in its Range

While the first issue is just an inconvenience, I perceive the second issue as a real disaster: while you are changing the boundaries of the slider range, the slider will update its Value property to keep it in this range. Here’s a scenario. Start the app and set both temperatures to 57°F (that’s in the middle of the range).

Then switch to Celsius and observe the value in the top slider:

The slider Value went down to 0 instead of the expected 14 °C. This is what happened: when the range moved from (32 -> 82) to (0 -> 28), the slider ‘adjusted’ the value before the viewmodel had a chance to calculate the new value. So the slider changes the value, and then the viewmodel used that wrong value to apply the conversion to. Somewhere in that process, the slider also broke its binding. So its value is at zero, where the viewmodel is at -2. Both are wrong. Staggering, isn’t it? And by the way: unit tests on your viewmodel will NOT reveal these bugs.

On a more positive note: you can circumvent the problem by making a backup of the value on the start of the change propagation, like this:

var temp = this.anotherTemperature;
            
// Obsolete algorithm to update slider range
// ...
            
// This would be standard code. Unfortunately it does not work.
if (this.isCelsius)
{
    this.SomeTemperature = UnitConverter.FahrenheitToCelsius(this.SomeTemperature);
}
else
{
    this.SomeTemperature = UnitConverter.CelsiusToFahrenheit(this.SomeTemperature);
}

// Workaround: backup value.
if (this.isCelsius)
{
    this.AnotherTemperature = UnitConverter.FahrenheitToCelsius(temp);
}
else
{
    this.AnotherTemperature = UnitConverter.CelsiusToFahrenheit(temp);
}

Can you imagine how the complexity would increase if we had multiple sliders, some of them with more than two possible ranges (e.g. liters, US gallons, and UK gallons)? Well I can, here’s an example of such a page. This view will be part of the next release of this app. It does what it's supposed to do, but its viewmodel is bloated with logic to keep all sliders up and running:

Call to action

This small sample shows that even one simple slider in a view could dramatically increase the complexity of your code, even up to a point where it threatens the MVVM architecture. It really should not be necessary to apply modifications to the viewmodels (and/or models), just to work around the inappropriate behavior of one single type of control. I strongly believe that XAML developers deserve a better solution, in the form of more MVVM-friendly native controls. So Microsoft: please fix this. And while you’re there: fix the radio button too.

Maybe I should make an appeal to the community? Why not:

Dear open source MVVM framework builders,

We have enough property change propagators, dependency injectors, service locators and event aggregators. Could you please spend some time in creating or fixing some controls to actually work with it?

Thanks,
a XAML developer

That almost sounded like a rant, didn't it? Don't worry: I'm fine.

Code

Here’s the sample project: U2UConsult.WinRT.MVVMSlider.zip (117.08 kb).

Enjoy!
Diederik

Semantic Zoom and LINQ: Better Together

Mon, 04 Mar 2013 23:17:00 -1200

With this short article, I want to show you the easy way to provide data to a semantic zoom in a Windows 8 Store app. I’ve seen too many developers trying to massage their business data to make it consumable for a semantic zoom, by pulling it through custom implementations of ISemanticZoomInformation or through other data adapter classes. You see this pattern even in the official XAML GridView grouping and SemanticZoom sample. All you need to remember from this article, is that such infrastructure is not necessary: the grouped data source for the CollectionViewSource that populates the two zoom levels of a semantic zoom control, can be generated by a simple LINQ query that your ViewModel can pull straight out of your Models.

As usual, I built a simple MVVM app to illustrate my point. It comes with two Model classes: Item and Category, where each item has a category. I do realize that this will not help me win the Oscar for the most original scenario. The data access layer provides a list of both. The only View in the app just shows a semantic zoom that pulls its data (items with a category) from a property in the main ViewModel.

Here’s how the two levels of the semantic zoom look like at runtime.

Zoomed in:

Zoomed out:

The CollectionViewSource is defined as a resource in XAML, and bound to the zoomed-in view of the semantic zoom:

<Page.Resources>
    <CollectionViewSource x:Name="collectionViewSource"
                            IsSourceGrouped="True"
                            Source="{Binding ItemsByCategory}" />
</Page.Resources>

<!-- ... -->

<SemanticZoom x:Name="semanticZoom">
    <SemanticZoom.ZoomedInView>
        <GridView ItemsSource="{Binding Source={StaticResource collectionViewSource}}"
                    SelectionMode="None">
            <!-- ... -->
        </GridView>
    </SemanticZoom.ZoomedInView>
    <!-- ... -->
</SemanticZoom>

The CollectionViewSource gets its data from the viewmodel through a LINQ query that yields the items, grouped by category:

itemsByCategory = from item in Items
                    orderby item.Name
                    group item by item.Category into g
                    orderby g.Key.Name
                    select g;

By the way, this is how that same query looks like in the official sample:

internal List<GroupInfoList<object>> GetGroupsByCategory()
{
    List<GroupInfoList<object>> groups = new List<GroupInfoList<object>>();

    var query = from item in Collection
                orderby ((Item)item).Category
                group item by ((Item)item).Category into g
                select new { GroupName = g.Key, Items = g };
    foreach (var g in query)
    {
        GroupInfoList<object> info = new GroupInfoList<object>();
        info.Key = g.GroupName;
        foreach (var item in g.Items)
        {
            info.Add(item);
        }
        groups.Add(info);
    }

    return groups;
}

That's a lot of obsolete code. For the sake of simplicity, I spare you from the definition of the -also obsolete- GroupInfoList class. Looking at this code, one can only agree when a tweet like this one pops up in his timeline:

Enough ranting, let's go back to the sample.

The LINQ query returns an IEnumerable<IGrouping<Category, Item>>. And that’s enough to provide a source for all semantic zoom bindings.

The zoomed-out view of the semantic zoom has several templates. The item template is bound to each item, so the binding expressions are straightforward:

<GridView.ItemTemplate>
    <DataTemplate>
        <!-- Bound to an Item -->
        <StackPanel> 
            <Image Source="{Binding Image}"
                    ... />
            <Border ... >
                <TextBlock Text="{Binding Name}"
                            ... />
            </Border>
        </StackPanel>
    </DataTemplate>
</GridView.ItemTemplate>

Each grouping (= category) has a group style header, of which the template is bound to an IGrouping. That interface only provides a Key attribute, but that's enough to provide the title:

<GroupStyle.HeaderTemplate>
    <DataTemplate>
        <!-- Bound to an IGrouping with Category as Key-->
        <Grid Margin="0">
            <TextBlock Text='{Binding Key.Name}'
                        ... />
        </Grid>
    </DataTemplate>
</GroupStyle.HeaderTemplate>

The zoomed-in view of the semantic zoom is bound to the collection of groups in the data source. We (still) have to do this in code behind:

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    // IObservableVector<IGrouping<Category, Item>>
    (this.semanticZoom.ZoomedOutView as ListViewBase).ItemsSource = collectionViewSource.View.CollectionGroups;
}

This is an ICollectionViewGroup, so it comes with Group and GroupItems properties. These properties come in handy to provide binding expressions. Group.Key returns the category instance, but you could also choose to just follow the links in the viewmodel from the items' perspective:

<GridView.ItemTemplate>
    <DataTemplate>
        <!-- Bound to an ICollectionViewGroup -->
        <StackPanel>
            <Border>
                <TextBlock Text="{Binding Group.Key}"
                            ... />
            </Border>
            <Image Source="{Binding GroupItems[0].Category.Image}"
                    ... />
        </StackPanel>
    </DataTemplate>
</GridView.ItemTemplate>

As you see, you don’t need special infrastructure to populate a two-level semantic zoom. All bindings can be fulfilled with just your ViewModels and a little LINQ.

Here’s the code: U2UConsult.Win8.SemanticZoomWithLinq.V2.zip (531.35 kb)

Enjoy!
Diederik

Avoiding hard times with the soft keyboard

Tue, 05 Feb 2013 06:35:00 -1200

Developers who submit a Windows 8 XAML-based Store app that involves data entry, should always test their app on a real touch device. Otherwise they might see their app rejected because of the soft keyboard blocking the screen. This article illustrates some of my personal experiences and issues regarding the behavior of the soft keyboard in Windows 8 Store apps. Don’t worry: none of these issues is really blocking, and I’ll show you some workarounds.

When and why the soft keyboard opens and closes, is described in this white paper. If you’re building Windows 8 Store apps that have data entry pages, this white paper is a must read. The behavior of the soft keyboard is well documented and justified, at least in theory. In practice however, I came across some issues. Here they are:

The soft keyboard never closes automatically

The keyboard cannot be opened programmatically. That’s a good thing. The keyboard opens only when the user taps on a text entry control (mostly a TextBox). Unfortunately the only way to indicate that he’s finished entering data, is to ‘tap somewhere else on the screen’. Depending on that ‘somewhere else on the screen’ the soft keyboard will remain open, or it will disappear. Now some controls know very well when data entry is finished and should not require that extra tap. E.g. a box to enter a year or birth could (and in my opinion should) leave edit mode automatically when four digits are entered. In other controls, hitting the ‘Enter’ key would be an intuitive action to indicate the end of data input. I implemented the latter behavior in my EnhancedSlider, that’s a slider that comes with an extra TextBox to allow direct input. That TextBox becomes disabled when the user hits the ‘Enter’ key in it. I believe that tapping that key on the keyboard is a lot more user friendly than letting the user search for a safe spot on the semi-obscured screen (remember: the soft keyboard covers half the screen) to close the keyboard.

The ‘tap outside the control’ philosophy also makes it impossible to make a full-screen text input control. Here's what happens if the screen is entirely filled by one or more textboxes:

The user can enter some tekst, but he can't close the keyboard anymore. If the Windows8 App store testers get stuck in this scenario, they will not approve your app.

The next edit control is automatically focused

When the TextBox in the EnhancedSlider becomes disabled, the keyboard remains open if there are other text input controls on the page. I’m OK with that: we’re in edit mode, so it doesn’t make sense to distract our user by constantly flipping the keyboard up and down. But not all screens require the use to enter the data in a specific order. Allow me to illustrate this with an example. This is a screenshot of a user changing the weight of some business object through an EnhancedSlider (middle of the screen):

Here’s what happens by default when the user finishes editing by hitting ‘Enter’. The keyboard remains open with the focus on the category ComboBox (I’m complaining about the focus here, not the ugly blue color – the inappropriate color is clearly my fault):

There are no relationships between the fields, so there’s no required input order. The user just modifies what he needs to modify in any chosen order. There’s absolutely no need to automatically give the focus to any of the controls. It’s not like the user is going to use the soft keyboard to tab through the controls on the page. On the other hand: a user with a real keyboard may just want to tab through the screen, so setting the IsTabStop property to false is not a viable solution. I believe that it should be possible for a developer to specify that the keyboard may remain open without a particular control getting the focus. I have the impression that the soft keyboard paradigm in Windows 8 is based on archaic fill-out form logic.

Up until now, you could say: “Hey, it’s your own fault. You’re using a custom control that violates the UX standards”. OK, I agree with that. But here’s an issue that has nothing to do with me trying to deliver user friendly controls:

The keyboard remains open on ListBoxItem

When the soft keyboard is open and the focus moves to another text input control, the keyboard remains open. I already mentioned that I’m OK with that. I just have a problem with the definition of ‘text input control’. This is the list from the mentioned white paper: Check box, Combo box, Radio button, Scroll bar, Tree, Tree item, Menu, Menu bar, Menu item, Toolbar, List, List item.

That last control is the one that bothers me. In a tile-based store app –and that’s the large majority- everything is hosted inside a ListItem. A lot of pages do nothing more than displaying a collection of business objects in an ItemsControl (ListView, VariableSizedGridView, SemanticZoom, etc.) The main navigation hub of single page apps (like the finance and weather app) uses a GridView as main navigation panel. Here’s another example of a real app that has a horizontally scrolling page with several topics. That's a very common concept. Unfortunately, things go wrong when you request the user to type in some tekst in such an app. I just wrote something in the text box at the bottom of the page, and tapped inside the border:

There’s nothing special to see, except a blinking cursor in the text box (and the screenshot does not even show that). The app looks fully operational. But that’s only because I took the screenshot when a physical keyboard was attached to the tablet. This is how the same screen looks like in full touch mode:

The keyboard remains open because the controls are hosted in a GridViewItem, which is a ListItem, which is in the keep-the-keyboard-open list. Tapping on the page does not close the keyboard, and the main navigation buttons are off-screen. The UI is blocked now, the app will be rejected. #FAIL

Easy work arounds

OK, here’s the good news: all these issues can be solved by adding one or two simple XAML controls on your data entry page. When fighting with the soft keyboard, you just give one of these controls programmatically the focus, and the keyboard will obey your will.

The first problem solver is a focusable control of the text input kind, without a user interface. When you give this one the focus, the keyboard will open without focusing one of the visible controls. That sounds easy: just create a text box with Visibility set to Collapsed, or Height or Width at zero. Unfortunately that does not the trick: the runtime will not give the focus to a control that does not consume screen infrastructure. But we know that templatability is a key concept in XAML, so let’s leverage it. The next control successfully fools the Windows RT runtime:

<!-- Opens the soft keyboard when it gets the focus -->
<TextBox x:Name="KeyboardOpener">
    <TextBox.Template>
        <ControlTemplate />
    </TextBox.Template>
</TextBox>

You can give this control the focus programmatically like this:

this.KeyboardOpener.Focus(FocusState.Programmatic);

Or you could just place it at the right position. In the above screen I just added a KeyboardOpener next to the Enhanced Slider:

<local:EnhancedSlider Value="{Binding GrainGift.Weight.Value, Mode=TwoWay}"
                        Header="Weight"
                        ValueSuffix="{Binding GrainGift.Weight.UnitMeasure.Name, Converter={StaticResource StringFormatConverter}, ConverterParameter=' {0}'}"
                        Minimum="0"
                        Maximum="{Binding GrainGift.MaxWeight}"
                        StepSize="5" />
<TextBox x:Name="FocusGrabber">
    <TextBox.Template>
        <ControlTemplate />
    </TextBox.Template>
</TextBox>

The Combo box does not turn blue anymore.

If for some reason you want to programmatically close the soft keyboard, give this control the focus:

<!-- Closes the soft keyboard when it gets the focus -->
<Slider x:Name="KeyboardCloser">
    <Slider.Template>
        <ControlTemplate />
    </Slider.Template>
</Slider>

In the above example, I set the focus to this control in the Tapped event of the GridViewItem:

<GridView SelectionMode="None">
    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>
    <Grid Tapped="Page_Unfocus">
        <!-- Content, including edit controls -->
    </Grid>
    <!-- Other pages -->
</GridView>

private void Page_Unfocus(object sender, Windows.UI.Xaml.Input.TappedRoutedEventArgs e)
{
    this.FocusGrabber.Focus(Windows.UI.Xaml.FocusState.Programmatic);
}

A Close-the-keyboard Button

The problem in the first screenshot of this article can only be solved by adding a button to the page, a button to close the soft keyboard when it's open. That's exacly what I did. Here's the XAML:

<Button x:Name="KeyboardCloser"
        Visibility="Collapsed"
        Style="{StaticResource HideKeyboardAppBarButtonStyle}" />

By default it is invisible. It should only appear when the soft keyboard is open. To achieve this, just register to the InputPane.Showing event. Here's the code from the constructor of the page:

var inputPane = InputPane.GetForCurrentView();
inputPane.Showing += InputPane_Showing;
inputPane.Hiding += InputPane_Hiding;

And here are the two event handlers:

private void InputPane_Showing(InputPane sender, InputPaneVisibilityEventArgs args)
{
    this.KeyboardCloser.Visibility = Visibility.Visible;
}

private void InputPane_Hiding(InputPane sender, InputPaneVisibilityEventArgs args)
{
    this.KeyboardCloser.Visibility = Visibility.Collapsed;
}

That's it. When soft keyboard pops open, we show a button to close it. The button itself does not require a click event handler. Tapping it gives it the focus, and that's enough to close the keyboard:

Demo time

As usual, I built a small sample project to illustrate these focus-and-keyboard issues. It shows that you can easily open and close the soft keyboard, and that not every ListboxItem keeps the keyboard open. Just check the comments in the code. Here are some screenshots:

If you're not on a touch device, run the code in the simulator. Otherwise there's really not much to observe...

Code

Here’s the full code of the sample. It was written with the free Visual Studio 2012 Express Edition: U2UConsult.Keyboard.Sample.V2.zip (391.60 kb)

Enjoy!

Diederik

The whole world in a SQL Server database

Mon, 28 Jan 2013 18:50:43 -1200

Some people have the whole world in their hand, but last weekend I tried something slightly less ambitious: Getting (part of) the whole world in a SQL Server database.

Loads of spatial data from OpenStreetMap

I’m always looking for interesting datasets. I was still lacking a large dataset with spatial data. The biggest public spatial dataset I’m aware of is OpenStreetMap (OSM). It’s a map service comparable with Bing or Google Maps. But the data it uses is collected from public data: Some governments provide public location information, but there are also thousands of volunteers who help OSM in putting their street or village ‘on the map’.

The resulting database is public as well. It is described in XML format, and I found on the wiki also an OSM XSD schema. This allows me to load the data with SQL Server Integration Services, using the data flow XML data source. There might be faster solutions than this, but for the time being, SSIS does a rather good job with a very simple setup.

Creating the database

So, let’s create the database in which we want to store our data. Be sure to create a database with an initial size big enough to host the data you want to load. The OSM xml file with all the data from the whole planet is about 250 Gb at the time of writing, so It will probably take about 150 Gb in SQL Server (XML is not the most compact storage format). In this blog post example I will be loading a subset of the whole planet, so I create a much smaller database (just under 2 Gb):

        1: CREATE DATABASE [OSM]

       2:  ON  PRIMARY 

       3: ( NAME = N'OSM', FILENAME = N'F:\Data\OSM.mdf' , SIZE = 2048000KB , MAXSIZE = UNLIMITED, FILEGROWTH = 512000KB )

       4:  LOG ON 

       5: ( NAME = N'OSM_log', FILENAME = N'F:\Data\OSM_log.ldf' , SIZE = 3170880KB , MAXSIZE = 2048GB , FILEGROWTH = 10%)

If you really plan to create a much larger database, don’t forget to enable instant initialization to speed up the process of creating and extending the data file(s).

Next I create all the tables to store the different pieces of information in the OSM XML files. Notice that I do not keep all the information in the XML files. I do not store the person who entered the data, and the date the data was entered. This reduces the amount of data to be stored, which speeds up the data loading. This is the code to create the necessary tables:

       1: USE [OSM]

       2: GO

       3: CREATE TABLE [dbo].[Nodes](

       4:     [node_Id] [bigint] NOT NULL,

       5:     [id] [bigint] NULL,

       6:     [lat] [float] NULL,

       7:     [lon] [float] NULL,

       8:     [geog] [geography] NULL,

       9:  CONSTRAINT [PK_Nodes] PRIMARY KEY CLUSTERED 

(

    [node_Id] ASC

)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON, FILLFACTOR = 80) ON [PRIMARY]

) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]

  

CREATE TABLE [dbo].[NodeTag](

    [key] [nvarchar](250) NULL,

    [value] [nvarchar](3000) NULL,

    [node_Id] [bigint] NULL

) ON [PRIMARY];

GO

CREATE TABLE [dbo].[Relation](

    [relation_Id] [bigint] NOT NULL,

    [id] [bigint] NULL,

    [visible] [bit] NULL,

 CONSTRAINT [PK_Relation] PRIMARY KEY CLUSTERED 

(

    [relation_Id] ASC

)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON, FILLFACTOR = 80) ON [PRIMARY]

) ON [PRIMARY]

GO

CREATE TABLE [dbo].[RelationMember](

    [type] [nvarchar](8) NULL,

    [ref] [bigint] NULL,

    [role] [nvarchar](250) NULL,

    [relation_Id] [bigint] NULL,

    [RelationPosition] [int] IDENTITY(1,1) NOT NULL

) ON [PRIMARY]

  

GO

CREATE TABLE [dbo].[RelationTag](

    [key] [nvarchar](250) NULL,

    [value] [nvarchar](3000) NULL,

    [relation_Id] [bigint] NULL

) ON [PRIMARY]

  

GO

CREATE TABLE [dbo].[Way](

    [way_Id] [bigint] NOT NULL,

    [id] [bigint] NULL,

    [visible] [bit] NULL,

 CONSTRAINT [PK_Way] PRIMARY KEY CLUSTERED 

(

    [way_Id] ASC

)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON, FILLFACTOR = 80) ON [PRIMARY]

) ON [PRIMARY]

  

GO

CREATE TABLE [dbo].[WayNode](

    [ref] [bigint] NULL,

    [way_Id] [bigint] NULL,

    [WaiNodePosition] [bigint] IDENTITY(1,1) NOT NULL

) ON [PRIMARY]

GO

CREATE TABLE [dbo].[WayTag](

    [key] [nvarchar](250) NULL,

    [value] [nvarchar](3000) NULL,

    [way_Id] [bigint] NULL

) ON [PRIMARY]

  

GO

After the destination tables are created, it’s time to download an OSM xml file. I downloaded the file for Belgium from one of the mirror servers. After unzipping the file, it is about 2.4 Gb. All the remaining timings in this article are based on this file, but of course, feel free to experiment with data from other countries as well.

Loading the data with SSIS

Now it’s time to create an Integration Services package which uses an XML source to read the OSM xml file, parse it with the XSD file I mentioned earlier, and write the results to the corresponding tables. I used SQL Server destinations, but if you do be careful to set the destination timeout high enough, or your package will fail on this. You can reuse the SSIS package I made on SQL Server 2012, but be sure to check and correct the pointers to the appropriate files.

Fingers crossed, run the SSIS package and wait till the data is loaded. On my machine it took about 17 minutes. It loaded about 12 million coordinates (Nodes), and more than 1.5 million road segments and other combined objects (Way).

The only table that really contains coordinates is the Nodes table. In order to use SQL Server’s spatial functions on these, we must first create geographical objects out of the latitude and longitude info. This can simply be done with this statement:

       1: UPDATE Nodes SET geog = geography::Point(lat, lon, 4326)

This took about 5 minutes on my machine. From now on, we can start querying this information is we want, but my Belgian OSM file contains about 12 million coordinates… without a decent index, every query is going to take forever, so let’s build a spatial index on this. In the next code example I use the new type of spatial index they introduced in SQL Server 2012, but feel free to try other types of spatial indexes as well. Spatial Ed has a short ‘getting started’ paper if you want to play with spatial indexes.

       1: CREATE SPATIAL INDEX [SpatialIndex-Nodes] ON [dbo].[Nodes]

       2: (

       3:     [geog]

       4: )USING  GEOGRAPHY_AUTO_GRID 

       5: WITH (

       6: CELLS_PER_OBJECT = 16) ON [PRIMARY]

       7: GO

After this index is created, we can get started querying this interesting data source. More on that (and how to create more advanced spatial objects to represent roads, areas etc.) in a later blog post.

Happy querying!
Nico

Validation sets in SQL Server Data Mining

Mon, 21 Jan 2013 21:04:27 -1200

What are validation sets?

Data Mining

Data mining analyses historical data to find patterns that might help us better understand how our business works, or might help predict how the business might evolve in the future: Instead of doing ‘traditional BI’, where we pick some attributes and ask for aggregated data (“show me the sum of sales amount by country per fiscal quarter”), in data mining we ask questions such as “what is typical for customers who buy bikes”, and we get answers (models, as we call them) that contain patterns such as “if the age of the customer is less than 29 and they live in the Netherlands they are more likely bike buyers”. This however results in a problem: how do we know if a model is ‘better’ than another model? Is the model “Young people are more frequent bike buyers” better than “People who do not own a car are bike buyers”?

Test set

The typical approach to test the quality of models is by testing how well they behave when we use them to predict the outcome (e.g. whether a customer buys a bike or not) on the historical data, for which we then already know the outcome. Models for which the predicted outcome more frequently corresponds with the actual outcome are better models. However, we need to be careful: if we would use as a test data set the same set of data we use to create the models, we run the risk of overfitting. Overfitting means the model is so tuned on the training set, that the patterns are not general enough to be useful on new data. E.g. the model “If the customer name is Ben Carlson, Margareta Wuyts, … or Jeremy Frank then it is a bike buyer” might make perfect predictions in your historical data, but it is clear that it will be of little help in making predictions on new customers: it is heavily overfitted. This is why we split the historical data in two sets: training data, on which the system search for patterns, and test data, which we use to test the quality of the model. This is even build-in in the SQL Server Analysis Services wizard to construct mining models: It by default proposes to keep 30% of the data separate for testing.

Validation set

But… also test data sets raise an issue: We often need to test a lot of different mining models with different parameter setting to find a near-optimal result. This is an iterative process, in which we create a few models, test them on the test set, see which data mining techniques and parameters work best, use that knowledge to setup a second iteration of models to be tested etc. But in this way, the data mining developer is introducing knowledge from the test set in the development process: Imagine that in our test set age is a strong indicator, than we will favor models which use this. The overall result is that the estimated quality of the predictions which are made on the test set are no longer a good estimate of the expected quality of the predictions on new data. They are already slightly biased towards our test set, and typically overestimate the predictive quality of our model.

This is where validation sets come in: Before we got started with any data mining in the first place, we should have set some of our historical data (e.g. 20% of the data) apart in a validation set. The remaining 80% is then split apart in training and test data. Once we’re finished with our data mining, we test our model one last time, on data it has never seen, not as training data, not as test data. Our validation set is (from the data mining point of view) truly new data, and might give the best impression of the expected predictive quality of our mining model.

How do we create validation sets?

In contrast to test data sets, the mining wizard does not allow us to set apart a validation set. So we need to do this in the data preparation phase (see CRISP-DM methodology for more info on the different phases in the data mining process). If you prefer to prepare your data with T-SQL statements, you can use this approach based on NEWID() to randomly select a certain set of data, but be careful: if you rerun the statement, a different subset will be selected.

Another approach is to use SSIS (Integration Services), which has a percentage sampling transformation which is ideal for this job: it assigns each row an n% likelihood of being selected, so because of that it doesn’t need to cache all rows in memory (in contrast to the row sampling transformation). An advantage over the NEWID() approach is that we can set the seed for the random data generator, such that results are reproducible if we want.

How do we use validation sets?

Using validation sets is easy. Just make sure that the table you created with the validation data is in the same data source as the data source you used for the SSAS project. Then in the Mining Accuracy Chart tab of the Mining model in SSAS, you select just the best performing model(s) and below you choose the radio button to use a different data set.

Click the ellipsis button (…) and select the table or view which contains the validation set. Join the proper columns from the validation set with the mining model, and you’re set! Now you can create lift or profit charts and build a classification matrix against the validation set.

Happy mining!
Nico

Printing from MVVM XAML Windows 8 Store apps - the final frontier

Sun, 20 Jan 2013 20:39:00 -1200

This article describes a reusable way of implementing print support in a Windows 8 MVVM-and-XAML based Store app. I noticed on the MSDN forum that many developers have a problem with the XAML version of the official printing sample app. They find it too complex. So I originally wanted to create a simpler version of it. I realized very rapidly that these developers are actually wrong. The print sample is not too complex. On the contrary: the printing sample is missing many features that would make it useful in a production app:
• It does not support multiple types of print pages.
• The printed page only has flat text and images.
• The printed page does not support data binding.
• The printed page contains a mix of content (text) and template (header, footer, margins) elements - the template elements are not nicely encapsulated.
• The printed pages have no page number.

So I put that sample on steroids to address these issues and make it work in a larger MVVM context, and here’s the result. O, I also simplified it a bit: I removed the need for having two different print page classes: I merged HeaderPage and ContinuationPage into a single PrintPage (see comments below). Let me tell you upfront: the code works, but I’m not proud of it. I sincerely hope that I missed a useful XAML feature or two, because the overall complexity level is just too high for something as basic as printing. I have a hunch that I did boldly go where nobody should have gone before.

Here’s how my sample app looks like. It has a main page with two buttons that talk to the print provider, and a ComboBox that’s populated by a ViewModel:

That's a simple start. Now hear the rest of the story.

The Framework

This is the object model of the lightweight printing framework:

Most of the reusable functionality is encapsulated in the PrintServiceProvider. It has methods to register and unregister the app for printing with Windows. If you don’t register, then the devices charm remains empty. It also has the required event handlers that are called by Windows to generate the pages to be displayed in the preview pane and the actual pages to be printed. Just like in the official printing sample, the class inherits from Page. That allows it to make use of its Dispatcher.
The printing framework also comes a ‘real’ page: the PrintPage instances appear in the preview pane and are sent to the device. It's just an empty page with a header, a footer, and a RichTextBlockOverflow. That overflow is crucial to the framework, because the biggest problem when printing XAML is pagination. On top of the print page there's a RichTextBlock that receives all print content, but it's invisible itself. It lives in a Grid Row with Height 0, so all print content -except a dummy first paragraph- will be sent to the overflows.

The responsibilities of these core classes in the framework are based on the original printing sample and further elaborated in this excellent article from the popular 31 days of Windows 8 series.

The last class in the framework is an EventArgs class that carries a message to the subscribers of the StatusChanged event.

The Caller

Although the framework is reusable, there are some constraints on the caller. Any page in a Store app that wants to be printed should have a printable version of it. Typically a page on paper will look different from its version on screen (starting with size and orientation). The print page only contains a RichTextBlock with paragraphs. Some of these contain just text, but most of these will host an InlineUIContainer which can contain anything – including a databound control. You should prefer a Grid inside the inlines to layout the content, other controls -like StackPanel- will be truncated. This is how a print page looks like:

<Page>
    <RichTextBlock>
        <Paragraph>Some Text</Paragraph>
        <Paragraph />
        <Paragraph>
            <InlineUIContainer>
                <!-- Any (data bound) Control-->
            </InlineUIContainer>
        </Paragraph>
        <!-- ... -->
    </RichTextBlock>
</Page>

Since the PrintServiceProvider needs to make use of real screen infrastructure to physically measure the elements, we require each printable page to come with an (invisible) Canvas in its visual tree. That canvas should be called ‘printingRoot’. Alternatively, the printing framework itself could inject this element into the page. Here’s how the PrintingRoot of the main page in the sample app looks like:

<Grid>
    <Canvas x:Name="printingRoot"
            Opacity="0" />
    <!-- Real content -->
    <!-- ... -->
</Grid>

The process

When you navigate to a page in an app that supports printing, you call the RegisterForPrinting method of the PrintServiceProvider. This can be done in the OnNavigatedTo, or from a Button (like in the sample). The Visual Studio templates deliberately don’t have a PrintAppBarButtonStyle, and the Segoe Symbol UI font does not come with a print icon. That's because Micrsosoft wants you to use the Device Charm to start printing. I agree with that, but just in case, here’s a print button style:

<Style x:Key="PrintAppBarButtonStyle"
        TargetType="ButtonBase"
        BasedOn="{StaticResource AppBarButtonStyle}">
    <Setter Property="AutomationProperties.AutomationId"
            Value="PrintAppBarButton" />
    <Setter Property="AutomationProperties.Name"
            Value="Print" />
    <Setter Property="FontFamily"
            Value="Wingdings 2" />
    <Setter Property="Content"
            Value="x36;" />
</Style>

I used a button event handler instead of a command binding to the ViewModel. In most apps, printing is a GUI responsibility, so I don't feel guilty about the code behind. When registering, the page should provide a reference to itself (to find the PrintingRoot), and it should provide the type of print page as well as the viewModel or Model that will be bound to the print pages, like this:

this.printServiceProvider.RegisterForPrinting(this, typeof(MainPrintPage), this.DataContext);

The PrintServiceProvider first checks the presence of a PrintingRoot, then prepares the print output, and finally hooks event handlers to the events that will be raised by Windows to create the preview pages and to start printing, as explained in the Printing Quickstart.

The beef of the code is in the PreparePrintContent method. Here’s a detailed overview of what’s happening over there.
First it creates an instance of the print page, and applies the (view-) model to it:

var printPage = Activator.CreateInstance(this.printPageType) as Page;
printPage.DataContext = this.DataContext;

The forst page is created, and an empty paragraph is injected into an invisible RichTextBlock. That makes sure that all ‘real’ print content will overflow to the RichTextBlockOverflow:

firstPage = new PrintPage();
firstPage.AddContent(new Paragraph());

Then we loop over all paragraphs in the print page. We remove each paragraph, and hook it in the PrintingRoot to be measured. The actual height of the element will be used as LineHeight of the paragraph, because that’s the property that defines whether or not the element still fits on the current page. Then the paragraph is added to the first page.

// Move content from print page to print template - paragraph by paragraph.
var printPageRtb = printPage.Content as RichTextBlock;
while (printPageRtb.Blocks.Count > 0)
{
    var paragraph = printPageRtb.Blocks.First() as Paragraph;
    printPageRtb.Blocks.Remove(paragraph);

    var container = paragraph.Inlines[0] as InlineUIContainer;
    if (container != null)
    {
        // Place the paragraph in a new textblock, and measure it.
        var measureRtb = new RichTextBlock();
        measureRtb.Blocks.Add(paragraph);
        PrintingRoot.Children.Clear();
        PrintingRoot.Children.Add(measureRtb);
        PrintingRoot.InvalidateMeasure();
        PrintingRoot.UpdateLayout();
        measureRtb.Blocks.Remove(paragraph);

        // Apply line height to trigger overflow.
        paragraph.LineHeight = measureRtb.ActualHeight;
    }

    firstPage.AddContent(paragraph);
};

Update: a Performance Analysis session on a remote Surface RT machine revealed that ARM devices have a big problem with the following line of code in the previous script:

measureRtb.Blocks.Remove(paragraph);

You should replace it by this:

measureRtb.Blocks.Clear();

End of Update.

When the user opens the print charm -by swiping on the right or by pressing the button- the printers are added to the list of devices in the devices charm. When the user taps on a device, the OS asks the app to generate its print (preview) pages. This is done by the PrintDocument_Paginate method. It produces output pages by adding these one by one to the collection as long as there’s content that overflows to the next page.

while (lastRTBOOnPage.HasOverflowContent && lastRTBOOnPage.Visibility == Windows.UI.Xaml.Visibility.Visible)
{
    lastRTBOOnPage = AddOnePrintPreviewPage(lastRTBOOnPage, pageDescription);
}

The core logic of the loop is in the AddOnePrintPreview method. It applies a physical size to the print content by assigning a margin, and then sends it to the PrintingRoot to be measured. This triggers the overflow mechanism. Elements that don’t fit the page, are routed to the next one.

// Set paper width
page.Width = printPageDescription.PageSize.Width;
page.Height = printPageDescription.PageSize.Height;

Grid printableArea = (Grid)page.FindName("printableArea");

// Get the margins size
// If the ImageableRect is smaller than the app provided margins use the ImageableRect
double marginWidth = Math.Max(printPageDescription.PageSize.Width - printPageDescription.ImageableRect.Width, printPageDescription.PageSize.Width * HorizontalPrintMargin * 2);
double marginHeight = Math.Max(printPageDescription.PageSize.Height - printPageDescription.ImageableRect.Height, printPageDescription.PageSize.Height * VerticalPrintMargin * 2);

// Set-up "printable area" on the "paper"
printableArea.Width = page.Width - marginWidth;
printableArea.Height = page.Height - marginHeight;

// Add the (newly created) page to the printing root which is part of the visual tree and force it to go
// through layout so that the linked containers correctly distribute the content inside them.            
PrintingRoot.Children.Add(page);
PrintingRoot.InvalidateMeasure();
PrintingRoot.UpdateLayout();

// Find the last text container and see if the content is overflowing
textLink = (RichTextBlockOverflow)page.FindName("continuationPageLinkedContainer");

This routine also adds a page number to each page:

this.pageNumber += 1;
TextBlock pageNumberTextBlock = (TextBlock)page.FindName("pageNumber");
if (pageNumberTextBlock != null)
{
    pageNumberTextBlock.Text = string.Format("- {0} -", this.pageNumber);
}

Example

Here’s an example of the framework in action. I created a ListBox bound to a list from the ViewModel. It renders nice, even in a more advanced version with a data template and a converter:

<!-- Databound content with data template and converter -->
<Paragraph>
    <InlineUIContainer>
        <Border BorderBrush="Green"
                BorderThickness="2"
                Margin="0 4">
            <ListBox ItemsSource="{Binding TrekkieQuotes}">
                <ListBox.Resources>
                    <local:StringFormatConverter x:Key="sfc" />
                </ListBox.Resources>
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding Converter={StaticResource sfc}, ConverterParameter='* {0}'}"
                                    Margin="0" />
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </Border>
    </InlineUIContainer>
</Paragraph>

Here you see at the bottom of the print preview page that the ListBox is overflown to the next one, and the resulting XPS document:

Strange new worlds, still to explore

I know that there are still a couple of issues with this code. If a single inline element is higher than the printed page, then it’s not rendered and you end up with an empty page. A future version of the PrintServiceProvider should e.g. wrap it in a Grid. In the current version, the measurement is done very early in the workflow: when registering. So when the user, before he prints, changes a bound value that has an impact on the height of the element, then the new height is probably ignored. I've written the code this way, because calls to the PreparePrintContent in the event handlers (e.g. during pagination) were causing cross-threading issues (probably caused by the fact that the print service provider is actually a DependencyObject since it inherits from Page).

The current version however seems to cover all printing needs for the Store apps I’m currently working on. That's good enough. After all, I just lost two weeks to do something that I expected to deliver in two hours. Anyway, I promise to update the code here whenever I have a new version.

Code

Here’s the code, it was written with Visual Studio 2012 Express (well, except for the class diagram): U2UConsult.Win8.PrintingSample.v2.zip (170.55 kb)

Enjoy and ... live long and prosper,
Diederik

Using Dynamic XAML in Windows 8 Store Apps

Tue, 08 Jan 2013 01:47:00 -1200

This article describes a couple of techniques that you can apply to dynamically change the look-and-feel of data-bound XAML controls in a Windows 8 Store App. You’ll be introduced to value converters, style selectors, template selectors, and the XamlReader class. I created a light-weight MVVM app that displays a list of beers. Although all items belong to the same class –Beer- they will be displayed differently. Here’s how the sample app looks like:

Using a Value Converter

Dependency properties of a XAML control can be directly bound to properties of the ViewModel. Sometimes a conversion of value and/or data type needs to take place; and that’s exactly what a ValueConverter does. A value converter is a class that implements the IValueConverter interface, with just Convert and ConvertBack functions. Here's an example of a string-to-string converter that translates official beer colors into HTML named colors (the Beer Color Meter app in the Windows Store has a much more advanced version of this):

public class BeerColorConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        switch (value.ToString())
        {
            case "Yellow":
                return "LemonChiffon";
            case "Straw":
                return "Wheat";
            case "Gold":
                return "GoldenRod";
            case "Amber":
            case "LightCopper":
            case "Copper":
                return "Peru";
            case "LightBrown":
                return "Chocolate";
            case "Brown":
                return "Brown";
            case "DarkBrown":
                return "darkRed";
            case "VeryDarkBrown":
                return "SaddleBrown";
            case "Black":
                return "Black";
            default:
                return "Lime";
        }
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        return value;
    }
}

Just define an instance of the converter as a resource:

<Page.Resources>
    <local:BeerColorConverter x:Key="BeerColorConverter" />
</Page.Resources>

And use it in the Binding:

<DataTemplate>
    <TextBlock Foreground="{Binding Color, Converter={StaticResource BeerColorConverter}}"
                FontWeight="SemiBold"
                Margin="2">
            <Run Text="{Binding Name}" />
            <Run Text=" is "
                    Foreground="Silver"
                    FontWeight="Normal" />
            <Run Text="{Binding Category}"
                    Foreground="Silver"
                    FontWeight="Normal" />
    </TextBlock>
</DataTemplate>

Unfortunately the Store App Runtime doesn't ship with MultiBinding, and bindings don't come with a StringFormat option. That restricts the usage of a value converter, at least when compared to WPF. When populating a TextBlock, you can avoid some of these restrictions by cutting it up in individual Run elements.

Using a Style Selector

One way of dynamically styling items in a XAML items control, is with a StyleSelector. This allows you to apply a style for each item in a collection, based on custom logic. This seems to be the only way to create a dynamic style in Metro, due to the absence of DataTriggers. All you need to do is create a subclass of the StyleSelector class and implement the SelectStyleCore method. The bound item is the first parameter, the item's style is the return value. Here's a small example on how to modify the style for a list view item. Belgian beers (category name contains ‘Belgian’ or ‘Flemish’) will be decorated with a golden border:

public class BeerStyleSelector : StyleSelector
{
    protected override Style SelectStyleCore(object item, DependencyObject container)
    {
        Beer beer = item as Beer;

        // Default Style
        if (!(beer.Category.Contains("Belgian") || beer.Category.Contains("Flemish")))
        {
            return null;
        }

        // Custom Style
        Style style = new Style(typeof(ListViewItem));
        style.Setters.Add(new Setter(ListViewItem.BorderBrushProperty, new SolidColorBrush(Colors.Gold)));
        style.Setters.Add(new Setter(ListViewItem.BorderThicknessProperty, new Thickness(2.0)));
        return style;
    }
}

Again, the class containing the logic should be defined as a resource:

<Page.Resources>
    <DataTemplate x:Key="DefaultDataTemplate">
        <StackPanel Background="DimGray"
                    Height="160"
                    Width="160"
                    Margin="4">
            <TextBlock Text="{Binding Name}"
                        Foreground="{Binding Color, Converter={StaticResource BeerColorConverter}}"
                        FontWeight="SemiBold"
                        FontSize="18"
                        HorizontalAlignment="Center"
                        Margin="4" />
            <TextBlock Text="{Binding Category}"
                        Foreground="Silver"
                        FontSize="18"
                        HorizontalAlignment="Center"
                        TextAlignment="Center"
                        TextWrapping="Wrap"
                        Margin="2" />
        </StackPanel>
    </DataTemplate>
    <local:BeerStyleSelector x:Key="BeerStyleSelector" />
</Page.Resources>

You can then assign the ItemContainerStyleSelector to an instance of it:

<ListView ItemsSource="{Binding BelgianBeers}"
            ItemContainerStyleSelector="{StaticResource BeerStyleSelector}">
    <!-- ... -->
</ListView>

When using a Style Selector, you’re restricted to modifying Dependency Properties.

Using a Data Template Selector

With a DataTemplate you can assign a look-and-feel to an item based on its type. Sometimes that’s just not good enough. Using a DataTemplateSelector you can choose or generate a DataTemplate based on the entire data object and its container – not just on its type. To create a template selector, create a class that inherits from DataTemplateSelector and override the SelectTemplateCore method. Once your class is defined you can assign an instance of the class to the template selector property of your element.

The business logic could be as simple a selecting an existing template from a resource, like this.DefaultTemplate in the following code snippet. But the entire template could also be generated on the spot through a XamlReader. This class allows you create a XAML element by concatenating it into a string; in many cases that’s a lot more convenient than talking to the object model in C#. The following code creates a colored stackpanel including a Belgian flag for the Belgian beers, and applies the default template to the rest. It also shows how to use a value converter programmatically:

public class BeerTemplateSelector : DataTemplateSelector
{
    public DataTemplate DefaultTemplate { get; set; }

    protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
    {
        Beer beer = item as Beer;

        // Default Template
        if (!(beer.Category.Contains("Belgian") || beer.Category.Contains("Flemish")))
        {
            return this.DefaultTemplate;
        }

        // Custom Template
        BeerColorConverter converter = new BeerColorConverter();
        string backGroundColor = converter.Convert((item as Beer).Color, null, null, null).ToString();

        string template = @"
            <DataTemplate xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation'>
                <Grid Background='" + backGroundColor + @"' Width='160' Height='160' Margin='4'>
                    <StackPanel>        
                        <TextBlock Text='{Binding Name}' FontWeight='SemiBold' FontSize='18' Margin='4' Foreground='White' HorizontalAlignment='Center' />
                        <TextBlock Text='{Binding Category}' Margin='2' FontSize='18' Foreground='White' HorizontalAlignment='Center' />
                    </StackPanel>
                        <Image Source='../Assets/belgianFlag.png' Margin='4' HorizontalAlignment='Right' Stretch='None' VerticalAlignment='Bottom' />
                </Grid>
            </DataTemplate>";
        return XamlReader.Load(template) as DataTemplate;
    }
}

Again, register the class containing the logic as a resource:

<Page.Resources>
    <local:BeerTemplateSelector x:Key="BeerTemplateSelector"
                                DefaultTemplate="{StaticResource DefaultDataTemplate}" />
</Page.Resources>

Then use an instance as ItemTemplateSelector:

<ItemsControl ItemsSource="{Binding BelgianBeers}"
                ItemTemplateSelector="{StaticResource BeerTemplateSelector}">
    <!-- ... -->
</ItemsControl>

Source Code

Here’s the sample project, it was written with Visual Studio 2012 Express Edition: U2UConsult.Win8.DynamicXaml.zip (89.56 kb)

Enjoy!

Diederik

Building Custom Controls for Windows 8 Store apps

Thu, 06 Dec 2012 06:51:00 -1200

This article explains how to build custom controls for Windows Store apps, using XAML and C#. Custom controls are the most powerful controls in the XAML department. Once you know how to design and build these, you’ll have no problems with their alternatives: user controls, derived controls, and extended controls. Let’s start with a definition: a custom control is a reusable templatable control that comes with a generic.xaml file and some code behind. Generally a custom control is stored in its own assembly to make it reusable in multiple apps. As a developer, you decorate a custom control with properties, methods, events, and a default style. The users of the control –developers who use your custom control in their apps- should live with the code behind, but are free to completely restyle the XAML part.

Hello again, Simple Slider

Almost a year ago, I built a custom slider control in an earlier version of Visual Studio and the Windows Runtime. A lot has changed since then – fortunately for the better. For this article, I decided to redo that slider. I’ll stick to its original anatomy: a horizontal slider is just a draggable Thumb in a Border. While dragging, a Rectangle is drawn to fill the space at the left side of the Thumb:

Getting Started

Recent versions of Visual Studio 2012 –including the free Express edition- come with a template to create a custom control. All you need to do to get started is adding a new item of the type ‘Templated Control’ to your project:

It will create the code behind file as well as the generic.xaml in the Templates folder.

Properties

A custom control directly inherits from Control itself, the mother of all controls. It immediately comes with a couple of useful properties like Height, Width, and Visibility. Of course you would want to add your own properties. A slider control e.g. should have at least properties to represent its minimum, maximum and current value. Since we’re interested in data binding, we will implement these as DependencyProperty instances. Using the propdp code snippet, you can rapidly define a property and provide its name, type, default value, and the function that will be called when the value changes. In the case of our slider, we are definitely interested in knowing when the value changed: it’s the sign to redraw the control. Here’s how the definition of the Value property looks like:

public static readonly DependencyProperty ValueProperty = DependencyProperty.Register(
    "Value", typeof(double), typeof(Slider), new PropertyMetadata(0.0, OnValueChanged));

public double Value
{
    get { return (double)GetValue(ValueProperty); }
    set { SetValue(ValueProperty, value); }
}

private static void OnValueChanged(DependencyObject dependencyObject, DependencyPropertyChangedEventArgs e)
{
    // Recalculate part sizes.
    // ...
}

Styling

The generic.xaml file will contain the default style for the control. While typing in that code, you have intellisense but no designer support. Here’s how the basic slider style looks like in XAML.

<Style TargetType="local:Slider">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:Slider">
                <Grid>
                    <Border Height="40"
                            VerticalAlignment="Stretch"
                            Background="Gray"
                            Margin="0"
                            Padding="0"
                            BorderThickness="0" />
                    <Canvas Margin="0"
                            Height="40">
                        <Rectangle x:Name="PART_Rectangle"
                                    Height="38"
                                    Fill="SlateBlue"
                                    Margin="0 1" />
                        <Thumb x:Name="PART_Thumb"
                                Background="LightSteelBlue"
                                Width="40"
                                Height="40"
                                Margin="0" />
                    </Canvas>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

The default style is assigned to the control in its constructor:

public Slider()
{
    this.DefaultStyleKey = typeof(Slider);
}

This is a screenshot of the custom slider:

In the style definition, the Thumb and Rectangle controls were given an x:Name value. This is because we need to manipulate them when (re)drawing the slider from code behind. That puts some constraints on the ‘templatability’ of the custom control: no matter how the designer wants to make the control look like, he or she needs to make sure that the template contains a Thumb and a Rectangle with the expected name. Fortunately you have some ways to notify these constraints to the designer. First there is a naming convention that specifies that the element’s name should start with ‘PART_’. More important is the fact that you can decorate the class with TemplatePart attributes. These will be recognized by tools like Expression Blend. Here’s the definition in C#:

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

You find the named parts with the GetTemplateChild method. When using your control, a designer could have ignored the expected parts, so make sure you look them up defensively:

protected override void OnApplyTemplate()
{
    this.thumb = this.GetTemplateChild(ThumbPartName) as Thumb;
    if (this.thumb != null)
    {
        this.thumb.DragDelta += this.Thumb_DragDelta;
    }

    // ...

    base.OnApplyTemplate();
}

This code is typically written in an override of the OnApplyTemplate method. Don’t use the Loaded event. The visual tree of a templated control might be still incomplete at that stage.

Visual State Management

Depending on its state (enabled, disabled, focused, snapped, etc.) a control will look and feel slightly or drastically different. This is where the VisualStateManager comes in action. The visual state manager invokes transformations when the state of the control changes. E.g. if the control is disabled, it will recolor it in fifty shades of gray. The states and transformations can be described declaratively in XAML:

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="CommonStates">
        <VisualState x:Name="Normal">
            <Storyboard>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_Thumb"
                                                Storyboard.TargetProperty="Background">
                    <DiscreteObjectKeyFrame KeyTime="0"
                                            Value="LightSteelBlue" />
                </ObjectAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_Rectangle"
                                                Storyboard.TargetProperty="Fill">
                    <DiscreteObjectKeyFrame KeyTime="0"
                                            Value="SlateBlue" />
                </ObjectAnimationUsingKeyFrames>
            </Storyboard>
        </VisualState>
        <VisualState x:Name="Disabled">
            <Storyboard>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_Thumb"
                                                Storyboard.TargetProperty="Background">
                    <DiscreteObjectKeyFrame KeyTime="0"
                                            Value="LightGray" />
                </ObjectAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_Rectangle"
                                                Storyboard.TargetProperty="Fill">
                    <DiscreteObjectKeyFrame KeyTime="0"
                                            Value="DimGray" />
                </ObjectAnimationUsingKeyFrames>
            </Storyboard>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

When the control is used inside a LayoutAwarePage, then it will listen automagically to state changes. But we can’t make assumptions on how and where our control is going to be used. Fortunately, in code behind it is possible to trigger the visual state manager programmatically. Here’s an example where we disable the control from C#:

private void Slider_IsEnabledChanged(object sender, DependencyPropertyChangedEventArgs e)
{
    if (this.IsEnabled)
    {
        VisualStateManager.GoToState(this, "Normal", true);
    }
    else
    {
        VisualStateManager.GoToState(this, "Disabled", true);
    };
}

Here's the result when the app is running:

Again, this puts some constraints on the templatability of the control: the designer has to make sure that the visual states that we invoke programmatically exist in the overridden style. Again we as developer can document these constraints by decorating the class with TemplateVisualState attributes:

[TemplateVisualState(Name = "Normal", GroupName = "CommonStates")]
[TemplateVisualState(Name = "Disabled", GroupName = "CommonStates")]
public sealed class Slider : Control
{ 
   // ...
}

Templating

The style in the generic.xaml is just a default style. It can be completely overridden, as long as the TemplatePart and VisualState constraints are respected. Here’s an example of how to give the default slider a brand new jacket:

<cc:Slider>
    <cc:Slider.Template>
        <ControlTemplate TargetType="cc:Slider">
            <Grid>
                <Border Height="80"
                        VerticalAlignment="Stretch"
                        Background="Transparent" />
                <Line VerticalAlignment="Center"
                        X1="0"
                        Y1="0"
                        X2="3000"
                        Y2="0"
                        StrokeThickness="7"
                        Stroke="White"
                        StrokeDashArray="1" />
                <Canvas Margin="0"
                        Height="80">
                    <Rectangle x:Name="PART_Rectangle"
                                Height="12"
                                Canvas.Top="34"
                                Fill="DarkSlateBlue" />
                    <Thumb x:Name="PART_Thumb"
                            Width="80"
                            Height="80">
                        <Thumb.Template>
                            <ControlTemplate>
                                <Image Source="Assets/Pacman.png"
                                        Height="80" />
                            </ControlTemplate>
                        </Thumb.Template>
                    </Thumb>
                </Canvas>
            </Grid>
        </ControlTemplate>
    </cc:Slider.Template>
</cc:Slider>

Here’s how it looks like:

Events

To add an event to your control, just declare it and raise it at the appropriate time. I have decorated the slider with an event ‘BoundHit’ that is raised when the value hits minimum or maximum:

public event EventHandler BoundHit;

private void OnBoundHit(EventArgs e)
{
    if (this.BoundHit != null)
    {
        this.BoundHit(this, e);
    }
}

private void Thumb_DragDelta(object sender, DragDeltaEventArgs e)
{
    // ...
    this.OnBoundHit(EventArgs.Empty);
    // ...
}

The page that hosts the slider can now react to it:

<cc:Slider BoundHit="ccSlider_BoundHit" />

This is what it does in the attached sample project:

Admit it: you never saw a slider do this ;-)

From Slider to Gauge

This is basically all you need to know to roll your own custom controls. If you don’t believe me, feel free to dive into the attached source code of the following Radial Gauge control. It’s a new version of a control I built some months ago: you find its story here. Since then the .NET framework improved and so did my code. Now the radial gauge may be a bit more complex than the slider: there are some animations and converters involved. But apart from that, it only contains stuff we covered in this article: a default style in generic.xaml, an override of OnApplyTemplate, and a TemplatePart - no visual states. Functionally all that a radial gauge does is rotating a needle when its value changes. That basically makes it a templated … slider. Anyway if you’re looking for a basic radial gauge with a color scale, here you have one:

Alternatives

User Controls

Custom controls are the most powerful controls to build, although not always the most developer-friendly: you don’t have support from Visual Studio’s designer when defining the style. Fortunately this is not the case with User Controls. For more details, check my previous blog item.

Derived Controls

Another alternative is to create a Derived Control, by creating a subclass of an existing control. You can then add properties, methods, and events at will, or override some of its methods. You find examples of derived controls in the Callisto framework. Among other useful controls, that framework contains the DynamicTextBlock control, a textblock that does trimming at word boundary. It inherits from ContentControl:

public class DynamicTextBlock : ContentControl
{
    // ...
}

Another example of a derived control can be found in the WinRT XAML Toolkit: the WatermarkTextBox inherits from the native TextBox, and adds a watermark.

Extended Controls

Using Attached Properties, you can add extra properties to existing instances, e.g. of controls. This allows you to create new controls without defining control subclasses. Again Callisto as well as WinRt XAML Toolkit have examples of such extensions. You’ll remember the TextBoxValidationExtensions from my blog post on input validation. These extensions allow you to add validation logic to a native textbox:

<TextBox ext:TextBoxValidationExtensions.Format="NonEmptyNumeric"
            ext:TextBoxValidationExtensions.InvalidBrush="Salmon" />

You can take the concept of attached properties one step further to create a Behavior, like the ‘select-all-on-focus’ from another previous blog post:

<TextBox Text="Eh~ Sexy lady. Op op op op oppan Gangnam Style.">
    <WinRtBehaviors:Interaction.Behaviors>
        <local:SelectAllOnFocusBehavior SelectAllOnFocus="True" />
    </WinRtBehaviors:Interaction.Behaviors>
</TextBox>

The attached solution contains the source code for all mentioned alternative controls. Here’s how the corresponding sample page looks like:

Code Code Code

Here’s the full source code of all the featured controls in this article (o, and a free forward-button style). It was written in Visual Studio 2012 Ultimate, without SP1: U2UConsult.CustomControls.Sample.zip (256.78 kb).

Enjoy!

Diederik

Building User Controls for Windows 8 Store apps

Wed, 07 Nov 2012 06:00:00 -1200

This article describes how to build user controls for XAML-based Windows 8 Store apps. User controls –or composite controls- are the easiest controls that you can roll yourself, since they're defined in plain XAML and come with design-time support in Visual Studio. Basically a user control is just a XAML panel on which you drag and drop a group of controls that belong together. You create a user control only if you want to reuse that XAML panel in multiple places in your app. If you want to reuse the group of controls in more than one app, then you store the user control in a separate library. Typical examples of user controls are a media player button bar (with play, pause and stop buttons), a paging control (with next, previous, goto buttons etc.) and an address panel (with labels, textboxes, and comboboxes for street, number, zip code, city, country, and so on).

The sample control for this article will be a new version of my EnhancedSlider. It's a plain vanilla slider that is surrounded with some extra textblocks. The slider comes with support for direct input through a textbox that is enabled by a button. I've been using that group of controls quite often lately, so I decided to package it as a reusable user control. Here's how the original looks like, it started as a non-reusable bunch of controls on the main page of an app:

Here’s how to roll your own user control.

In a Windows Store app project –or a separate library- add an item of the type ‘User Control’.

Visual Studio will create a class for you. It inherits from UserControl and comes with a XAML file and an associated code behind file. You can drag and drop individual controls into the XAML design surface. Here's how the simplified XAML for the enhanced slider looks like:

<UserControl x:Class="U2UConsult_UserControls.EnhancedSlider">
    <Grid>
        <TextBlock HorizontalAlignment="Left" />
        <StackPanel HorizontalAlignment="Right">
            <Button Style="{StaticResource EditRoundButtonStyle}" />
            <TextBox />
            <TextBlock />
        </StackPanel>
        <Slider Grid.Row="1" />
        <TextBlock HorizontalAlignment="Left" Grid.Row="2" />
        <TextBlock HorizontalAlignment="Right" Grid.Row="2" />
    </Grid>
</UserControl>

With a little luck the Visual Studio Designer will support you, but don't expect too much from it. In many cases you'll end up with a blank surface - but at least you have IntelliSense in the XAML and an operational properties editor:

Your next step is to connect control properties through bindings. Use the ElementName property to define the source of the binding. In the EnhancedSlider, I hooked the Text property of the surrounding text controls to the corresponding properties of the central slider:

<Slider x:Name="slider" />
<TextBlock Text="{Binding Minimum, ElementName=slider}"  />
<TextBlock Text="{Binding Maximum, ElementName=slider}" />

The XAML is ready. Time to focus on the code behind. We embrace encapsulation, so your user control should behave as a black box to its hosting page or control. That page shouldn't see the individual controls, but only talk to the composite. In code behind, decorate your user control with the appropriate properties. Regular properties don't interact with the binding engine, you have to use Dependency Properties. The EnhancedSlider has the following properties: Minimum, Maximum, Value, Header, and ValueSuffix. ValueSuffix represents the unit measure and is displayed in a separate textblock in the upper right corner of the control. I’ve been trying very hard to use a StringFormatConverter in the textbox displaying the Value. That value should only be formatted when the texbox is disabled (when it looks like a label), not when the user is typing in it. Unfortunately, changing the converter or even the converter parameter programmatically doesn't work because bindings are immutable. So I had to pull the formatting out of the textbox and into an other control as a suffix. It will stil do the job in most scenario's...

Anyway, here’s one example of a dependency property (tip: use the propdp code snippet to create these):

public static readonly DependencyProperty MinimumProperty =
    DependencyProperty.Register("Minimum", typeof(int), typeof(EnhancedSlider), new PropertyMetadata(0));

public int Minimum
{
    get { return (int)GetValue(MinimumProperty); }
    set { SetValue(MinimumProperty, value); }
}

All you need to do now is to bind the subcontrol’s properties to the user control's dependency properties. You may be tempted to set the DataContext of the control to itself (with RelativeSource Self as binding source) to get this done, but then you loose the ability to bind it to something else (e.g. a ViewModel). It's better to give the control a name, and use yet another ElementName in the binding:

<UserControl x:Class="U2UConsult_UserControls.EnhancedSlider" x:Name="userControl">
...
    <Slider x:Name="slider"
        Minimum="{Binding Minimum, ElementName=userControl}"
        Maximum="{Binding Maximum, ElementName=userControl}"
        Value="{Binding Value, Mode=TwoWay, ElementName=userControl}" />
...
</UserControl>

And there we are: we just built our own a reusable composite control.

If you want to use the control inside a page or another control, all you need to do is declare the namespace in the hosting container:

<Page x:Class="U2UConsult.UserControls.Sample.MainPage"
         xmlns:uc="using:U2UConsult_UserControls" >
...
</Page>

You're ready to use the control in the page. Don’t forget to set the bindings with the ViewModel:

<uc:EnhancedSlider Value="{Binding Roasted, Mode=TwoWay}"
                           Header="Roasted"
                           Maximum="1000"
                           Foreground="Orange"
                           ValueSuffix=" civilizations" />

Again, don't expect too much help from the Visual Studio Designer. Here's how my main page looks at design time:

Fortunately at runtime everything comes through. Here’s a screen shot of the attached sample application:

The app contains two projects: a GUI, and a library with the user control.

Oh, there’s something you should know about storing user controls in a separate assembly: that assembly may not have dots in its name. I assume that’s a bug that will be fixed very soon.

Here’s the code for the sample solution. It was written in Visual Studio 2012 Express: U2UConsult.UserControls.Sample.zip (132.73 kb)

Enjoy!

Diederik

Creating updatable Live Tile from A to Z (part 2)

Mon, 27 Aug 2012 23:15:00 -1200

At last, part 2 of this blogpost. In part 1, we created an updatable Live Tile. We still need to update it with a Background task. We start by adding a Windows Phone Scheduled Task Agent, which is a projecttype added with the devtools for the Mango-version. This type allows you to ask tasks to be performed in the background. By default the task will run every 30 minutes (It can take longer depending on the memorypressure of the device). In here you can have an override of OnInvoke, that should perform the actual backgroundtask of your app.

The control (Indicator) whom I am using for creating a WriteableBitmap with, needs to be accessible from within the app ánd from within the backgroundtask. Since the app already needs a reference to the BackgroundTask, we cannot create a reference in the opposite direction. So we need to move the Indicator into a separate class-library.

You’ll probably see that this works quiet nicely, until all of a sudden your solution no longer builds. In your code all of the Indicator-properties seems to be absent. I presume it’s a bug in Visual Studio, but from time to time the BuildAction-property for Indicator.xaml changes, which prevents your solution from building. If it happens to you: change it back to “Page” :

Let’s do a little update of the tile we created :

   1:  Deployment.Current.Dispatcher.BeginInvoke(() =>

   2:              {

   3:                  Indicator indicator = new Indicator();

4:

   5:                  indicator.KPI1Brush = new SolidColorBrush(Colors.Magenta);

   6:                  indicator.KPI2Brush = new SolidColorBrush(Colors.Orange);

   7:                  indicator.KPI3Brush = new SolidColorBrush(Colors.Red);

   8:                  indicator.KPI4Brush = new SolidColorBrush(Colors.Yellow);

9:

  10:                  indicator.Measure(new Size(173, 173));

  11:                  indicator.Arrange(new Rect(0, 0, 173, 173));

12:

13:

  14:                  string indic = "/Shared/ShellContent/indicator.jpg";

  15:                  WriteableBitmap bm = new WriteableBitmap(indicator, null);

  16:                  IsolatedStorageFile isolated = IsolatedStorageFile.GetUserStoreForApplication();

  17:                  if (isolated.FileExists(indic))

  18:                  {

  19:                      isolated.DeleteFile(indic);

  20:                  }

  21:                  IsolatedStorageFileStream stream = isolated.CreateFile(indic);

  22:                  bm.SaveJpeg(stream, 50, 50, 0, 100);

  23:                  stream.Flush();

  24:                  stream.Close();

25:

  26:                  ShellTile tile = ShellTile.ActiveTiles.FirstOrDefault();

  27:                  ShellTileData data = new StandardTileData()

  28:                  {

  29:                      BackContent = "Sober at 18:23",

  30:                      BackBackgroundImage = new Uri("isostore:/Shared/ShellContent/indicator.jpg", UriKind.Absolute),

  31:                      BackTitle = "0.123"

  32:                  };

33:

  34:                  tile.Update(data);

  35:              });

This is of course very similar to the code in the first part of this blogpost. You can see that in here we also store the bitmap in isolated storage. The nice thing here is that the isolated storage is being shared between the backgroundtask, and the application for which you create the task. So it could also be used for transferring data from the app to the task.

Actually we’re changing stuff on the GUI Thread from a background thread, that’s why we need the dispatcher-object here.

One little problem remains : I would like to set one of the KPI-colors of my indicator to the PhoneForeGroundColor. In the app I do as such :

new SolidColorBrush((Color)App.Current.Resources["PhoneForegroundColor"]);

(Or use “PhoneForegroundBrush” for getting a Brush-object) But what to do in the BackgroundTask, since I do not have access to the App-class in there ? No problem: you can also access the system-resources through objects inheriting from FrameworkElement :

new SolidColorBrush((Color) indicator.Resources["PhoneForegroundColor"]);

Cool: ready to deploy !

Creating updatable Live Tiles from A to Z (part 1)

Tue, 08 May 2012 03:57:53 -1200

Something I haven’t found on the webs, is a nice overview of how to create updatable live tiles. Sure, you can gather all the data, but all the do’s and gotcha’s in one article would be nice. So I decided to get everything together myself.

OK: here’s the scenario. We need an app that visually shows information. Think about e.g. the mail-app that shows how many unread mails you have. Or a very nice one: Amazing Weather, which shows current weather conditions, and predictions. In our app we’ll show four arbitrary KPI’s on the tile, which will be updated in the background.

Step 1 : simple Tile

Your application can have one or several tiles on the start page( several if you implemented Deep link in your app), which can be reached by using the ShellTile.ActiveTiles collection. In my example there’s no deep link, so I should always get one tile, or none when not pinned to start. The Tile can be modified by passing it a ShellTileData-object. This way you can change front (Title, Count, BackgroundImage) and back (BackTitle, BackContent, BackBackgroundImage) of the tile. I will change the time whenever my app closes or deactivates :

   1:  ShellTile tile = ShellTile.ActiveTiles.FirstOrDefault();

   2:  if (tile!=null)

   3:  {

   4:      ShellTileData data = new StandardTileData()

   5:      {

   6:          Title = "12345",

   7:          Count = 5,

   8:          BackContent = "Some message...",

   9:          BackBackgroundImage = new Uri("http://mw2.google.com/mw-panoramio/photos/medium/33672781.jpg"),

  10:          BackTitle = "ABCDEF"

  11:      };

12:

  13:      tile.Update(data);

  14:  }

This gives me following result :

Front :	Back :

Although this can already be handy for some scenario’s, it’s not enough. The count does not appear like in the mail-hub. Unfortunately. And I could show my KPI’s with text, but my Tile will be full of text, and maybe I’ll have more text than can fit on the Tile.

Step 2 : not so simple Tile

Remember my blogpost about saving pictures to the PicturesHub (over here) ? In there I showed you can create bitmapimages from any control. This is also what we’ll be doing when creating our tile-images. I start by creating a usercontrol. Best is to give it height and width equal to 173. This is the height/width for the tile. This will allow you to easily create your tile in a WYSIWYG-way. The usercontrol simply shows my four KPI’s by using “Trafficlights”, showing red, orange or green. I will also add white (or black if the light theme is being used) for “disaster”. Let’s start creating our usercontrol :

   1:  <UserControl x:Class="PhoneApp1.Indicator"

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

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

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

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

   6:      mc:Ignorable="d"

   7:      FontFamily="{StaticResource PhoneFontFamilyNormal}"

   8:      FontSize="{StaticResource PhoneFontSizeNormal}"

   9:      Foreground="{StaticResource PhoneForegroundBrush}"

  10:      d:DesignHeight="480" d:DesignWidth="480" Height="173" Width="173">

11:

  12:      <Grid x:Name="LayoutRoot" Background="{StaticResource PhoneAccentBrush}">

13:

  14:          <Grid.RowDefinitions>

  15:              <RowDefinition Height="2*" />

  16:              <RowDefinition Height="*" />

  17:          </Grid.RowDefinitions>

  18:          <Grid.ColumnDefinitions>

  19:              <ColumnDefinition Width="2*" />

  20:              <ColumnDefinition Width="*" />

  21:          </Grid.ColumnDefinitions>

  22:          <Rectangle Name="KPI1Indicator" Stroke="{StaticResource PhoneBorderBrush}" StrokeThickness="2" Fill="Red" Margin="80,80,10,10" RadiusX="20" RadiusY="20" />

  23:          <Rectangle Name="KPI2Indicator" Grid.Column="1" Stroke="{StaticResource PhoneBorderBrush}" StrokeThickness="2" Fill="Green" Margin="3,80,30,10" RadiusX="20" RadiusY="20" />

  24:          <Rectangle Name="KPI3Indicator" Grid.Row="1" Stroke="{StaticResource PhoneBorderBrush}" StrokeThickness="2" Fill="Orange" Margin="80,3,10,30" RadiusX="20" RadiusY="20" />

  25:          <Rectangle Grid.Column="1" Grid.Row="1" Name="KPI4Indicator" Stroke="{StaticResource PhoneBorderBrush}" StrokeThickness="2" Fill="Yellow" Margin="3,3,30,30" RadiusX="20" RadiusY="20" />

  26:      </Grid>

  27:  </UserControl>

The four KPI-indicators need to be exposed to the outside word, so let’s add some properties for that :

   1:  public Brush KPI1Brush

   2:  {

   3:      get { return KPI1Indicator.Fill; }

   4:      set { KPI1Indicator.Fill = value; }

   5:  }

6:

   7:  public Brush KPI2Brush

   8:  {

   9:      get { return KPI2Indicator.Fill; }

  10:      set { KPI2Indicator.Fill = value; }

  11:  }

12:

  13:  public Brush KPI3Brush

  14:  {

  15:      get { return KPI3Indicator.Fill; }

  16:      set { KPI3Indicator.Fill = value; }

  17:  }

18:

  19:  public Brush KPI4Brush

  20:  {

  21:      get { return KPI4Indicator.Fill; }

  22:      set { KPI4Indicator.Fill = value; }

  23:  }

When closing/deactivating the app, I will set the KPI-colors, and use this controls as image for the back of my tile. First, setting the colors:

   1:  Indicator indicator = new Indicator();

2:

   3:  indicator.KPI1Brush = new SolidColorBrush(Colors.Black);

   4:  indicator.KPI2Brush = new SolidColorBrush(Colors.Blue);

   5:  indicator.KPI3Brush = new SolidColorBrush(Colors.Cyan);

   6:  indicator.KPI4Brush = new SolidColorBrush(Colors.Green);

And then making a WriteableBitmap with it :

indicator.Measure(new Size(173, 173));
indicator.Arrange(new Rect(0, 0, 173, 173));

WriteableBitmap bm = new WriteableBitmap(indicator, null);

The Measure and Arrange-stuff is for making the control fit into a 173 by 173 square. Finally I need to save my image to Isolated Storage. Inside isolated storage I can store things in the Shared/Shellcontent-folder. This will also make it accessible by my tiles (info here).

   1:  string indic = "/Shared/ShellContent/indicator.jpg";

2:

   3:  IsolatedStorageFile isolated = IsolatedStorageFile.GetUserStoreForApplication();

   4:  if (isolated.FileExists(indic))

   5:  {

   6:      isolated.DeleteFile(indic);

   7:  }

   8:  IsolatedStorageFileStream stream = isolated.CreateFile(indic);

   9:  bm.SaveJpeg(stream, 173, 173, 0, 100);

  10:  stream.Flush();

  11:  stream.Close();

And finally, I update my Tile to show the image from isolated storage :

   1:  ShellTile tile = ShellTile.ActiveTiles.FirstOrDefault();

   2:  if (tile!=null)

   3:  {

   4:      ShellTileData data = new StandardTileData()

   5:      {

   6:          Title = "12345",

   7:          Count = 5,

   8:          BackContent = "Some message...",

   9:          BackBackgroundImage =

  10:              new Uri("isostore:/Shared/ShellContent/indicator.jpg", UriKind.Absolute),

  11:          BackTitle = "ABCDEF"

  12:      };

13:

  14:      tile.Update(data);

  15:  }

and there you go :

In next blogpost I’ll tell you about updating the tile with a backgroundtask, which also has some gotcha’s you need to know.

>Follow @PiekenPuil

Using a Sterling-database in Windows Phone as alternative to SQL CE

Wed, 25 Apr 2012 03:23:00 -1200

I you remember my blogpost from a very long time ago, I wrote about using SQL CE with Windows Phone (you can find it here). SQL CE can be queried with LINQ to SQL, making it interesting for storing relational data. Recently I came in contact with the Sterling-database (check it here), an Object-database which can be used in .NET, Silverlight and Windows Phone ! You can add “SterlingPhone” to your project by using NuGet. Just like SQL CE I can use Sterling for storing data in Isolated Storage.

I’ll show you how to use it with a “fake” Northwind-database, but it can also be used for persisting full Viewmodels when using MVVM. In my fake Northwind-database I will use Products and Categories, so I simply start by creating classes for these two entities :

   1:  public class Product

   2:  {

   3:      public int ProductId { get; set; }

4:

   5:      public string ProductName { get; set; }

6:

   7:      public double? UnitPrice { get; set; }

8:

   9:      public Category Category { get; set; }

  10:  }

11:

  12:  public class Category

  13:  {

  14:      public int CategoryId { get; set; }

15:

  16:      public string CategoryName { get; set; }

17:

  18:      public List<Product> Products { get; set; }

  19:  }

These classes are pure and simple POCO-classes, no specific classes to inherit from or a bunch of attributes to use.

Second step is to create our “database-class”, which inherits from BaseDatabaseInstance :

public class FakeNorthWindDatabase : BaseDatabaseInstance

In here I will register my tables by overriding RegisterTables :

protected override System.Collections.Generic.List<ITableDefinition> RegisterTables()
{
    return new List<ITableDefinition>() 
    {
        this.CreateTableDefinition<Product,int>(p=>p.ProductId)
            .WithIndex<Product,Category,int>("IX_ProductCategory",p=>p.Category),
        this.CreateTableDefinition<Category,int>(c=>c.CategoryId)
    };
}

In here I create the table Category and Products, which are respectively using the CategoryId and ProductId-properties as identifiers. The WithIndex-option creates a relationship between these two entities.

This database also needs to be registered. I do that in the Application_Launching:

   1:  private SterlingEngine engine;

   2:  private SterlingDefaultLogger logger;

3:

   4:  public static ISterlingDatabaseInstance DB { get; set; }

5:

   6:  private void Application_Launching(object sender, LaunchingEventArgs e)

   7:  {

   8:      InitDB();

   9:  }

10:

  11:  private void InitDB()

  12:  {

  13:      engine = new SterlingEngine();

  14:      engine.SterlingDatabase.RegisterSerializer<DefaultSerializer>();

  15:      engine.Activate();

16:

  17:      DB = engine.SterlingDatabase.RegisterDatabase<FakeNorthWindDatabase>();

  18:      FakeNorthWindDatabase.Init(DB);

  19:  }

One of the things we need to do is to specify which serializer will be used for writing and reading data. At this moment we only have the DefaultSerializer and AggregateSerializer, but you could create your own classes here, as long as they inherit from BaseSerializer.

At the end I call the init-method of the FakeNorthWindDatabase, which I implemented as follows :

   1:  internal static void Init(Wintellect.Sterling.ISterlingDatabaseInstance DB)

   2:  {

   3:      if (!DB.Query<Category,int>().Any())

   4:      {

   5:          Category c1 = new Category() { CategoryId=1, CategoryName = "Beverages"};

   6:          Category c2 = new Category() { CategoryId = 2, CategoryName = "Cheese" };

   7:          Category c3 = new Category() { CategoryId = 3, CategoryName = "Seafood" };

8:

   9:          Product p11 = new Product() { ProductId = 1, ProductName = "WestVleteren 12",

  10:              UnitPrice = 3, Category = c1 };

  11:          Product p12 = new Product() { ProductId = 2, ProductName = "Rochefort 10",

  12:              UnitPrice = 3, Category = c1 };

  13:          Product p13 = new Product() { ProductId = 3, ProductName = "Maredsous 8",

  14:              UnitPrice = 2.5, Category = c1 };

15:

  16:          Product p21 = new Product() { ProductId = 4, ProductName = "Maredsous",

  17:              UnitPrice = 3, Category = c2 };

  18:          Product p22 = new Product() { ProductId = 5, ProductName = "Gouda",

  19:              UnitPrice = 3, Category = c2 };

  20:          Product p23 = new Product() { ProductId = 6, ProductName = "Cambozola",

  21:              UnitPrice = 2.5, Category = c2 };

22:

  23:          Product p31 = new Product() { ProductId = 7, ProductName = "Shrimps",

  24:              UnitPrice = 3, Category = c3 };

  25:          Product p32 = new Product() { ProductId = 8, ProductName = "Tuna Fish",

  26:              UnitPrice = 3, Category = c3 };

  27:          Product p33 = new Product() { ProductId = 9, ProductName = "Calamares",

  28:              UnitPrice = 2.5, Category = c3 };

29:

  30:          DB.Save(c1);

  31:          DB.Save(c2);

  32:          DB.Save(c3);

33:

  34:          DB.Save(p11);

  35:          DB.Save(p12);

  36:          DB.Save(p13);

  37:          DB.Save(p21);

  38:          DB.Save(p22);

  39:          DB.Save(p23);

  40:          DB.Save(p31);

  41:          DB.Save(p32);

  42:          DB.Save(p33);

  43:      }

  44:  }

This code first checks if there is already categories present, and if not starts filling the database with some sample-data. We can now use our data: let’s simply show the name of a Category. The Sterling-database has a load-function that can be passed the key-value of the entity to find :

   1:  private void button1_Click(object sender, RoutedEventArgs e)

   2:  {

   3:      Category c= App.DB.Load<Category>(1);

   4:      MessageBox.Show(c.CategoryName);

   5:  }

Simple. Retrieving a list is also simple :

listBox1.ItemsSource = App.DB.Query<Category, int>().Select(c => c.LazyValue.Value);

The select-method uses a delegate that takes a TableKey<Category,int> and returns an object, in this case the Category-entity. By using LINQ I can get the products for a specific category :

int catId = Convert.ToInt32(NavigationContext.QueryString["cat"]);
listBox1.ItemsSource = (from p in App.DB.Query<Product, int>()
                        where p.LazyValue.Value.Category.CategoryId == catId
                       select p.LazyValue.Value).ToList();

Let’s add a new Category and product :

   1:  Category c = new Category()

   2:  {

   3:      CategoryId = 4,

   4:      CategoryName = "Condiments"

   5:  };

6:

   7:  Product p = new Product()

   8:  {

   9:      ProductId = 10,

  10:      ProductName = "Aniseed Syrup",

  11:      UnitPrice = 12.2,

  12:      Category = c

  13:  };

14:

  15:  App.DB.Save<Product>(p);

Saving the product also saves the category. Save checks the Id-field to know if it should do an update or an insert. Unfortunately there’s no autonumber-functionality, but Sterling also allows me to create triggers, with which I could create autonumber-functionality myself.

This blogpost just scratches the surface of Sterling, there’s lots more fun stuff you can do with it, so check it out if you need to store persistant data.

Follow @PiekenPuil

Using Reactive extensions for feeding test sensor-readings in Windows Phone

Thu, 29 Mar 2012 09:27:00 -1200

An interesting technology you might have heard of is Reactive Extension (MSDN Rx Site). It’s available for different types of applications, although you may need to add the necessary assemblies through NuGet. But in WP7.5 it’s included in the SDK. The only thing you need are references to Microsoft.Phone.Reactive and System.Observable. Let’s start with a very simple scenario : simulating the PositionChanged-event of the GeoCoordinateWatcher. I know that the Mango-emulator allows me to simulate Geographical position, but it’s a nice starting point.

My application consists out of a very simple Page which shows a Bing mapcontrol. I set the Zoomlevel to 10, and we’re set to go. The code is fairly simple :

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

   2:  {

   3:      GeoCoordinateWatcher watcher = new GeoCoordinateWatcher();

   4:      watcher.MovementThreshold = 1;

   5:      watcher.PositionChanged += new EventHandler<GeoPositionChangedEventArgs<GeoCoordinate>>(watcher_PositionChanged);

6:

   7:      watcher.Start();

   8:  }

9:

  10:  void watcher_PositionChanged(object sender, GeoPositionChangedEventArgs<GeoCoordinate> e)

  11:  {

  12:      map1.Dispatcher.BeginInvoke(()=> map1.Center = e.Position.Location);

  13:  }

Now let’s try to simulate some changes in our position: Let’s travel from South England to France, passing Dover and Calais. Let’s start by creating a simple function that gives me back an GeoPositionEventArgs every 50 ms :

   1:  #if DEBUG

   2:  static double l = 0;

3:

   4:  private static IEnumerable<GeoPositionChangedEventArgs<GeoCoordinate>> GetLocations()

   5:  {

   6:      while (true)

   7:      {

   8:          System.Threading.Thread.Sleep(50);

   9:          l += .001;

10:

  11:          yield return new GeoPositionChangedEventArgs<GeoCoordinate>

  12:              (new GeoPosition<GeoCoordinate>(DateTimeOffset.Now, new GeoCoordinate(51, l)));

  13:      }

  14:  }

  15:  #endif

Now let’s create a Thread that calls this functions, and uses Rx for feeding the eventargs to the eventhandler :

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

   2:  {

   3:      GeoCoordinateWatcher watcher = new GeoCoordinateWatcher();

   4:      watcher.MovementThreshold = 1;

   5:      watcher.PositionChanged += new EventHandler<GeoPositionChangedEventArgs<GeoCoordinate>>(watcher_PositionChanged);

6:

   7:      #if DEBUG

   8:      System.Threading.Thread thr = new System.Threading.Thread(() =>

   9:      {

  10:          var test = GetLocations().ToObservable();

  11:          test.Subscribe(ea => watcher_PositionChanged(null, ea));

  12:      });

13:

  14:      thr.Start();

  15:      #endif

16:

  17:      watcher.Start();

  18:  }

The ToObservable-function turns my IEnumerable<T> into an IObservable<T>. The Subscribe-function binds it with the eventhandler. Run the app (in debug-mode, of course), and you’ll see the map slowly moving East passing from England to France.

Now let’s try to use the same concept with the Accelerometer. I create a simple page with three TextBlock-controls for displaying the X,Y and Z-components of my accelaration. In here we’ll have to do similar stuff with SensorReadingEventArgs<AccelerometerReading>. In AccelerometerReading I need to set the Acceleration-property which is of type Vector3 (with X,Y,Z). The problem that arrises here is that the setter of Accelartion is declared as internal, so I cannot use this from my code. The solution can be found at Microsoft Patterns and Practices site, which has some recipes for creating alternatives for the sensor-classes (here). Instead of the AccelerometerReading-class I can use AccelerometerSensorReading-class and the SettableAccelerometerSensorReading-class. The name of the latter already describes it : it will allow me to set the Acceleration-property. Let’s have a look at the result :

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

   2:  {

   3:      AccelerometerAdapter acc = new AccelerometerAdapter();

   4:      acc.TimeBetweenUpdates = TimeSpan.FromSeconds(1);

5:

   6:      acc.CurrentValueChanged += new EventHandler<SensorReadingEventArgs<AccelerometerSensorReading>>(acc_CurrentValueChanged)

   7:      acc.Start();

8:

   9:  #if DEBUG

  10:      System.Threading.Thread thr = new System.Threading.Thread(() =>

  11:      {

  12:          var test = GetReadings().ToObservable();

  13:          test.Subscribe(ea => acc_CurrentValueChanged(null, ea));

  14:          });

15:

  16:      thr.Start();

  17:  #endif

  18:  }

19:

  20:  void acc_CurrentValueChanged(object sender, SensorReadingEventArgs<AccelerometerSensorReading> e)

  21:  {

  22:      ContentPanel.Dispatcher.BeginInvoke(() =>

  23:      {

  24:          textBlock1.Text = e.SensorReading.Acceleration.X.ToString();

  25:          textBlock2.Text = e.SensorReading.Acceleration.Y.ToString();

  26:          textBlock3.Text = e.SensorReading.Acceleration.Z.ToString();

  27:      });

  28:  }

29:

  30:  #if DEBUG

31:

  32:  static float f = 0f;

  33:  public static IEnumerable<SensorReadingEventArgs<AccelerometerSensorReading>> GetReadings()

  34:  {

  35:      while (true)

  36:      {

  37:          System.Threading.Thread.Sleep(500);

  38:          var acc = new SettableAccelerometerSensorReading();

  39:          acc.SetAcceleration(new Vector3(f, 0f, 0f));

  40:          f += .1f;

  41:          if (f > Math.PI)

  42:          {

  43:              f = (float)-Math.PI;

  44:          }

  45:          var reading = new SensorReadingEventArgs<AccelerometerSensorReading>();

46:

  47:          yield return new SensorReadingEventArgs<AccelerometerSensorReading>() { SensorReading = acc };

  48:      }

  49:  }

  50:  #endif

And there you go. Also tried it with the virtual Motion-sensor, unfortunately I got stuck there. I’m missing a SettableAttitudeReading-class, and I’ve been trying to create it since a few days, but I’m close to giving up. I guess there’s a reason for not having it in the patterns-library.

Follow @PiekenPuil

File IO in Windows 8

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

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 -1200

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 -1200

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 ?

Follow @PiekenPuil

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

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

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 -1200

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 -1200

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 -1200

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 -1200

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 -1200

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 -1200

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 -1200

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 -1200

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 -1200

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 -1200

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 -1200

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 -1200

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 -1200

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.

U2U Consult TechDays 2011 CD Available for Download

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

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 reporting services with Oracle package / stored procedure

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

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 -1200

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 -1200

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 -1200

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.

Safe disposal of WCF proxies

Tue, 28 Sep 2010 09:34:37 -1200

The issue has been known for a long time: you cannot safely dispose a WCF proxy that inherits from ClientBase<T> with a using statement, because the dispose method may throw. For more information, see http://www.google.com/search?q=wcf+proxy+dispose.

However, I’ve always found most solutions out there to be too complex, too cumbersome, or both. Some of them even seek to replace the Visual Studio (or svcutil.exe) generated proxy by handwritten code, in which case you loose the convenience of the “Add Service Reference” dialog and the automatic configuration file generation. I wanted a simple but effective solution that does not replace the Visual Studio code generation, and is easy to use at the same time.

I came up with a simple extension method, that you use as follows:

var proxy = new SomeServiceClient();

using (proxy.SafeDisposer())
{
    // use the proxy here
}

Here’s the code:

namespace U2UConsult.ServiceModel
{
    using System;
    using System.Diagnostics;
    using System.ServiceModel;

    public static class ClientBaseExtensions
    {
        private static readonly TraceSource traceSource = new TraceSource("U2UConsult.ServiceModel");

        public static IDisposable SafeDisposer<T>(this ClientBase<T> proxy) where T : class
        {
            return new SafeDisposerProxy<T>(proxy);
        }

        private sealed class SafeDisposerProxy<T> : IDisposable where T : class
        {
            private ClientBase<T> proxy;

            public SafeDisposerProxy(ClientBase<T> proxy)
            {
                this.proxy = proxy;
            }

            public void Dispose()
            {
                if (this.proxy != null)
                {
                    if (this.proxy.State == CommunicationState.Opened)
                    {
                        try
                        {
                            this.proxy.Close();
                        }
                        catch (Exception ex)
                        {
                            ClientBaseExtensions.traceSource.TraceEvent(
                                TraceEventType.Error, 
                                0, 
                                "Could not close client proxy, reason: {0}", 
                                ex.Message);
                            this.proxy.Abort();
                        }
                    }
                    else
                    {
                        this.proxy.Abort();
                    }

                    this.proxy = null;
                }
            }
        }
    }
}

Enjoy!

Lambda Curry

Mon, 24 May 2010 05:20:23 -1200

Note: if you’re looking for lamb curry, you came to the wrong place. This post is about C# programming techniques.

Currying a function is a technique named after Haskell Curry, to transform a function with multiple parameters into a series of functions having one parameter each. The technique is important, because it opens the door to an optimization technique called partial evaluation. Let’s look at an example.

Let’s say you need to write a program that sums a two-dimensional function f(x,y) over a two-dimensional range, e.g. –1000 ≤ x ≤ 1000 and –1000 ≤ y ≤ 1000.

Such a two-dimensional function, assuming double parameters and result, can be represented by Func<double, double, double>, and we can sum it using the following method:

        private static double Sum(Func<double, double, double> f)
        {
            double sum = 0;
            for (int x = -1000; x <= 1000; x++)
            {
                for (int y = -1000; y <= 1000; y++)
                {
                    sum += f(x, y);
                }
            }
 
            return sum;
        }

We can apply this to an arbitrary function, for example:

            Func<double, double, double> f = (x, y) => Math.Sin(x) * Math.Sin(y);
 
            double result = Sum(f);

Currying this is now a simple textual transformation. Instead of defining f as Func<double, double, double>, we define it as Func<double, Func<double, double>>.

    using System;
 
    internal static class Curried
    {
        public static void Main()
        {
            Func<double, Func<double, double>> f = x => y => Math.Sin(x) * Math.Sin(y);
 
            double result = Sum(f);
        }
 
        private static double Sum(Func<double, Func<double, double>> f)
        {
            double sum = 0;
            for (int x = -1000; x <= 1000; x++)
            {
                for (int y = -1000; y <= 1000; y++)
                {
                    sum += f(x)(y);
                }
            }
 
            return sum;
        }
    }

Effectively, a function that took two parameters and returned a result is replaced by a function that takes one parameter and returns a function that takes the second parameter and returns the result. It looks a lot simpler than it sounds. Instead of writing f = (x, y) => Math.Sin(x) + Math.Sin(y), we write f = x => y => Math.Sin(x) + Math.Sin(y). And when calling it, instead of writing f(x, y), we write f(x)(y). Simple.

Unfortunately, every call to f(x) now allocates a new Func<double, double> object, and that can become quite expensive. But that can be fixed easily, so here is a smarter solution:

    using System;
 
    internal static class Smarter
    {
        public static void Main()
        {
            Func<double, Func<double, double>> f = x => y => Math.Sin(x) * Math.Sin(y);
 
            double result = Sum(f);
        }
 
        private static double Sum(Func<double, Func<double, double>> f)
        {
            double sum = 0;
            for (int x = -1000; x <= 1000; x++)
            {
                var fx = f(x);
                for (int y = -1000; y <= 1000; y++)
                {
                    sum += fx(y);
                }
            }
 
            return sum;
        }
    }

I ran a little benchmark on this code. The benchmark executes the main function 20 times, and measures the shortest execution time. It also measures the number of generation 0 garbage collections. This is the result:

Naive: 261 msec, 0 collections
Curried: 340 msec, 733 collections
Smarter: 254 msec, 0 collections

As we can see, the curried version was initially slower due to all the memory allocations, but when we fixed that, the smarter version was as fast as the original. In fact is was just a little bit faster, though nothing to get existed about.

However, this is where partial evaluation kicks in. Currently, we are calculating the sinus of x over one million times, not taking advantage of the fact that we could reuse each calculated value a thousand times! So let’s change our definition of f as follows:

            Func<double, Func<double, double>> f = x => { var sinx = Math.Sin(x); return y => sinx * Math.Sin(y); };

Now the benchmark shows a completely different result:

Optimized: 143 msec, 0 collections

We went from 261 milliseconds in the original version to 143 milliseconds in this version, in fact almost dividing execution time by two! That’s because, to be precise, in the original version we had two times 2001 * 2001 = 8,008,002 Math.Sin calls, and in the optimized version we have 1 time 2001 plus 1 time 2001 * 2001 = 4,006,002 Math.Sin calls. That is a division by a factor of 1.999, yielding a total execution time reduction by a factor of 1.825 (there is some overhead of course).

Of course, the technique is very much related to loop invariant code motion in imperative programming. For example, imagine a Sum function hardcoded for Sin(x) + Sin(y). Would you write is like this?

        private static double SumSinSin()
        {
            double sum = 0;
            for (int x = -1000; x <= 1000; x++)
            {
                for (int y = -1000; y <= 1000; y++)
                {
                    sum += Math.Sin(x) * Math.Sin(y);
                }
            }
 
            return sum;
        }

Of course not! At least you would move the calculation of Sin(x) out of the loop over y:

        private static double SumSinSin()
        {
            double sum = 0;
            for (int x = -1000; x <= 1000; x++)
            {
                var sinx = Math.Sin(x);
                for (int y = -1000; y <= 1000; y++)
                {
                    sum += sinx * Math.Sin(y);
                }
            }
 
            return sum;
        }

And that is exactly what we did, except of course that the sum function is parameterized and not hardcoded.

So when would you apply this technique? You would apply it when performance matters, and you have a function that you need to call a lot, that takes more than one parameter, where one parameter varies more than another one (in our example, x remained the same for a long time, while y was different on every call), and part of the function can be evaluated knowing only the value of the parameter that varies the least.

In our example above, we could go even further. For example, we could eliminate the multiplication and even the Sin(y) calculation completely is case Sin(x) is 0 (which would be the case in our example only for x == 0).

            Func<double, Func<double, double>> f = x => 
            { 
                if (x != 0.0)
                {
                    var sinx = Math.Sin(x);
 
                    return y => sinx * Math.Sin(y);
                }
                else
                {
                    return y => 0.0;
                }
            };

That is not worth it in this scenario (because the special case applies to less than 0.05 % of all cases), but in some scenarios runtime algorithm specialization can be very significant.