Sergey Barskiy's Blog

Yesterday I was asked about a way to play animations in MVVM environment.

So, I gave this some thought today, and came up with a few ideas.

First, and the easiest way is to separate ViewModel from animation by attaching an animation to a behavior.  Here is how we would write the behavior:

public class MVVMSimpleAnimationBehavior : TargetedTriggerAction<UIElement>

{

    protected override void Invoke(object parameter)

    {

        RunAnimation();

    }

    public Storyboard AnimationStoryBoard

    {

        get { return (Storyboard)GetValue(AnimationStoryBoardProperty); }

        set { SetValue(AnimationStoryBoardProperty, value); }

    }

    public static readonly DependencyProperty AnimationStoryBoardProperty =

        DependencyProperty.Register("AnimationStoryBoard", typeof(Storyboard), typeof(MVVMSimpleAnimationBehavior), new PropertyMetadata(null));

    private void RunAnimation()

    {

        if (AnimationStoryBoard != null)

        {

            AnimationStoryBoard.Begin();

        }

    }

}

Pretty simple approach.  Here is how would use animation in the XAML:

<Button Content="Behavior Test" Grid.Column="1">

    <i:Interaction.Triggers>

        <i:EventTrigger EventName="Click">

            <local:MVVMAnimationBehavior AnimationStoryBoard="{StaticResource TestStoryboard}"/>

        </i:EventTrigger>

    </i:Interaction.Triggers>

</Button>

Now, I want to complicate the story a little bit.  I really want to trigger an animation in the UI via an event in my model.  I am going to start with a sample ViewModel.  I want to have an event there that I will later use as a trigger for my animation.  Here is what my ViewModel would look like:

public class SampleModel: INotifyPropertyChanged

{

    public event EventHandler StartAnimation;

    protected virtual void OnStartAnimation()

    {

        if (StartAnimation != null)

        {

            StartAnimation(this, EventArgs.Empty);

        }

    }

    public void RaiseEvent()

    {

        OnStartAnimation();

    }

    #region INotifyPropertyChanged Members

    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged(string propertyName)

    {

        if (PropertyChanged != null)

        {

            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));

        }

    }

    #endregion

}

My event is called StartAnimation.  Now it is time to develop a more complicate behavior to support my event driven animation from ViewModel.  I am going to actually combine new functionality with the simple behavior about and have multi-functional useful object.  Here is what the final product looks like:

using System;

using System.Windows.Interactivity;

using System.Windows;

using System.Windows.Media.Animation;

using System.ComponentModel;

using System.Reflection;

namespace SLMVVMAnimationBehavior

{

    public class MVVMAnimationBehavior : TargetedTriggerAction<UIElement>

    {

        private EventInfo info;

        protected override void Invoke(object parameter)

        {

            RunAnimation(this, EventArgs.Empty);

        }

        public Storyboard AnimationStoryBoard

        {

            get { return (Storyboard)GetValue(AnimationStoryBoardProperty); }

            set { SetValue(AnimationStoryBoardProperty, value); }

        }

        public static readonly DependencyProperty AnimationStoryBoardProperty =

            DependencyProperty.Register("AnimationStoryBoard", typeof(Storyboard), typeof(MVVMAnimationBehavior), new PropertyMetadata(null));

        public string EventName

        {

            get { return (string)GetValue(EventNameProperty); }

            set { SetValue(EventNameProperty, value); }

        }

        public static readonly DependencyProperty EventNameProperty =

            DependencyProperty.Register("EventName", typeof(string), typeof(MVVMAnimationBehavior), new PropertyMetadata(HandlModelChanged));

        public object Model

        {

            get { return GetValue(ModelProperty); }

            set { SetValue(ModelProperty, value); }

        }

        public static readonly DependencyProperty ModelProperty =

            DependencyProperty.Register("Model", typeof(object), typeof(MVVMAnimationBehavior), new PropertyMetadata(HandlModelChanged));

        private static void HandlModelChanged(object sender, DependencyPropertyChangedEventArgs e)

