Light Up the Web with Silverlight by Jacek Ciereszko

[Behaviors] Mouse Over ComboBox Open (Behavior)

Jacek Ciereszko — Sat, 03 Oct 2009 12:58:36 GMT

After my last successes with TextBox Button Inovker Behavior, which was downloaded more than 700 times in 7 days and recommended by Silverlight sites like http://silverlike.net/invoke-button-click-event/, http://silverlightcream.com/, http://geekswithblogs.net/WynApseTechnicalMusings/ , I got motivation to share with you one more. This time my behavior will not be so useful and probably won’t be so famous but I hope It will be helpful for someone.

What I did

What I did this time is a simple behavior for opening ComboBox when mouse is over it. It might be useful in some scenario and makes one more click less for user. You can also find similar solution on youtube.com site where you don’t have to click ComboBox, but only move mouse over user's profile.

Live demo

How to add this to application

<ComboBox>
  <interaction:Interaction.Behaviors>
     <behavior:OpenComboBoxBehavior />
  </interaction:Interaction.Behaviors>

<!-- sample data -->
  <ComboBoxItem>
     <TextBlock Text="First element" />
  </ComboBoxItem>
  <ComboBoxItem>
     <TextBlock Text="Second element" />
  </ComboBoxItem>
  <ComboBoxItem>
     <TextBlock Text="Third element" />
  </ComboBoxItem>
  <ComboBoxItem>
     <TextBlock Text="Fourth element" />
  </ComboBoxItem>
</ComboBox>

where "interaction:" is a namespace for "clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" and "behavior:" is a namespace for behavior's code.

Source Code

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Interactivity;

/// Behavior for ComboBox control.
/// It invokes drop down list when mouse is over it.
/// 
/// Jacek Ciereszko
/// http://geekswithblogs.net/SilverBlog/
/// 
///

namespace ComboBoxBehavior
{
   public class OpenComboBoxBehavior : Behavior
   {
       /// 
       /// Called after the Behavior is attached to an AssociatedObject.
       /// 

       /// Override this to hook up functionality to the AssociatedObject.
       protected override void OnAttached()
       {
           base.OnAttached();
           this.AssociatedObject.MouseEnter += new MouseEventHandler(AssociatedObject_MouseEnter);
       }

       /// 
       /// Called after the Behavior is detached from an AssociatedObject.
       /// 

       /// Override this to hook up functionality to the AssociatedObject.
       protected override void OnDetaching()
       {
           this.AssociatedObject.MouseEnter -= new MouseEventHandler(AssociatedObject_MouseEnter);
           base.OnDetaching();
       }

       /// 
       /// When mouse is over ComboBox, control drop down will open
       /// 

       /// 
       /// 
       void AssociatedObject_MouseEnter(object sender, MouseEventArgs e)
       {
           this.AssociatedObject.IsDropDownOpen = true;
       }
   }
}

Download

Source code and live example is also available on http://gallery.expression.microsoft.com/en-us/OpenComboBoxDropDown

---
Jacek Ciereszko

Polish version: http://jacekciereszko.pl/2009/10/behaviors-mouse-over-combobox-open.html

[ Visual Search Engine ] Surfity.com new release

Jacek Ciereszko — Thu, 24 Sep 2009 16:46:39 GMT

As I promised in my last post about Surifty.com ( http://geekswithblogs.net/SilverBlog/archive/2009/09/15/visual-search-dont-browse-surf-it.aspx ) I did some performance improvement but still you have to run it on good PC to see 100% power of visual search engine. From now on application need less than 250MB in memory (I know, It’s still a lot!).

I also changed design. I hope it's now more user friendly. :)

And here is a sample video showing how http://surfity.com/ looks like in action!

Bests,
Jacek Ciereszko

[Behaviors] How to attach behavior in code behind (Silverlight 3)

Jacek Ciereszko — Tue, 22 Sep 2009 16:59:42 GMT

For those of you who would like to add (attach) behavior to control in code behind, there is a simple solution.

Adding Behaviors

Let's say that we have xaml code like this one:

<i:Interaction.Behaviors>

<behavior:TextBoxSimpleBehavior />

</i:Interaction.Behaviors>

</TextBox>

, where "i:" is a namespace for "clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" and "behavior:" is a namespace for behavior's class "TextBoxSimpleBehavior", which can be simple class like this one (just adding typed letters to content):

using System;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Ink;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using System.Windows.Interactivity;

/// Dummy sample behavior for TextBox control.

/// It add extra letter in the end of Text property.

/// <author>

/// Jacek Ciereszko

/// http://geekswithblogs.net/SilverBlog/

/// </author>

namespace TextBoxEnterBehavior

{

public class TextBoxSimpleBehavior : Behavior<TextBox>

{

public TextBoxSimpleBehavior() : base() { }

/// <summary>

/// Called after the Behavior is attached to an AssociatedObject.

/// </summary>

/// <remarks>Override this to hook up functionality to the AssociatedObject.</remarks>

protected override void OnAttached()

{

base.OnAttached();

this.AssociatedObject.KeyDown += new KeyEventHandler(AssociatedObject_KeyDown);

}

/// <summary>

/// Called after the Behavior is detached from an AssociatedObject.

/// </summary>

/// <remarks>Override this to hook up functionality to the AssociatedObject.</remarks>

protected override void OnDetaching()

{

base.OnDetaching();

this.AssociatedObject.KeyDown += new KeyEventHandler(AssociatedObject_KeyDown);

}

/// Simple operation on TextBox

void AssociatedObject_KeyDown(object sender, KeyEventArgs e)

{

this.AssociatedObject.Text += e.Key;

}

So, to do the same operation in code behind, write:

// Adding behavior in code behind

TextBoxSimpleBehavior textBoxSimpleBehavior = new TextBoxSimpleBehavior();

System.Windows.Interactivity.Interaction.GetBehaviors(TextBoxControl).Add(textBoxSimpleBehavior);

Adding Triggers

In this example I will use my TargetedTriggerAction from previous post http://geekswithblogs.net/SilverBlog/archive/2009/09/21/behaviors-textbox-enter-button-invoke-targetedtriggeraction.aspx
In xaml I attached my TriggerAction using this code:

<i:Interaction.Triggers>

<i:EventTrigger EventName="KeyDown" >

<behavior:TextBoxEnterButtonInvoke TargetName="TargetedButton" />

</i:EventTrigger>

</i:Interaction.Triggers>

</TextBox>

where "i:" is a namespace for "clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" and "behavior:" is a namespace for behavior's code.

In code behind I will write this code:

// Adding TriggerAction in code behind

TextBoxEnterButtonInvoke textBoxEnterButtonInvoke = new TextBoxEnterButtonInvoke();

textBoxEnterButtonInvoke.TargetName = "TargetedButton";

System.Windows.Interactivity.EventTrigger eventTrigger = new System.Windows.Interactivity.EventTrigger("KeyDown");

eventTrigger.Actions.Add(textBoxEnterButtonInvoke);

System.Windows.Interactivity.Interaction.GetTriggers(TextBoxInvoker).Add(eventTrigger);

Done! That's all we need to attach behaviors in code behind.

---
Jacek Ciereszko

[Behaviors] TextBox Enter Button Invoke (TargetedTriggerAction)

Jacek Ciereszko — Mon, 21 Sep 2009 14:57:32 GMT

Few days ago I wrote a small behavior, which I think, can be used in many applications, so I decided to share it with you :)

What are behaviors in Silverlight I won't write in this post, because there are many other places where you can find nice tutorial about this. I personally recommend this one: http://www.silverlightshow.net/items/Behaviors-and-Triggers-in-Silverlight-3.aspx

What I did

What I did is a "TargetedTriggerAction" behavior, which simulate button click on targeted button control, when user press "Enter" key in a TextBox control.

You probably think now that I did a useless code because you can do the same by handling KeyDown event in TextBox, but what about if you love MVVM, you want your code behind to stay clear and you don't want to make a mess in ViewModels? Then this solution is what you are looking for.

Where to use it?

The best place to use this behavior is a search controls, where user can finish operations by click Button control or pressing "Enter" key.

Live demo (pressing Enter key in the TextBox have the same result like clicking the button)

How to add it to your application

<Button x:Name="TargetedButton" Content="Targeted Button" />
<TextBox Text="TextBox" >
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="KeyDown" >
            <behavior:TextBoxEnterButtonInvoke TargetName="TargetedButton" />
        </i:EventTrigger>
    </i:Interaction.Triggers>
</TextBox>
where "i:" is a namespace for "clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" and "behavior:" is a namespace for behavior's code.

Source Code

Application is so small that I decided to enter all source code:

using System;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Ink;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using System.Windows.Interactivity;

using System.Windows.Automation.Peers;

using System.Windows.Automation.Provider;

using System.Windows.Controls.Primitives;

/// TargetedTriggerAction for TextBox control.

/// It invokes targeted button when Enter is pressed inside TextBox.

/// <author>

/// Jacek Ciereszko

/// http://geekswithblogs.net/SilverBlog/

/// </author>

///

namespace TextBoxEnterBehavior

{

public class TextBoxEnterButtonInvoke : TargetedTriggerAction<ButtonBase>

{

/// <summary>

/// Gets or sets the peer.

/// </summary>

/// <value>The peer.</value>

private AutomationPeer _peer { get; set; }

/// <summary>

/// Gets or sets the target button

/// </summary>

private ButtonBase _targetedButton { get; set; }

/// <summary>

/// Called after the TargetedTriggerAction is attached to an AssociatedObject.

/// </summary>

/// <remarks>Override this to hook up functionality to the AssociatedObject.</remarks>

protected override void OnAttached()

{

base.OnAttached();

_targetedButton = this.Target;

if (null == _targetedButton)

{

return;

}

// set peer

this._peer = FrameworkElementAutomationPeer.FromElement(_targetedButton);

if (this._peer == null)

{

this._peer = FrameworkElementAutomationPeer.CreatePeerForElement(_targetedButton);

}

/// <summary>

/// Called after targeted Button change.

/// </summary>

/// <remarks>Override this to hook up functionality to the new targeted Button.</remarks>

protected override void OnTargetChanged(ButtonBase oldTarget, ButtonBase newTarget)

{

base.OnTargetChanged(oldTarget, newTarget);

_targetedButton = newTarget;

if (null == _targetedButton)

{

return;

}

// set peer

this._peer = FrameworkElementAutomationPeer.FromElement(_targetedButton);

if (this._peer == null)

{

this._peer = FrameworkElementAutomationPeer.CreatePeerForElement(_targetedButton);

}

/// <summary>

/// Invokes the targeted Button when Enter key is pressed inside TextBox.

/// </summary>

/// <param name="parameter">KeyEventArgs with Enter key</param>

protected override void Invoke(object parameter)

{

KeyEventArgs keyEventArgs = parameter as KeyEventArgs;

if (null != keyEventArgs && keyEventArgs.Key == Key.Enter)

{

if (null != _peer)

{

IInvokeProvider invokeProvider = _peer.GetPattern(PatternInterface.Invoke) as IInvokeProvider;

invokeProvider.Invoke();

}

Download

Source code and live example is also available on http://gallery.expression.microsoft.com/en-us/TextBoxInvokeButton

-----
Jacek Ciereszko

Polish version: http://jacekciereszko.pl/2009/09/behaviors-textbox-enter-button-invoke.html

[Visual Search] Don’t browse, surf it!

Jacek Ciereszko — Tue, 15 Sep 2009 01:59:12 GMT

Today, when Microsoft released “Bing Visual Search” I decided also to release to public beta version of my own visual search site :) It’s of course not so fancy like this from Microsoft but I think it’s enough to search something and have fun.

http://surfity.com [Beta]

I named it Surfity.com because it’s more like surfing through the Internet than browsing. Surfity.com is available of course under http://surfity.com domain.

Lunch Surfity.com [Beta]

Features

Main features in Surfity.com are:

· Surfing through Images, Videos and websites (use tabs)

· User can use left list (listbox) to change actual picture or play with main surface.

· Main surface let to zoom in and out, drag and drop and select items (use mouse LBM and wheel).

· User is able to go to:

o “Full Screen” mode

o Enlarge surf-space

o Install application locally (out of browser)

Technologies

Surfity.com was created purely in .NET. It’s uses new features of Silverlight 3.0 and Bing.com’s API.

View enlarged

Surfity.com out of browser

Feedback

I’m looking forward for your feedback. If something is wrong, or you think it should work in different ways, please leave a comment! :)

History

I started this project about month ago to participate in programming competition. Because it was my third idea and I liked it so much, I decided to continue my research. Now I will adding new features until I will be bored or I will find something new to do ;)

Known issues

· I am aware about performance and this is main task to do now. I plan to fix it in next few days.

· Developer API. I would like to release user control, so everyone could incorporate Surfity.com with his websites and surf through his own data.

So, remember about comments and “surf the web with http://surfity.com” ;)

---

Jacek Ciereszko

New release of "Silverlight Count Down Control"

Jacek Ciereszko — Wed, 17 Jun 2009 10:50:37 GMT

Hi, "Silverlight Count Down Control" is now available in Silverlight 2.0! I did also some changes with tooltips. Read more on project's site ( http://silverlightgadgets.codeplex.com/ )

Live demo (Silverlight 2.0) : http://wpierdalaj.pl/SWG/SilverlightCountDown/Run/SilverlightCountDownTimerExampleTestPage.html

More info about control:
http://geekswithblogs.net/SilverBlog/archive/2009/04/27/silverlightcountdowncontrol.aspx

Silverlight 3.0 plus Out Of Browser equal RDA

Jacek Ciereszko — Sun, 31 May 2009 21:36:17 GMT

“Out Of Browser (OOB)” for Silverlight is a possibility to install RIA application on local computer and run it without web browser or even internet connection (occasionally connected applications). That’s why we have in title abbreviation RDA (Rich Desktop Application).

In this article I would like to present how it’s working and how to implement it in our application. It also contains demos, descriptions and a lot of images.

Demo

First we start with already working application, created for MIX09 conference. To run it, please go to this link: Run DEMO - Chess. This demo require Silverlight 3.0 SDK installed – download.

To install game, we need to click „Install Chess Now” button or click right mouse button on application and choose install option. During installation we can decide where we would like to place shortcut to our game. We are not able to set where we would like to have all application’s files, but only shortcuts.

In Windows we can put shortcut on desktop or/and menu start. MAC’s user can drag and drop it whenever they want. Of course in Windows we can also move installed shortcut later but we cannot change it during installation.

As you can see, installation process is a little supervised by Silverlight and not allow to modify too much.

“Out of browser” applications can work without connection to internet and synchronize data when this connection will be available. To store data we can use Isolated Storage memory, which after installation can contains 25MB of data without asking user. When we run application in browser, we can use only 1 MB without user permission. But in both situations, we are able to ask user and extend this limits.

To uninstall application, click right mouse button on application and choose uninstall option.

Let’s create our own OOB application

Let’s create simple Hello World application. This application will detect if it have access to the internet and if it work in browser or out of browser.

I. Simple installation

First step is a open Visual Studio and create new project “SilverlightApplication”. Then we open file „AppManifest.xaml” from “Properties” folder. Inside we should see commented code.

<Deployment.ApplicationIdentity>

<ApplicationIdentity.Blurb>Description of your Silverlight application</ApplicationIdentity.Blurb>

</ApplicationIdentity>

</Deployment.ApplicationIdentity>

This commented code is responsible for turning on installation option and determine descriptions and used icons. After we uncomment this code we can run application and install it on our computer.

Before we do that, let’s add simple TextBlock in file MainPage.xaml to see where is our application and that it’s working.

<UserControl x:Class="SilverlightOOBApplication.MainPage"

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

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

Width="400" Height="300">

</Grid>

</UserControl>

Now let’s run our HelloWorld. To install it, click right mouse button and choose „Install Out of Browser Silverlight … onto this computer„ .

Then choose place where would like to put shortcut to our application. We can install it on desktop or/and in start menu.

Now we should see HelloWorld in nice window. Our application work the same way like in browser but we don’t need connection to the internet and web browser.

II. Customize installation

First of all we can set parameters like “ShortName” used for example to name shortcut, “Title” as a local window’s title and “ApplicationIdentity.Blurb” as a description used for example in tooltips.

Let’s set this parameters. For example “ShortName” we will set to “Welcome App”, “Title” to “This is welcome application” and “ApplicationIdentity.Blurb” to “This is Hello World application and it makes nothing”.

AppManifest.xaml:

<Deployment.ApplicationIdentity>

<ApplicationIdentity

ShortName=" Welcome App "

Title=" This is welcome application ">

<ApplicationIdentity.Blurb>This is Hello World application and it makes nothing

</ApplicationIdentity.Blurb>

</ApplicationIdentity>

</Deployment.ApplicationIdentity>

In addition user is able to add some icons. Let’s open AppManifest.xaml file and add information about them in xml, like in the code below. Images can be in png format and we need to set their “Build Action” properties to “Content”.

We need to create four images in different sizes (16x16, 32x32, 48x48, 128x128). They will be used as a icons on your desktop, icon in window or during the installation. Example of AppManifest.xaml can looks like this one:

<Deploymentxmlns="http://schemas.microsoft.com/client/2007/deployment"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
<Deployment.Parts> </Deployment.Parts>

<Deployment.ApplicationIdentity>

<ApplicationIdentity.Blurb>This is Hello World application and it makes nothing

</ApplicationIdentity.Blurb>

<ApplicationIdentity.Icons>

<IconSize="16x16">images/icons/user-16.png</Icon>

<IconSize="32x32">images/icons/user-32.png</Icon>

<IconSize="48x48">images/icons/user-48.png</Icon>

<IconSize="128x128">images/icons/user-128.png</Icon>

</ApplicationIdentity.Icons>

</ApplicationIdentity>

</Deployment.ApplicationIdentity>

</Deployment>

III. How to check if application run locally or in browser

In case we would like to know if application was run in browser or locally, we can check it using Startup event and read state of „Application.Current.RunningOffline” variable.

public partial class App : Application

{

public App()

{

this.Startup += this.Application_Startup;

...

}

private void Application_Startup(object sender, StartupEventArgs e)

{

if (Application.Current.RunningOffline)

{

this.RootVisual = new OfflinePage();

}

else

{

this.RootVisual = new MainPage();

}

So variable „RunningOffline” provide information if program run out of browser or not, and like in code above, allows to choose different start page.

IV. How to check if internet connection is available

Method „NetworkInterface.GetIsNetworkAvailable()” shows actual state of application’s internet connection. It returns true if connection is available. We can also invoke method when internet connection state changes by using „NetworkChange.NetworkAddressChanged” event.

Let’s look at sample code below from ManPage.xaml.cs:

public MainPage()

{

InitializeComponent();

NetworkChange.NetworkAddressChanged += new NetworkAddressChangedEventHandler(OnNetworkChange);

}

void OnNetworkChange(object sender, EventArgs e)

{

if (NetworkInterface.GetIsNetworkAvailable())

{

// connected

}

else

{

// not connected

}

Inside constructor we add method („OnNetworkChange”) to internet status’s event. When you have two connections on one PC and when you turn off one of them, application will invoke event “NetworkAddressChanged” and method„NetworkInterface.GetIsNetworkAvailable()” will return still true. That’s why don’t use flags to monitor state of connection, always use „NetworkInterface.GetIsNetworkAvailable()” method.

On the other hand, connection to network where will be no Internet, is still a connection and method “GetIsNetworkAvailable()” will return true.

V. Application update

When you install application locally, you could probably want to update it when new version will be released. Silverlight make it automatically by downloading it and install with next application’s run. In addition, you can inform user about new version by using “ExecutionStateChanged” + “App.Current.ExecutionState” and displaying for example appropriate message.

App.xaml.cs:

public App()

{

this.ExecutionStateChanged += new EventHandler(App_ExecutionStateChanged);

}

void App_ExecutionStateChanged(object sender, EventArgs e)

{

if (App.Current.ExecutionState == ExecutionStates.DetachedUpdatesAvailable)

{

MessageBox.Show "New application's version is available. Please restart program.");

}

„ExecutionStateChanged” is invoked alwasy when application state changes. “ExecutionStates” contains also atributess like „Detached”, „DetachFailed”, „Detaching” or „RunningOnline”. We can use them to check if for example detaching was finished or is it working online.

As we can see, this type of configuration allows to work with instalation process easly and efficient.

Online Sample

Complete created application you can see here: Live DEMO (Silverlight 3.0 Beta 1)

Source code: link

Under the hood

Let’s look at OOB closely. All installed application works because they were saved locally on hard drive in user space with special given number. This number is used to locate the right application. Save programs are run thanks to sllauncher.exe which we can find in Silverlight folder (C:\Program Files\Microsoft Silverlight\3.0.40307.0\sllauncher.exe).

If we analyze shortcut to our application, we will find that it invoke sllauncher.exe with special parameters.

C:\Program Files\Microsoft Silverlight\<version>\sllauncher.exe <address.id>

Where “version” is a installed Silverlight version and “address.id” is a saved application’s www address with unique given number. Complete shortcut can looks like these:

„C:\Program Files\Microsoft Silverlight\3.0.40307.0\sllauncher.exe" localhost.4

“C:\Program Files\Microsoft Silverlight\3.0.40307.0\sllauncher.exe" www.jacekciereszko.pl.2

In Windows Vista we can find our saved (installed) application in folder

„C:\Users\<user name>\AppData\LocalLow\Microsoft\Silverlight\Offline\<address.id>”

There Silverlight store application’s files: xap, html, etc. In other operation systems this folder can be in different place but the true is that we don’t need them to work with Silverlight with OOB, so don’t be sad if you won’t find your repository.

Please, remember that your application always run in sandbox so after installation it not have any additional rights and it work the same way like in web browser. Using sandbox with Silverlight allows to install RIA application on local computer without administrator rights.

Installed application can detect if internet connection is available, work when this connection is not accessible and react when connection will work again. Thanks to this features, now we are able to create programs occasionally connected (Emissary) and synchronize gathered data once in a while.

Customization

First of all we can change appearance depends if application is installed or work in a browser (like in Chess demo, where in browser version we could only install application locally).

What should be also mentions is that in current version (Silverlight 3.0 Beta 1) we can only set window’s icon, title and position. Microsoft promised more options in next versions.

Debugger

My first problem with OOB was debugger who doesn’t work. Program runs outside of Visual Studio so debugger is not connected to our program. But, we have still “Attach to Process...” command and we can use it to debug programs. It is not what we would like to use, but it’s working.

Disadvantages

Few weeks ago I wanted to create application with „Out of Browser”, Silverlight Navigation and Silverlight Virtual Earth Map Control, but I found out some difficulties and eventually I realized that it won’t work. I had a problem with communication to VirtualEarth map (no support for HTML DOM). So before you start, better make simple “Proof Of Concept”.

Resources

Tim Heuera’s great screen cast showing how to create OOB application – link,

Chess game – link,

Ashish Shetty’s blog with some articles about “Out Of Browser” – link.

Polish Version: http://jacekciereszko.pl/2009/05/silverlight-30-out-of-browser-rda.html

Regards,

Jacek Ciereszko

Silverlight Count Down Control – Your days are counted

Jacek Ciereszko — Mon, 27 Apr 2009 21:29:17 GMT

Few days ago I decided to create Silverlight control which will count down event’s time. Nothing complex but sometimes can be useful. Created counter allows to make configuration in code (C#), XAML or by binding, which mean it supports Model-View-ViewModel (MVVM). I also created a compiled version which can be configured from html code using initParams. More details and examples you can find on project’s site.

Project main site and source code: http://silverlightgadgets.codeplex.com/

Live demo (Silverlight 3.0 beta 1) : http://wpierdalaj.pl/SWG/SilverlightCountDown/Run/SilverlightCountDownTimerExampleTestPage.html

I looking forward for your feedback! I know that I have to do something with “look and feel” and downgrade this version to Silverlight 2.0. If you have any others issues, just please leave me a comment. Thank you!

Jacek Ciereszko

Polish version of this article: http://jacekciereszko.pl/2009/04/silverlight-count-down-control-wasze.html

Improve installation experience in Silverlight 2.0

Jacek Ciereszko — Wed, 03 Dec 2008 23:25:14 GMT

Do you like install plug-in image for Silverlight 2.0? Do you think that user, who don’t know anything about Silverlight, will click it?

Usual the answer is NO!

What we should care is a user’s experience from first moments. If he disappoint on first install’s image, he probably won’t come back to our application.

What we can do about this?

We can customize installation process, so it will be more user-friendly and intuitive. We can give him information that everything is ok, that he should click installation button and nothing bad will happen!

To change installation process, we can create and show user our own “install plug-in” image. Let’s do this now!

For html files

<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
   <param name="source" value="ClientBin/SilverlightApplication1.xap" />
   <param name="onerror" value="onSilverlightError" />
   <param name="background" value="white" />
   <param name="minRuntimeVersion" value="2.0.31005.0" />
   <param name="autoUpgrade" value="true" />
   <a href="http://go.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;">
        <img src="ClientBin/InstallSL.png" alt="Get Microsoft Silverlight" style="border-style: none" />
   </a>
</object>

To set our image, we should only change “src” value for <img tag and point it at our image. We can even modify entire html code, write nice information about application, video, links to others pages, etc.

For aspx files

<asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/SilverlightApplication1.xap" MinimumVersion="2.0.31005.0" Width="100%" Height="100%">
 <PluginNotInstalledTemplate>
      <a href="http://go.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;">
          <img src="ClientBin/InstallSL.png" alt="Get Microsoft Silverlight" style="border-style: none" />
      </a>
 </PluginNotInstalledTemplate>
</asp:Silverlight>

For ASP.NET (aspx) files we have to add parameter "PluginNotInstalledTemplate" and as a value insert html code. It can be, for example image with information about application or entire html code. In this example, I used the code from html example.

How to in easy way test our installation image

To test how our pre-installation html code looks like, we don’t need to uninstall every time Silverlight plug-in, we can use instead of it, additional features in Internet Explorer.

All you have to do is open “Tools” -> “Manage Add-ons” -> “Enable or Disable Add-ons”

Now find Silverlight plug-in and turn it on/off. Your application will restart automatically and pre-installer will appear.

My example

As a example I would like to show pre-installer image for my Solitaire Game.

Game looks like this:

When user don’t have plug-in to Silverlight, game looks like this:

But when we change pre-installer image, then game could look like this:

p.s. Polish version: http://jacekciereszko.pl/2008/11/obrazek-instalacyjny-silverlight-20.html

Best Regards,
Jacek Ciereszko

Full Screen application in Silverlight 2.0

Jacek Ciereszko — Mon, 27 Oct 2008 00:45:04 GMT

I just updated to RTW versiono one more article about Full Screen mode in Silverlight 2.0. This article describe how to add in few steps, full screen mode to our Silverlight applications.

Updated article you can find here: http://geekswithblogs.net/SilverBlog/archive/2008/06/10/full-screen-mode-in-silverlight-2.0-rtw-applications.aspx

Best Regards,
Jacek Ciereszko