SilverlightShow: Silverlight Community

Mastering LOB Development for Silverlight 5: Out of Browser (OOB) Applications

editorial@silverlightshow.net (Silverlight Show ) — Tue, 03 Apr 2012 14:57:57 GMT

This is a free chapter of the book "Mastering LOB Development for Silverlight 5: A Case Study in Action".
Thanks to Packt Publishing, SilverlightShow readers may now purchase this book with a 27% discount using discount code dssvl2! Enjoy!

LOB (Line of Business) applications executing within a web browser are fine, but if we think from the perspective of a final user, it is not the option that they would choose first. This is due to the fact that:

Having a desktop application is easy. It can be directly accessed by double-clicking so that it is launched quickly.
Most of the time, it is necessary to leave Silverlight sandbox application. This happens, for example, when we need to access the filesystem, or with a special hardware via COM (such as an ATM).
It is also crucial that, when executing an application, it allows us to work offline.

Similarly, from the point of view of the user, there are certain restrictions which are normally not well accepted, even though they are 100 percent desktop (namely WPF). It would be great to have the possibility of eliminating them:

Installing a desktop application can carry problems, depending on the OS and installation details. It would be fantastic if they could run under a standard, which is independent from those details.
In order to update a version already installed, it must be uninstalled and installed again. Wouldn't it be preferable that the application itself detected if there is a new version and updated automatically (even though this process is not dramatic)?
Usually, desktop applications only work on a particular OS (that is, Windows). We would love to execute it in different platforms (for example, Mac).
A desktop application normally has quite relaxed permissions. Hence, we dream of an application having restricted access to the hardware and software of our machine. It would only have permissions if allowed.
A desktop application needs a given version of the .NET Framework installed on the machine.

In this chapter, you will learn how to install and execute our applications as Out of Browser (OOB), work with elevated permissions in and out of the browser, support cross domain calls, and work with the WebBrowser control.

Out of Browser (OOB)

Out of Browser (OOB) applications are executed out of the web browser, or that is the impression they give.

Regarding the final user, an OOB application is similar to a desktop application; the user installs it, gets a direct access icon to it, and when executed, it runs under a standard window, as shown in the following screenshot. It can even be uninstalled through the Control Panel.

From the point of view of the Software Developer, an OOB application still runs under a hidden browser, that is, it is a Silverlight application with the same features as an application running under a browser.

Until the arrival of Silverlight 5, the main difference with an application executing in the browser was the fact that it could work with trusted permissions and perform operations, which the sandbox normally does not allow (accessing the filesystem, executing commands via COM+, and so on).

Executing an application in OOB mode

Allowing a Silverlight application to be executed as an OOB is very easy. We just need to tick a checkbox in the project settings. Let's see how to do it.

First, create a new Silverlight application called 01_Simple_OOB_App. In the MainPage, a text block must be added displaying the message Simple OOB App. When you execute it, it will look as a standard in-browser application, as shown in the following screenshot:

In order to enable OOB mode, follow these steps:

1. Right-click on the Silverlight project root. When the context menu is displayed, click on Properties:

2. Select the Silverlight tab and tick the checkbox with the message Enable running application out of the browser:

3. When executing the application, it still runs in the browser but, if we right-click on it, there will be a new option Install 01_Simple_OOB Application onto this computer… in the context menu, as shown in the following screenshot:

4. If we click on that option, we get a message prompt asking to install the app, as shown in the following screenshot:

5. Once we click OK, the application is installed and ready to be used as OOB.

It is great to use apps as a final user, but what happens with developers? In case we want to debug our OOB application, will we have to install it every time we run the environment? Of course not. In the project properties (Context menu | Properties), the Debug tab allows us to choose that the application starts up straight in OOB mode (the Silverlight project will have to be chosen as a start-up project):

Enhancing the experience—tooling up and updating

As we have already seen, enabling the OOB mode in our application is something quite straightforward. Nevertheless, the following doubts may have arisen:

In some cases, I want to know if my application is running in normal or OOB mode to, for instance, show one UI or another. How can I do that?
How can I know if the application is already installed?
When installing from a not very intuitive contextual menu, is there any way to display our own UI in order to allow the user to install the application?
How do I uninstall an OOB application?
I would like to let the users install my application from a CD, eliminating the need to be connected to the Web. Is that possible?
When a new version of my application is uploaded to the production server, is there any way to detect updates and install new versions automatically?

In-browser/OOB detection

Sometimes, the UI we want to show differs depending on whether the application is executing in the browser or as an OOB application. It may also happen that, when it is in-browser, we only want to display a button to install it.

In order to know the mode we are working with, Silverlight offers a function on the level of the application called IsRunningOutOfBrowser, which returns true or false depending on whether the application is executing in OOB mode or not.

To see how it works, let's go back to the previous example, TestOOB, and indicate whether the application is executing in OOB mode or not in the TextBlock we use in the main page. It can be done using the following steps:

1. Open the project previously created (Simple_OOB_Application).

2. Add an ID to the TextBlock of the main page (it will be named tbStatus):

"LayoutRoot" Background="White">

"tbStatus" Text="Simple OOB App" 

FontSize="16"/>

3. In the constructor of the page, check the value of the application variable IsRunningOutOfBrowser, which will display one of two messages depending on the state.

public MainPage()

{

    InitializeComponent();

    if (App.Current.IsRunningOutOfBrowser == true)

    {

        tbStatus.Text = "I'm running out of browser";

    }

    else

    {

        tbStatus.Text = "I'm running in browser";

    }

}

4. Therefore, in case we are executing in OOB mode, the following message will be displayed:

Detecting the application installed

Another common scenario arises when the application is being executed in the browser and we need to know if it has already been installed as OOB. For instance, a common example of this is when we want to display a message asking the user whether to install the application or not. We can make use of the application variable InstallState, which returns a type enumerated with one of the following values: NotInstalled, Installed, Installing, or InstallFailed.

Thus, in the sample application that has been created, it could be checked whether the application is installed or not in the following way:

public MainPage()

{

    InitializeComponent();

    if (App.Current.InstallState == InstallState.Installed)

    {

        tbStatus.Text = "Application Installed";

    }

    else

    {

        tbStatus.Text = "Application not installed";

    }

}

Installing the custom interface

As mentioned previously, installing the application from the contextual menu of our Silverlight application was not intuitive at all. Perhaps it could be possible to place a button so that the user could begin the installation. Up to what point can we customize the installation process of our Silverlight application? Silverlight allows us to launch the installation process by code, as long as it comes from a user petition (such as a click on a button). The dialog which asks if we want to install the application cannot be customized.

To install the application, the method Install of Application must be called. Let's add this functionality to our basic sample:

1. Add a button to the main window:

"LayoutRoot" Background="White">

"tbStatus" Text="Simple OOB App" FontSize="16"/>

Name="button1" VerticalAlignment="Top" Width="75" />

2. Subscribe to the Click event:

Margin="142,55,0,0" Name="button1" VerticalAlignment="Top" 

Width="75" Click="button1_Click" />

3. Check if the application has already been installed in the handler of the button and add the call to Install:

private void button1_Click(object sender, RoutedEventArgs e)

{

    if (Application.Current.InstallState == InstallState.NotInstalled)

    {

        Application.Current.Install();

    }

    else

    {

        MessageBox.Show("Application already installed");

    }

}

4. Execute the application. When you click on the new button, the dialog box asking you if you want to install the application will be displayed, as shown in the following screenshot:

Uninstalling an OOB application

To uninstall a Silverlight application, the user can choose among several options:

They can right-click on the application and, in the contextual menu, choose the Remove this application… option, as shown in the following screenshot:

It can be uninstalled right from the Windows Control Panel:

The customization of the installation is an improvement that is pending to be added to Silverlight.

Offline installation

Sometimes, we face scenarios where it is necessary for the user to be able to install the application from a CD, or that an administrator can make an implementation. This scenario is not ideal for Silverlight applications (normally, the user downloads them from a URL, either intranet or extranet and, moreover, benefits from automatic updates).

If you face this situation, you may wonder whether it is more convenient to orient development to WPF-Click once, or use the method explained by Tim Heuer in his blog: Installing Silverlight Offline (http://timheuer.com/blog/archive/2008/09/29/install-silverlight-2-rc0-offline.aspx).

Even though this method allows us to install our OOB application in a silent mode,
it has certain limitations:

If the user does not have the Silverlight plug-in installed, they will need to be connected to the Internet to download it from the Microsoft website
The installation in silent mode is not valid for trusted OOB applications

Updates

OOB applications are installed on our own machine, which means there are a lot of advantages, such as fast boot, offline work mode, and so on. Nonetheless, what happens if we upload an update to the server? Is there a way to update our local application? Of course there is. What's more? It is possible in an easy and powerful way. Let's see it in action:

In the app.cs file, subscribe to the event named CheckAndDownloadUpdateCompleted and, later, make the asynchronous petition to check if there is a new update and, if so, download it automatically. The following is the source code:

private void Application_Startup(object sender, StartupEventArgs e)

{

    CheckAndDownloadUpdateCompleted += 

    new CheckAndDownloadUpdateCompletedEventHandle

    r(Application_CheckAndDownloadUpdateCompleted);

    CheckAndDownloadUpdateAsync();

    (…)

}

private void Application_CheckAndDownloadUpdateCompleted(object sender, CheckAndDownloadUpdateCompletedEventArgs e)

{

    MessageBox.Show("Application updated, please restart.");

}

Updates will work as long as our XAP is not in a file that needs security.

Offline work

An advantage of working with OOB applications is that, once they have been installed, it is not necessary to have an Internet connection to execute them (they are downloaded locally). What does this mean? It is possible to implement an offline work method for our applications, which permits, for example, that a user on a flight can work with the application and, later, when they have an Internet connection, they can synchronize the data with the server.

To work offline, it is necessary to have a repository to store reference data, as well as changes or new creations. If our Silverlight applications normally work within a sandbox and we do not have access to the HDD of the local machine, what can we make use of? In such cases, we have two options: either requiring elevated permissions for our application to execute (this will be dealt with later) or making use of the Silverlight Isolated Storage.

Isolated Storage is a virtual filesystem that allows a Silverlight application to store data in an invisible folder in the machine. By default, a Silverlight application can use 2 MB of storage. Isolated Storage is a 10 MB OOB application, but the user can
be asked to increase the quota.

Let's see a simple sample of how to read and write data in the Isolated Storage. This example is available in the online material on http://bit.ly/5gEwuM.

You can create a file in the Isolated Storage using the following code:

using System.IO.IsolatedStorage;

using System.IO;

(…)

private void WriteContentToIsoStorage(string content, string filename)

{

    using (IsolatedStorageFile isf = IsolatedStorageFile.GetUserStoreForApplication())

    {

        using (IsolatedStorageFileStream isfs = new IsolatedStorageFileStream(filename, FileMode.Create, isf))

        {

            using (StreamWriter sw = new StreamWriter(isfs))

            {

                sw.Write(content);

                sw.Close();

            }

        }

    }

}

You can read the information using the following code:

using System.IO.IsolatedStorage;

using System.IO;

(…)

private string LoadContentFromIsoStorage(string filename)

{

    string data = String.Empty;

    using (IsolatedStorageFile isf = IsolatedStorageFile.GetUserStoreForApplication())

    {

        using (IsolatedStorageFileStream isfs = new IsolatedStorageFileStream(filename, FileMode.Open, isf))

        {

            using (StreamReader sr = new StreamReader(isfs))

            {

                string lineOfData = String.Empty;

                while ((lineOfData = sr.ReadLine()) != null)

                data += lineOfData;

            }

        }

    }

    return data;

}

To continue learning how this works, you can follow this link: http://bit.ly/qkY9UM.

How it works

Normally, when data have to be obtained or updated, we communicate with the server via a web service to get or modify this information.

To avoid this connection, we can do the following: first, get the most commonly read data and store them in a cache; second, the user creates his/her own entries, which are stored in the local repository (Isolated Storage). Once the user has an Internet connection again, offline data is sent to be synchronised in the repository.

Offline work is not as easy as it may sound. Another book could be written only on this! If you want further information about this, we can recommend the following session by Steve Lasker, Offline Microsoft Silverlight Applications (http://bit.ly/ltIxNt).

Breaking the sandbox—trusted applications

Up to now, we have seen how an OOB Silverlight application runs within a sandbox. That is to say, its access to certain resources is limited or restricted. What happens if we need to perform operations that the sandbox has restricted due to safety reasons? To solve this issue, there are applications with elevated permissions:

A trusted OOB application is a program the user trusts (similar to when a desktop application is installed on our machine).
Its XAP file is signed with a certificate, which ensures its trustworthy origin.
It has elevated permissions, which makes it possible, for example, to make calls to COM components, P/Invoke calls, or access the local filesystem.
For the application to be installed/executed, it needs the express authorization of the user.

Enabling trusted mode

How can an OOB application be enabled to require elevated permissions? To configure a Silverlight program that already exists, follow these steps:

1. Go to the Properties tab of the Silverlight Project (contextual menu of the project, Silverlight | Properties) and click on the button Out-of-Browser Settings…:

2. A dialog is displayed, where the option Require elevated trust when running outside the browser must be checked, as shown in the following screenshot:

After these steps, our application will be enabled as OOB trusted. However, if a user tries to install it, they will receive a warning indicating the source that published the application cannot be trusted. To eliminate this message, we will have to use our enterprise's certificate or acquire a new one (we can buy one or, if it is an intranet, our IT administrator can generate a new one). This operation can be performed from the Signing tab in the project's properties (right-click on Silverlight project | Properties | Signing).

Advantages of trusted applications

Now we have our trusted application, which has the following additional advantages:
We can access the filesystem of the machine (from the Silverlight 5 version).
We can make calls to COM components. We can read or write to the registry (only current user entry), call other executable files, and so on.
It is possible to make P/Invoke calls.
We can make petitions to a URL, even if they are cross domain. It is not necessary that the server has a cross-domain policy enabled.
It is possible to integrate a WebBrowser control in our application. That is, we can display HTML in our Silverlight application and interact with it.
Real windows can be created. Normally, when new windows are created in a Silverlight application, they are a fantasy; that is to say, they are not physical windows, but they are displayed within the main one. If our application is trusted (only SL version 5), we can create floating windows and, for instance, they can be displayed on several monitors.

Accessing files

Our trusted application has access to the local filesystem (if it is Silverlight 5; in case it is Silverlight 4, it can only access folders, such as My Documents and via COM calls it's possible to gain additional access). The operations on System.IO, which previously returned safety errors, will now be executed flawlessly.

As a sample, let's see how the content of the Program Files file can be listed in our trusted Silverlight application:

public class ViewModel

{

    public ObservableCollection<string> DirNames { get; set; }

    public ViewModel()

    {

        DirNames = new ObservableCollection<string>();

        // Let's try to enumerate the directories that are

        // under Program Files, this operation would throw an

        // exception if the application is not a trusted one.

        DirectoryInfo di = new DirectoryInfo("C:\\Program Files");

        foreach (var info in di.EnumerateDirectories())

        {

            DirNames.Add(info.FullName);

        }

    }

}

Making calls to COM+

We can make calls to COM components, which open plenty of doors, such as reading and (partially) writing on the registry, communicating with devices, launching apps, and even using Excel Automation.

However, the main disadvantage of this approach is that it only works in Windows. So if our application needs to run in Mac, this code must be isolated and will not offer this functionality for that platform.

If you need to detect under which OS a Silverlight application is running, you can use Environment.OSVersion.

Let's see a couple of examples of how to make these calls.

Writing an entry on the registry

In order to do so, create a new Silverlight Application project and tick the checkboxes (Enable Running application out of the browser, Out-of-Browser Settings | Require elevated trust when running outside the browser).

Add the reference to the Microsoft.CSharp DLL (Add Reference | .NET | Microsoft.CSharp):

Make sure this DLL and System.Core are referenced:

You can write the entry on the registry using the following code:

using System.Runtime.InteropServices.Automation;

(…)

private void button1_Click(object sender, RoutedEventArgs e)

{

    using (dynamic shell = AutomationFactory.CreateObject("WScript.Shell"))

    {

        shell.RegWrite(@"HKCU\Software\MyTest", "");

    }

}

The result is as shown in the following screenshot:

Executing notepad from our application

Another interesting feature is the ability of launching other applications from our trusted application. In the following code we will launch a Notepad.

using System.Runtime.InteropServices.Automation;

(…)

private void button1_Click(object sender, RoutedEventArgs e)

    {

        dynamic cmd = AutomationFactory.CreateObject("WScript.Shell");

        cmd.Run(@"c:\Windows\notepad.exe", 1, true);

    }

P/Invoke

As an innovation, Silverlight 5 includes call support via P/Invoke. Platform Invocation Services allows managed code to call unmanaged functions that are implemented in a DLL. This is only allowed for full-trust applications.

Let's see how this works by creating a sample, which calls a kernel32.dll method reproducing system beeps. Follow the steps mentioned next:

1. Create a new Silverlight project (application) and configure it to be an OOB application with trusted permissions.

2. Add a new class (by means of Add New Class) called MyBeep. Implement the Beep method of the Kernel 32 DLL.

using System.Runtime.InteropServices;

public class MyBeep

    {

        [DllImport("User32.dll")]

        private static extern Boolean MessageBeep(UInt32 beepType);

        public void PlaySound(BeepTypes type)

        {

            if (!MessageBeep((UInt32)type))

            {

                throw new Exception("Beep failed!");

            }

        }

    }

public enum BeepTypes : uint

{

    Ok = 0x00000000,

    Error = 0x00000010,

    Warning = 0x00000030,

    Information = 0x00000040

}

public static class BeepTypeExtensions

{

    public static BeepTypes AsBeepTypeEnum(this string beepType)

    {

        BeepTypes beepTypeEnum;

        return Enum.TryParse(beepType,true,out beepTypeEnum)

        ? beepTypeEnum

        : BeepTypes.Error;

    }

}

3. In the main page (mainpage.xaml), add a button to be bound to the Click event as follows:

Click="button1_Click" />

4. In the Code-Behind (MainPage.cs), make the call to the method defined in the MyBeep class.

private void button1_Click(object sender, RoutedEventArgs e)

{

    MyBeep myBeep = new MyBeep();

    myBeep.PlaySound(BeepTypes.Information);

}

If an exception appears when executing the action, check the application settings and make sure that it is running in OOB trusted mode.

Cross-domain calls

When executing our Silverlight application within the sandbox, we can make calls to services, or ask for resources, which are in our domain. However, if we try to access resources in a different domain (namely a feed of Apple's film trailers) this call can return an error since, due to safety reasons, these calls are restricted unless the web service authorizes them explicitly. The following are the solutions we have within sandbox:

The server may have an XML file with the cross-domain policy indicating we have access to these resources. It can be checked by launching a query to the Apple feed and using the Fiddler packages sniffer. We will then realize if this server exposes a cross-domain policy.
It is possible to implement a service in our server acting as a proxy. The bad thing about this approach is that we overload the server and the response to the client is slower.

If our application is executed as trusted, this restriction does not exist. We can make the petition to a cross domain without having the cross-domain policy enabled. For instance, we can make a query to the Apple feed to check new cinema openings.

private void button1_Click(object sender, RoutedEventArgs e)

{

    WebClient wc = new WebClient();

    wc.DownloadStringCompleted += new DownloadStringCompletedEventHandler(wc_DownloadStringCompleted);

    wc.DownloadStringAsync(new Uri("http://www.apple.com/trailers/home/xml/current.xml", UriKind.Absolute));

}

void wc_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)

{

    MessageBox.Show(e.Result);

}

WebBrowser control

Another interesting control we can only use in trusted OOB applications is the WebBrowser control. This allows us to view HTML pages within our Silverlight application. Besides, if the page is in the same domain, we can even interact with it via Silverlight | JavaScript.

How it works

Let's check how this control works by creating a simple example:

1. Create a new Silverlight project (application) and configure it so that it is executed as an OOB application with trusted permissions.

2. In the XAML, add the namespace System.Windows.Controls and instantiate the control:

"WebBrowser.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:controls="clr-namespace:System.Windows.Controls;

        assembly=System.Windows"

mc:Ignorable="d"

d:DesignHeight="300" d:DesignWidth="400">

"LayoutRoot" Background="White">

"http://www.bing.com"/>

3. The result we obtain is shown in the following screenshot:

Limitations to take into account:

Control is placed on top of the ZOrder. In case we want to show a ChildWindow, for example, this will not be visible at first. To give it visibility, we need to create a rectangle using a WebBrowser Brush, make a static picture to the WebBrowser Control content and, when the dialog box is shown, hide the WebBrowser showing our rectangle.
For safety reasons, we cannot capture the moment when the user navigates from one page to another; neither can we make JavaScript calls from Silverlight if the page belongs to a different domain.
It is a heavy control, so it is not a good idea to create and destroy it dynamically quite often.

Real windows

Another advantage of trusted OOB applications is the fact that they can show physical windows.

At the moment, these windows are not modal in Silverlight 5. The following is how it works:

1. Create a Windows object and assign the content property of this control to
a given UserControl.

2. Then, we see how this sort of window can be displayed:

private void button1_Click(object sender, RoutedEventArgs e)

{

    Window wnd = new Window();

    wnd.Width = 500;

    wnd.Height = 350;

    wnd.Title = "This is a test window";

    //We indicate here a custom user control to display in the

    //new window

    wnd.Content = new MyControl();

    wnd.Visibility = Visibility.Visible;

}

3. The result is shown in the following screenshot:

In-browser trusted applications

Having trusted applications, which are executed as if they were desktop applications, is a powerful and interesting idea, but what happens if we need to have elevated permissions for applications running in the browser? For instance, a bank's intranet.

Silverlight 5 incorporates in-browser trusted applications, whose main features are as follows:

It is a specific functionality for enterprise applications.
The administrator controls which applications can be executed via
group policy.
The user is not asked and neither is the application installed. It is marked
as valid, so it will be executed by the administrator.
It can be integrated as part of an HTML website, without the need to give elevated permissions to the entire site.

On the other hand, the doubt arises, when developing, shall we create our own test certificate? The answer is no. If we execute from localhost, the restriction is not applied.

Thus, in the example that was previously implemented (getting the content of C:\Program Files), we only need to select the properties of our Silverlight project (right-click on Silverlight | Properties) and select the option Require elevated trust when running in-browser, as shown in the following screenshot:

When executing the application, it can be seen running flawlessly within the browser.

As we pointed out earlier, if the application in production is displayed, it will fail as it is not executed from localhost. The following are the necessary steps to avoid it:

The XAP file has to be signed with a certificate (this can be seen in depth in Chapter 11, Security).
The network administrator has to specify a setting for the trusted in-browser applications to be executed in all machines. Particularly, the flag of the registry entry HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Silverlight\AllowElevatedTrustAppsInBrowser must have the value of 1.
The network administrator has to add the certificate in which the XAP has been signed with as a trusted certificate (CurrentUser\Trusted Publishers).

For more information about the display process, please visit the link http://bit.ly/kKbdpl.

In order to know if the application is running with elevated permissions, check the flag Application.Current.HasElevatedPermissions.

LOB application case study: applying what we have learned

As final users, one of the disadvantages of using web applications is the fact that we have to remember URLs, open the browser, and so on. Isn't it easier to double-click on a desktop icon and run an application? That is what has been added to our booking application:

We detect whether it is running or not within the browser
If so, an option is shown to install the application as OOB
Then, we install the application as OOB

Thus, when executing the application within the browser, a new option is added in the navigation menu, as shown in the following screenshot:

When clicking the Install button, the confirmation dialog appears and the application gets installed (then, go to the desktop icon and execute it).

It is necessary to bear in mind that the application item has been customized. This can be set up in the project properties, Out-of-Browser Settings.

Summary

The capabilities offered by Out of Browser (OOB) applications are amazing. If we also add the possibility of elevating permission (in-browser and OOB trusted), the result is a light web application that can be almost as powerful and functional as a desktop application. Remember this chapter when a client indicates non-standard requirements of a web application (such as the integration of the application in an ATM, accessing the local filesystem, and so on). Anyway, before accepting, make the possible concept tests and ensure the functionality is covered.

Additional resources

If you need to dive deeper into any of the features presented in this chapter, you can check the following links:

How far can I get using COM+? This post by Justin Angels summarizes it nicely at http://bit.ly/4Ama4H
In-browser http://bit.ly/kKbdpl and settings http://bit.ly/oKFbzG
P/Invoke, how does it work? http://bit.ly/r2DTQF
P/Invoke and Silverlight, an excellent introduction by Vikram Pendse http://bit.ly/qI3XhN
How to create physical windows, by Pete Brown http://bit.ly/gZ4w7S

10 Laps around Silverlight 5 (Part 10 of 10)

editorial@silverlightshow.net (Michael Crump ) — Mon, 12 Dec 2011 21:50:15 GMT

This article is sponsored by Telerik RadControls for Silverlight. For similarly awesome content check out Telerik XAMLflix, your step-by-step guide to Telerik Silverlight and WPF controls. Get access to video tutorials, written tutorials, and tons of code!

To contact me directly please visit my blog at http://michaelcrump.net/ or through twitter at http://twitter.com/mbcrump.

More resources...

All SilverlightShow Ebooks

This article is Part 10 of the series “10 Laps around Silverlight 5.” If you have missed any other section then please see the Roadmap below.

To refresh your memory on what Silverlight is:

Microsoft Silverlight is an application framework for writing Rich Internet Applications.

The run-time environment is available as a plug-in for most web browsers and works on a variety of operating systems including Windows, Mac and Linux.

To recap what we learned in the previous section:

We took a look at several new controls in Silverlight 5 including: Double and Triple click support and ComboBox Type-Ahead.
We then took a deeper dive into the PivotViewer control as it is more complex than the others and provided additional links.

In this article, I am going to discuss several new features that did not fit in any of the above categories. We will discuss In-Browser HTML, PostScript and Tasks for TPL. Please review the Roadmap for the series before going any further.

The Roadmap for this Series

I’ve included the Roadmap for the series below as you may want to visit other sections as you learn Silverlight 5. I picked the following features as I thought that you may find them useful in your day-to-day work. If you want a specific topic covered then please leave it in the comments below.

1) Introduction to SL5 – This post which provides a brief history of Silverlight and relevant links.

2) Binding- Ancestor Relative Source Binding and Implicit Data Templates.

3) Graphics –XNA 3D API and Improved Graphics Stack.