        {

            MVVMAnimationBehavior behavior = sender as MVVMAnimationBehavior;

            object model = behavior.Model;

            if (behavior.info != null)

            {

                behavior.info.RemoveEventHandler(model, Delegate.CreateDelegate(typeof(EventHandler), behavior, "RunAnimation"));

            }

            if (model != null && !string.IsNullOrEmpty(behavior.EventName))

            {

                behavior.info = model.GetType().GetEvent(behavior.EventName);

                behavior.info.AddEventHandler(model, Delegate.CreateDelegate(typeof(EventHandler), behavior, "RunAnimation"));

            }

        }

        private void RunAnimation(object sender, EventArgs e)

        {

            if (AnimationStoryBoard != null)

            {

                AnimationStoryBoard.Begin();

            }

        }

    }

}

As you can see, I added two mode dependency properties – one for event name that will trigger the animation, the other one for ViewModel ( I actually called it model).  Now the tricky part is to use a bit of reflection to attach an event handler to the event on my model.  This is done in HandlModelChanged routine that is called when Model or Event name is set.  I am getting an event, and attaching a handler to it.  The actual handler is located inside the behavior itself – RunAnimation method.  Here is what my fianl XAML looks like that is testing both animation approaches:

<UserControl x:Class="SLMVVMAnimationBehavior.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"

    xmlns:local="clr-namespace:SLMVVMAnimationBehavior"

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

    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">

    <UserControl.Resources>

        <Storyboard x:Name="TestStoryboard">

            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="textBlock" Storyboard.TargetProperty="(TextBlock.FontSize)">

                <EasingDoubleKeyFrame KeyTime="00:00:00.1000000" Value="24"/>

                <EasingDoubleKeyFrame KeyTime="00:00:00.2000000" Value="21.333"/>

                <EasingDoubleKeyFrame KeyTime="00:00:00.3000000" Value="18.667"/>

                <EasingDoubleKeyFrame KeyTime="00:00:00.4000000" Value="16"/>

                <EasingDoubleKeyFrame KeyTime="00:00:00.5000000" Value="13.333"/>

                <EasingDoubleKeyFrame KeyTime="00:00:00.6000000" Value="16"/>

                <EasingDoubleKeyFrame KeyTime="00:00:00.7000000" Value="18.667"/>

                <EasingDoubleKeyFrame KeyTime="00:00:00.8000000" Value="21.333"/>

                <EasingDoubleKeyFrame KeyTime="00:00:00.9000000" Value="24"/>

                <EasingDoubleKeyFrame KeyTime="00:00:01" Value="26.667"/>

            </DoubleAnimationUsingKeyFrames>

        </Storyboard>

        <local:SampleModel x:Key="CurrentModel" />

        <local:MVVMAnimationBehavior AnimationStoryBoard="{StaticResource TestStoryboard}" Model="{StaticResource CurrentModel}" x:Key="Animation" EventName="StartAnimation"/>

    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="#FFF3EEEE" DataContext="{Binding Source={StaticResource CurrentModel}}">

        <Grid>

            <Grid.ColumnDefinitions>

                <ColumnDefinition Width="Auto"/>

                <ColumnDefinition Width="Auto"/>

                <ColumnDefinition/>

            </Grid.ColumnDefinitions>

            <Grid.RowDefinitions>

                <RowDefinition Height="Auto"/>

                <RowDefinition/>

            </Grid.RowDefinitions>

            <Button x:Name="TestButton" Content="Click To Start Animation" d:LayoutOverrides="Height" HorizontalAlignment="Left" Click="TestButton_Click"/>

            <Button Content="Behavior Test" Grid.Column="1">

                <i:Interaction.Triggers>

                    <i:EventTrigger EventName="Click">

                        <local:MVVMAnimationBehavior AnimationStoryBoard="{StaticResource TestStoryboard}"/>

                    </i:EventTrigger>

                </i:Interaction.Triggers>

            </Button>

            <TextBlock x:Name="textBlock" Margin="0,0,0,6" Text="Sample Text" TextWrapping="Wrap" d:LayoutOverrides="Width, Height" Grid.Row="1" Grid.ColumnSpan="3" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="26.667"/>

        </Grid>

    </Grid>

</UserControl>

To summarize, I illustrate a couple of approaches to trigger animations in MVVM environment.  Of course, there is always code-behind, but many developers frown at this approach..

Please let me know if you have any questions.

I spoke at GGMUG (Gwinnett Georgia Microsoft Users Group) on Thursday.  I was speaking about dynamically styling Silverlight applications using Implicit Style Manager from Silverlight Toolkit. 

