Andrej Tozon's blog

In the Attic

NAVIGATION - SEARCH

Detecting duplicate instances of a running Silverlight application

This is a short tip for constraining your Silverlight applications to a single instance, something that’s quite popular in the desktop applications world. What you want to do is allow only the first instance of your application while rejecting all subsequent instances.

Silverlight 3 introduced a way for applications to communicate between each other, either on the same page or instantiated on a different browser instances (works even with Installed/OOB apps). The communication is performed by sender and receiver classes, which exchange messages through named channels. Each receiver must register a unique name for the channel or an exception will be thrown.

And that’s the trick. Listening on a specific named channel will act like a mutex. By catching the ListenFailed exception you get an option to display appropriate message or launch a different version of the application. All the work is done in App.Xaml.cs file:

private void Application_Startup(object sender, StartupEventArgs e)
{
    try
    {
        receiver = new LocalMessageReceiver("singleinstance");
        receiver.Listen();
        this.RootVisual = new MainPage();
    }
    catch (ListenFailedException)
    {
        this.RootVisual = new DuplicateInstancePage();
    }
}

The test project is available through here.



Halloween Live Gallery

With Halloween around the corner, it’s time for some scary photos… In this post I’ll explain how I built my demo application I showed at my Windows 7 Launch talk.

Expression Blend 3 shipped with a few interesting samples, available for immediate use. One of them is called Wall3D (Silverlight 3) and is a great example of one of the new Silverlight 3D features, called perspective transform.

image

This sample (perhaps a starter kit is a better description for it) features a 3D photo gallery, which sort of puts the viewer in the center of an oval “room”, full of photos, with an option to rotate the view to the left or right (flick / mouse click and pan), zoom in or out (mouse wheel), etc.. The kind of what people used to do in Flash; now it’s possible in Silverlight too. The sample serves also as a demonstration of yet another new Blend 3 feature, called Sample data – the photos on the above image were generated through this feature. Let’s explore the sample and see how we can push it further, shall we?

After opening Blend 3, switch to the Samples page and choose Wall3D (Silverlight 3) and the default project will be generated for you. image

You can test the application by hitting F5. You navigate through the gallery by flicking the view left or right and zoom in or out with your middle mouse button.

Examining the code that’s been created in the project will reveal the following:

  • the photos come from the sample data source (XML + photos, which are also included in the project – look into the SampleData folder)
  • “The wall” is driven by the CircularPanel3D control (a custom panel)

Knowing this, we’re ready to create our own 3D gallery. We’ll only need a single thing from this sample project, and that’s the CircularPanel3D.cs file, found in the root of the project. Copy and save that in some other folder for later reference, then start a new Silverlight 3 Application project in Blend.

I used an ItemsControl instead of ListBox to arrange and display the photos. Of course both will accept CircularPanel3D as their ItemsPanel, I just didn’t need item selection in this case. Here’s how it all looked in Blend designer:

Now what’s wrong with this picture? It’s hard to design something when you’ve got no visual feedback to help you with the layout and arrangements. I have already modified the ItemTemplate, but without the actual photos, it’s hard to do proper design work.  And that’s where the sample data comes in. To create a sample data source, open the Data panel and click on the second icon from the right image (Add sample data source). Choose Define New Sample Data, name the data source and click OK. You can shape the sample data source however you like – flat, hierarchical, with entities having simple or complex type properties, etc. For this gallery, I created the following source:

image

Bind this data source to the ItemsControl as its items source – voila!

Cool, much better. Modifying the ItemTemplate has just become a lot easier. Let’s add another element for displaying a bit more details about the photo (like the title and location where it was taken).

Photo view Details view

So we’ve got two views for the ItemTemplate, each view being represented with a separate element – one’s with the photo and the second one with details. We have to provide a way for user to switch between the two; how would we do this? Write code? Call the developer? Not necessarily. If we’re in luck, the appropriate piece of code may have already been written, waiting to be taken it used in Blend for declaratively specifying whatever we wanted to do to those elements and how. That piece of code is called a behavior. There are several places on the web to look for behaviors (as well as more info on what they are and how to produce them), but my first bets would be the Expression Gallery and Expression Blend Samples library on Codeplex; the letter containing some very handy behaviors.

I added a couple of behaviors to add interaction to gallery elements - FlipAction would switch the photo and details part through flip motion, triggered by DoubleClick trigger; and ScaleBehavior would enlarge the photo on mouse over. A couple of clicks for very cool-looking effect.