4) Media - Low-Latency Sound using XNA and Remote Control and Media Command (Keys) Support.

5) Text - Text Tracking and Leading, Linked and Multi-column Text, OpenType Support, Pixel Snapped Text and TextOptions.

6) Operating System Integration - Part 1 - P/Invoke, Multiple Windows and Unrestricted File System Access in Full Trust.

7) Operating System Integration - Part 2 - Default Filename for SaveFileDialog, 64-bit browser support and Power Awareness.

8) Productivity and Performance - XAML Binding Debugging, Parser Performance Improvements and Multi-core JIT for improved start-up time.

9) Controls - Double and Triple click support, PivotViewer and ComboBox Type-Ahead.

10) Other items [This post] - In-Browser HTML, PostScript and Tasks for TPL.

In-Browser HTML

In Silverlight 4, we could use the WebBrowser control only in an “Out-of-Browser” application. This has changed in Silverlight 5 as we can now use the WebBrowser control in the browser (IE). It will however require that you make a few changes to your system. Let’s get started:

1) Update the registry – Locate the following keys:

If you running on a 32 bit machine,

HKEY_LOCAL_MACHINE\Software\Microsoft\Silverlight\

and if you are running on a 64-bit machine,

HKEY_LOCAL_MACHINE\Software\Wow6432Node\Microsoft\Silverlight\

change the UpdateConsentMode from a 0 to 1.

2) Sign the XAP File - Right click on the Silverlight application and go to properties. Choose Signing and check the checkbox Sign the .XAP file. Now click on the button Create Test Certificate. Enter any password that you want and hit the OK button. Now click on the More Details button.

Click on the Install Certificate button. Clicking on the button brings up the Certificate Import wizard. Click on the Next button and choose Place all certificates in the following store. Click on the Browse button. This will show you a Certificate Store. Choose Trusted Publisher and finish the wizard. Now repeat the same step to install this certificate in Trusted Root Certification Authorities.

3) Enable Out-of-Browser and Require elevated trust when running in-browser. Right click on the Silverlight application and go to properties. Place a checkmark in Enable Out-of-Browser and Require elevated trust when running in-browser.

Now let’s switch over to the MainPage.xaml and replace the Grid with the following code:

<Grid x:Name="LayoutRoot" Background="White">

       <WebBrowser x:Name="webBrowser" Source="http://michaelcrump.net/"/>

Grid>

If we run our application now (using Internet Explorer), then we will see the WebBrowser control working inside of the browser.

Note: This will not work in Chrome, Safari, others (Only Internet Explorer).

You can also add html pages to your project and point the source to that file as well.

PostScript Vector Printing

In Silverlight 4, we had bitmap-based printing. This meant that every time a page was going to print that Silverlight 4 sent the bitmap representing the entire page to the printer. We quickly found out that this resulted in horrible performance for larger print jobs. Now in Silverlight 5 we have PostScript Vector printing. This provides us with a much faster solution. Let’s get started building a sample application that uses this features.

Let’s switch over to the MainPage.xaml and replace the Grid with the following code:

<StackPanel x:Name="LayoutRoot" Background="White" HorizontalAlignment="Center" VerticalAlignment="Center">

    <Button x:Name="basicVector" Click="basicVector_Click" />

    <Button x:Name="forceVector" Click="forceVector_Click" />

StackPanel>

We can navigate over to our MainPage.xaml.cs file and add in the following code snippet for our button event handlers:

private void basicVector_Click(object sender, RoutedEventArgs e)

{

    PrintDocument document = new PrintDocument();

  

    document.PrintPage += (s, ea) =>

    {

        StackPanel stPanel = new StackPanel();                

  

        for (int i = 0; i < 10; i++)

        {

            TextBlock tb = new TextBlock();

            tb.Text = "Basic Vector mode.";

  

            stPanel.Children.Add(tb);

        }

  

        ea.PageVisual = stPanel;

        ea.HasMorePages = true;

    };

  

    document.Print("Basic Vector Demo");

    

}

  

private void forceVector_Click(object sender, RoutedEventArgs e)

{

    PrintDocument document = new PrintDocument();

  

    document.PrintPage += (s, ea) =>

    {

        StackPanel stPanel = new StackPanel();

  

        for (int i = 0; i < 10; i++)

        {

            TextBlock tb = new TextBlock();

            tb.Text = "Forced Vector mode.";

  

            stPanel.Children.Add(tb);

        }

  

        ea.PageVisual = stPanel;

        ea.HasMorePages = true;

    };

  

    PrinterFallbackSettings settings = new PrinterFallbackSettings();

    settings.ForceVector = true;

    settings.OpacityThreshold = 0.7;

  

    document.Print("Forced Vector Print", settings);

}

In our first button, we have a basic PostScript Vector Printing job. We create a PrintDocument (which was also in SL4), then add a PrintPage with some basic text to it. We finally print the document using Vector printing with document.Print.

In our second button, we do the same thing but we call PrinterFallbackSettings and force the print job to print in Vector mode. We can also set the Opacity value by calling OpacityThreshold.

Tasks Parallel Library (TPL)

In short, TPL is to simply asynchronous methods. Silverlight 5 does not include the full TPL but it does provide Tasks and it’s related factories. Which is exactly what you want! Let’s get started.

We are going to use a sample XML file provided by Microsoft found here. Go ahead and download it and add it to your Web Project with the name of books.xml.

Next, Let’s go ahead and navigate over to our MainPage.xaml.cs file and add in the proper namespaces to use TPL. Next, we will add in the second code snippet:

using System;

using System.Linq;

using System.Net;

using System.Threading.Tasks;

using System.Windows;

using System.Windows.Controls;

using System.Diagnostics;

public MainPage()

{

    InitializeComponent();

    Loaded += new RoutedEventHandler(MainPage_Loaded);

}

  

void MainPage_Loaded(object sender, RoutedEventArgs e)

{

    string uri = "http://localhost:15863/books.xml";

  

    var request = HttpWebRequest.Create(uri);

  

    Task.Factory.FromAsync(

      request.BeginGetResponse, request.EndGetResponse, null)

      .ContinueWith(

        task =>

        {

            var response = (HttpWebResponse)task.Result;

            Debug.WriteLine("Content Type: " + response.ContentType);

            Debug.WriteLine("Content Length: " + response.ContentLength);

            Debug.WriteLine("Method: " + response.Method);

            Debug.WriteLine("Status Code: " + response.StatusCode);

            Debug.WriteLine("Status Description: " + response.StatusDescription);  

        });

}

Note: You will need to change the localhost port in the above code sample before proceeding.

Go ahead and run the application and then look at your Output window in VS2010. You should see the following information.

The thing to note here is Task.Factory.FromAsync. This creates a Tasks that represents a pair of begin and end methods that conform to the Asynchronous Programming Model Pattern.

Conclusion

At this point, we have taken a dive into all of the new features of Silverlight 5. Now that you are equipped with a solid understanding of what Silverlight 5 has to offer, you can begin to use this in your own applications. I want to thank you for reading this series and if you ever have any questions feel free to contact me on the various sources listed below. I also wanted to thank SilverlightShow.Net and Telerik for giving me the opportunity to share this information with everyone. I hope that you enjoyed this series and if you To contact me directly please visit my blog at http://michaelcrump.net/ or through twitter at http://twitter.com/mbcrump.

10 Laps around Silverlight 5 (Part 9 of 10)

editorial@silverlightshow.net (Michael Crump ) — Tue, 06 Dec 2011 12:27:00 GMT

To contact me directly please visit my blog at http://michaelcrump.net/ or through twitter at http://twitter.com/mbcrump.

This article is Part 9 of the series “10 Laps around Silverlight 5.” If you have missed any other section then please see the Roadmap below.

More resources...

All SilverlightShow Ebooks

To refresh your memory on what Silverlight is:

Microsoft Silverlight is an application framework for writing Rich Internet Applications.

The run-time environment is available as a plug-in for most web browsers and works on a variety of operating systems including Windows, Mac and Linux.

To recap what we learned in the previous section:

We learned how you could specify a break point inside of a Binding Expressions in Silverlight 5. We also learned how you could use this same functionality inside of Silverlight 4 with the Silverlight 5 SDK installed.
We then created a sample application that contained a binding error and took a look at the output window to investigate it further. We were then able to determine the source of our error and correct it quickly.
We finished up with listing several productivity and performance improvements in Silverlight 5 that you may not be aware of.

In this article, I am going to discuss several new features/controls such as Double and Triple click support, PivotViewer and ComboBox Type-Ahead. Please review the Roadmap for the series before going any further.

The Roadmap for this Series

1) Introduction to SL5 – This post which provides a brief history of Silverlight and relevant links.

2) Binding- Ancestor Relative Source Binding and Implicit Data Templates.

3) Graphics –XNA 3D API and Improved Graphics Stack.

4) Media - Low-Latency Sound using XNA and Remote Control and Media Command (Keys) Support.

5) Text - Text Tracking and Leading, Linked and Multi-column Text, OpenType Support, Pixel Snapped Text and TextOptions.

6) Operating System Integration - Part 1 - P/Invoke, Multiple Windows and Unrestricted File System Access in Full Trust.

7) Operating System Integration - Part 2 - Default Filename for SaveFileDialog, 64-bit browser support and Power Awareness.

8) Productivity and Performance - XAML Binding Debugging, Parser Performance Improvements and Multi-core JIT for improved start-up time.

9) Controls [This post] - Double and Triple click support, PivotViewer and ComboBox Type-Ahead.

10) Other items - In-Browser HTML, PostScript and Tasks for TPL.

Double and Triple Click Support

One of the new features in Silverlight 5 is the ability to use Double and Triple Click Support. This functionality will tell you how many times the user has clicked the mouse button. The property is called ClickCount and resides in the MouseButtonEventArgs class. Let’s take a look at how to use this new feature.

Fire up a new Silverlight 5 project and give it any name that you want.

Switch over to the MainPage.xaml.cs and add the following code: (Note: You may not need the MainPage() Method section)

public MainPage()

{

    InitializeComponent();

}

  

private void textBlock1_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

{

    textBlock1.Text = e.ClickCount.ToString();

}

Switch back over to the MainPage.xaml and add in the following code replacing the current Grid:

<Grid x:Name="LayoutRoot" Background="White">

      <Border BorderBrush="Black" BorderThickness="1" Margin="52,49,68,74" CornerRadius="10">

          <TextBlock Height="152" HorizontalAlignment="Center" x:Name="textBlock1" Text="0" VerticalAlignment="Center" Width="244" MouseLeftButtonDown="textBlock1_MouseLeftButtonDown" Foreground="#FFFF2E2E" FontSize="96" TextAlignment="Center" />

      Border>

Grid>

If we go ahead and run the application then we will see the following application.

Go ahead and begin clicking inside of the border and you will see the number increase. If you wait a few seconds and click again then you will notice that it reset itself. You could easily add If..Then… statements to determine what click count number they are on. This may be helpful for a 35 click Easter egg. :)

PivotViewer

Microsoft’s Silverlight Team defines it as the following: The Silverlight PivotViewer makes it easier to interact with massive amounts of data on the web in ways that are powerful, informative and valuable. I couldn’t agree more. Let’s begin today by creating a SL5 application that uses the PivotViewer control and displays a collection of movies. (Classic example, eh?)

Please note that this sample barely scratches the surface of what you can do with the PivotViewer. I’ve included an official link by Microsoft at the bottom of this post for your reference.

Fire up a new Silverlight 5 project and give it the name PivotViewer.

Switch over to the MainPage.xaml.cs and add the following code:

using System;

using System.Linq;

using System.Windows;

using System.Windows.Controls;

using System.Collections.ObjectModel;

  

namespace PivotViewer

{

    public partial class MainPage : UserControl

    {

        private ObservableCollection Movies;

  

        public MainPage()

        {

            InitializeComponent();

            Movies = new ObservableCollection();

            for (Int64 i = 0; i < 500; i++)

            {

                Movies.Add(new Movie() { Title = "Ice Age" + i.ToString(), CountryOfOrigin = "USA", Description = "Set during the Ice Age.", Director = "Chris Wedge" + i.ToString(), Duration = 90, ReleaseDate = new DateTime(2002, 09, 03) });

    

            }

         }

  

        private void UserControl_Loaded(object sender, RoutedEventArgs e)

        {

            MoviePivot.ItemsSource = Movies;

        }

    }

}

We need to create a new class now named Movie. Inside of that class should look like the following:

using System;

  

namespace PivotViewer

{

    public class Movie

    {

        public string Title { get; set; }

        public int Duration { get; set; }

        public DateTime ReleaseDate{ get; set; }

        public string CountryOfOrigin { get; set; }

        public string Description { get; set; }

        public string Director { get; set; }

    }

}

Switch back over to the MainPage.xaml and add in the following code replacing everything:

<UserControl x:Class="PivotViewer.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:pivot="clr-namespace:System.Windows.Controls.Pivot;assembly=System.Windows.Controls.Pivot"

    Loaded="UserControl_Loaded"

    mc:Ignorable="d"

    d:DesignHeight="300" d:DesignWidth="400">

  

    <Grid x:Name="LayoutRoot" Background="White">

        <pivot:PivotViewer x:Name="MoviePivot"

                            AccentColor="LightGreen"

                            Background="LightGray"

                            ControlBackground="LightYellow"

                            SecondaryBackground="AntiqueWhite"

                            SecondaryForeground="Bisque"

                            SecondaryItemValueBackgroundColor="Chocolate" >

  

            

            <pivot:PivotViewer.PivotProperties>

                <pivot:PivotViewerStringProperty Id="FTitle" Options="CanFilter" DisplayName="Title" Binding="{Binding Title}" />

                <pivot:PivotViewerStringProperty Id="FDuration" Options="CanFilter" DisplayName="Duration" Binding="{Binding Duration}" />

                <pivot:PivotViewerStringProperty Id="FDirector" Options="CanFilter" DisplayName="Director" Binding="{Binding Director}" />

  

            pivot:PivotViewer.PivotProperties>

  

            

            <pivot:PivotViewer.ItemTemplates>

                <pivot:PivotViewerItemTemplate>

                    <Border Width="200" Height="200" Background="CadetBlue">

                        <StackPanel Orientation="Vertical">

  

                            <StackPanel Orientation="Horizontal">

                                <TextBlock Text="{Binding Title}" FontSize="16" Foreground="White" />

                                <TextBlock Text="(" FontSize="16" Foreground="White" />

                                <TextBlock Text="{Binding Duration}" FontSize="16" Foreground="White" />

                                <TextBlock Text=")" FontSize="16" Foreground="White" />

                            StackPanel>

                            <TextBlock Text="{Binding Director}" FontSize="16" Foreground="White" />

                            <TextBlock Text="{Binding CountryOfOrigin}" FontSize="16" Foreground="White" />

                        StackPanel>

                    Border>

                pivot:PivotViewerItemTemplate>

            pivot:PivotViewer.ItemTemplates>

        pivot:PivotViewer>

    Grid>

UserControl>

If we run our application and select a few items then we will see the following screen. As you can tell when the application loaded that it contained 500 items – Wow!

I’ve barely touched on the amount of things that you can do with PivotViewer. If you want to learn more than please visit the Silverlight site located here.

Combo-Box Type Ahead

Another new feature in Silverlight 5 is Combo-Box Type Ahead. This makes choosing items from a long list very simple. Let’s go ahead and build a sample application.

Fire up a new Silverlight 5 project and give it any name that want.

Switch over to the MainPage.xaml.cs and add the following code:

public MainPage()

{

    InitializeComponent();

     var lstDevelopers = new List<string>

           { "Michael Crump",

              "Pete Brown",

              "Victor G.",

              "Scott Hanselman",

              "Jesse Liberty",

              "Shawn Wildermuth",

              "Scott Gu",

              "Joel Cochran",

              "Kunal Chowdhurry" };

            cbDevelopers.ItemsSource = lstDevelopers;

}

Switch back over to the MainPage.xaml and add in the following code replacing the existing Grid:

<Grid x:Name="LayoutRoot" Background="White">

       <ComboBox x:Name="cbDevelopers" Height="40" Width="150" Margin="20" />

Grid>

If we run our application and begin typing then we will see the ComboBox automatically highlights the row that matches our selection.

Conclusion

At this point, we have seen how you would use Double and Triple click support, PivotViewer and ComboBox Type-Ahead. In the next and final part of the series, I am going to take a look at several new features shipping with Silverlight 5 including : In-Browser HTML, PostScript and Tasks for TPL. Again, thanks for reading and please come back for the next part.

To contact me directly please visit my blog at http://michaelcrump.net/ or through twitter at http://twitter.com/mbcrump.

10 Laps around Silverlight 5 (Part 8 of 10)

editorial@silverlightshow.net (Michael Crump ) — Tue, 29 Nov 2011 12:18:00 GMT

To contact me directly please visit my blog at http://michaelcrump.net/ or through twitter at http://twitter.com/mbcrump.

This article is Part 8 of the series “10 Laps around Silverlight 5.” If you have missed any other section then please see the Roadmap below.

More resources...

All SilverlightShow Ebooks

To refresh your memory on what Silverlight is:

Microsoft Silverlight is an application framework for writing Rich Internet Applications.

The run-time environment is available as a plug-in for most web browsers and works on a variety of operating systems including Windows, Mac and Linux.

To recap what we learned in the previous section:

We learned how you could specify a default filename when using the SaveFileDialog prompt. We also discussed how you could run the application in elevated trust to prevent the security warning from being displayed.
We then took a look at 64-bit browser support that is included with Silverlight 5 and learned that if your user is using a 64-bit browser then they will be redirected to a location to download the Silverlight 5 x64 runtime.
We wrapped up a short section on new and improved power awareness for media applications.

In this article, I am going to discuss productivity and performance enhancements in Silverlight 5 including: XAML Binding Debugging, Parser Performance Improvements and Multi-core JIT for improved start-up time. Please review the Roadmap for the series before going any further.

The Roadmap for this Series

1) Introduction to SL5 – This post which provides a brief history of Silverlight and relevant links.

2) Binding- Ancestor Relative Source Binding and Implicit Data Templates.

3) Graphics –XNA 3D API and Improved Graphics Stack.

4) Media - Low-Latency Sound using XNA and Remote Control and Media Command (Keys) Support.

5) Text - Text Tracking and Leading, Linked and Multi-column Text, OpenType Support, Pixel Snapped Text and TextOptions.

6) Operating System Integration - Part 1 - P/Invoke, Multiple Windows and Unrestricted File System Access in Full Trust.

7) Operating System Integration - Part 2 - Default Filename for SaveFileDialog, 64-bit browser support and Power Awareness.

8) Productivity and Performance [This post] - XAML Binding Debugging, Parser Performance Improvements and Multi-core JIT for improved start-up time.

9) Controls - Double and Triple click support, PivotViewer and ComboBox Type-Ahead.

10) Other items - In-Browser HTML, PostScript and Tasks for TPL.

XAML Binding Debugging

XAML Binding Debugging, is one of the most important features in the Silverlight 5. We have all been stuck with Binding expressions at one point or another and wanted an easier way to debug them. Now anywhere that you see a {Binding} expression you can put a break point on it just like your typical C# code. Let’s take a look at a sample:

Fire up a new Silverlight 5 project and give it any name that you want.

Go ahead and add a new class to the project named Podcast.cs and add the following code.

public class Podcast

   {

       public string Description { get; set; }

       public DateTime ReleaseDate { get; set; }

       public Uri Link { get; set; }

  

       public Podcast(string description, DateTime releasedate, Uri link)

       {

           Description = description;

           ReleaseDate = releasedate;

           Link = link;

       }

   }

Let’s switch back over to the MainPage.xaml.cs and add the following code:

public MainPage()

{

    InitializeComponent();

    Loaded += new RoutedEventHandler(MainPage_Loaded);

}

  

void MainPage_Loaded(object sender, RoutedEventArgs e)

{

    this.DataContext =

        new Podcast("This Developer's Life - Criticism",

            new DateTime(2011, 4, 21),

            new Uri("http://thisdeveloperslife.com/post/2-0-1-criticism", UriKind.Absolute)

            );

  

}

Switch back over to the MainPage.xaml and add in the following code replacing the current Grid:

<Grid x:Name="LayoutRoot" Background="White">

       <StackPanel Orientation="Vertical">

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

           <TextBlock Name="txtReleaseDate" Text="{Binding ReleaseDate}" />

           <HyperlinkButton Content="Listen to this Episode" NavigateUri="{Binding Lik}" TargetName="_blank" />

       StackPanel>

Grid>

While here, go ahead and put a break point on the “Hyperlink" button line, which you can do by clicking outside its margin as shown below:

Notice the Red Circle and the highlighted “Binding” word? The Visual Studio 2010 debugger will stop once the XAML parser hits that line.

Please note that if you try to put a breakpoint on any line outside of the “Binding” keyword, then you will get a message saying, “This is not a valid location for a breakpoint” at the bottom of your screen:

We are now ready to begin debugging, so, press “F5” on your keyboard to begin. You will notice that the Binding breakpoint was hit. If you examine your Locals window then you will see the following:

It looks like we have an error in our Binding statement that is telling us the property ‘Lik’ does not exist on the class called Podcast. If you continue running the application then you will quickly notice that the webpage launches but the “Listen to this Episode” hyperlink does not work.

If we take a quick look at our Podcast class then we will notice that the property is actually called Link. If we go back to our MainPage.xaml and change

   1: <HyperlinkButton Content="Listen to this Episode" NavigateUri="{Binding Lik}" TargetName="_blank" />

   1: <HyperlinkButton Content="Listen to this Episode" NavigateUri="{Binding Link}" TargetName="_blank" />

and run our application again it will work properly.

It is very easy to debug Binding expressions now with that feature. Another undocumented feature is that if you have Silverlight 5 installed then you can also debug your Silverlight 4 binding statements! Sweet!

Productivity and Performance Improvements

Silverlight 5 contains many additional performance improvements that you may not be aware of. I have decided to create a short list here:

Reduced network latency by using a background thread for networking.
Hardware acceleration is enabled in windowless mode with Internet Explorer 9.
XAML parser improvements that speed up startup and runtime performance.
Support for 64-bit operating systems as discussed in part 7 of this series.
Multi-core JIT for improved startup time.
Increased performance of hardware decoding and presentation of H.264 media for lower-power devices.
Text layout performance improvements

As you can see the Silverlight Team has been hard at work not only adding additional features to Silverlight 5 but improving performance all around.

Conclusion

At this point, we have seen how you would debug binding statements using Silverlight 5’s built-in XAML debugger. We also looked at several productivity and performance improvements in Silverlight 5. In the next part of the series, I am going to take a look at several new controls/features shipping with Silverlight 5 including : Double and Triple click support, PivotViewer and ComboBox Type-Ahead. Again, thanks for reading and please come back for the next part.

To contact me directly please visit my blog at http://michaelcrump.net/ or through twitter at http://twitter.com/mbcrump.

10 Laps around Silverlight 5 (Part 7 of 10)

editorial@silverlightshow.net (Michael Crump ) — Tue, 22 Nov 2011 10:53:00 GMT

To contact me directly please visit my blog at http://michaelcrump.net/ or through twitter at http://twitter.com/mbcrump.

This article is Part 7 of the series “10 Laps around Silverlight 5.” If you have missed any other section then please see the Roadmap below.

More resources...

All SilverlightShow Ebooks

To refresh your memory on what Silverlight is:

Microsoft Silverlight is an application framework for writing Rich Internet Applications.

The run-time environment is available as a plug-in for most web browsers and works on a variety of operating systems including Windows, Mac and Linux.

To recap what we learned in the previous section:

We spent some time building an application that uses P/Invoke or Platform Invocation to get familiar with Elevated Trust and Out of Browser applications. We also reviewed that P/Invoke allows managed code to call native code.
We then took a look at how to create a Silverlight 5 application that uses multiple windows that are separate from the main Silverlight window. We discussed how that if you close one of the newly spawned windows then it only closes that instance.
We wrapped up with creating an application that uses unrestricted file access to demonstrate creating a folder and placing a file inside of it with some content.

In this article, I am going to discuss a few more operating system integration features in Silverlight 5 including: Default Filename for SaveFileDialog, 64-bit browser support and Power Awareness for Media Applications. Please review the Roadmap for the series before going any further.

The Roadmap for this Series

1) Introduction to SL5 – This post which provides a brief history of Silverlight and relevant links.

2) Binding- Ancestor Relative Source Binding and Implicit Data Templates.

3) Graphics –XNA 3D API and Improved Graphics Stack.

4) Media - Low-Latency Sound using XNA and Remote Control and Media Command (Keys) Support.

5) Text - Text Tracking and Leading, Linked and Multi-column Text, OpenType Support, Pixel Snapped Text and TextOptions.

6) Operating System Integration - Part 1 - P/Invoke, Multiple Windows and Unrestricted File System Access in Full Trust.

7) Operating System Integration [This post] Part 2 - Default Filename for SaveFileDialog, 64-bit browser support and Power Awareness.

8) Productivity and Performance - XAML Binding Debugging, Parser Performance Improvements and Multi-core JIT for improved start-up time.

9) Controls - Double and Triple click support, PivotViewer and ComboBox Type-Ahead.

10) Other items - In-Browser HTML, PostScript and Tasks for TPL.

Default Filename for SaveFileDialog

In previous version of Silverlight, you could not specify the default filename for the SaveFileDialog message. In Silverlight 5 you can very easily.

Fire up a new Silverlight 5 project and give it any name that you want. We are going to create a simple application that contains one button and when the user clicks it the SaveFileDialog will appear with a default filename.

Switch over to the MainPage.xaml and add in the following code:

<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">

        <Button x:Name="btnSaveFile" Content="Save File Dialog" Click="btnSaveFile_Click"/>

StackPanel>

Let’s switch back over to the MainPage.xaml.cs and add the following code to our button event handler:

private void btnSaveFile_Click(object sender, RoutedEventArgs e)

       {

           var saveFileDialog1 = new SaveFileDialog

                                     {

                                         Filter = "JPeg Image|*.jpg|Bitmap Image|*.bmp|Gif Image|*.gif",

                                         DefaultFileName = "YouCanNowHaveADefaultFileName.jpeg"

                                     };

           saveFileDialog1.ShowDialog();

       }

If we run the application now, we will see the following prompt.

(Note: You could run this application in elevated trust to remove the security warning, see this post for details)

Go ahead and select OK and you will see the following screen:

You should notice that the File name field is filled in for us with a default save as type as Jpeg. Of course, if you didn’t want the user to see the security warning then you could run this application in elevated trust as mentioned under the image.

64-bit browser support

64-bit browser support is also new to Silverlight 5. If you have installed Windows 7 x64 then you already have a 64-bit version of Internet Explorer. You can find it by going to the “search program and files” prompt and typing Internet Explorer as shown below.

If you launch Internet Explorer x64 and visit a site built with Silverlight 5 then you will see the following message:

After you click on the hyperlink then it will take you to a page that says the following:

(Please note this message will change after the final version of Silverlight 5 is released.)

Don’t worry about this prompt, just go ahead and click “Install for Windows” and you will now be able to run Silverlight 5 applications inside of a browser running in 64-bit mode. Pretty sweet stuff!

Power Awareness for Media Apps

Silverlight 5 comes with an improved power awareness feature. When you are watching a video in Silverlight 5, the screensaver will be disabled (for example, it will not kick in and distract you from your movie). It also allows the computer to sleep when the video is not playing. This is all accomplished with no additional code! You just have to be using Silverlight 5.

Conclusion

At this point, we have seen how you would use specify a default filename for SaveFileDialog, we looked at 64-bit browser support and power awareness for media applications. We have also discussed a few other features in Silverlight 5. In the next part of the series, I am going to take a look at a few productivity and performance features including : XAML Binding Debugging, Parser Performance Improvements and Multi-core JIT for improved start-up time. Again, thanks for reading and please come back for the next part.

To contact me directly please visit my blog at http://michaelcrump.net/ or through twitter at http://twitter.com/mbcrump.

10 Laps around Silverlight 5 (Part 6 of 10)

editorial@silverlightshow.net (Michael Crump ) — Tue, 15 Nov 2011 08:15:00 GMT

To contact me directly please visit my blog at http://michaelcrump.net/ or through twitter at http://twitter.com/mbcrump.

This article is Part 6 of the series “10 Laps around Silverlight 5.” If you have missed any other section then please see the Roadmap below.

To refresh your memory on what Silverlight is:

Microsoft Silverlight is an application framework for writing Rich Internet Applications.

More resources...

All SilverlightShow Ebooks

The run-time environment is available as a plug-in for most web browsers and works on a variety of operating systems including Windows, Mac and Linux.

To recap what we learned in the previous section:

We spend the entire “lap” discussing improvements in text in Silverlight 5.
We discussed Linked and Multi-Column Text and where it might be useful in your next Silverlight application.
We also looked at character spacing, open-type font. pixel snapped text and TextOptions.

In this article, I am going to discuss several new operating system integration features in Silverlight 5 including: P/Invoke, Multiple Windows and Unrestricted File System Access in Full Trust. Please review the Roadmap for the series before going any further.

The Roadmap for this Series

1) Introduction to SL5 – This post which provides a brief history of Silverlight and relevant links.

2) Binding- Ancestor Relative Source Binding and Implicit Data Templates.

3) Graphics –XNA 3D API and Improved Graphics Stack.

4) Media - Low-Latency Sound using XNA and Remote Control and Media Command (Keys) Support.

5) Text - Text Tracking and Leading, Linked and Multi-column Text, OpenType Support, Pixel Snapped Text and TextOptions.

6) Operating System Integration [This post] - Part 1 - P/Invoke, Multiple Windows and Unrestricted File System Access in Full Trust.

7) Operating System Integration Part 2 - Default Filename for SaveFileDialog, 64-bit browser support and Power Awareness.

8) Productivity and Performance - XAML Binding Debugging, Parser Performance Improvements and Multi-core JIT for improved start-up time.

9) Controls - Double and Triple click support, PivotViewer and ComboBox Type-Ahead.

10) Other items - In-Browser HTML, PostScript and Tasks for TPL.

P/Invoke or Platform Invocation

Before we dive into an example. Let’s first answer the question, What is it? Platform Invocation Services, commonly referred to as P/Invoke, is a feature of Common Language Infrastructure implementations, like Microsoft's Common Language Runtime, that enables managed code to call native code.

*Reference to Wiki

This feature is new to Silverlight 5 and we will take a look at how to use it in your own applications.

In order to create a new P/Invoke application in Silverlight 5, we will need to enable “Require elevated trust” in Silverlight 5. We can also use the functionality in-browser or out-of-browser. Let’s begin.

Fire up a new Silverlight 5 project and right click on our project and select Properties. Put a check in “Enable running application out of the browser” as shown below.

After you put a check in “Enable running application out of the browser”, go ahead and click the button. Now put a check in “Require elevated trust when running outside the browser”.

Switch back over to the MainPage.xaml and add in the following code:

<Grid x:Name="LayoutRoot" Background="White">

    <Button Height="23" HorizontalAlignment="Left" Margin="169,132,0,0" VerticalAlignment="Top" Width="75" x:Name="btnclick" Content="click" Click="click_Click" />

Grid>

This simply puts a button on our page that when the user clicks it the pc will make a beep sound.

Go ahead and add a new class to the project named PlatformInvokeTest.cs and add the following code.

using System;

using System.Runtime.InteropServices;

  

namespace PInvoke

{

    public class PlatformInvokeTest

    {   

        [DllImport("kernel32.dll")]

        public static extern bool Beep(int frequency, int duration);

 

     

        public static void PlaySound()

        {

            Random random = new Random();

            for (int i = 0; i < 50; i++)

            {

                Beep(random.Next(10000), 100);

            }

        }

  

    }

}

Let’s switch back over to the MainPage.xaml.cs and add the following code to our button event handler:

private void click_Click(object sender, RoutedEventArgs e)

{

    PlatformInvokeTest.PlaySound();

}

If we run the application now, we will hear our PC beep many times. There are many other thing you can do with P/Invoke such as Detecting if the user inserted a USK Key into their computer, opening the run dialog box and much much more! Very cool stuff!

Multiple Window Support

With Silverlight 5, we now have the ability to spawn multiple windows from an Out-of-Browser application with elevated trust with just a couple of lines of code.

A few things to note about Multiple Window Support though:

If the main window closes, then all spawned windows close.
You need to be running your application “Out-of-Browser” as well as in Elevated Trust mode.

If you followed the P/Invoke guide before then you will need to do the same thing for Multiple Window Support. That is, make this an out-of-browser application and add Elevated Trust.

After that is complete then go ahead and double click on your MainPage.xaml.cs file and add the following code:

public MainPage()

{

    InitializeComponent();

    Loaded += new RoutedEventHandler(MainPage_Loaded);

}

  

void MainPage_Loaded(object sender, RoutedEventArgs e)

{

    for (int i = 0; i < 5; i++)

    {

        new Window()

           {

               Height = 400,

               Width = 600,

               Top = 24,

               Left = 30,

               Title = "Silverlight Show New Window",

               Content = new Button() { Content = "Can be any Framework Element" },

               Visibility = Visibility.Visible

           };

    }

   

}

This application will spawn 5 windows when you run it. Below is a sample screenshot from the application with 2 additional windows showing. The other windows are closed for demonstration purposes.

Unrestricted File System Access in Full Trust

Have you ever wanted to write a file anywhere on a users computer in earlier versions of Silverlight but found out that you couldn’t? Well in Silverlight 5 you can.

Just like the earlier samples make this an out-of-browser application and add Elevated Trust. (See the P/Invoke demo at the beginning of this article for a quick-how to.)

Switch over to the MainPage.xaml and add in the following code:

<Grid x:Name="LayoutRoot" Background="White">

    <Button Height="23" HorizontalAlignment="Left" Margin="169,132,0,0" VerticalAlignment="Top" Width="75" x:Name="btnclick" Content="click" Click="click_Click" />

Grid>

Let’s switch back over to the MainPage.xaml.cs and add the following code to our button event handler:

private void click_Click(object sender, RoutedEventArgs e)

{

    // Create a Directory on the Root of C

    var tempDirectory = @"c:\michaelcrump";

    if (!Directory.Exists(tempDirectory))

    {

        Directory.CreateDirectory(tempDirectory);

    }

  

    // Give it a FileName

    var filename = string.Format("slshowrocks.txt");

    var fullPath = System.IO.Path.Combine(tempDirectory, filename);

  

    // Write Something in the File!

    using (FileStream fs = File.Create(fullPath))

    using (StreamWriter sr = new StreamWriter(fs, Encoding.UTF8))

    {

        sr.WriteLine("Hello World");

    }

}

This will create a directory on our C:\ called michaelcrump. Then it will create a file named “slshowrocks.txt” and give it some content. If you run the application and click on the button then you should have the new folder/file created on your root hard disk.

If Visual Studio 2010 is complaining of any missing namespaces then just make sure you add the following:

using System.IO;

using System.Text;

Very easy to accomplish and it is not limited to writing files. You can also read files from anywhere on the hard disk! In the next part of this series, we will look at letting the user specify the location of the saved file.

Conclusion

At this point, we have seen how you would use P/Invoke, Multiple Windows and Unrestricted File System Access in Full Trust in your Silverlight 5 Applications. We have also discussed a few other features in Silverlight 5. In the next part of the series, I am going to take a look at more new operating system features including : Default Filename for SaveFileDialog, 64-bit browser support and Power Awareness. Again, thanks for reading and please come back for the next part.

To contact me directly please visit my blog at http://michaelcrump.net/ or through twitter at http://twitter.com/mbcrump.

10 Laps around Silverlight 5 (Part 5 of 10)

editorial@silverlightshow.net (Michael Crump ) — Tue, 08 Nov 2011 20:18:00 GMT

To contact me directly please visit my blog at http://michaelcrump.net/ or through twitter at http://twitter.com/mbcrump.

More resources...

All SilverlightShow Ebooks

This article is Part 5 of the series “10 Laps around Silverlight 5.” If you have missed any other section then please see the Roadmap below.

To refresh your memory on what Silverlight is:

Microsoft Silverlight is an application framework for writing Rich Internet Applications. The run-time environment is available as a plug-in for most web browsers and works on a variety of operating systems including Windows, Mac and Linux.

To recap what we learned in the previous section:

We discussed the new media features included with Silverlight 5.
We looked at using Low-Latency Sound with XNA SoundEffect and SoundEffectInstance classes.
We also learned how to use remote control and media command (keys) support.

In this article, I am going to discuss the new text improvements in Silverlight 5 including: Text Tracking and Leading, Linked and Multi-column Text, OpenType Support, Pixel Snapped Text and TextOptions. Please review the Roadmap for the series before going any further.

The Roadmap for this Series

1) Introduction to SL5 – This post which provides a brief history of Silverlight and relevant links.

2) Binding- Ancestor Relative Source Binding and Implicit Data Templates.

3) Graphics –XNA 3D API and Improved Graphics Stack.

4) Media - Low-Latency Sound using XNA and Remote Control and Media Command (Keys) Support.

5) Text [This post] - Text Tracking and Leading, Linked and Multi-column Text, OpenType Support, Pixel Snapped Text and TextOptions.

6) Operating System Integration Part 1 - P/Invoke, Multiple Windows and Unrestricted File System Access in Full Trust.

7) Operating System Integration Part 2 - Default Filename for SaveFileDialog, 64-bit browser support and Power Awareness.

8) Productivity and Performance - XAML Binding Debugging, Parser Performance Improvements and Multi-core JIT for improved start-up time.

9) Controls - Double and Triple click support, PivotViewer and ComboBox Type-Ahead.

10) Other items - In-Browser HTML, PostScript and Tasks for TPL.

Linked and Multi-Column Text

We will use an example that I’ve demonstrated in the past that many have found helpful. The Linked and Multi-Column Text feature enables the text of a RichTextBlock control to overflow from one into the next. Multiple RichTextBlockOverflows can be chained together to spread text across a layout. Let’s go ahead and take a look at a screenshot of a RichTextBlock with a RichTextBlockOverflow working together.

As you can see from this screenshot, we had a RichTextBlock in the upper left and its content overflowed onto the RichTextBlockOverFlow #1, #2 and #3. You can think of this as something that is similar to a newspaper article. As the browser expands or contracts the content fills the available area.

Let’s check out the code that made it happen:

<Grid x:Name="LayoutRoot"

        Background="White">

      <Grid.ColumnDefinitions>

          <ColumnDefinition Width="0.415*" />

          <ColumnDefinition Width="0.168*" />

          <ColumnDefinition Width="0.418*" />

      Grid.ColumnDefinitions>

      <Grid.RowDefinitions>

          <RowDefinition Height="0.373*" />

          <RowDefinition Height="0.143*" />

          <RowDefinition Height="0.483*" />

      Grid.RowDefinitions>

      <Rectangle Fill="Blue"

                 Margin="0,1"

                 Stroke="Black"

                 Grid.Row="1"

                 Grid.ColumnSpan="3" />

      <Rectangle Fill="Blue"

                 Margin="-1,0,1,0"

                 Stroke="Black"

                 Grid.RowSpan="3"

                 Grid.Column="1" />

      <RichTextBlock x:Name="rtb1"

                   Margin="0,0,5,3"                     

                   OverflowContentTarget="{Binding ElementName=rtb2}"

                     

                 >

          <Paragraph>

              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum tincidunt vestibulum. Quisque accumsan nibh nisl. Aenean eget leo enim. Aenean tincidunt nulla nec elit vestibulum sit amet posuere arcu laoreet. Curabitur diam nisi, ullamcorper vel consectetur sed, volutpat nec orci. Aenean eu purus sit amet diam sollicitudin vulputate sed in sapien. Sed pulvinar viverra sapien, a elementum arcu fringilla sed. Proin tincidunt iaculis fringilla. Proin semper venenatis nisi vel hendrerit. Etiam elementum bibendum dignissim. Integer tincidunt pharetra est, ut porttitor urna dictum at. Nulla nisi velit, consequat accumsan tincidunt id, congue vitae lacus. Donec convallis est ligula. Suspendisse fermentum pharetra cursus. Maecenas a gravida nunc. In ante lacus, sollicitudin blandit adipiscing vel, mollis sed ipsum. Nullam a est nec tortor porttitor consectetur. Aliquam consequat pharetra rutrum. Pellentesque viverra dapibus scelerisque. Praesent ullamcorper, sapien vitae facilisis varius, nibh justo luctus odio, faucibus viverra risus metus non lacus. Sed porta, magna in tincidunt fringilla, elit elit sollicitudin sem, et ornare mi nulla hendrerit augue. Vestibulum vitae mollis dolor.

              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum tincidunt vestibulum. Quisque accumsan nibh nisl. Aenean eget leo enim. Aenean tincidunt nulla nec elit vestibulum sit amet posuere arcu laoreet. Curabitur diam nisi, ullamcorper vel consectetur sed, volutpat nec orci. Aenean eu purus sit amet diam sollicitudin vulputate sed in sapien. Sed pulvinar viverra sapien, a elementum arcu fringilla sed. Proin tincidunt iaculis fringilla. Proin semper venenatis nisi vel hendrerit. Etiam elementum bibendum dignissim. Integer tincidunt pharetra est, ut porttitor urna dictum at. Nulla nisi velit, consequat accumsan tincidunt id, congue vitae lacus. Donec convallis est ligula. Suspendisse fermentum pharetra cursus. Maecenas a gravida nunc. In ante lacus, sollicitudin blandit adipiscing vel, mollis sed ipsum. Nullam a est nec tortor porttitor consectetur. Aliquam consequat pharetra rutrum. Pellentesque viverra dapibus scelerisque. Praesent ullamcorper, sapien vitae facilisis varius, nibh justo luctus odio, faucibus viverra risus metus non lacus. Sed porta, magna in tincidunt fringilla, elit elit sollicitudin sem, et ornare mi nulla hendrerit augue. Vestibulum vitae mollis dolor.

              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum tincidunt vestibulum. Quisque accumsan nibh nisl. Aenean eget leo enim. Aenean tincidunt nulla nec elit vestibulum sit amet posuere arcu laoreet. Curabitur diam nisi, ullamcorper vel consectetur sed, volutpat nec orci. Aenean eu purus sit amet diam sollicitudin vulputate sed in sapien. Sed pulvinar viverra sapien, a elementum arcu fringilla sed. Proin tincidunt iaculis fringilla. Proin semper venenatis nisi vel hendrerit. Etiam elementum bibendum dignissim. Integer tincidunt pharetra est, ut porttitor urna dictum at. Nulla nisi velit, consequat accumsan tincidunt id, congue vitae lacus. Donec convallis est ligula. Suspendisse fermentum pharetra cursus. Maecenas a gravida nunc. In ante lacus, sollicitudin blandit adipiscing vel, mollis sed ipsum. Nullam a est nec tortor porttitor consectetur. Aliquam consequat pharetra rutrum. Pellentesque viverra dapibus scelerisque. Praesent ullamcorper, sapien vitae facilisis varius, nibh justo luctus odio, faucibus viverra risus metus non lacus. Sed porta, magna in tincidunt fringilla, elit elit sollicitudin sem, et ornare mi nulla hendrerit augue. Vestibulum vitae mollis dolor.

              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum tincidunt vestibulum. Quisque accumsan nibh nisl. Aenean eget leo enim. Aenean tincidunt nulla nec elit vestibulum sit amet posuere arcu laoreet. Curabitur diam nisi, ullamcorper vel consectetur sed, volutpat nec orci. Aenean eu purus sit amet diam sollicitudin vulputate sed in sapien. Sed pulvinar viverra sapien, a elementum arcu fringilla sed. Proin tincidunt iaculis fringilla. Proin semper venenatis nisi vel hendrerit. Etiam elementum bibendum dignissim. Integer tincidunt pharetra est, ut porttitor urna dictum at. Nulla nisi velit, consequat accumsan tincidunt id, congue vitae lacus. Donec convallis est ligula. Suspendisse fermentum pharetra cursus. Maecenas a gravida nunc. In ante lacus, sollicitudin blandit adipiscing vel, mollis sed ipsum. Nullam a est nec tortor porttitor consectetur. Aliquam consequat pharetra rutrum. Pellentesque viverra dapibus scelerisque. Praesent ullamcorper, sapien vitae facilisis varius, nibh justo luctus odio, faucibus viverra risus metus non lacus. Sed porta, magna in tincidunt fringilla, elit elit sollicitudin sem, et ornare mi nulla hendrerit augue. Vestibulum vitae mollis dolor.

              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum tincidunt vestibulum. Quisque accumsan nibh nisl. Aenean eget leo enim. Aenean tincidunt nulla nec elit vestibulum sit amet posuere arcu laoreet. Curabitur diam nisi, ullamcorper vel consectetur sed, volutpat nec orci. Aenean eu purus sit amet diam sollicitudin vulputate sed in sapien. Sed pulvinar viverra sapien, a elementum arcu fringilla sed. Proin tincidunt iaculis fringilla. Proin semper venenatis nisi vel hendrerit. Etiam elementum bibendum dignissim. Integer tincidunt pharetra est, ut porttitor urna dictum at. Nulla nisi velit, consequat accumsan tincidunt id, congue vitae lacus. Donec convallis est ligula. Suspendisse fermentum pharetra cursus. Maecenas a gravida nunc. In ante lacus, sollicitudin blandit adipiscing vel, mollis sed ipsum. Nullam a est nec tortor porttitor consectetur. Aliquam consequat pharetra rutrum. Pellentesque viverra dapibus scelerisque. Praesent ullamcorper, sapien vitae facilisis varius, nibh justo luctus odio, faucibus viverra risus metus non lacus. Sed porta, magna in tincidunt fringilla, elit elit sollicitudin sem, et ornare mi nulla hendrerit augue. Vestibulum vitae mollis dolor.

  

          Paragraph>

      RichTextBlock>

      <RichTextBlockOverflow x:Name="rtb2"

                           Grid.Row="2"

                           OverflowContentTarget="{Binding ElementName=rtb3}"

                           

                           />

      <RichTextBlockOverflow x:Name="rtb3"

                           Grid.Column="2"

                           OverflowContentTarget="{Binding ElementName=rtb4}"

                           />

  

      <RichTextBlockOverflow x:Name="rtb4"

                           Grid.Column="2"

                           Grid.Row="2"

                           />

  

  

  Grid>

The key thing to remember here is that a RichTextBlock contains OverflowContentTarget which will allow you to bind to a special control called RichTextBlockOverflow.

NOTE: Post-beta, Microsoft changed this to use the non-editable RichTextBlock instead of RichTextBox. So a word of warning, many post-beta demos of this functionality on the web will no longer work. Good thing you are reading this guide, right? =)

Character Spacing

The TextBox and TextBlock controls provides a way to control the spacing of letters inside the text very easily. Let’s go ahead and take a look at a screenshot of the various character spacing inside of a TextBlock.

Let’s look at the code:

<Grid x:Name="LayoutRoot" >

      <StackPanel>

          <TextBlock CharacterSpacing="1000" FontSize="14"

                     Text="The quick brown fox jumps over the lazy dog" />

          <TextBlock CharacterSpacing="500" FontSize="14"

                     Text="The quick brown fox jumps over the lazy dog" />

          <TextBlock CharacterSpacing="250" FontSize="14"

                     Text="The quick brown fox jumps over the lazy dog" />

          <TextBlock CharacterSpacing="100" FontSize="14"

                     Text="The quick brown fox jumps over the lazy dog" />

          <TextBlock CharacterSpacing="-100" FontSize="14"

                     Text="The quick brown fox jumps over the lazy dog" />

      StackPanel>

  Grid>

As you can see, we just set the CharacterSpacing property of the TextBlock control. Please note that you may use a negative number to “squish” text together.

Open-Type Font

Silverlight 5 provides many new options for the Typography class inside of a TextBlock. They have so many improvements that the best way to see everything is to explore the class. Let’s look at two new features:

ContextualAlternates - Gets or sets a value that determines whether custom glyph forms can be used based upon the context of the text being rendered.
StylisticSets - Gets or sets a value that indicates whether a stylistic set of a font form is enabled. (20 StylisticSets are available)

Let’s look at a sample that uses ContextualAlternates and StylisticSets.

The code looks like the following:

<TextBlock FontSize="80"

           FontFamily="Gabriola" 

           Text="Michael Crump"                   

           Typography.ContextualAlternates="True"

           Typography.StylisticSet5="True" />

Pixel Snapped Text and TextOptions

Silverlight 5 provides many new options for the TextOptions property inside of a TextBlock.

TextFormattingMode – Gets the TextFormattingMode for the element
TextHintingMode – Gets or sets a value that indicates whether text rendering is optimized for readability or animation.
TextRenderingMode - Sets the TextRenderingMode for the element. 4 options are available: Aliased, Auto, ClearType and Grayscale.

Let’s look at a sample that uses all of them together (Display, Fixed and Aliased). It may be hard to see in this demo, so try this one in your own application.

The code looks like the following:

<TextBlock FontSize="30" Text="The quick brown fox jumps over the lazy dog"

               TextOptions.TextFormattingMode="Display"

               TextOptions.TextHintingMode="Fixed"

               TextOptions.TextRenderingMode="Aliased" />

Conclusion

At this point, we have seen how you would use Text Tracking and Leading, Linked and Multi-column Text, OpenType Support, Pixel Snapped Text and TextOptions in your Silverlight 5 Applications. We have also discussed a few other features in Silverlight 5. In the next part of the series, I am going to take a look at the new operating system integrations including : P/Invoke, Multiple Windows and Unrestricted File System Access in Full Trust. Again, thanks for reading and please come back for the next part.

To contact me directly please visit my blog at http://michaelcrump.net/ or through twitter at http://twitter.com/mbcrump.

Telerik XAML Q3'11 Beta - Walkthrough (Part 2 of 3)

editorial@silverlightshow.net (Michael Crump ) — Wed, 02 Nov 2011 17:24:00 GMT

This is part 2 from an article on Telerik XAML Q3'11 Beta, authored by Michael Crump and Evan Hutnick. Part 1 | Part 3

SilverlightShow will occasionally publish content related to 3rd party Silverlight and Windows Phone products, following interest and article topic requests received through our surveys and feedback email (editorial at silverlightshow dot net).

Telerik XAML Q3’11 Beta

Part 2: RadVirtualizingWrapPanel

Here begins the second of three parts, which comprise Telerik XAML Q3’11 Beta—A Walkthrough. In case you missed it, with Telerik’s upcoming release in November you’ll have access to the official versions of RadBarCode, RadVirtualizingWrapPanel, and RadChartView—and a few sure-to-please extras.

More resources...

All SilverlightShow Ebooks

To make the most of these articles, download the beta before getting started.

For an introductory overview you can check out the official beta announcement on our Silverlight Team blog.

Introducing RadVirtualizingWrapPanel

RadVirtualizingWrapPanel boosts the performance of your ListBox/ListView when binding to a large amount of data. The control generates only the visible items and positions them in sequential order from left to right and top to bottom, breaking the content to the next line at the edge of its containing box.

You can check out the VisualizingWrapPanel demos here.

Let’s Get Buildin’

We are going to build a sample project that uses Telerik’s RadVirtualizingWrapPanel in Silverlight 4.

Open Visual Studio 2010, select a new Silverlight Project, and give it any name that you want. In this example, I have given it the name of RadVirtualizingWrapPanelSample.

We are going to need to add one reference to our project in order to use Telerik’s VirtualizingWrapPanel.

Telerik.Windows.Controls

Make sure that you select 2011.3.1020.1040 as the version number to ensure that you are using the Q3 Beta release.

With the reference added, we now need to add the Telerik XAML Namespace to our MainPage.xaml file. Simply double-click the MainPage.xaml file and add the following code snippet:

 1: xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

Now, we must add a Listbox to our grid and define an ItemTemplate as shown below:

<Grid x:Name="LayoutRoot" Background="White">

     <ListBox Name="listBox1">

          <ListBox.ItemTemplate>

               <DataTemplate>

                  <StackPanel Orientation="Vertical">

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

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

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

                     <HyperlinkButton Content="Listen to this Episode" NavigateUri="{Binding Link}" TargetName="_blank" />

                  StackPanel>

               DataTemplate>

          ListBox.ItemTemplate>

     ListBox>

Grid>

Let’s go ahead and add the following code to our MainPage.xaml.cs: (This will add 40,000 items to our ListBox)

public class Podcast

{

    public string Description { get; set; }

    public DateTime ReleaseDate { get; set; }

    public Uri Link { get; set; }

    public string Author { get; set; }

}

  

public partial class MainPage : UserControl

{

  

    public List _samplePodcastList;

  

    public MainPage()

    {

        InitializeComponent();

        Loaded += new RoutedEventHandler(MainPage_Loaded);

    }

  

    void MainPage_Loaded(object sender, RoutedEventArgs e)

    {

        _samplePodcastList = new List();

  

        for (int i = 0; i < 40000; i++)

        {

            Podcast PD = new Podcast();

  

            PD.Description = string.Format("Description{0} ", i.ToString());

            PD.ReleaseDate = DateTime.Now.AddDays(-10000).AddHours(i);

            PD.Link = new Uri(string.Format("http://www.podcast.com/{0}", i.ToString()));

            PD.Author = string.Format("FirstName {0}. LastName {1}", i.ToString(), i.ToString());

            

  

            _samplePodcastList.Add(PD);

        }

  

        listBox1.ItemsSource = _samplePodcastList;

    }

}

At this point, if we run our application, we should get the following:

This result, however, is not exactly what we want. It is not a WrapPanel and it is very slow navigating the 40,000 items bound to it.

With those 40,000 items in mind, let’s head back into our MainPage.xaml and add the Telerik VirtualizingWrapPanel inside our ListBox’s ItemsPanel, using the following code snippet:

<ListBox.ItemsPanel>

       <ItemsPanelTemplate>

             <telerik:VirtualizingWrapPanel ItemWidth="250" />

       ItemsPanelTemplate>

ListBox.ItemsPanel>

Now, if we run the application, we will see something much better:

We now have our items in the ListBox using a WrapPanel and it is very easy to scroll hundreds of thousands of records.

Meanwhile, our completed MainPage.xaml file should look like the following:

<UserControl x:Class="RadVirtualizingWrapPanelSample.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:telerik="http://schemas.telerik.com/2008/xaml/presentation"

    mc:Ignorable="d"

    d:DesignHeight="300" d:DesignWidth="400">

  

    <Grid x:Name="LayoutRoot" Background="White">

        <ListBox Name="listBox1">

            <ListBox.ItemTemplate>

                <DataTemplate>

                    <StackPanel Orientation="Vertical">

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

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

                        <TextBlock Name="txtReleaseDate" Text="{Binding ReleaseDate}" />

                        <HyperlinkButton Content="Listen to this Episode" NavigateUri="{Binding Link}" TargetName="_blank" />

                    StackPanel>

                DataTemplate>

            ListBox.ItemTemplate>

  

            <ListBox.ItemsPanel>

                <ItemsPanelTemplate>

                    <telerik:VirtualizingWrapPanel ItemWidth="250" />

                ItemsPanelTemplate>

            ListBox.ItemsPanel>

        ListBox>

    Grid>

UserControl>

Thanks for Reading

We hope this article has you convinced at how easy it is to get started with Telerik’s RadVirtualizingWrapPanel. Don’t forget to check out parts one and three of Telerik XAML Q3’11 Beta—A Walkthrough: each discussing RadBarCode and ChartView, respectively.

If you enjoyed this article, you can find similar postings by XAML Evangelist, Michael Crump, on his Telerik blog.

Telerik XAML Q3'11 Beta - Walkthrough (Part 1 of 3)

editorial@silverlightshow.net (Michael Crump ) — Wed, 02 Nov 2011 16:30:00 GMT

This is part 1 from an article on Telerik XAML Q3'11 Beta, authored by Michael Crump and Evan Hutnick. Part 2 | Part 3

SilverlightShow will occasionally publish content related to 3rd party Silverlight and Windows Phone products, following interest and article topic requests received through our surveys and feedback email (editorial at silverlightshow dot net).

Telerik XAML Q3’11 Beta

Come mid-November Telerik will be releasing the official versions of RadBarCode, RadVirtualizingWrapPanel, and RadChartView—and a couple surprises to boot. ;-) In this 3-part article, Telerik XAML Q3’11 Beta—A Walkthrough, we give you a comprehensive technical look at each of these 3 new controls—make sure to check them all out!

More resources...

All SilverlightShow Ebooks

We also recommend that you download the beta so you can make the most of what you’re reading.

For an introductory overview you can check out the official beta announcement on our Silverlight Team blog.

Introducing RadBarCode

RadBarcode allows you to accurately track your physical products with native high-quality vector-based images that follow the most popular and widely-adopted barcode symbologies, including:

Alpha-numeric Codes (variable length): Code 128, Code 128A, Code 128B, Code 128C and Code 39

Numeric Codes (fixed length): Code EAN-13, Code EAN-8, Code UPC-A, PostNet and Code UPC-E

You can check out the BarCode demos here.

Getting Started with 3 Commonly Used Barcodes

We are going to build a sample project that uses Telerik’s RadBarCode in Silverlight 4— walking you through the use of Code 128, Code EAN-13, and UPC-A.

Code 128

Code 128 is a high-density barcode symbology that is used for alpha-numeric or numeric-only barcodes. It is also commonly used for labels in inventory and industrial applications.

So, Open Visual Studio 2010 and select a new Silverlight Project, then, give it any name that you want. In this example, I have given it the name of RadBarCodeSample.

We are going to need to add two references to our project in order to use any of the 9 barcode symbologies.

Telerik.Windows.Controls.DataVisualization
Telerik.Windows.Controls

Make sure that you select 2011.3.1020.1040 as the version number to ensure that you are using the Q3 Beta release.

Now, let’s go ahead and add the Telerik XAML Namespace to our MainPage.xaml file. Simply double-click the MainPage.xaml file and add the following code snippet:

 1: xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

Once this is complete, we can now add our Barcode inside the Grid tag as shown below:

 1: <telerik:RadBarcode128 Height="120" Text="CODE 128" ShowChecksum="False" />

Our completed MainPage.xaml file should then look like the following:

<UserControl x:Class="RadBarCodeSample.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:telerik="http://schemas.telerik.com/2008/xaml/presentation"

   mc:Ignorable="d"

   d:DesignHeight="300" d:DesignWidth="400">

  

<Grid x:Name="LayoutRoot" Background="White">

      <telerik:RadBarcode128 Height="120" Text="CODE 128" ShowChecksum="False" />

Grid>

UserControl>

Inside the designer our Barcode is now displayed as such:

If we wanted to show the Checksum then we would simply change the property ShowChecksum to True.

 1: <telerik:RadBarcode128 Height="120" Text="CODE 128" ShowChecksum="True" />

This will give us the barcode with a proper checksum—as highlighted in yellow below:

Nice work.

Code EAN-13

Let’s now take a look at Code EAN-13—barcodes, which are used worldwide for marking products often sold at retail point-of-sale. It is a 13-digit (12 data and 1 check) standard which is a superset of the original 12-digit Universal Product Code (UPC) system developed in the United States.

Now, head back to the MainPage.xaml file and make sure the following namespace exists:

 1: xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

Once this is complete, we can add our Barcode inside the Grid tag as shown below:

 1: <telerik:RadBarcodeEAN13 Height="120" Width="425" Text="590123412345" ShowChecksum="True" />

Please note that in this sample, we included the Checksum value.

Pretty cool, huh?

UPC-A

Finally, check out another commonly used barcode called UPC-A—a 13-digit (12 data and 1 check) standard that is widely used in North America, and in countries including the UK, Australia, and New Zealand for tracking trade items in stores.

Again, make sure your Telerik namespace exists in XAML, and then add the following code snippet:

 1: <telerik:RadBarcodeUPCA Height="120" Width="425" Text="590123412345" ShowChecksum="True" />

Inside the designer, our barcode now looks like the following:

And there you have it, Code 128, Code EAN-13, and UPC-A. With 6 more barcode symboligies included in the beta, we hope you’ll get the chance to try them all out and let us know what you think.

But wait, there’s more: you can easily switch between barcodes!

Telerik has made it very easy to switch between barcodes without adding additional references or namespaces. Simply hit “Ctrl-Space” inside of the Telerik reference to see a complete list of available barcodes, as shown below:

Thanks for Reading

We hope this walkthrough has you convinced at how easy it is to get started with Telerik’s RadBarCode. Don’t forget to check out parts two and three of Telerik XAML Q3’11 Beta: RadVirtualizingWrapPanel and RadChartView, respectively.

If you enjoyed this article, you can find similar postings by XAML Evangelist, Michael Crump, on his Telerik blog.

10 Laps around Silverlight 5 (Part 4 of 10)

editorial@silverlightshow.net (Michael Crump ) — Tue, 01 Nov 2011 17:58:00 GMT

To contact me directly please visit my blog at http://michaelcrump.net/ or through twitter at http://twitter.com/mbcrump.

More resources...

All SilverlightShow Ebooks

This article is Part 4 of the series “10 Laps around Silverlight 5.” If you have missed any other section then please see the Roadmap below.

To refresh your memory on what Silverlight is:

To recap what we learned in the previous section:

We briefly discussed what XNA is.
We looked at the templates available for new XNA Silverlight 5 projects.
We dissected the 3D XNA Template to learn more about it’s makeup.
Pointed out where other sample projects for XNA were located on your hard disk.

In this article, I am going to discuss media features such as low-latency sound using features right out of XNA. We will also discuss Remote Control and Media Command (Keys) support using Silverlight 5. Please review the Roadmap for the series before going any further.

The Roadmap for this Series

1) Introduction to SL5 – This post which provides a brief history of Silverlight and relevant links.

2) Binding- Ancestor Relative Source Binding and Implicit Data Templates.

3) Graphics –XNA 3D API and Improved Graphics Stack.

4) Media [This Post] - Low-Latency Sound using XNA and Remote Control and Media Command (Keys) Support.

5) Text - Text Tracking and Leading, Linked and Multi-column Text, OpenType Support, Pixel Snapped Text and TextOptions.

6) Operating System Integration Part 1 - P/Invoke, Multiple Windows and Unrestricted File System Access in Full Trust.

7) Operating System Integration Part 2 - Default Filename for SaveFileDialog, 64-bit browser support and Power Awareness.

8) Productivity and Performance - XAML Binding Debugging, Parser Performance Improvements and Multi-core JIT for improved start-up time.

9) Controls - Double and Triple click support, PivotViewer and ComboBox Type-Ahead.

10) Other items - In-Browser HTML, PostScript and Tasks for TPL.

Let’s Begin with Low-Latency Sound using XNA SoundEffect

A new addition to Silverlight 5 is the ability to play low-latency sounds using the XNA SoundEffect class. This is very useful for kiosk or even games that need to play a certain sound over and over. In Silverlight 5, this is much easier than before (where people used various MediaElement hacks). You can now simply borrow the SoundEffect / SoundEffectInstance class from XNA.

Start with a new Silverlight 5 Project

Launch Visual Studio 2010 and select File –> New Project. Then select Silverlight –> Silverlight Application –> Give it a name and hit OK.

On the New Silverlight Application Screen, you will see under “Options” that you may select which version of Silverlight that you want to use. We will select Silverlight 5 for this option. If you don’t see Silverlight 5 as an option then follow the guide here.

The first thing you are going to want to do is to find a .wav file on the net that is PCM-encoded. They are very easy to find with a quick Google search. I am not going to include one for copyright reasons.

Now, right-click your Silverlight 5 project and select “Add”, then “Existing Item.” You can also easily access this screen by hitting “Shift-Alt-A” together. Navigate to wherever you downloaded the .wav file and select the file.

At this point, make sure the .wav file has a build action set to “Content”, as shown below.

Once this is complete, we will need to make a minor adjustment to our MainPage.xaml file to include a button to play the file for this demo.

<Grid x:Name="LayoutRoot" Background="White">

       <Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="0,277,0,0" Name="btnPlaySound" VerticalAlignment="Top" Width="75" Click="btnPlaySound_Click" />

Grid>

The only thing that we added to our MainPage.xaml file was a button inside of the Grid that has an event handler when the user clicks the button.

We can navigate over to our MainPage.xaml.cs file and add the following code snippet:

private void btnPlaySound_Click(object sender, RoutedEventArgs e)

{

    var soundStream =

            Application.GetResourceStream(

                new Uri("stereol.wav", UriKind.RelativeOrAbsolute));

  

    var effect = SoundEffect.FromStream(soundStream.Stream);

  

    SoundEffectInstance engineInstance = effect.CreateInstance();

  

    engineInstance.IsLooped = true;

    engineInstance.Pitch = -1.0f;

    engineInstance.Volume = 0.75f;

  

    engineInstance.Play();

}

In this code snippet, we are using several new features. Let’s examine the code snippet line by line:

Lines 3-5 creates our resource stream from the wav file that added earlier.
Lines 7-9 is initializing the SoundEffectInstance class that is going to perform special effects for the .wav file.
Lines 11-13 is creating a looped wav file that sets the pitch and the volume.
Lines 15 simply plays the files.

Don’t forget to add the proper namespace and reference to your project.

 1: using Microsoft.Xna.Framework.Audio;

If you load the application now, you will hear your .wav file being played over and over again. The pitch and volume has also been adjusted. Easy enough!

Let’s move onto Remote Control and media keys support.

Remote Control and Media Command (Keys) Support

One of the new improvements in Silverlight 5 is the ability to support Remote Control and Media Commands from various hardware manufactures. Below is a sample keyboard and remote control that has buttons for features such as (fast forward, stop, play, rewind, etc). Now we are able to make use of those buttons in Silverlight 5 with a few lines of code.

Let’s get started.

Launch Visual Studio 2010 and select File –> New Project. Then select Silverlight –> Silverlight Application –> Give it a name and hit OK.

The first thing you are going to want to do is to find a .wmv file that you can use for this application. I decided to use the wildlife.wmv file available on every Windows 7 PC. Just like before, I am not going to include it due to copyright reasons.

Now, right-click your Silverlight 5 project and select “Add”, then “Existing Item.” You can also easily access this screen by hitting “Shift-Alt-A” together. Navigate to wherever you downloaded the .wmv file and select the file.

At this point, make sure the .wmv file has a build action set to “Content”, as shown below.

Once this is complete, we will need to make a few minor adjustment to our MainPage.xaml file to play a video.

<Grid x:Name="LayoutRoot" Background="White">

       <MediaElement x:Name="videoPlayer"

                 Source="/Wildlife.wmv" />

       

       <TextBlock x:Name="txtMediaKey" Foreground="Red" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="5" FontSize="20" />

  

       <Button x:Name="FullScreen" 

           HorizontalAlignment="Left" VerticalAlignment="Bottom"

           Content="Go Full Screen" Margin="5" Click="FullScreen_Click" />

Grid>

We added the following items to our MainPage.xaml file:

MediaElement control – This will play the video and give us the ability to stop/start/pause the video using the Media Controls on our keyboard/remote control.
TextBlock control – To display which MediaCommand code is being executed. (Excellent for debugging)
Button control – To toggle between FullScreen mode.

We can navigate over to our MainPage.xaml.cs file and add the following code snippet:

public MainPage()

{

    InitializeComponent();

    this.MediaCommand += new MediaCommandEventHandler(MainPage_MediaCommand);

}

  

private void MainPage_MediaCommand(object sender, MediaCommandEventArgs e)

{

    

    txtMediaKey.Text = e.MediaCommand.ToString();

  

    switch (e.MediaCommand)

    {

        case System.Windows.Media.MediaCommand.Play:

            videoPlayer.Play();

            return;

        case System.Windows.Media.MediaCommand.Pause:

            videoPlayer.Pause();

            return;

        case System.Windows.Media.MediaCommand.Stop:

            videoPlayer.Stop();

            return;

        case System.Windows.Media.MediaCommand.TogglePlayPause:

            if (videoPlayer.CurrentState == MediaElementState.Paused ||

              videoPlayer.CurrentState == MediaElementState.Stopped)

                videoPlayer.Play();

            else if (videoPlayer.CurrentState == MediaElementState.Playing)

                if (videoPlayer.CanPause)

                    videoPlayer.Pause();

            return;

        case System.Windows.Media.MediaCommand.IncreaseVolume:

            videoPlayer.Volume += 5;

            return;

        case System.Windows.Media.MediaCommand.DecreaseVolume:

            videoPlayer.Volume -= 5;

            return;

        case System.Windows.Media.MediaCommand.ChannelUp:

            // Channel up

            return;

        case System.Windows.Media.MediaCommand.ChannelDown:

            // Channel down

            return;

        default:

            return;

    }

}

  

private void FullScreen_Click(object sender, RoutedEventArgs e)

{

    Application.Current.Host.Content.IsFullScreen = !Application.Current.Host.Content.IsFullScreen;

}

Let’s examine the code snippet line by line:

Line 4 creates our MediaCommand event handler. This is going to hook up to our media commands case statement.
Line 10 will simply display which MediaCommand the user has pressed into a TextBlock on the right hand side of the screen. This is useful for debugging applications that use the Media Features in Silverlight 5.
Lines 12-44 is our switch statement that will trigger the respective action on the MediaElement control.
Lines 48-51 will simply check to see if the screen is in FullScreen mode and toggle it accordingly.

Note: I didn’t list all of the MediaCommand enums that are available. You can review a complete list here.

If we run the application our video starts playing:

If we hit the “Play/Pause” media button on our keyboard (If your hardware supports it) then you will see the video is now paused and the word “TogglePlayPause” is located in the bottom right hand corner of our screen.

If you hit other media keys then the MediaElement will respond accordingly. You can even try out your WMC remote control if you have one available.

Please note: If you ever have an issue with the keys responding, then switch to FullScreen mode (by clicking the button) and try again. I’ve found several instances where the Silverlight application loses focus.

Notice how easy it was to add support for Media Keyboards and Remotes? Silverlight is already known for having a excellent media player and this just enhances it even more!

Conclusion

At this point, we have seen how you would use Low-Latency Sound using XNA and Remote Control and Media Command (Keys) Support in your Silverlight 5 Applications. We have also discussed a few other features in Silverlight 5. In the next part of the series, I am going to take a look at the new text improvements in Silverlight 5 including: Text Tracking and Leading, Linked and Multi-column Text, OpenType Support, Pixel Snapped Text and TextOptions. Again, thanks for reading and please come back for the next part.

To contact me directly please visit my blog at http://michaelcrump.net/ or through twitter at http://twitter.com/mbcrump.

10 Laps around Silverlight 5 (Part 3 of 10)

editorial@silverlightshow.net (Michael Crump ) — Tue, 25 Oct 2011 10:08:00 GMT

This article is Part 3 of the series “10 Laps around Silverlight 5.” If you have missed any other section then please see the Roadmap below.

To contact me directly please visit my blog at http://michaelcrump.net/ or through twitter at http://twitter.com/mbcrump.

More resources...

All SilverlightShow Ebooks

To refresh your memory on what Silverlight is:

Microsoft Silverlight is an application framework for writing Rich Internet Applications.

The run-time environment is available as a plug-in for most web browsers and works on a variety of operating systems including Windows, Mac and Linux.

To recap what we learned in the previous section:

We created a sample project for Ancestor Relative Source Binding and Implicit Data Templates.
We took a look at other binding features that are included with Silverlight 5 and provided a definition and relevant links.

In this article, we are going to take a look at the new XNA 3D API and Improved Graphics Stack. Please review the Roadmap for the series before going any further.

The Roadmap for this Series

1) Introduction to SL5 – This post which provides a brief history of Silverlight and relevant links.

2) Binding - Ancestor Relative Source Binding and Implicit Data Templates.

3) Graphics [This Post] –XNA 3D API and Improved Graphics Stack.

4) Media - Low-Latency Sound using XNA and Remote Control and Media Command (Keys) Support.

5) Text - Text Tracking and Leading, Linked and Multi-column Text, OpenType Support, Pixel Snapped Text and TextOptions.

6) Operating System Integration Part 1 - P/Invoke, Multiple Windows and Unrestricted File System Access in Full Trust.

7) Operating System Integration Part 2 - Default Filename for SaveFileDialog, 64-bit browser support and Power Awareness.

8) Productivity and Performance - XAML Binding Debugging, Parser Performance Improvements and Multi-core JIT for improved start-up time.

9) Controls - Double and Triple click support, PivotViewer and ComboBox Type-Ahead.

10) Other items - In-Browser HTML, PostScript and Tasks for TPL.

What exactly is XNA?

Before we get started diving into XNA, it’s important to understand what it is first:

Microsoft XNA is a set of tools with a managed runtime environment provided by Microsoft that facilitates video game development and management. XNA attempts to free game developers from writing "repetitive boilerplate code"^[1] and to bring different aspects of game production into a single system.^[2]^{Source: WikiPedia}

As you can see XNA got it’s roots for video game development. So you may be asking, “What is it doing in Silverlight 5?” Developers have realized for a long time that things like 3D Graphics inside of a web browser would be beneficial for many applications including : medical, transportation, government and of course gaming. They requested the feature using Microsoft’s UserVoice and Microsoft added it as part of Silverlight 5. Silverlight 5 implementation of 3D is the most powerful yet running inside of a web browser.

Now that we know a little more about XNA, let’s get started…

Let’s Begin with XNA Visual Studio Templates

Creating 3D application with Silverlight 5 requires some familiarity with concepts such as vertex shaders, sprites, DrawingSurface and others. If you are like me and have a majority of your experience developing Line of Business Applications then the road to XNA will be somewhat challenging. There is good news though as the latest Silverlight 5 Toolkit provides XNA Templates. Since I assume that most readers of this series is LOB developers, we will begin with a template. You may customize the template as needed later.

Let’s get Started…

Install the Silverlight 5 Toolkit and open Visual Studio 2010 and create a new Silverlight project. You should see the following new templates.

Select “Silverlight 3D Application” and give it any name that you want.

You will notice when the project loads up, we will have 4 projects inside our solution.

Here is a breakdown of the projects:

Silverlight3dApp – Our main Silverlight project. (Did you notice that using this template that you did not have to select which version of Silverlight to target?)
Silverlight3dAppContent – The content project attached with the main Silverlight Project. It contains Microsoft.Xna.Framework.Content.Pipeline references as well as CustomEffect.slfx. This extension stands for Silverlight Effect.
Silverlight3dWeb – Our standard website that host the 3D Application.
Silverlight3dWebContent – The content project attached with the web application. It also contains Microsoft.Xna.Framework.Content.Pipeline references.

Let’s run it.

Now that we have a brief understanding of what makes up the application, let’s go ahead and run it by hitting F5. We should see the following cube rotating inside of our browser.

But how exactly does this work?

Part 1: The Silverlight Application

References

The first thing that you may notice is the new references to XNA as shown below:

The files highlighted are not found in the standard Silverlight 5 application template. They are only added to a 3D Silverlight 5 application that uses XNA. They are necessary to perform complex calculations that things like 3D requires.

Cube.cs

If you open this class then you will see several regions such as Fields, Properties, Creation and Methods. The one that you want to pay special attention to is the “Creation” region.

Go ahead and double click on Cube.cs and expand it and you will see that it uses ContentManager to retrieve a slfx file from the content project. You can create your own silverlight effect files and add them to the ContentManager this way.

We won’t dive deep into these classes as we are just looking for a overview. I encourage you to review the other regions inside the Cube/Scene/VertexPositionColorNormal classes.

Scene.cs

The scene actually creates the ContentManager and registers for a size changed event to update the aspect ratio.

MainPage.xaml

The MainPage.xaml contains a new control called DrawingSurface. You can see that they only added a name and gave it an event named myDrawingSurface_Draw which we will look at in a moment.

<Grid x:Name="LayoutRoot" Background="White">

       

       <DrawingSurface x:Name="myDrawingSurface" Draw="myDrawingSurface_Draw"/>

       <TextBlock Text="My Silverlight 3D Application" VerticalAlignment="Top" 

                  HorizontalAlignment="Center" Margin="0,30" Foreground="White" 

                  FontSize="40"/>

Grid>

MainPage.xaml.cs

A fairly simple class as it checks to see if the GPU is on, then creates the scene which will render in the users web browser.

public partial class MainPage

    {

        Scene scene;

  

        public MainPage()

        {

            InitializeComponent();

        }

  

        private void myDrawingSurface_Draw(object sender, DrawEventArgs e)

        {

            // Render scene

            scene.Draw();

  

            // Let's go for another turn!

            e.InvalidateSurface();

        }

  

        private void UserControl_Loaded(object sender, RoutedEventArgs e)

        {

            // Check if GPU is on

            if (GraphicsDeviceManager.Current.RenderMode != RenderMode.Hardware)

            {

                MessageBox.Show("Please activate enableGPUAcceleration=true on your Silverlight plugin page.", "Warning", MessageBoxButton.OK);

            }

  

            // Create the scene

            scene = new Scene(myDrawingSurface);

        }

    }

Part 2: The Web Application

The main thing to notice here is that the following line has been added to both the .html and .aspx pages inside of the Silverlight object data.

 1: <param name="enableGPUAcceleration" value="true" />

If this tag is missing, then Silverlight will display the following error message.

Also as stated earlier, we have a Silverlight3dWebContent project that includes the following references:

At this point, we have taken a quick look at XNA in Silverlight 5. But our journey doesn’t have to end here. Microsoft included a ton of sample projects that will get you up to speed quickly.

Sample Source Code for XNA projects.

You can find sample source code for many XNA projects located in your C:\Program Files (x86)\Microsoft SDKs\Silverlight\v5.0\Toolkit\Sep11\Source directory. Simply extract the zip file and navigate to XNA.

Conclusion

At this point, we have seen how you would use the XNA 3D API in your Silverlight 5 Applications. We have also discussed a few other features included with the improved graphic stack engine in Silverlight 5. In the next part of the series, I am going to take a look at the new media features in Silverlight 5 including: Low-Latency Sound using XNA and Remote Control and Media Command (Keys) Support and much more. Again, thanks for reading and please come back for the next part.

Increase your trust with signed XAPs

editorial@silverlightshow.net (Andrea Boschin ) — Fri, 03 Jun 2011 13:12:56 GMT

Out of browser applications are for sure, one of the better features introduced in Silverlight. They give the ability of writing applications that seamlessly integrate with your desktop, making the separation between the web apps and the standalone apps something indistinguishable. Since the feature was released in the release 3.0, only when Silverlight 4.0 entered the scene, OOB becomes a real opportunity in writing applications. Before this release, out of browser applications was nothing more of an extension of the browser on the desktop but in Silverlight 4.0 we got the ability of deploy elevated trust applications that can take advantage of a increased set of privileges that goes out of the sandbox where Silverlight apps are closed while in the browser.

The so called full-trust applications were the true milestone in out of browser, but they opened to the problem of being trusted by end users, because they are asked of granting this elevated trust during the installation phase. It is the reason that moved the team to add to Silverlight 4.0 the ability of sign the XAP files to improve the trust of these applications.

Have I to sign my XAPs?

If you ever tried to run an out of browser application probably you are aware of the installation prompt you get when you enable the elevated trust flag in configuration. I placed a capture on the right side of the page.

The "security Warning" we get is something threatening, since it use hot colors and symbols to warn the user of a simple thing: the application is asking for an elevated trust on your PC but there is not any evidence you can trust it.

So, the concept of trust may be long discussed but the main point here is not about what the application will really do on your PC, but about the fact that you are not aware of the publisher of the application so you should not grant trusts that let the application harm your computer or steal sensitive information from it.

Since you are developing your application there is not any reason of being worried about this window, and I've also saw many cases where incautious customers agree to install applications that do not grant a minimum layer of trust during this delicate phase, only to spare some money, but I always suggest to end-users to not underestimate the meaning of this message and to developers to sign their XAPs.

Signing XAPs is the sole way you have to give the end-user a more pleasant (and trustable) installation experience. Once you signed the XAP file, you get a completely different message, that use a more quiet color and shows the name of an authority that grants, under the Publisher field, about the origin of the software you are about to install. Again, it grants about the origin, and not about what the application does.

The process of signing a XAP involve the use of a digital certificate. For the purpose of this article I've used a self-signed certificate you can create using the "makecert" utility, so in the publisher field you read the name and the domain of the user currently logged when the certificate was created but in production environment it is recommended you use a certificate bought from a trusted authority. Usually these certificates are not so expensive and have a duration of one year.

If you use a self-signed certificate, like I did for test purpose, remember that you have to add it to the "Trusted Root Certification Authorities" node in the store. Right click the pfx file and hit install. During the installation select the right store so when you perform your tests your certificate will be trusted and the right installation dialog will be prompted.

Mostly important to remember is that once you signed a XAP with a certificate it have to be used to sign also all the updates you will issue for your application. Differently these updates will not be trusted and will be rejected.

Signing XAPs with Visual Studio

As usual Visual Studio is the perfect tool for developing software and also in the case of Signed XAPs, it demonstrates to by really friendly. In every Silverlight project - the type of project that produces a XAP file - there is a page that helps for every task required to sign the XAP. To access this page you have to double click the Properties node in the project and hit the "Signing" tab on the left side. Then you will be prompted with the following dialog:

Into this dialog, that you can configure differently for debug or release purposes, there is the full set of signing tools. First of all you have to check the "Sign the Xap file" checkbox, then you have to provide the certificate to use for the signature. This means selecting it from the local store, import it from a PFX file or finally generate a certificate you can use for test purposes. Once you have imported the certificate the dialog will show the information from it. If you generate a test certificate, the PFX file will be placed into the project you are configuring. So, primary for testing and development, this utility solves all your needs.

Signing XAPs manually

Unfortunately, as often happens, the simplest things are beautiful but does not solve all the real world needs. The Visual Studio's dialog is wonderful but there is many cases when the process of signing the XAP cannot be made this way. A certificate used for signing purposes is a sensitive document and companies should have to protect this key from being stolen because it will mean to lose trust of all installed applications. So many times the process of signing XAPs have to be completely separated from the development environment, simply because it is unacceptable to spread the certificate on multiple development machines making it less secure.

So, the better is to let developers work without using a certificate, or with a self-signed certificate and demand the final signature to a command line utility used by a single person that will apply the final and more trustable signature a moment before publishing the application to the staging or production environment.

For this purpose the .NET framework have a command line utility called "signtool.exe". To access this utility you have to open a Visual Studio 2010 command prompt and simply type signtool.exe and you will see the full help of this utility.

To apply a signature you have to know the path of the XAP and of the PFX file then you can type the following into the command prompt:

signtool ^

    sign ^

    /f \SignedXapSample_TemporaryKey.pfx ^

    /p  ^

    \SignedXapSample.xap

First of all a note: the "exponentiation" sign at the end of every line is used to continue the command on the following line. In a batch it is useful for readability. In the snippet you have to replace the parts marked with angular braces with the corresponding parameter. /f indicates the location where you have stored the PFX file representing the certificate. /p indicates the password that corresponds to the certificate and finally the last part indicate the XAP that have to be signed. If you want you can use also the /v flag (verbose) so the signtool display some useful information during the signature.

My suggestion is to prepare a batch you can run easily on the publish folder just a moment before deploy to the production environment. So, the process can be performed by everyone that is able to understand how to launch this batch.

Please remember that every time you compile the application the XAP is completely regenerated so the process of apply a signature must be the very last action before deploying it.

The benefit of signing

It may sounds strange but the signing of XAPs is often an underestimated practice. In my experience there are many cases when people prefer to spare a few money and not buy a valid certificate. Since it may be understood for little applications, the benefit of making the user trust your deployed XAPs is really important, not only because it gives to the end user a better feeling but also to really protect him from unwanted malicious attacks. So please take in serious consideration this practice and remember to educate your end user to double check what he is installing.

About the Author

Andrea Boschin is 41 years old from Italy and currently lives and works in Treviso, a beautiful town near Venice. He started to work in the IT relatively late after doing some various jobs like graphic designer and school teacher. Finally he started to work into the web and learned by himself to program in VB and ASP and later in C# and ASP.NET. Since the start of his work, Andrea found he likes to learn new technologies and take them into the real world. This happened with ASP.NET, the source of his first two MVP awards, and recently with Silverlight, that he started to use from the v1.0 in some real projects.

NESL: Native Extension for Silverlight or No (Except Seven) Limits for Silverlight? Experimenting the Sensor API with a Wiimote

editorial@silverlightshow.net (Walter Ferrari ) — Tue, 19 Apr 2011 00:00:00 GMT

Introduction

The first time I heard about the Native Extension for Silverlight, I wondered: well, in what context can I use this? In what kind of scenario? And overall, is it something really usable? In this article I will try to test one of the features included in NESL, i.e. the capability of interacting with motion sensors. At the end I used the popular wiimote controller since it has a built-in accelerometer. Read the rest of the story to find out the test result.

Introduction to NESL

You as Silverlight developers surely know that from scratch Silverlight was meant as something running in a browser inside a security sandbox. The things started getting a little more articulated when Silverlight 3 introduced the “Out Of Browser” option but this did not change anything in terms of security and/or permissions.

With Silverlight 4 something really changed: the developer could decide to require “elevated trust” for his OOB application. This resulted in a more permissive sandbox. But it was not over. Silverlight 4 also opened a fast lane to the underlying OS, Windows just to be precise, by means of which trusted applications could call COM objects through IDispatch interface. What did it mean? It meant that an OOB trusted Silverlight app could do virtually everything with a suitable COM component already installed on the PC.

However... how many Silverlight compliant (i.e. COM objects exposing IDispatch) COM components are available on the Windows platform? This is what the NESL team wondered before starting the project, I assume. In fact, most Windows Seven platform services do not expose themselves as “friendly” COM components. This is the main reason behind NESL. In short, NESL allow the Silverlight developers to get access to those services which are not reachable if using COM automation. Not all the services are covered of course, but a selected set which is supposed to be growing in time.

To recap, NESL is a weapon that you can use in your Silverlight OOB trusted applications to take advantage from a relevant set of Windows Seven features and exactly when I focused on this, a new reading of the acronym crossed my mind: NESL = No (Except Seven) Limits to Silverlight instead of the officially Native Extensions for Silverlight. In fact, using this approach you can allow Silverlight to do pretty much anything. This possibility was already there when access to COM Automation was added to Silverlight 4, but one thing is to write C++ COM automation components by yourself, and a different thing is if someone else does the drudgery for you.

Start using NESL

At the time I am writing this article, the newest NESL version available is the 2.0. from this link:

http://archive.msdn.microsoft.com/nesl

you can check for the current version and then go to the download section where you can download the binary runtime, the source code and the documentation. The source code includes a set of classes packaged into appropriate Silverlight libraries that act as wrappers on the native components providing the automation. The source code includes also some examples showing how to use these Silverlight libraries. The native components are in the runtime library and its source code is not available.

The libraries included in the version 2.0 of NESL are essentially:

Assembly name	Content
Microsoft.Silverlight.Windows	Base classes and helper classes for installation
Microsoft.Silverlight.Windows.LocalEncode	Classes for local audio/video encoding
Microsoft.Silverlight.Windows.Platform	Classes for Windows messages, try area notification and helper classes for the other libraries
Microsoft.Silverlight.Windows.PortableDevices	Classes for interaction with portable devices
Microsoft.Silverlight.Windows.Sensors	Classes to access the Windows 7 Sensor API
Microsoft.Silverlight.Windows.Speech	Classes to use Windows 7 Speech-to-Text and Text-to-Speech capabilities
Microsoft.Silverlight.Windows.Taskbar	Classes to interact with the Windows 7 taskbar
Microsoft.Silverlight.Windows.Touch	Classes to manage touch features

What you need to do in order to get the benefits offered by NESL in your application is:

Install the native runtime of NESL (both “exe” and “msi” setup are provided)
Enable “Out of Browser” option and “require elevated trust…” sub-option in your Silverlight application
Include some of the libraries in the table above depending on the windows 7 platform feature you want to use (the first library in the list is always required)

Having said that, you have to bear in mind that when you deliver your application to the users, they do need to install the NESL runtime as well. This means practically that they have to install and register one or more COM components and this requires admin rights. Fortunately, in NESL there are some helper classes that allow you to automate the process of installation of the runtime. In brief, you can either package the NESL installer in the xap file of your application or you can leave the installer in a website and use the install helpers to download the runtime silently.

A look at the NESL Sensor API

When I started playing with NESL, I was soon captured by the idea of writing something capable to read and display data coming from a sensor. Reading a bit more in depth I realized that the Sensors Silverlight library, provided in the source code package, is a wrapper class for the SLSensorShim.dll, the component of the NESL runtime which exposes automation for the so called Windows 7 Sensor and Location Platform API. This API provides a standard way to integrate sensor and location devices with Windows 7, basically a guide for the manufacturers and a standard programming model for developers who want to use these devices in their applications.

Without going through too many details (there is the NESL developer’s guide for that) the NESL Sensor API includes various categories of sensors, location, environmental, orientation, electrical, mechanical, motion, biometric, light and scanner sensors. The usage of the API is fairly simple: you create an instance of the SensorManager type and use, for instance, the GetSensorsByCategory() method to get a collection of Sensors of a specific category or use the GetSensorsByID() to get the Sensor with the specific ID. Once you have the Sensor, you can handle the sensor events in order to know the state of the Sensor, or when it has been disconnected or even it has new data to report.
Well, I thought, now I just need some kind of sensor to start trying these things out, but.. which sensor? Unfortunately, the biometric device on my notebook was not exposed as a biometric sensor and I started casting around for a suitable device until I remembered that two years earlier I had bought a wiimote controller to make some weird experiment with a bicycle (an attempt to calculate the power of pedalling through acceleration measurements) and then I had just left it in a drawer. So I wondered if I could use it as a motion sensor; a quick googling led me to the CodeProject site where there was an article explaining a “sensor motion driver for the Wiimote”. Well, I thought, here we are.

Testing the NESL Sensor API using a Wiimote controller

Stop and think for a moment: we have a Silverlight application running out of box but still in a sandbox layer, then we have the “Sensor and Location Platform” layer and above the “NESL Sensor” layer providing COM automation. Putting it all together could possibly cause a little overhead? To test it better I decided to use an old 5 or 6-year old notebook equipped with a Mobile Intel Centrino M 760, 2 Gb RAM and a video card with 256 Mb RAM, not exactly a monster of speed but a test lab consistent with a real world scenario.

As I anticipated in the previous paragraph on CodeProject at the following link:

http://www.codeproject.com/KB/system/wiisensor.aspx

you can find a great article entitled “Writing a Sensor Driver for the Wiimote on windows 7”. It is an excellent tutorial on how to write a sensor driver and provides a working sensor motion driver for the wiimote. Furthermore, it guides you step by step through the various phases of installation of the driver.

To make the test application more attractive I looked for a nice gauge control and eventually I found it through some free controls available from Telerik at this link:

http://www.telerik.com/products/free-silverlight-controls.aspx

At this point the recipe is ready:

An old notebook with Windows 7 (x86)
A wiimote controller
A wiimote sensor driver
A nice gauge control

The additional steps to follow are:

pairing the wiimote with the notebook
initializing the Wiimote running the WiimoteTest app
install the motion sensor driver
develop the OOB Silverlight application

The first three steps are well explained in the above mentioned article here, and here. Alternatively, you can watch this short video showing how I did with my notebook.

The Silverlight OOB test application

Once the wiimote is connected and enabled as a sensor you are ready to test the NESL Sensors library in your applications. I prepared a video showing how to build the test application capable of interacting with the wiimote in less than 10 minutes. First thing to do is to make your application running out of the browser with elevated trust as shown below:

Then you have to include some references to some NESL libraries and to some Telerik libraries (for the gauge control) :

For the look and feel of the application I inserted three gauge controls, a picture showing the tree axis of the wiimote and the output of a webcam connected to the notebook as below:

I put the video window to see if there is direct feedback between the movements of the wiimote and the needles of the gauges controls.

Just a few words on the Telerik gauge controls; here there is the xaml code I used for the first of them:

"200"  HorizontalAlignment="Left" Margin="46,8,0,0"

                      Name="radialGaugeX" VerticalAlignment="Top" Width="200" >

  

    "radialScale" Min="-10" Max="10" MajorTicks="10"

                    MiddleTicks="2" MinorTicks="1">

  

        

            

        

        

            "0.05" />

        

        

            "0.01" />

        

  

        

            "10" />

        

  

        

            

            "gaugeX_needle" IsAnimated="true" Value="0" />

        

    



I used here the Radial style but you can choose also a Linear option. There is the possibility to define scales, ticks and choose between 5 indicators.

As far as the sensor management is concerned, all is condensed in the following piece of code:

void MainPage_Loaded(object sender, RoutedEventArgs e)

  

   if (Application.Current.IsRunningOutOfBrowser && Application.Current.HasElevatedPermissions)

   {

       try

       {

           SetupWebcam();

  

           sensorManager = new SensorManager();

  

           //get the accelerometer

           WiiAccelerometer = sensorManager.GetSensorsByCategory(

             SensorCategories.SENSOR_CATEGORY_MOTION).FirstOrDefault();

           

           //if one exists

           if (WiiAccelerometer != null)

           {

  

               // WiiAccelerometer.SetProperties(new PropertyValue[] {new PropertyValue(new PropertyKey(SensorProperties.Base, 

               // SensorProperties.SENSOR_PROPERTY_CURRENT_REPORT_INTERVAL), (uint)1000)});

                                       

               //handle the data updated event

               //WiiAccelerometer.SensorDataUpdated += new EventHandler(OnSensorDataUpdated);

  

               AccelerometerMovementThreshold = 0.01;

               

               myDispatcherTimer.Interval = new TimeSpan(0, 0, 0, 0, 100); // Milliseconds 

               myDispatcherTimer.Tick += new EventHandler(Each_Tick);

               myDispatcherTimer.Start();

           }

       }

       catch (Exception Ex)

       {

           MessageBox.Show(Ex.Message, "ERROR", MessageBoxButton.OK);

       }

   }

As you see, it’s a matter of creating a SensorManager instance and look for your motion device using the GetSensorsByCategory(…) method (I took the first of the list since I was sure it was the only one present). Here I commented on the suggested way to go in the draft developer’s NESL guide : each motion sensor is required to produce a report of their data within a given interval of time, you can force this time at the value you want by setting this property SENSOR_PROPERTY_CURRENT_REPORT_INTERVAL. Then you can receive a notification of changes in the data adding an event handler to the SensorDataUpdated event.

Unfortunately, this approach does not work in my case, that’s why I commented these lines of code. The application crashes when it tries to set the new interval report. I gave a quick look at the sources of the wiimote sensor driver and I found that the interval report is set to 0. I did not investigate further and I opted for a classic timer approach where I asked for the data from the sensor and I checked if the difference between the current and the previous value exceeds a certain threshold. Here below is the code of the timer function:

public void Each_Tick(object o, EventArgs sender)

 {

     //timestamp

     //DateTime dt = e.NewData.TimeStamp;

     //create the property keys for the data fields to query

     PropertyKey propKey_X_G = new PropertyKey(MotionDataFields.Base,

       MotionDataFields.SENSOR_DATA_TYPE_ACCELERATION_X_G);

     PropertyKey propKey_Y_G = new PropertyKey(MotionDataFields.Base,

       MotionDataFields.SENSOR_DATA_TYPE_ACCELERATION_Y_G);

     PropertyKey propKey_Z_G = new PropertyKey(MotionDataFields.Base,

       MotionDataFields.SENSOR_DATA_TYPE_ACCELERATION_Z_G);

  

     //query the data fields

     List accelerationValues =

           WiiAccelerometer.Data.GetSensorValues(new PropertyKey[] { propKey_X_G, propKey_Y_G, propKey_Z_G }).ToList();

     //do the necessary conversions

     double accel_XAxis = Convert.ToDouble(accelerationValues[0].Value); deltaX = lastX == 0.0 ? 0.0 : lastX - accel_XAxis; lastX = accel_XAxis;

     double accel_YAxis = Convert.ToDouble(accelerationValues[1].Value); deltaY = lastY == 0.0 ? 0.0 : lastY - accel_YAxis; lastY = accel_YAxis;

     double accel_ZAxis = Convert.ToDouble(accelerationValues[2].Value); deltaZ = lastZ == 0.0 ? 0.0 : lastZ - accel_ZAxis; lastZ = accel_ZAxis;

  

  

     //do something with the values

     if (deltaX > AccelerometerMovementThreshold || deltaY > AccelerometerMovementThreshold || deltaZ > AccelerometerMovementThreshold)

     {

         gaugeX_needle.Value = accel_XAxis * 10;

         gaugeY_needle.Value = accel_YAxis * 10;

         gaugeZ_needle.Value = accel_ZAxis * 10;

     }

  

 }

Test results

I have to say that the test results are encouraging. Compiling in release mode and using a timer interval of 100 ms the application seems well responsive even with an old and slow notebook. Not the same in debug mode, where the application freezes sometime for a while. I have to add that I was unable to record my video showing the application in action using the Microsoft Expression Encoder screen capture and I had to use an external videocamera. However, honestly I was asking too much of my notebook here.

Summary

In this article we have seen that virtually there are no limits to what Silverlight actually can do; we can even make it speak with a wiimote. The key tool behind that is NESL, a library which provides friendly Silverlight wrapper classes and a runtime which exposes COM automation for most of the features of windows 7 platform. How efficient and practical is this approach? In the article we have tested the NESL Sensors API and the results appear to be encouraging. The question is: what about this library when Silverlight 5 will arrive with, as it seems (see keynote), Platform Invocation (Pinvoke) enabled to in-browser trusted applications ?

Download the source code of the test application

About the Author

Walter Ferrari is an environmental engineer and cultivates his passion for software development for a long time. He is currently a consultant working for his company, Abertech. He develops applications based on Microsoft technologies since 1995 and works primarily with .NET since 2003. He is currently focused on Silverlight and Sharepoint and acts as representative of CompletIT/SilverlightShow.
Walter is used to wearing a helmet while writing code..just to avoid serious damages when slamming his head against the monitor :) He blogs about his passion at http://www.snello.it/eng

Getting ready for Microsoft Silverlight Exam 70-506 (Part 5)

editorial@silverlightshow.net (Gill Cleeren ) — Mon, 14 Feb 2011 02:40:00 GMT

SilverlightShow and Gill Cleeren start a series of materials aimed at helping you get prepared for taking Microsoft Silverlight Exam 70-506. Through this series we will try to structure the resources available on the internet, grouping them by topic covered in the exam. Any feedback would be much appreciated! Thanks!

More resources...

($9.99)

All SilverlightShow Ebooks

This article is Part 5 of the series on Microsoft Silverlight Exam.

Time flies when you’re having fun and meanwhile learning something. That certainly goes for me while I create these articles; I hope it’s the same for you when you read them. If you kept track, we have now arrived at part 5 already, so we are slowly approaching the end of the series. However, this very part is shaping up to be a large one, as you can see. It also covers a lot of interesting material in Silverlight, as we’ll soon see!

Whereas all previous parts looked at features of Silverlight itself, this part is focusing on the things that happen around Silverlight so to say. We covered data binding, controls, enhancing the UI and controls, styling and many more features that we need to know to do stuff inside Silverlight. In this fifth part, subtitled “Interacting with the host platform”, we’ll focus on the ways that Silverlight has options to do things with the machine it runs on. Among others, we’ll look at ways to store data using Isolated Storage, copy/paste data to the clipboard, allow the user to install the application on the machine as an out-of-browser application, access the HTML DOM and much more. As you can see, Silverlight is more than just building a UI: it has many ways to interact with the system on which it runs, allowing us to build even richer applications. With the help of these features, Silverlight apps come very near to “normal” applications!

For your convenience, the following list contains links to the other parts of the article series which have been finished already:

Laying Out a User Interface (15%)
Enhancing the User Interface (14%)
Implementing Application Logic (16%)
Working with Data (17%)
Interacting with a Host Platform (11%) –> this part
Structuring Applications (13%)
Deploying Applications (13%)

Part 5: Interacting with the host platform

Silverlight’s feature set grows with every version. While Silverlight remains a web technology, its growing set of features makes it possible to build applications that come very close to what we can build for the desktop. With Silverlight 3, we got the ability to build Silverlight applications that could be installed on the local machine. Up until then, Silverlight apps could only run in a browser. This feature is perhaps the best example of Silverlight interacting with the system it’s running on. In Silverlight 4, this mode was extended and we got Trusted Silverlight applications as well, which we’ll look at later on.

There are many more places where a Silverlight app interacts in some or the other way with the environment. Take for example the page on which it’s hosted when running in the browser. Since Silverlight 2, Silverlight has been able to interact with the page, making it possible to create or select elements or even call JavaScript on the hosting page.

Printing is another area where Silverlight has had features added. With Silverlight 4, we got the PrintDocument class, a simple way to print documents. Silverlight also has several ways to interact with files on the local system. While by default, Silverlight apps can’t read or write to the local system, a SaveFileDialog or an OpenFileDialog allow Silverlight applications to save or read a file selected by the user. In Trusted out-of-browser applications, Silverlight can even access without interactions files in the My* folders. And speaking of data, Silverlight has the ability to access the clipboard as well.

All these and the many more features we’ll explore here are ways to enrich our Silverlight applications, making it possible to build desktop-like applications. Let’s take a look at these features in some more detail!

Implement the printing API

Back in the days of Silverlight 2, printing in Silverlight was impossible. About the only thing you could do was printing from your browser, which never gives a great result: this includes a header/footer and you have no control over how the Silverlight content will be printed. With the release of Silverlight 3, no real printing solution was implemented in Silverlight yet, but a new class, the WriteableBitmap, was introduced. This API made it possible to export any control (be it the entire Silverlight control or part thereof) to a bitmap. This bitmap could then be saved and printed. While this didn’t allow for a straightforward solution to print documents, it was possible to export content and print it.

With Silverlight 4, the System.Windows.Printing namespace was introduced along with the new PrintDocument class. This class made printing directly from Silverlight possible. We can print the entire Silverlight control, a part of it or even print dynamically generated content (for example for a print preview). The printing model has support for multiple page printing (although this does require quite a lot of manual work). The output is printed as a bitmap, which in itself is no problem. On the other hand, the generated documents are quite large to send to a printer, which limits the amount of pages that you can comfortably print without hogging your network!

To learn more about printing in Silverlight, take a look at the following links:

General printing in Silverlight
Handling multiple pages
Printing multiple pages requires quite some work. Via the e.HasMorePages, we can specify that the PrintPage event should trigger again to print the next page.
Adding page numbers
- http://www.google.com/url?sa=t&source=web&cd=15&ved=0CDMQFjAEOAo&url=http%3A%2F%2Faz12722.vo.msecnd.net%2Fsilverlight4trainingcourse1-3%2Flabs%2Fsl4lob-06-printing-the-schedule1-2%2F06%2520Printing%2520the%2520Schedule.docx&rct=j&q=silverlight%20printing%20%22page%20numbers%22&ei=_2RUTbqIPISmhAfDxrSXCQ&usg=AFQjCNF5QP5zlnQrQEKOSlxA86B1FvibPQ&sig2=dSOgXrc-hO5yT_hDCUViTA

Create out-of-browser applications

The biggest new feature with Silverlight 3 was the support to install a Silverlight application on the local machine, the so-called out-of-browser mode. Using this, a user could install the application and run it, even without opening a browser. To use OOB mode, users don’t have to install anything additionally, it’s all included in the plug-in. To support this OOB mode, a new network API was introduced as well. Using events such as NetworkAddressChanged, we can detect whether or not there’s an internet connection available from a Silverlight application. This way, we can react to going online for getting data or staying offline and using local data.

The OOB mode was deeply enhanced and extended with Silverlight 4. New features and abilities were added to it:

Define where the window is to be located and control window size
Show toast (notification) windows
Display web content using the WebBrowser control
Paint with the content of a WebBrowser control using the WebBrowserBrush

Note that while OOB applications can be installed, they still run in the context of the browser. This means that they are still running from the sandbox, just like in-browser applications!

Next to OOB mode and in-browser, a third mode was introduced: trusted Silverlight applications. As the name implies, these run with elevated permissions (the user indicates that he trusts the creator) and thus they can do quite a lot more on the local system than other apps can:

Access local files without dialog within the My * folders
Accept user input in full-screen
Access services in other domain without cross-domain calls
Interact with COM components already on the machine

The latter is certainly the most important one, as it opens many new doors for Silverlight to interact with other components on the machine, including software such as Office, APIs such as the Speech API and hardware such as a scanner (using the COM driver).

Let’s take a look in more detail to these OOB features and options:

Enabling trusted applications / Installing and uninstalling applications
Setting the application to be chromeless
- http://www.silverlightplayground.org/post/2010/03/15/Chromeless-Window-for-OOB-applications-in-Silverlight-40-RC.aspx
Signing the XAP file
- http://www.silverlight.net/learn/videos/all/xap-signing/
Working with COM Interop
Checking for network connectivity
- http://www.silverlightshow.net/tips/Detecting-Network-Change-in-Silverllight-3-Application.aspx
Displaying toast notifications
- http://www.silverlightshow.net/news/Silverlight-4-s-New-Notification-Windows-.aspx
- http://www.silverlightshow.net/news/Notification-Window-in-Silverlight-4.aspx
Checking and updating application versions
- http://timheuer.com/blog/archive/2009/03/18/silverlight-3-offline-update-framework.aspx
Displaying HTML content by using the web browser control
- WebBrowser class on MSDN: http://msdn.microsoft.com/en-us/library/system.windows.controls.webbrowser(v=vs.95).aspx
- http://mtaulty.com/CommunityServer/blogs/mike_taultys_blog/archive/2009/11/18/silverlight-4-rough-notes-html-hosting-in-the-webbrowser-control.aspx

One last thing on COM interop: note that at this point, this is a Windows-only feature. There’s no COM interop available on a Mac (there’s no COM on the Mac platform!)

Isolated storage

By default, Silverlight applications can’t directly access the local file system. Using the OpenFileDialog, the user can give Silverlight the permission to read a file anywhere on the local file system. In this case, Silverlight gets a read-only stream to the file and therefore can’t do anything else with the file, such as deleting it. Similarly, the SaveFileDialog exists to allow saving from a Silverlight application. In both cases, we have to pass by an intermediate dialog.

On the other hand, Silverlight has access to isolated storage. In this space, it has full permissions, meaning that Silverlight can read, write or delete files or directories. The isolated storage can be seen as a small file system, specifically for the Silverlight application. The store is created per user per application. This means that when I run a specific Silverlight application, a specific store is created for me for that particular application. If someone else runs the same app on the same machine, another store is created. If I run another application, yet another store is created. This effectively means that Silverlight applications can’t access each other’s isolated storage.

An application doesn’t get unlimited space to store information. By default, an in-browser Silverlight application gets 1 MB. If it needs more, it can request so, Silverlight will display a prompt (note that more space has to be requested, should we try requesting lesser space, we’ll get an error). OOB applications get 25 MB immediately. If you run an app first OOB and then in-browser again, it will keep its 25 MB. By the way, the requested space is not really reserved on the users’ hard disk: it’s sort of a quota that the application can use.

One last thing: isolated storage is managed by the plug-in, not your browser. This means that if you go to a Silverlight application using several browsers, you’ll still be using the same isolated storage.

To learn more about isolated storage, be sure to check out the following links:

Reading from and writing to isolated storage
Increasing storage size
- http://blogs.silverlight.net/blogs/msnow/archive/2008/07/17/tip-of-the-day-20-how-to-increase-the-isolated-storage-quota-for-your-app.aspx

Interact with the HTML DOM

Since version 2, a Silverlight application has been capable of communicating with the page it’s hosted on. For this, the System.Windows.Browser namespace should be the place to start. Several classes and methods exist in this namespace that give us access to the browser information (headers…), cookies, query string… Also, it’s possible to access the page elements itself: we can write code that reads out the DOM, adds elements to it… Also, Silverlight can call JavaScript code on the page to execute logic embedded inside the page DOM. Vice versa also works: if configured to allow so, JavaScript code can call into Silverlight applications and therefore trigger logic inside .NET code.

With Silverlight 3, the concept of named pipes, also referred to as local messaging, was also introduced. Named pipes make it easier to write code that allows 2 Silverlight instances on the same page to communicate. This can be done manually using JavaScript but that’s a lot of work.

To learn more about how to interact with the DOM, take a look at the following links and posts:

Access the clipboard

Clipboard access allows us to copy plain text from and to the clipboard. When running as an in-browser application, Silverlight will display a prompt, asking the user if he agrees that the application accesses the clipboard.

Some more information on working with the clipboard from Silverlight can be found in the following articles:

Read from and write to the host file system

A few paragraphs back, we looked at the isolated storage as the way to allow Silverlight to manage files itself on the local system. If we want a Silverlight to gain access to a file not inside isolated storage, we have a few options:

Opening a file inside Silverlight can be done using the OpenFileDialog. Silverlight gets read-access to the selected file(s).
Saving a file, including extension, can be done using the SaveFileDialog.
Drag and drop a file on a Silverlight control that has the AllowDrop property set to True. This allows us to select one or more files (this doesn’t work with directories) in for example your Explorer and drag them onto a Silverlight control. When this control has the AllowDrop=True, Silverlight gets read access to the selected file(s).

If your application runs as a trusted application, it can automatically access all files within the My* folders. Trusted Silverlight applications gain full access on these directories, so they can create, update and delete files!

Take a look at the following links to learn more on this topic:

Read from and write to various locations
- http://www.silverlight.net/learn/videos/all/local-file-access/
- http://www.wintellect.com/CS/blogs/jprosise/archive/2009/12/16/silverlight-4-s-new-local-file-system-support.aspx
Drag and drop from the file system
- AllowDrop property on MSDN: http://msdn.microsoft.com/en-us/library/system.windows.uielement.allowdrop(v=vs.95).aspx
- http://www.silverlightshow.net/news/Drag-and-Drop-images-from-Filesystem-to-Silverlight-4-Applications.aspx
Using IO dialogs
- OpenFileDialog on MSDN
  - http://msdn.microsoft.com/en-us/library/system.windows.controls.openfiledialog(v=vs.95).aspx
  - http://msdn.microsoft.com/en-us/library/cc221415(v=vs.95).aspx
- SaveFileDialog on MSDN
  - http://msdn.microsoft.com/en-us/library/system.windows.controls.savefiledialog(v=vs.95).aspx
  - http://www.silverlightshow.net/items/Using-the-SaveFileDialog-in-Silverlight-3.aspx

Handle alternative input methods

Apart from basic left-clicking, Silverlight has been enhanced to support other mouse functions. Scrolling was implemented partly on some controls in Silverlight 3; this was extended in Silverlight 4. Beginning from Silverlight 4, Silverlight’s default behavior for right-clicking – showing the Silverlight menu option – can be overridden to do whatever we want. Most of the time, we’ll want to display a context menu, which is what a user has come to expect when right-clicking on an item.

Silverlight isn’t limited to accepting input using just a mouse: it has support for touch input as well.

The following articles seem interesting to learn more about these topics:

Handling right-click
- http://www.silverlight.net/learn/videos/all/right-click-mouse-events/
- http://www.michaelsnow.com/2010/04/23/silverlight-tip-of-the-day-3-mouse-right-clicks/
Mouse wheel
- http://weblogs.asp.net/lduveau/archive/2009/11/20/silverlight-4-mouse-wheel-support.aspx
- http://timheuer.com/blog/archive/2009/11/18/whats-new-in-silverlight-4-complete-guide-new-features.aspx#mousewheel
Multi-touch events
- Multi-touch in Silverlight on MSDN: http://msdn.microsoft.com/en-us/library/dd894494(v=vs.95).aspx
- http://timheuer.com/blog/archive/2009/07/30/silverlight-3-multi-touch-introduction-fundamentals-basics.aspx

Summary

Another part done and more Silverlight knowledge gained! We saw in this part how neatly Silverlight integrates with the host on which it’s running. Various options exist to interact with files, user input and host features such as the clipboard.

About Gill

Gill Cleeren is Microsoft Regional Director (www.theregion.com), Silverlight MVP (former ASP.NET MVP), INETA speaker bureau member and Silverlight Insider. He lives in Belgium where he works as .NET architect at Ordina. Passionate about .NET, he’s always playing with the newest bits. In his role as Regional Director, Gill has given many sessions, webcasts and trainings on new as well as existing technologies, such as Silverlight, ASP.NET and WPF at conferences including TechEd Berlin 2010, TechDays Belgium, DevDays NL, NDC Oslo Norway, SQL Server Saturday Switserland, Spring Conference UK, Silverlight Roadshow in Sweden… He’s also the author of many articles in various developer magazines and for SilverlightShow.net. He organizes the yearly Community Day event in Belgium.

He also leads Visug (www.visug.be), the largest .NET user group in Belgium. Gill recently published his first book: “Silverlight 4 Data and Services Cookbook” (Packt Publishing). You can find his blog at www.snowball.be.

Twitter: @gillcleeren

Caching of, in, and around your Silverlight application (part 1)

editorial@silverlightshow.net (Kevin Dockx ) — Thu, 18 Nov 2010 07:21:00 GMT

This article is compatible with the latest version of Silverlight.

Don't miss...

($0.99)

All SilverlightShow Ebooks

This is the first in a 3-part series of articles about caching & Silverlight.

You can download the source code here.

A lot can be written about this subject, and because of that, quite a few misunderstandings about Silverlight and caching exist.

Let’s start with a general definition of caching: this is what Wikipedia has to say about this technique:

In computer science, a cache is a component that improves performance by transparently storing data such that future requests for that data can be served faster. ... (en.wikipedia.org/wiki/Caching)

Well, that sure opens up a lot of possible places to cache, in and outside of your Silverlight application. Can you cache the complete Silverlight application? What’s this assembly caching you keep on reading about? How do you go about keeping your data on the client when navigating to different parts of you application, instead of refetching it all the time? Can you leverage the Isolated Storage for caching, and is it possible to persist data in between different application sessions? Is it possible to share cached items between different Silverlight applications? And what about the server-side: can I minimize database hits when launching queries from my Silverlight application?

If you’ve ever asked yourself one (or more) of these questions, this article series is for you. As you might notice when seeing them in the same paragraph, these questions are about different ways of caching, and they all apply to different scenarios.

In the first part of this series, I’d like to talk about the caching of your Silverlight application itself and Assembly Caching – almost no code is required for this.

XAP Caching

Every Silverlight application consists of one or more XAP files. Smaller applications typically consist of one XAP, but larger applications might benefit from dividing your application into different application modules, compiling into different XAP-files which are loaded on demand. When a user first navigates to a page hosting a Silverlight application, the full XAP has to be downloaded to the client. As an XAP typically contains a bunch of referenced assemblies, your XAML files, compiled code and everything else you’ve included as embedded resources in your Silverlight project, these files have a tendency to get quite big. Therefore, being able to cache these files will reduce the time a user has to wait to access your application.

Luckily, this is done by default with the help of your browser cache. Once a Silverlight application has been downloaded to the client, it will automatically be cached in the browsers’ temporary files. The next time a user accesses your Silverlight application, the XAP will be loaded from the browser cache (well, as long as it hasn’t been cleared of course – browser caching is controlled by the client and/or browser, we cannot assume anything in this case) instead of from the server.

However, as a developer, this might pose some problems. Imagine the following scenario: a user has opened your Silverlight application, so it’s in the browser cache. In the meantime, you find a bug in your application, solve it, and roll out a new version of your app. Next time that user accesses the hosting web page, you of course want him to get the new version of your application. However, as the previous version is in his browser cache, he will get that version instead of the new one… Luckily, you can control when an XAP should expire (as you can with every file) through IIS.

Open up Internet Information Services Manager, and navigate (in Content View) to the website you’re hosting your Silverlight application on. Select the XAP, open up the Features view, select HTTP Response Headers, and click on Set Common Headers in the Actions pane. Choose “Immediately” in the Expire Web Content popup, and close the popup again.

After you’ve done this, a new version of the XAP will be downloaded to the client when he accesses the hosting web page, even if he already has a version of your application in his browser cache.

As you can see, you also have the option to let the file expire at regular intervals. This might come in handy in a development/test environment: if you’re running a server which receives a new nightly build of your application so the test team can work on the new version the day after, it might be a good idea to use one of these options to ensure the testers will always test on the latest version.

XAP Caching in an Out of Browser scenario?

If you’re designing an Out of Browser application, you might notice your XAP doesn’t get updated automatically – even if you’ve made sure it’s expired, and a new version should be downloaded. This is because in an Out of Browser scenario, you need to download the new version yourself. This is typically done in the application startup method:

private void Application_Startup(object sender, StartupEventArgs e)
{
    // OOB new version check
    this.CheckAndDownloadUpdateCompleted += (send, args) =>
        {
            if (args.UpdateAvailable)
            {
                MessageBox.Show("A new version of the application is downloaded, please restart the application to launch the new version.");
            }
        };
    this.CheckAndDownloadUpdateAsync();

this.RootVisual = new MainPage();
}

This code will ensure your Out of Browser application is updated as well.

Assembly Caching

In Silverlight 3, a new feature was introduced: assembly caching. A lot of people don’t seem to know what this feature actually does, and therefore hesitate to use it. Assembly caching makes sure external assemblies are not packaged in the XAP file, making the XAP itself significantly smaller. Whenever a user accesses your application, the external assemblies will be downloaded from their respective locations: this can be the Microsoft site, a vendor-specific location (if you’re using a 3^rd party control library, for example), or even your own central assembly repository. In a default scenario, the assemblies themselves are copied to the ClientBin directory, so they’re always available.

You might wonder: what’s there to gain from this? In the end, the assemblies must be downloaded anyway, so the total download size / time is about the same, right? This is where your browser cache comes into play: as with the XAP file itself, the external assemblies are cached by your browser. This means that if the assembly is already in your browser cache, it does not have to be downloaded again. If you combine this knowledge with content expiration, you can now image a scenario where you roll out a new version of your Silverlight application, expire the XAP immediately (so a new version is delivered to the client), but leave the unchanged external assemblies alone, so they don’t expire. Now, when a client navigates to your application, the new version of the XAP will be downloaded, but the external (unchanged) assemblies will come from the browser cache.

To enable assembly caching, navigate to the project properties of your Silverlight application, and check Reduce XAP size by using application library caching:

If you rebuild your application, you will notice your ClientBin directory now contains zip-files (one for each external assembly you referenced). For example purposes, I’ve added a reference to System.Windows.Controls.Toolkit to my Silverlight application, resulting in 2 zip files: System.Windows.Controls.Toolkit.zip and System.Windows.Controls.zip (which is used by the Toolkit assembly):

Needless to say, as far as strategies to reduce your XAP size (and thus: decrease download time) are concerned, this feature should not be overlooked.

One final word of notice: this feature cannot be combined with an Out of Browser Silverlight application.

Conclusion

This concludes the first part of this 3-part series on caching, in which we’ve learned about how to leverage and control the browser cache, and how to enable Assembly Caching in your Silverlight application. In the next part, we’ll have a look at using the Isolated Storage to enable various caching scenarios.

About the author

Kevin Dockx lives in Belgium and works at RealDolmen, one of Belgium's biggest ICT companies, where he is a technical specialist/project leader on .NET web applications, mainly Silverlight, and a solution manager for Rich Applications (Silverlight, Windows Phone 7 Series, WPF, Surface). His main focus lies on all things Silverlight, but he still keeps an eye on the new developments concerning other products from the Microsoft .NET (Web) Stack. As a Silverlight enthusiast, he's a regular speaker on various national and international events, like Microsoft DevDays in The Netherlands, Microsoft Techdays in Portugal or on BESUG events (the Belgian Silverlight User Group). Next to that, he also authored a best-selling Silverlight book, Packt Publishing's Silverlight 4 Data and Services Cookbook, together with Gill Cleeren. His blog, which contains various tidbits on Silverlight, .NET, and the occasional rambling, can be found at http://blog.kevindockx.com/.

How to distribute a Silverlight OOB Application?

editorial@silverlightshow.net (Kunal Chowdhury ) — Tue, 12 Oct 2010 00:00:00 GMT

This article is compatible with the latest version of Silverlight.

Introduction

One of the new features introduced in Silverlight 4 is the silent installation of Silverlight Out-of-Browser application. This means, without user intervention, you can directly install them to their machines. You don’t have to open the browser window to install the OOB app. This is perfect for CD-ROM distribution. You can even automate the process from the CD/DVD media; if the user already has permission to auto run external media.

Here in this article, I will first create a simple OOB Silverlight application and then show you the steps to install it as OOB application silently.

Step1 : Creating a Silverlight OOB Application

In this first step, we will first create a Silverlight Application and design the UI. As our goal in this article is to deploying the application as OOB, hence we will not focus deeply into the UI. Later we will configure the application for OOB and after the successful build; we will publish the .XAP file to a local folder. If you already know about these steps can skip to the next Step.

Creating a Project

Open your Visual Studio 2010 IDE
Go to File –> New –> Project or just press Ctrl + Shift + N to open the New Project dialog
In the “New Project” dialog Window, expand “Visual C#” and click on the “Silverlight” from the left panel
Now in the right panel, only the Silverlight Templates will be visible
Select “Silverlight Application” from the right panel
Give a proper name for the Project (e.g. SilverlightDistributionDemo)
Choose proper location for the Solution by clicking the “Browse” button
Click “Ok” to continue. This will open the “New Silverlight Application” dialog where you can choose the Silverlight version and Silverlight Hosting Project settings
Be sure to select the “Silverlight 4” from the options pane and hit Ok” to continue

This will create the basic Silverlight project for you. Now design your application as per your requirement. For this sample application, I will create a basic UI. Here is the XAML code for that:

<UserControl x:Class="SilverlightDistributionDemo.MainPage"

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

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

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

    Height="300" Width="400">

    <Grid x:Name="LayoutRoot" Background="White">

        <Border Background="#FFFFA0" Margin="20" CornerRadius="15"

                BorderThickness="1" BorderBrush="Red">

            <TextBlock Text="Silverlight OOB Application Installer Demo"

                       HorizontalAlignment="Center" VerticalAlignment="Center"

                       FontSize="30" FontWeight="Bold" Foreground="Red"

                       TextWrapping="Wrap" TextAlignment="Center"/>

        Border>

    Grid>

UserControl>

Here is the output of the Silverlight UI, if you run it in your Browser Window:

Configuring OOB Settings

So, our application UI is ready. Now, we need to configure the application to launch in outside browser window. Hence start with the configuration settings. Follow the simple steps mentioned below and you will be done:

From your solution explorer, right click on the Silverlight project and go to Properties. This will open the following properties pane in your screen:
Select “Silverlight” from the left panel
In the right panel, select the “Enable running application out of the browser” as shown in the above screenshot. This will enable the application to run outside the browser window
Now click on the “Out-of-Browser Settings …” button. This will open up another dialog window on your screen
Give the application Height & Width in this screen. You can also configure running the application in full trusted mode. Also you can configure the Window style here. For this demo, it is not require and hence I am leaving it as it is by default
Click “Ok” to save the “Out-of-Browser Settings”
Save the properties by clicking File –> Save or just by pressing the Ctrl + S key combination

Now your application is ready for running outside the browser. To check this, press F5 to run the application. This will first build the project and run it inside the browser window and you will see the UI as you created. Right click on the application UI and you will see a context menu popped up in the screen. It has two menu items called “Silverlight” and “Install onto this computer…”. The second option will only visible if your application supports running as OOB.

Clicking on the Install menu will start the installation wizard. Wait, our mission is not to install like this. We have to install the application silently from the deployment directory silently, without opening the browser window. We will discuss it step-by-step at latter part of the article.

Publishing Application as .XAP

Build the solution. Once you successfully built your solution, go to the “ClientBin” directory present in the Web application project. Here you will see the published XAP file. Copy this file to a specific folder location for later use.

Here in this example, we don’t have any other dependent services. Hence, just copying the .xap file is perfect for us. But in case, you have some other dependency files you need to publish the project. To do this, right click on the web application project and click “Publish…” menu to launch the publish web wizard.

Select the “File System” as the Publish Method and follow the instructions to publish the Silverlight application. Copy the required files from the published folder to a specific location for later use.

Step2 : Configuring CD-ROM Installation

Now it’s time to configure our application deployment from CD-ROM. Everything should be done silently, means it should check whether the required Silverlight version is installed in the installation PC and based on that it should run either the Silverlight installation or directly start deploying the application as out-of-browser. Let’s do it step-by-step.

Basic to Silverlight OOB Installation

Before jumping into the deployment steps, let us discuss how OOB installation works. Silverlight 4 now has support for installing out-of-browser application silently. When you install Silverlight plug-in, it also installs a .exe file named "sllauncher.exe" which you can find in your "Program Files\Microsoft Silverlight\" directory. This EXE file now has the capability to install your Silverlight OOB application silently without opening the browser window. If you have already installed your OOB application, it will create a shortcut to launch the application from desktop or start menu. Right click on the shortcut & go to its properties. You will notice that the target location is set to "Microsoft Silverlight" and the target is set to something similar to the following line:

"C:\Program Files\Microsoft Silverlight\sllauncher.exe" 744317312.localhost

That is responsible for launching the XAP file as your Out-of-Browser application.

Basic to Silverlight OOB Silent Installation

Let's come to write some scripts to install your XAP silently as out of browser Silverlight application. Hope, you already published our sample application (.xap) after configuring it as out of browser to your local drive in a specific folder (say, C:\MySilverlightApps\XAP). For our case, the complete path of the XAP is: "C:\MySilverlightApps\XAP\SilverlightDistributionDemo.xap".

Now open your Notepad and write the following code in a single line:

"C:\Program Files\Microsoft Silverlight\sllauncher.exe"

        /install:"C:\MySilverlightApps\XAP\SilverlightDistributionDemo.xap"

        /origin:http://www.kunal-chowdhury.com/private/apps/XAP/SilverlightDistributionDemo.xap

        /shortcut:desktop+startmenu

        /overwrite

Here, you have to pass the location of your XAP file as a parameter value to the "/install" flag.

You can specify the URL for future update location of the application by setting the "/origin" flag. When you call the CheckAndDownloadUpdateAsync() method from code, it will try to get the update from the specified location.

You can specify the shortcut location of the application by setting the value to the "/shortcut" flag. If you just set desktop or start menu as the value to the flag, it will create the shortcut in desktop or start menu depending on the parameter you set. If you use "desktop+startmenu" as the value to the parameter, it will install it both in the desktop and start menu of your operating system.

Basic to HTA File

HTML Applications (HTAs) are full-fledged applications. These applications are fully trusted and display only the menus, icons, toolbars, and title information that the Web developer sets. In short, HTAs pack all the power of Windows Internet Explorer - its object model, performance, rendering power, protocol support and user interface of the browser. HTAs can be created using the normal HTML and Dynamic HTML (DHTML) tags. You need to save the file as “.hta” to execute the Html Application.

The HTA:APPLICATION tag in the following example specifies application features not available in DHTML. As prescribed by the attributes, this application has neither border (border), nor title bar (caption), nor standard program icon (sysMenu). The application title appears in the Windows task list but not in the taskbar (showInTaskBar), and only one instance of the application is permitted to run at a time (singleInstance).

<HTML>

<HEAD>

  <TITLE>My Monster ApplicationTITLE>

  <HTA:APPLICATION ID="oMyApp"

    APPLICATIONNAME="monster"

    BORDER="none"

    CAPTION="no"

    ICON="/graphics/creature.ico"

    SHOWINTASKBAR="no"

    SINGLEINSTANCE="yes"

    SYSMENU="no"

    WINDOWSTATE="maximize">

HEAD>

HTML>

To launch an HTA, double-click its program icon, run it from the Start menu, open it through a URL, or start it from the command line. After starting, the HTA renders everything within the body tag and displays the value set in the title tag as the window title.

Want to read more about HTA file? Read it from MSDN:

Creating the Folder Structure

Before going into the depth, we need to finalize our folder structure. Create a root folder and name it properly. Create two folders inside it & name them as “Silverlight” and “XAP” respectively. Download the latest Silverlight runtime installer from Microsoft Site and save it inside the “Silverlight” directory. Put the application XAP that we published earlier into the “XAP” folder.

The other three files shown in the above screen represents one autorun.inf, one batchInstall.cmd and install.hta. We will create those files later in this article and discuss accordingly.

Configuring Silverlight Runtime Detection

Now we have to detect whether the Silverlight version is installed in client PC. It can be done using the JavaScript. You can use the Silverlight.js file which comes with every Silverlight application project. In our case, the whole file is not require and hence I took a little portion from it and modified as per our requirement.

First of all, we will create a function and inside it, we will create an ActiveXObject named “AgControl.AgControl”. From this instance of agcontrol, we will be able to know about the installed version of Silverlight. If it throws exception, means that, Silverlight is not installed in local PC. In other case, it will return the current installed version of Silverlight. Be sure to check the version in descending order.

Here is the whole code snippet:

        function GetSilverlightVersion() {

            // initialize the silverlightVersion to -1.

            var silverlightVersion = -1;

            getSilverlightVersion = function () {

                try {

                    // create the ActiveX Object of AgControl.

                    // This is the core of Silverlight runtime.

                    var control = new ActiveXObject('AgControl.AgControl');

                    // will execute if your latest Silverlight version is 4.

                    if (control.IsVersionSupported("4.0")) {

                        silverlightVersion = 4;

                    // will execute if your latest Silverlight version is 3.

                    else if (control.IsVersionSupported("3.0")) {

                        silverlightVersion = 3;

                    // will execute if your latest Silverlight version is 2.

                    else if (control.IsVersionSupported("2.0")) {

                        silverlightVersion = 2;

                    // if Silverlight version is not supported by your app,

                    // set it as 0 (zero).

                    else {

                        silverlightVersion = 0;

                    control = null;

                catch (e) {

                    // if any exception while creating the ActiveX Object,

                    // will set the silverlightVersion as -1.

                    silverlightVersion = -1;

                    alert("Unable to create the ActiveX Object from Browser window.");

            // call to the inner function to detect the Silverlight.

            getSilverlightVersion();

            // return the version of the Silverlight.

            return silverlightVersion;

Now depending upon your Silverlight version, you can install the require Silverlight version. This thing also you can do using JavaScript. Wait, you can do this using JavaScript, but if you run from browser window, it will not work. To do this, we are using the HTML Application (.hta). For this, create another JavaScript method and create a WScript.Shell instance object from the ActiveXObject and call the Run() method by passing the required parameters. Here is the code for that:

        function InstallSilverlight() {

            WshShell = new ActiveXObject("WScript.Shell");

            WshShell.Run("Silverlight\\Silverlight.exe /q", 0, true);

You can see that, in the Run() method I passed the location of the Silverlight runtime installer as the first parameter. You can see that, I used “/q” as the argument for Silverlight installer. This silently installs the Silverlight in the local PC. As a second parameter I used “0” (zero). This ensures that, the executed application window will remain hidden. So, the end user will not see the installation window. The third parameter ensures whether the call will wait for the application to exit. If you pass “true”, it will wait until the executed application exits in memory. Once that application closes, it will continue running the next line of the script.

As per our requirement, we need to wait until the Silverlight runtime installs in the user’s machine and hence we used “true” as the third parameter.

Configuring OOB Application Installation

Now, we will create a batch file to execute the XAP installation silently. Open your notepad and write the following code inside it:

@ECHO OFF

@"%ProgramFiles%\Microsoft Silverlight\sllauncher.exe"

    /install:"XAP\SilverlightDistributionDemo.xap"

    /shortcut:desktop+startmenu

    /origin:http://www.kunal-chowdhury.com/Private/XAP/SilverlightDistributionDemo.xap

    /overwrite

@EXIT

The first line “@ECHO OFF” will hide the prompt of the console while executing. The second line in the above code is a bunch of 5 lines. You must need to write them in a single line. Due to proper formatting of the code snippet and help you to understand it properly, I splitted them in 5 lines. While writing in the notepad, be sure to write those 5 lines in a single line entry. In the second line, you need to call the sllauncher.exe, which comes with the Silverlight runtime. sllauncher.exe is responsible to install/execute a silverlight OOB application. See the parameters that I used there. The first parameter “/install” tells the application to install the .XAP file from the specified location. The second parameter tells the application to install the shortcut of the OOB application in either desktop, startmenu or both places. The third parameter tells to check for updated version in the sepecified link. The forth parameter instructs to overwrite the existing .xap (if any, already installed). In the third line “@EXIT” calls the exit method of the batch file to shutdown the batch processing.

Once you write the above code in notepad, save it as a .cmd file. Give a proper name while saving (in our case, it is “batchInstall.cmd". Save in proper location, as mentioned in the folder structure.

Now, you need to call this batch file from the HTML application file. Write another JavaScript function and call the Run() method of the WScript.Shell object with the proper parameters. In this case, we will use “false” as the third parameter as we don’t need to wait for the installer to install the OOB application.

Here is the full JavaScript code for you:

    function InstallSilverlight() {

        WshShell = new ActiveXObject("WScript.Shell");

        WshShell.Run("Silverlight\\Silverlight.exe", 0, true);

    function InstallOOBApplication() {

        WshShell = new ActiveXObject("WScript.Shell");

        WshShell.Run("batchInstall.cmd", 0, false);

    function Install() {

        var silverlightVersion = GetSilverlightVersion();

        if(silverlightVersion == 4) {

            InstallOOBApplication();

        else {

            InstallSilverlight();

            InstallOOBApplication();

        self.opener = this;

        self.close();

In the above code, we created another JavaScript method named “Install()”, which actually checks the current installed version of Silverlight. If the required version is available in user’s PC, it will start installing the OOB Application. If the Silverlight or required version is not present, it will start installing the Silverlight first. As we instruct the Run() method to wait for the installation, the OOB Application installation will start once the Silverlight installation completes. Finally terminate the HTA application from the memory.

Now last part in this is to call the Install() method on page load. Use the following code for that:

<body onload="Install();">

body>

Now save all this JavaScript code in a .hta file. Here is the full code inside your .HTA file:

    Application Executer

    "oMyApp"

        APPLICATIONNAME="Application Executer"

        BORDER="No"

        CAPTION="No"

        SHOWINTASKBAR="No"

        SINGLEINSTANCE="Yes"

        SYSMENU="No"

        SCROLL="No"

        Width="0"

        Height="0"

        maximizeButton="false"

        WINDOWSTATE="minimize">

"Install();">

Save the file in your root directory where batchInstall.cmd is present. Make sure that your file structure is proper.

Configuring CD-ROM Installation Launch

It’s time for us to run the installer automatically once you insert the CD/DVD installation drive or double click the drive to open. To do this, you have to add a “autorun.inf” file in the root directory where the .hta & .cmd batch files are present (see the folder structure above). Be sure that, the installer will automatically launch, if the end user has enabled the autorun functionality. By default it is enabled.

Write the following code in your “autorun.inf” file:

[autorun]

open = install.hta

shell\install = &Install

shell\install\command = install.hta

The first line will tell the OS to autorun the file. The second line instructs the OS to autorun the mentioned file from the mentioned location. The third line will add a “Install” menu item in the context menu of the drive when you insert the CD media. It will have the installer file location, which is mentioned in the fourth line.

Read more about Autorun.inf file and it’s options from here: Autorun.inf, What is it?

Step3 : Demo

It is very difficult to demo it here. To test it, uninstall your Silverlight plug-in from your PC. Then run the install.hta file from the folder as shown in the below diagram:

This will call the “Install()” method of the JavaScript and check for the installed Silverlight version. As it didn’t find the Silverlight installed there, will start installing the Silverlight runtime silently. Once installed successfully, it will start installing the OOB Application silently. No UI will be visible for the user to interact with (this was our requirement). Once the installer installs the OOB application, you will see the OOB icon immediately in your desktop & start menu.

Double click it to run the application from desktop or click to execute from start menu.

Now, again run the “install.hta” file. It will call the JavaScript method “Install()”. The function will check whether the required Silverlight version installed in user PC & as the required version matches the original installed version, it will skip to the OOB application installation part. It will overwrite the existing XAP if it is already present.

Summary

I hope, you got the basic idea of the installation process from it. I used HTA file to demonstrate it in better way. It will be easy for you to read the JavaScript code and understand it properly. The next step for you is to create an original installer file by using the concept mentioned here.

If you like this article, please vote for it. Appreciate you for your feedbacks/comments/suggestions. Thank you for reading the article.

Download

- Silverlight OOB Application Installer (Source Code)

About the Author

Kunal Chowdhury is a Microsoft MVP in Silverlight,. He has a very good skill over Silverlight, XAML & C#. He worked in various Silverlight & WPF projects including Windows 7 Multitouch applications and delivered a quality output every time. He received various awards related to Software Development.

During his pass time, he always busy to answer in online forums, writing articles and blog postings to share his knowledge across the world.

You can reach him in his Blog - http://www.kunal-chowdhury.com/
He also Tweets. Follow him in Twitter - @kunal2383

MS Word Mail Merge with Silverlight COM Automation

editorial@silverlightshow.net (Andrej Tozon ) — Wed, 24 Mar 2010 09:53:00 GMT

This article is compatible with the latest version of Silverlight.

One of the new Silverlight features allows applications talking to native COM components through COM Automation classes. Perhaps one of the most interesting use case for this new COM interoperability feature in Silverlight LOB applications is interacting with locally installed Microsoft Office applications to work with their documents.

This article will focus on creating a new MS Word document using Word’s mail merge feature. Mail merging lets user create a number of personalized documents using pre-made templates. A template contains special placeholders (fields), which, in the process of mail merging, are populated with data from a structured data source.

Technologies, used for this article

The core of the sample application is of course Silverlight and it’s automation features. WCF RIA Services will serve as a bridge between the server (where the data will be) and the client (application), while MEF (Managed Extensibility Framework) will serve as means of separating application components to be composed at runtime.

What are we going to build?

The sample application is about creating invitation cards to a child’s birthday. The birthday girl maintains a list of her friends in a database on a server and when her birthday is coming up, she updates the invitation template and picks the friends she’d like to have at the party. After a simple click on a button, a document, containing cards for all her friends, appear on the screen, ready to be printed.

The data

Rather than having a proper database on the server, this sample uses a simple sample data generator to create fake user data. Names and surnames are taken from www.namestatistics.com and paired randomly to avoid any unintentional reference to a real-world person.

 public static class DataGenerator

 {

     private static readonly Random Randomizer = new Random();

     private static readonly string[] Names = new[] { "James", "John", "Robert", "Michael", "William", "David", "Richard", "Charles", "Joseph", "Thomas", "Mary", "Patricia", "Linda", "Barabara", "Elizabeth", "Jennifer", "Maria", "Susan", "Margaret", "Dorothy" };

     private static readonly string[] LastNames = new[] { "Smith", "Johnson", "Williams", "Jones", "Brown", "Davis", "Miller", "Wilson", "Moore", "Taylor", "Anderson", "Thomas", "Jackson", "White", "Harris", "Martin", "Thompson", "Garcia", "Martinez", "Robinson" };

     public static Person Create(int i)

     {

         int nameIndex = Randomizer.Next(Names.Length);

         return new Person

         {

             Id = i,

             FirstName = Names[nameIndex],

             LastName = LastNames[Randomizer.Next(LastNames.Length)],

             Gender = (nameIndex < Names.Length / 2) ? Gender.Boy : Gender.Girl,

         };

     }

 }

The generator creates an instance of a simple Person class, which is declared as:

 public class Person

 {

     [Key]

     public int Id { get; set; }

     public string FirstName { get; set; }

     public string LastName { get; set; }

     public Gender Gender { get; set; }

 }

The [Key] attribute over the Id property indicates that the Person class is going to take part in the RIA Services contract. I’m not going to dive into details on setting the Silverlight projects to use WCF RIA Services (and RIA Services in general) because that’s beyond the scope of this article; but at this point, I will include the domain service class, which is responsible for getting the data and exposing it on a server endpoint:

 [EnableClientAccess]

 public class PartyDomainService : DomainService

 {

     public IEnumerable GetChildren()

     {

         List children = new List();

         for (int i = 0; i < 10; i++)

         {

             children.Add(DataGenerator.Create(i));

         }

         return children;

     }

 }

PartyDomainService is a simple custom DomainService having a single method that will create and return a [mocked] list of 10 children that our birthday girl keeps track of in her database and would like to see on her birthday party. If RIA Services are set correctly, PartyDomainService should get replicated in the client project – see the Generated_Code folder:

[Hint: to see the above folder/file, check the “Show All Files” option button in Solution Explorer]

Bringing in MEF

One good thing about client-generated RIA Services code is that all generated classes are partial, thus extendable. That means that developers can easily make any DomainContext class a MEF export by extending the generated class and decorating it with an appropriate Export attribute. All you need to be aware of when extending partial classes is to put the extending class into the same namespace as the generated class:

 [Export]

 public partial class PartyDomainContext

 {

 }

Domain context will get imported into a MailMerge class, which is responsible for doing the actual data merging. Importing is done through constructor injection:

 [ImportingConstructor]

 public MailMerge(PartyDomainContext dataContext)

 {

     this.dataContext = dataContext;

 }

When composition happens, the MailMerge class, which itself is an export too, will be imported into the MainPageViewModel as a property import. This way, the ViewModel will automatically have access to the MailMerge class without having to instantiate it by itself.

Mail merging

Mail merging in MS Word requires two things – a template and a data source to fill it. But before we continue with the MailMerge class, let’s take a look at the birthday invitation template our young girl has put together in Word:

Note the underlined text on the top – Title, FirstName and LastName are MailMerge fields that were inserted into the template; these are meant to be replaced with actual data from our “database” and correlate to Person’s Gender, FirstName and LastName properties.

The princess saved the template into the My Documents folder where she’ll be able to pick it from later. Our next task is creating the data source, which is going to be another Word document with the data table inserted in it. And this Silverlight application will be the one that creates it!

Accessing local file system to create the data source

Trusted Silverlight 4 applications now have access to local file system which means they are allowed to read and write files in those special ‘My’ user folders (My Documents, My Pictures, …) without having to explicitly ask the user for those permissions. With templatePath being the full path to the template file, here’s how the name for data source document is chosen:

 string myDocumentsFolder = Environment.GetFolderPath(Environment.SpecialFolder.MyDocuments);

 string filename = Path.GetFileNameWithoutExtension(templatePath);

 string dataFilePath = Path.Combine(myDocumentsFolder, filename + ".dat");

Running with elevated permissions, the application will be allowed to write to that file. The data source document won’t be created by our code, we’ll leave this to be done by Word.

Talking to Word

To instantiate the COM object, we’re required to call it by it’s name, and the syntax is very similar to what we were doing years ago with classic ASP or VB script. Except, this time it’s the AutomationFactory class that provides the CreateObject method:

 dynamic wordApplication = AutomationFactory.CreateObject("Word.Application");

The dynamic keyword is new in C# 4 syntax and provides the late-binding mechanism we knew back in the VB6/COM days. You can also see the use of dynamic keyword as a shorter syntax for reflection, all serving the purpose of dynamic objects not being type checked during the compilation, but rather at run time only.

Using the dynamic keyword also means you don’t get any intellisense help in Visual Studio which subsequently means you’ll end up reading a lot of help files to understand the API on objects you’re working with. For example, try this Word method for opening a single document:

 [application].Documents.Open(FileName, ConfirmConversions, ReadOnly, AddToRecentFiles, PasswordDocument, 

                         PasswordTemplate, Revert, WritePasswordDocument, WritePasswordTemplate, Format, 

                         Encoding, Visible, OpenConflictDocument, OpenAndRepair, DocumentDirection, NoEncodingDialog)

Not exactly the prettiest you’ve seen, right? Fortunately, all but the first parameter in the above method are optional and you can leave them out – C# 4 provided with yet another fine concept of having optional parameters in method calls. That means that instead of writing this:

 dynamic document = wordApplication.Documents.Open(ref templatePath, ref missingValue, ref missingValue, 

                    ref missingValue, ref missingValue, ref missingValue, ref missingValue, ref missingValue, 

                    ref missingValue, ref missingValue, ref missingValue, ref missingValue, ref missingValue, 

                    ref missingValue, ref missingValue, ref missingValue);

we can now simply write:

 dynamic document = wordApplication.Documents.Open(templatePath);

Sweet!

To create the data source document, another method with 9 parameters has to be invoked. We only need to provide two of them, but they are a few parameters apart, so this is the best we can come up with:

 document.MailMerge.CreateDataSource(templatePath, Missing.Value, Missing.Value, header);

If you’re tempted to use named parameters at this point – you can’t. Currently, named parameters are simply not supported in Silverlight COM Automation scenarios.

OK, we successfully created the data source document. Let’s open it and write some data into it. The Person collection is converted to the two-dimensional array, transforming some of the data to fit what’s needed for the template:

 string header = "FirstName;LastName;Title";

 IEnumerablestring>> data = p.Entities.Select(person => new[]

     {

         person.FirstName,

         person.LastName,

         person.Gender == Gender.Boy ? "prince" : "princess"

     }.AsEnumerable());

Header string is used by the CreateDataSource for creating a table in the document. The array will be written to that same table as its data content:

 dynamic table = dataDocument.Tables(1);

 for (int i = 0; i < data.Count(); i++)

 {

     dynamic row = i == 0 ? table.Rows(2) : table.Rows.Add();

     InsertRow(row, data.ElementAt(i));

 }

Almost done! One last thing needed to be done is doing the actual merge:

 document.MailMerge.Execute(false);

At this point, Word will take the template and the data source document, and if everything’s set up correctly, start creating a new page for every row in data source table.

It’s worth noting that COM Automation feature is only allowed with trusted application, and on systems that support it (currently that’s Windows only). To check if COM Automation is available to your code, check the following API:

 bool isAutomationAvaliable = AutomationFactory.IsAvailable;

Also, in order to use the dynamic keyword, a project should include a reference to the Microsoft.CSharp.dll.

UI / Conclusion

The accompanying project includes a piece of UI, which will let our young princess select a Word template and process it with the data from the server. Please see other code in there as well as it provides the complete solution presented in this article.

Full source code of the project is available to download here.

COM Automation in Silverlight is big because of all the opportunities it provides to the developer. Due to its nature, it currently only works when the application is deployed to a Windows OS, but Microsoft is investigating means for providing similar stories on other OS’s as well. Elevated permissions are required to use the Automation.

The article discussed a process of creating birthday invitations; you can use exactly the same concept for issuing invoices, for example. Microsoft Office integration has never been so exciting as it is now, with Silverlight leading the way.

Tip: Detecting Network Change in Silverllight 3 Application

editorial@silverlightshow.net (Nikolay Raychev ) — Thu, 19 Mar 2009 11:15:00 GMT

In Silverlight 3 you are able to check if an internet connection is present. You can also detect network changes.

See also:
Silverlight 3 as a Desktop Application (Out-of-Browser Applications)

Network availability checking:

    
            if (System.Net.NetworkInformation.NetworkInterface.GetIsNetworkAvailable())  
        
            {  
        
                this.InitTasks();  
        
            }

Network change detection:

    
            NetworkChange.NetworkAddressChanged += new 
        
            NetworkAddressChangedEventHandler(NetworkChangedCallback);

    
            private void NetworkChangedCallback(object sender, EventArgs e)  
        
            {  
        
                if (System.Net.NetworkInformation.NetworkInterface.GetIsNetworkAvailable())  
        
                {  
        
                    this.InitTasks();  
        
                }  
        
            }

Demo

As an example I created the following demo:

This is a simple tasks list. You can add or delete tasks. The tasks are saved on the server and the application is using WCF Service to connect to the server. Nothing special. But if you save the application for offline use you can use it even if you don't have internet connection. I'm using the isolated storage to keep copy of the data on the client and the application is working with the local copy when there is no connection. It synchronizes automatically whenever the connection comes back.

Download Source

That's it!

Silverlight as a Desktop Application (Out-of-Browser Applications)

editorial@silverlightshow.net (Nikolay Raychev ) — Wed, 18 Mar 2009 11:15:00 GMT

This article is compatible with the latest version of Silverlight.

Introduction

A cool new feature in Silverlight is the ability to run Silverlight applications out of the browser which resembles a desktop application. Only a few configuration steps are needed to enable your application to run offline.

See also:
Tip: Detecting Network Change in Silverllight 3 Application

Overview

To enable this feature you only need to open the AppManifest.xml file which can be found in the Properties folder and add
some settings as follows:

    
            <Deployment xmlns="http://schemas.microsoft.com/client/2007/deployment" 
        
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        
              EntryPointAssembly="TaskList" 
        
              EntryPointType="TaskList.App">  
        
              <Deployment.Parts> 
        
              Deployment.Parts> 
        
              <Deployment.OutOfBrowserSettings> 
        
                <OutOfBrowserSettings  
        
                  ShortName="Task List">  
        
                  <OutOfBrowserSettings.WindowSettings> 
        
                    <WindowSettings Title="Offline Task List" /> 
        
                  OutOfBrowserSettings.WindowSettings> 
        
                  <OutOfBrowserSettings.Blurb> 
        
                    Allows saving your tasks offline  
        
                  OutOfBrowserSettings.Blurb> 
        
                OutOfBrowserSettings> 
        
              Deployment.OutOfBrowserSettings> 
        
            Deployment>

Provided that your application is called TaskList you must add two attributes to the Deployment element:

EntryPointAssembly="TaskList"
EntryPointType="TaskList.App"

You must also add the OutOfBrowserSettings section with the following settings:

ShortName - the name of the application displayed on the desktop or the start menu.
Title - the title displayed in the title bar of the window which runs the application.
Blurb - this is seen in the "Comments" section of the file.

You are done. When you run your application in the browser you can notice the following context menu:

Note that if your application is not configured for offline use the "Install ... onto this computer..." is disabled and since we've configured it we can click it and the following dialog appears:

You have the option to choose where to put shortcuts to your application. By clicking "OK" you are ready and your Silverlight application is added as a standalone application.

Removing the application is as easy as adding it. When your application is saved for offline use the context menu looks as follows:

Clicking "Remove this application" and confirming removes the application from wherever it is added and also removes the shortcuts.

You also have the option to put your own icons which will be used by your application as a desktop icon, icon in the start menu, etc. You just need to create 4 png files with sizes 16x16, 32x32, 48x48 and 128x128. Include them in your project and set their Build Action to Content. It's easy, just right click on the image in the Solution Explorer and go to Properties. After that you must specify paths to the icons in the OutOfBrowserSettings section as follows:

    
            <OutOfBrowserSettings.Icons> 
        
              <Icon Size="16,16">Images/sls16.pngIcon> 
        
              <Icon Size="32,32">Images/sls32.pngIcon> 
        
              <Icon Size="48,48">Images/sls64.pngIcon> 
        
              <Icon Size="128,128">Images/sls128.pngIcon> 
        
            OutOfBrowserSettings.Icons>

That's all. You have your custom icons.

Now the whole AppManifest.xml file looks like:

    
            <Deployment xmlns="http://schemas.microsoft.com/client/2007/deployment" 
        
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        
              EntryPointAssembly="TaskList" 
        
              EntryPointType="TaskList.App">  
        
              <Deployment.Parts> 
        
              Deployment.Parts> 
        
              <Deployment.OutOfBrowserSettings> 
        
                <OutOfBrowserSettings  
        
                  ShortName="Task List">  
        
                  <OutOfBrowserSettings.WindowSettings> 
        
                    <WindowSettings Title="Offline Task List" /> 
        
                  OutOfBrowserSettings.WindowSettings> 
        
                  <OutOfBrowserSettings.Blurb> 
        
                    Allows saving your tasks offline  
        
                  OutOfBrowserSettings.Blurb> 
        
                  <OutOfBrowserSettings.Icons> 
        
                    <Icon Size="16,16">Images/sls16.pngIcon> 
        
                    <Icon Size="32,32">Images/sls32.pngIcon> 
        
                    <Icon Size="48,48">Images/sls64.pngIcon> 
        
                    <Icon Size="128,128">Images/sls128.pngIcon> 
        
                  OutOfBrowserSettings.Icons> 
        
                OutOfBrowserSettings> 
        
              Deployment.OutOfBrowserSettings> 
        
            Deployment>

The application updates automatically whenever you release a new version on the server. When you start the offline version or it detects that the network is present it checks for a new version, downloads it and updates itself. Whenever you start it again you will be using the updated version.

Demo

As an example I created the following demo:

Download Source

Conclusion

This article describes the steps you need to make in order to allow the users to make your Silverlight application act like a Desktop application on their computers. Any comments are welcome.