Silverlight toolkit comes with about a dozen themes that anyone can use to style there applications.  In the example I am posting I use four of them,  A theme file is essentially a XAML file that contains styles for all native Silverlight controls as well as all Toolkit controls.  Implicit style manager allows developers to dynamically (or statically) load a theme and apply it to any FrameworkElement in the visual tree. 

There are only a few steps you need to do to implement this type of styling.

1.  Download and install Toolkit.

2.  Create new Silverlight application.

3.  Create new folder under applications (UserThemes in my example) and copy some or all themes from toolkit (C:\Program Files\Microsoft SDKs\Silverlight\v3.0\Toolkit\Oct09\Themes is the default folder) into that folder.  Once you include all the themes into the project, set compile action to Content.

4.  Now write a few lines of code in key places to apply a chosen theme.  Here is what this code would look like:

5.  You can even allow application user to select a theme by creating for example a combo box loaded with available themes.

Implicit style manager does carry some overhead with it.  To minimize the overhead try to use apply mode of OneTime.  Ap0ply mode of Auto will watch for LayoutUpdated event and restyle attached element.  If you use this mode, you can apply this code to your shell (outer application frame), and any loaded control will be styled.  It sounds easy, but it will slow down your application.

As you can see, you cheaply and easily implement dynamic styling using free! software from Silverlight Toolkit.

You can download full example here.

I am killing two birds with one stone in this post, covering both CollectionViewSource and Navigation framework in Silverlight 3.

To create new Silverlight application that uses Navigation framework, simply create new project in Visual Studio, and you will find Silverlight Navigation Application project template under Silverlight node.  Navigation framework in Silverlight three allows developers to create navigation structure that mimics the one of ASP.NET (or any web allocation for that matter).   In other words, this framework provide for URI driven navigation, using Uri routing feature similar to ASP.NET MVC framework.  Of course, this is really from end user perspective, not developer.  Obviously, Silverlight application cannot navigate from one to another XAML page using browser natively.  As a result, navigation framework utilizes browser bookmark feature in order to provide the user with Next/Previous navigation using actual browser buttons.  Routing engine enables the mapping between short Uri and actual XAML page that is supposed to handle the navigation event to this Uri.  Here is what this routing looks like:

Here is how we read this code.  The core part of navigation is Frame control.  It handles browser interaction and provide Uri mapping.  If we look at the mapper XAML, we will see that short Uri, such as “” (blank) maps to Home.Xaml.  Home.Xaml is not User Conrol, it inherits from Page control, another part of navigation framework.  Any XAML page that is supposed to handle navigation must inherit from Page.  The mapper supports tokenization as well, that is how {pageName} is mapped to /Views/{pageName}.xaml.  So, if we navigate to Uri “Home”, /Views/Home.xaml will be loaded into the frame. For example, we have HyperLinkButton as follows:

In this case when user clicks on this button, he/she will be navigated to /Views/About.xaml that will be shown in Frame called ContentFrame.

Navigation framework also supports parameters, and incidentally it took me an hour to figure those out.  In the example above our ProductDetail mapping supports parameter called PrductId.  So, far pretty easy.  The hard part is to figure out how to set that Url.  In my case, I have a product object, and I am setting the Url in it to match my mapping.  Here is full source code for Product class and collection of products:

So far so good.  You can see how Url must be formatted to match product Id. I am showing product list inside a page using DataGrid.

You can see that I am setting the tag for the button to Url property of the Product object.  Here is how I am processing this information in click event:

Here is what we can do with this in the Details page:

Alternatively, I can use propertied of HyperLinkButton to do the same if I do not need to use dynamic parameters.  Look above for About navigation.

Now, let’s talk about ColllectionViewSource.  It suports grouping, sorting and filtering.  In the example I will use filtering technique.  The filtering is pretty easy – we just subscribe to filter event, evaluate each object, and decide whether or not show it:

All that is left is to call refresh when we want to response to use actions:

Pretty simple.  You can download full example here.

Today I am going to explore Silverlight three behaviors a little more.  In this post I am going to look at different events that can trigger an action in a behavior.  Essentially, we can specify any event on a target element to invoke a behavior. 

Again, we are going to use TargetedTriggerAction base class. This time however we are going to enable this behavior to be able to be used on a larger suite of targets.  We are going to use UIElement as the target type: TargetedTriggerAction<UIElement>.  We are only going to override one method – InvokeAction.  Here is what the class looks like:

Here are a couple of things I need to explain. 

1. This behavior is going to perform one function – change dimensions (increase or decrease the size) of the target control base on an event.  We are going to add a property that would allow our behavior to specify the factor by which the target’s size needs to increase or decrease.
2. We are going to use animations to perform this function.  We will build animations in code.
3. We will invoke animations based on event specified in XAML.

Here is full source code for behavior class:

Here is source code for animation controller:

Here is how we are setting up behaviors in XAML:

In the XAML above we are setting up three different behaviors.  First one I covered in previous post.  The second trigger increases the size of the control by factor of 1.2 – 20 %.  This action is executed when GotFocus event fires.  The last trigger changes the control’s size back to original size.

You can download full sample project here.

I have run into this issue numerous times, but from time to time I keep forgetting what causes this issue.

The symptom is that your breakpoints inside Silverlight application cannot be hit, and the information message states that “No symbols have been loaded for this document.”  What is usually strange that I was able to debug just a little while ago.

The most common cause is that Silverlight debugging is not turned on on web site project that hosts Silverlight application.  However, I have not run into this issue.  My number one problem is that ClientBin folder stops being updated.  This can be caused by the fact that somehow the folder is checked into source control and compiler cannot overwrite the XAP file any longer.  Or, file is being held by OS, maybe because Visual Studio crashed at some point before.  To troubleshoot, just check your XAP from ClientBin folder and check source controls.

One of the properties on object tag for Silverlight control in initParams or initialization parameters:

We can use this parameter to inform our Silverlight application about a specific piece of data it may need.  To access this data inside Silverlight application, you would need to use arguments from application startup event:

Our initial parameters collection is exposed as a dictionary off Startup Event Arguments.

The next step it to dynamically set the parameter.  The problem is that the object tag / Silverlight application creation occurs on the client side, which has no access to server data.  We are going to play a trick here and modify our aspx page to delegate creation of actual parameters string to the page itself:

The next step is to write a method in our page that returns a string in format key=value.  Here is entire code behind for our aspx page:

Here is what we do inside our Startup routine in Silverlight application:

You can download this sample application here.

In this post I will start exploring behaviors in Silverlight 3.0.  This topic is very large, and it will take me a few posts to cover at least key aspects of behaviors.

A little background on the subject.  Silverlight, unlike WPF does not natively support triggers that would allow the developer to change UI based on criteria or data.  In Silverlight 3.0 we now have a facility to support similar behavior.  One key usage scenario for behaviors is to allow a designer to support UI changes based on user actions without writing any code.

To extend an existing behavior base class we need to add a reference to System.Windows.Interactivity DLL.  We will start with a simple behavior.  By default Silverlight Textbox does not select all the text when it gets focus.  This however us a desirable behavior from a user perspective in many scenarios.  So, for our first excursion into Silverlight behaviors we will write “Select All Text On Focus in Textbox” behavior.

We will start by extending an existing class in Silverlight – TargetedTriggerAction<C>.  In our case we are supplying generic type for our behavior – Textbox - TargetedTriggerAction<TextBox>. 

We are specifying Textbox as the target type for our behavior.  Typically, we would specify an action and an event that would invoke the action on the behavior.  In our case we however want to make sure that they only event that invokes the behavior is GotFocus event.  So, we are leaving our Invoke method blank.  Here is the final version of the class:

using System;

using System.Windows.Controls;

using System.Windows.Interactivity;

 

namespace Behaviors

{

    public class SelectOnFocusAction : TargetedTriggerAction<TextBox>

    {

        protected override void OnAttached()

        {

            base.OnAttached();

            Target.GotFocus += Target_GotFocus;

        }

 

        void Target_GotFocus(object sender, System.Windows.RoutedEventArgs e)

        {

            Target.SelectAll();

        }

        protected override void OnDetaching()

        {

            base.OnDetaching();

            Target.GotFocus -= Target_GotFocus;

        }

 

        protected override void Invoke(object parameter)

        {

            //do nothing

            // we are handling specific event we are interested in

            // by attaching events to the target text

        }

       

    }

}

 

You can download the sample project with this behavior and text page here.