Let’s take a look at the data source... I decided to use Flickr to retrieve the photos, because it’s API is easy to use and can (amongst other things) return geo-location of the place where photo was taken (when available). This geo-location is then passed to the Bing Maps geocoding web serviceas an input parameter to retrieve the real-world address; these addresses can be seen on the bottom of the flipped photo.

image

Playing with geo-location was fun so I decided to take it a step further. I put together a special ShowMapAction, which is currently triggered by a mouse wheel over the photo (or details). The action simply shows the location on the interactive Bing Map (I used Bing Maps Silverlight Map Control for this).

image

Just a word of caution: Geo-encoded photos are cool, but be careful what you’re publishing on the net. The information may not always be used for good purposes.

The final result can be seen here (live). Right in time for keeping track with what’s going on on Halloween.

Finally I have to say I’m spending a lot more time in Blend since version 3 got out. It’s evolving into a great tool and behaviors are going to take a significant part in designer’s/integrator’s role in the future.

http://tozon.info/gallery/



Windows 7 Launch talk: Building cool applications with MS Expression tools

Windows 7 launch day was fun. I gave a talk on Expression tools (and related) – here’s the PowerPoint slide deck for those who asked for it:

I used Expression Blend 3 to build a photo viewer application, which I’ll blog about later; key points here were designer-developer workflow + using sample data and behaviors.

I blogged about the Microsoft ICE last year and I used that exact sample I’ve used in that blog post, but with one difference: did you know that by installing ICE on your desktop will, you can stitch panoramic (or large composite) photos right from your Windows Live Photo Gallery? It’s as easy as selecting the photos and click on the Extras menu item:

Create Image Composite...

Yet another option for stitching a bunch of photos together will give you the Deep Zoom Composer(free and not listed as an Expression tool, but sure looks and feels like it), which has similar features and much more compositing power (different zoom levels, layers, etc.)

And for closing I briefly showcased Expression Encoder 3 and IIS Smooth Streaming.

Yup, fun.



Slides and demo from Bleeding Edge’2009

On this year’s Bleeding Edge conference I had a talk on debugging with my fellow SQL Server MVP. While he covered some common pitfalls, awaiting developers on the SQL Server side, I focused on the Silverlight side of development and debugging:

  • possible issues with application deployment
  • options and strategies for returning WCF faults with Silverlight 3
  • using windbg with Silverlight application to track its execution
  • finding data binding failures and memory leaks

This was our sample application: Bleeding Edge Shoppe[opens in new window]

Bleeding Edge Shoppe

[The full source code will be available shortly.]

And the slide deck:



