IdentityMine

| Tags: Laurent Bugnion, Silverlight

originally posted by Laurent Bugnion: (link) - please comment at original post

In Silverlight 3 and 4, it is possible to create a Silverlight application and to have the user install it on the desktop (aka Out Of the Browser OOB). This is a great way to offer a “light desktop” experience, where the application can be started from a shortcut on the desktop or the Start menu, but running on Silverlight so that you don’t need the full .NET framework, and can run it on PC and Mac as you like. You can even use the application when the PC is offline, which is not possible with an in-browser application. I am very excited about this feature, because I was one of the first to talk about how great such a feature would be to add a piece to the .NET continuum of client applications.

This post will show you how to create a new Silverlight application and enable it to run out of the browser. I decided to write it because of a small issue I had when trying to setup icons for an OOB application I was working on. The icons did not show up, and it was not quite clear why not: No error messages or warnings, it simply didn’t work. Finally, talking to my boss Nate Dunlap made me realize that for some reason the build action for the icons was set to Resource. Changing it to Content instead solved the issue.

To brand your application and make it easily recognizable, you should set icons for it. The icons are used in various locations for the OOB application: On the desktop in the shortcut; in the Start menu; in the taskbar. Getting the icons to show is actually quite easy, if you are careful about some details. Follow the steps:

  • Create a Silverlight application in Visual Studio 2010.
  • Add 4 icons for your application to the project, for example in a folder named “Resources”. You need to add all 4 icons, in PNG format, with sizes 16x16px, 32x32px, 64x64px and 128x128px.
  • Select each icon that you just added, and press F4. This opens the properties panel for the files. Make sure that the Build Action is set as Content, or else the icons will not show!
  • Open the project properties by right clicking on the project in Visual Studio Solution Explorer, and selecting Properties.
  • Select the tab Silverlight.
  • Check the checkbox marked “Enable running application out of the browser”.
  • Click the button marked “Out-of-browser settings”.

LB1

  • Select each icon corresponding to the desired size.

LB2

  • Open the file MainPage.xaml and enter the code shown below. This adds a Button and a TextBlock to the scene.
<StackPanel x:Name="LayoutRoot"
            Background="White">

    <TextBlock x:Name="IntroTextBlock"
               FontSize="24"
               FontWeight="Bold"
               HorizontalAlignment="Center"
               Margin="10" />

    <Button Content="Install"
            x:Name="InstallButton"
            Margin="10"
            Width="100"
            Height="50"
            Click="InstallButton_Click" />
</StackPanel>
  • Open MainPage.xaml.cs and type the code below.
    • In the constructor, we check if the application is running inside or outside of the browser. Depending on that, we hide the Button by setting its Visibility to Collapsed, and change the text of the TextBlock.
    • If the Button is visible and gets clicked, the corresponding event handler is called. Installing the application requires just one line of code.
public MainPage()
{
    InitializeComponent();

    if (Application.Current.IsRunningOutOfBrowser)
    {
        InstallButton.Visibility
            = System.Windows.Visibility.Collapsed;
        IntroTextBlock.Text = "Check my icons!";
    }
    else
    {
        IntroTextBlock.Text = "Install me first!";
    }
}

private void InstallButton_Click(
    object sender, RoutedEventArgs e)
{
    Application.Current.Install();
}
  • Run the application once. You need to install the OOB application before you can debug it in Visual Studio. After starting the app, you should see the following scene:

LB3

  • Click on the Install button. This displays a confirmation dialog. Note the presence of the 128x128 icon that we defined in the Properties before.

LB4

  • After pressing OK, the application starts in OOB mode. Notice the small 16x16 icon in the window’s title bar. Also, you should see an icon in the application’s button in the task bar on Windows.
  • Close the application and return to the Project Properties page in Visual Studio.
  • Select the Debug tab and set the Start Action to “Installed out-of-the-browser application”. Make sure that you select the correct one.

LB6

From now on, when you start the app from Visual Studio (with F5 or Ctrl-F5), the OOB application will start immediately and you don’t need to uninstall and reinstall it.

Conclusion

Creating Out of the Browser applications is really easy in Visual Studio 2010 thanks to the corresponding dialogs. It is also easy to define icons for your application, which helps creating a stronger identity for your software. However, when you do so, make sure that the icons’ build action is set to Content!!

Remember to please comment at original post: (link)

Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInPin on PinterestShare on RedditShare on TumblrEmail this to someoneDigg thisFlattr the authorShare on StumbleUpon

Comments are closed.