I am continuing covering new features in Silverlight 3.0.  The subject of this post is Silverlight 3.0.

Perspective 3D is new type of transforms available in Silverlight 3.0.  It allows developers to create a 3D projection of a two-dimensional object.  A key power of this new feature is the fact that any UI element in Silverlight can be used as a target for this feature.  This means you can rotate a control in thee dimensional space around any axis.  In my example I am using this Plane Projection to rotate a calendar:

I am rotating the calendar control around X axis with center of rotation at x=0, y=0.5.  These values are set as relative values with 0.5 being the middle of the plane.  This allows us to create a rotation similar to an actual wall calendar’s page  turned by a person.  You can rotate around multiple axis in multiple planes, create nice visual effects.  Pretty cool.

You can download the sample project here.

I am continuing discussing new features on Silverlight 3.0.  Current topic is assembly caching. 

In Silverlight 2.0 all assemblies that your application needed would have to be included in your XAP file(s).  In Silverlight 3 you can force browser to cache one or more assemblies that your application needs.  In case of caching your can tell Silverlight runtime to pull these cached assemblies from a predefined location.  This location can be the same folder as your Silverlight XAP file or anywhere else on the internet.  To cache assemblies, you can turn on caching option in project properties:

What you will notice if you do that, that Microsoft assemblies such as System.Windows.Controls.Data (contains DataGrid) will not be included in your XAP file.  Instead if you look at the manifest file inside your XAP file, you will notice that this DLL is pulled at runtime from the same folder as your application.  The information about this is incluided in assembly manafiest in your main XAP file.  Here what it would look like:

<Deployment
xmlns=http://schemas.microsoft.com/client/2007/deployment
xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
EntryPointAssembly="CompanySLApp"
EntryPointType="CompanySLApp.App"
RuntimeVersion="3.0.40624.0">
  <Deployment.Parts>
    <AssemblyPart x:Name="CompanySLApp" Source="CompanySLApp.dll" />
  </Deployment.Parts>
  <Deployment.ExternalParts>
    <ExtensionPart Source="System.Windows.Controls.Data.zip" />
    <ExtensionPart Source="UtilityFunctions.zip" />
    <ExtensionPart Source="System.Windows.Controls.Data.Input.zip" />
    <ExtensionPart Source="System.Windows.Data.zip" />
    <ExtensionPart Source="System.ComponentModel.DataAnnotations.zip" />
  </Deployment.ExternalParts>
</Deployment>

If you try to do the same with your assembly (for example you have a common assembly shared between two Silverlight applications), your will notice that it is still included.  The reason for that is that compiler is looking for XXX..extmap.xml where XXX is your assembly names without DLL extension.  So, all your need to do is create one.  You can look for an example in C:\Program Files\Microsoft SDKs\Silverlight\v3.0\Libraries\Client folder for any extmap files for Microsoft assemblies.  You can use a utility to generate your own too.  (http://www.devcorner.info/Sources/Emm.zip).  Once you generate extmap file for your assembly, make sure it is located in the same folder as the assembly dll.  Once you rebuild your solution, you will find XXX.zip file in ClientBin folder that contains your XXX.dll assembly file.  Now, at runtime browser will cache that assembly for you, saving download time during application start up time.  Of course, this depends on how caching is setup for virtual directory that contains your Silverlight application.  You can also pass addition parameters to emm.exe utility and force it to setup download URL for your included assembly that point to an absolute URL somewhere else.  Using this feature for example, you can host assemblies that you can include in many applications on a separate server with a predefined URL.

Please feel free to ask questions about this feature.  You can upload sample application that uses assembly caching here.

As I mentioned before, I will be working on a series of posts on new features in Silverlight 30.  This post is all about ElementName binding.

Probably my favorite feature in Silverlight 3 that affects developers writing business applications is addition of ElementName property to Binding object.  This features existed in WPF since version 1, but was missing from Silverlight 2.0.  The basic strategy behind the feature is the ability to bind a property on one UI element to a property on another UI element.  Here is a very common scenario in a business application that this features makes much simpler to implement.  Say, you have two co-dependent combo boxes.  For example, you have a combo box  with a listing of states, and once a state is selected, second combo box is populated with a list of cities for that state.

The basic syntax for ElementName binding is as follows:

In my case, I am going to illustrate the feature by having a list of dozens, each with a list of numbers that belong to that dozen.  Here are my classes:

Now, I am going to add my Dozens class as a resource to a xaml page:

The last step is to tie two combo boxes together:

Here is the summary of what we did.  We used Dozens class (the list of Dozen objects) that was populated when its constructor was invoked as part of resources collection initialization.  Then we used this object to populate ParentCombo with data.  We set DisplayMemberPath to show a desired property in combo box.  Then we used SelectedItem property from ParentCombo to be the source of items in ChildCombo.  As the user selects an item in ParentCombo, we can see that list of items inside ChildCombo is changing without any code-behind.  We also use dotted syntax (Path=SelectedItem.Items), so we can tie the eaches collection in dozens object to be the item source for another UI element.  In our case SelectedItem of ParentCombo is actually an instance of a Dozen object.  Items property of it gives us eaches collection.  Simple, yet very powerful feature.

You can download this sample project here.

I just posted a new release for SilverlightDatabase project on CodePlex : http://silverdb.codeplex.com/

There was an issue with the latest release – you could potentially get an error when adding data to a table previously saved.  I posted a bug fix release for this that also includes unit test to verify that the issue is resolved.

Please download this release if you are using this project.

Thank you.

I could not have been more pumped about my Silverlight database project (See my post from a week ago for details).  I searched CodePlex for “Silverlight”, and now my project is number 20 on the list sorted by relevance out of total  622 projects.  It is also listed on Silverlight MSDN main page today: http://msdn.microsoft.com/en-us/silverlight/default.aspx.  It got 68 downloads and 311 visits in just four days this week.  Awesome!

I just posted another update to this project on CodePlex.  Silverlight Database now supports encryption and compression.

I just installed Silverlight 3 last Friday.  One feature that I was hoping to see fixed was localization in Silverlight.  Ideally, I like to bind localized data, such as labels in XAML.  For example:

<UserControl.Resources>

<resources:ModuleResources x:Key="LanguageResource" />

then,

<TextBlock HorizontalAlignment="Center" Margin="7,0,7,0" VerticalAlignment="Center" Text="{Binding Source={StaticResource LanguageResource}, Path=SomePropertyName}"></TextBlock>

This works great, but there is one issue.  Even though I mark the resource as public, any time I add a new value or edit and existing value, ModuleResources .Designer.cs gets re-written, and its constructor is marked as internal, not public.  If I run the app, I get the dreaded unknown type exception.  At that point I have to manually edit designer file and mark constructor as public.  Not a major problem, but I would like not to have to do this.

I just uploaded and published new CodePlex project I have been working on.  It is an Isolated Storage based database for Silverlight.  It supports multiple strongly typed tables, basic Linq based operations, addition and deletion of ranges of items, deletion of items based on condition.  You can also directly bind data to UI in Silverlight because base table inherits from ObservableCollection.  I am planning to put encryption and compression support into it next along with lazy loading of table.  Currently all tables are loaded into memory when database is opened.

Please take a look at http://silverdb.codeplex.com/

I would very much appreciate comments and feature requests related to this project.

Thanks in advance for the feedback.

I am planning to write some posts on new features in Silverlight 3.0.

I decided to start with the easiest one – out of browser support.  Start by creating new Silverlight application in Visual Studio.  Once it is created, go to properties of the Silverlight application project.  You will see this window:

Check “Enable running application out of browser”, then click on Out-of-Browser Settings button.  You will see this screen.

Once you fill in all the settings, you are ready to go.  All settings from this screen are stored in XML file called OutOfBrowserSettings.xml.  The actual fact that a particular application is enabled for out-of-browser support is stored in .csproj file.

Once you run the application, if you right-click on the application, you will see context menu with additional option – install on desktop.  If application is already installed, the option changes to remove application.

The installed application can be now run from the computer from the shortcut.  When you run the app from the shortcut, it is not going run in the browser, instead it is run in sllauncher.exe, a special program designed to host Silverlight application.  At that point, you do not have access to browser based functionality.  So, before you reach to HtmlPage.Window, check to see if application is running in browser.  You can do this by checking App.Current.IsRunningOutOfBrowser property.

I am very tired, but Silverlight application our team has been working on for 6+ months is now officially live!  We saw that someone used it over the weekend!

More reflections on the project are to come in the next few weeks.