Silverlight LOB: Validation (#1)

When taking about data validation in applications, I usually describe the validation as the five-stage process or, put differently, five lines of defense against invalid data. In this post, I’ll write about the first line of defense – preventing the user entering the wrong data.

1. Preventing invalid input

This one’s logical, really. A user enters the data through input fields on some kind of input form, so naturally this would be the best place to put our first line of defense.

The first line of defense is about preventing user to enter invalid data into input fields. This doesn’t mean that if done proper and thorough, we wouldn’t need other places to check the data; it’s just the best place to filter out majority of faulty input that can happen during manual data entry. The goal here is to catch as many invalid data as possible, as soon as possible. This wouldn’t result only in better application responsiveness (no unnecessary trips to the server), the immediate feedback of invalid entry will provide a better user experience, possibly even educate the user to learn from her mistakes.

So, what are we talking about here?

A simple TextBox might not be the best solution for entering only numeric data. Seeing the TextBox on the input form, the user might expect she can enter anything she likes into the box, even if the label, put close by the input box, is saying to her: “Enter your age”. A kind of a NumericUpDown control visually gives user a much better idea of what should go into that box, plus she gets an option of manipulating that value; in this case, it’s adjusting the value with the Up and Down keys. In Windows Forms, for example, I liked to use a TextBox with a calculator dropdown for entering decimal data. Masked input boxes also work well, when you want the user to enter the data in a specific format.

If you don’t want to provide any visual clues that only numeric data should be entered in the input field and go for the standard TextBox, it’s very much recommended to handle the input for yourself and only allow numeric keys through. This is usually done by hooking into KeyDown event – either in codebehind class, or even better – with a custom TextBox behavior.

Yet another good example of filtering the data input to the underlying data type, is the DatePicker control. You can usually set the range of valid dates that can be selected and control whether or not date entry is required. With Silverlight DatePicker, it appears that date entry is always optional, even if bound to a non-nullable DateTime data type. Tabbing out of the DatePicker will leave the input box empty, but the bound property will still contain the old value. Hooking into DateValidationError or BindingValidationError event wouldn’t help so I tried to handle this case by manipulating the Selected date in the SelectedDateChanged event. Instead of doing it in the codebehind class, I created the following behavior:

public class RequiredDatePickerBehavior : Behavior<DatePicker>
{
    protected override void OnAttached()
    {
        base.OnAttached();
        AssociatedObject.SelectedDateChanged += OnSelectedDateChanged;
    }

    protected override void OnDetaching()
    {
        base.OnDetaching();
        AssociatedObject.SelectedDateChanged -= OnSelectedDateChanged;
    }

    private void OnSelectedDateChanged(object sender, SelectionChangedEventArgs e)
    {
        if (e.AddedItems.Count == 0 && e.RemovedItems.Count > 0)
        {
            AssociatedObject.SelectedDate = (DateTime)e.RemovedItems[0];
        }
    }
}

… which can be used as:

<controls:DatePicker SelectedDate="{Binding BirthDate, Mode=TwoWay}"
                     Grid.Row="1" Grid.Column="1">
    <i:Interaction.Behaviors>
        <local:RequiredDatePickerBehavior />
    </i:Interaction.Behaviors>
</controls:DatePicker>

Attaching this behavior to the DatePicker will revert the date to the last valid value in case of deleting the text from the input box and thus making the DatePicker non-nullable.

Behaviors in general are a great way to extend an existing type (or types) of control and can be used for a variety of things. In this post I’ve shown a way to enhance the Silverlight DatePicker control to prevent entering empty values in cases when date is required. Remember next time you’ll find yourself coding KeyDown or similar control event handler in page’s codebehind class: consider writing a behavior!

To be continued…

Shout it

Enable GPU Acceleration with Expression Blend 3

Last night, while working on a sample Silverlight application with Blend, I asked myself – where’s the Use GPU Acceleration option? Sure you can set the parameter on a Silverlight object directly in HTML or enable it through Out-Of-Browser Settings in Visual Studio 2008, but how about Blend?

The answer is that Blend enables GPU Acceleration automatically when one ticks the Enable Application Outside Browser option.

Enable Out-Of-Browser

And what’s with the Preview Application Outside Browser option? Let’s see what happens when we run the application from Blend.

Blend 3 prompt

Uhum… Blend asks that we should install the application first. OK, we’ll click Yes and run once again, still in the browser. Once started, right click, install the application and close it. Now the application is installed and the project is configured to run it out of the browser. From now on, every time the application is started from Blend, it will run out of the browser with GPU Acceleration enabled.



Slides from Microsoft Partner Meeting Event

Last week I attended a local Microsoft Partner Meeting to talk about using Silverlight (3) to build LOB applications. About half of the talk was slides, and the rest was app demos. Source code for some of my demos are available through some of my previous blog posts, and here’s the slide deck [in Slovenian language]:

Next week I’m presenting Silverlight 3 in Kiberpipa. It’s free entry and you’re kindly invited.

Shout it

Adventures in Silverlight LOB: The beginning

This is the beginning of what’s going to be yet another series focusing on developing LOB applications with Silverlight. I’ve been wanting to write more on this topic since NTK, but there was always something else… In the series, I’ll build a sample application, similar to what I’ve been presenting on NTK. Each post will focus on a specific area, technique or a trick, and show the actual implementation in the sample LOB app, following different patterns I’ve been using in application development in past couple of years. Any comments are welcome.

In this first post, we’ll set up the initial environment for the sample app and write a few words about sharing entities between client and server. This has already been discussed a lot, so I won’t get into greater detail, I’ll just focus on the main points.

Creating a new project

When creating a new Silverlight project, Visual Studio will ask you about creating the accompanying web project as well. The web project will host our data services so it’s kind of important to leave it be.

Adding the entities projects

Create two projects that will host the shared entities. One project will be referenced from the web project (server side), while the other one will be referenced from the Silverlight project (client side). Entity sharing is done in two steps. First is the physical sharing of the files – the “main” entity project would contain the original entity files, while the “supporting” entity project would only host copies of the entity files. Choosing “Add as Link” option in Visual Studio’s Add Item dialog will create a “copy” of the original file, meaning that you’re going to have to change the contents of the file in one place only, while it will be compiled in two different projects.

A couple of notes:

  • I usually choose the server side entity project to include the original files, and the client side would include the linked files.
  • When adding new entities to the main entity project, add the linked files to the other project before regenerating the service proxy; creating the proxy before that will make a proxy copy of the entity class which may result in some confusion when working with that entity.
  • It’s a good thing to declare your entity classes as partial, because you can later extend them with specific functionality on either server or client side.
  • When I started on my LOB apps several months ago, I had the following rule regarding marking entities with WCF serialization attributes: when all properties are going to be serialized, don’t mark any; when at least one shouldn’t be serialized, mark those, which should be. Later in the project I found out that it’s much more future-proof and consistent to always mark properties with proper serialization attributes.
  • As I’m seeing this is not a general practice with Silverlight developers, I still always separate the WCF contract (interface) from the service implementation. We’ll se how/if we can benefit from such approach later in the series.

So far, the solution looks like this:

solution

We started with a single entity called Person and the DemoService will be used to access the “database”. To keep it simple, the Database class will pose as an in-memory database.

Creating the client

The sample app uses a typical MVVM approach – a ViewModel, instantiating a service proxy and handling the communication with the service, with a View, responsible for displaying the data. The user can browse through the list of persons by clicking their name in the ListBox, while full details are being displayed next to it. I’m not using any real commanding yet, ListBox’s SelectedItem is bound two-way to appropriate VM property, which is also the source for the detail UI. All-in-all, very basic and common setup, which will be the starting ground for all next articles in the series. In the next part, we’ll add a support for editing a Person entity.

Run the application

Shout it

Silverlight, Prism EventAggregator and “lost events”

I’ve just started discovering Prism, mainly as a tool to help me use the MVVM with my apps. That said, by now, Prism proved itself with:

  • Support for Commanding
  • EventAggregator
  • Unity integration
  • Targeting both WPF and Silverlight

EventAggregator is great for inter-VM communication, but only when subscribing VM(s) is/are alive (instantiated) when publishing VM publishes the event. I may be wrong here (please somebody correct me), but I haven’t found a way for a newly instantiated subscriber VM get to already broadcasted event, which was published before the instantiation. The example here would be a new dialog window, with its VM wanting the last value that parent’s VM published before dialog was created (a selected ListBox value, for example). Sure, the publisher could publish the same event again after the dialog is created, but this would confuse things up because there may be other listeners subscribed to it and perhaps wouldn’t know how to handle the exact same event.

To solve this issue, I created a new class, deriving from the CompositePresentationEvent<T> and called it CachingCompositePresentationEvent<T>. The implementation is simple:

public class CachingCompositePresentationEvent<T> : CompositePresentationEvent<T>
{
    public bool HasValue { get; private set; }

    private T lastPayload;
    public T LastPayload
    {
        get
        {
            if (!HasValue)
            {
                throw new InvalidOperationException();
            }
            return lastPayload; 
        }
        private set
        {
            lastPayload = value;
            HasValue = true;
        }   
    }

    public override void Publish(T payload)
    {
        LastPayload = payload;
        base.Publish(payload);
    }
}

The HasValue will return true when at least one event was published at the time, and LastPayload will return the payload, included in the last published event.

If the event is declared as:

public class MyCachingEvent : CachingCompositePresentationEvent<int> { }

… then getting to its value would be:

MyCachingEvent ev = aggregator.GetEvent<MyCachingEvent>();
if (ev.HasValue)
{
    int value = ev.LastPayload;
}

This is the basics, there's plenty of room for improvement - like adding a Clear() method to clear the last payload value or clear it automatically on the first LastPayload read - just to clear the memory, when payload types aren’t simple/small.

Shout it

Countdown to Silverlight 3 #15: UI Virtualization

Silverlight 3 includes a new type of a StackPanel, called VirtualizingStackPanel. VirtualizingStackPanel enables UI virtualization and is now the default items panel for the ListBox, with virtualization option enabled.

If you want to turn UI virtualization in ListBox to off, set its VirtualizingStackPanel.VirtualizationMode to Standard (the default is Recycling). The embedded VirtualizingStackPanel will in this case behave as a plain old StackPanel.

VirtualizingStackPanel can be used with any ItemsControl, but it can’t be used on its own (like putting in on a page and manually cram a couple thousand of items on it as you could do with ordinary StackPanel). But the interesting thing is it is derived from an abstract class called VirtualizingPanel, which means the ability to create new kinds of virtualizing panels (!)

The following example shows the difference between Virtualization modes. I intentionally created a heavier item template for the UI, so difference would be more obvious. Try scrolling both ListBoxes to see how UI virtualization impacts the scrolling performance.

UI Virtualization

Run the application online

Source code below: