Silverlight Forums – Silverlight Tutorials, Articles and News

When building RIAs you often rely on data being downloaded when up front via the preloader which is find for getting the look and feel and some static content but when you need to display specific data which the user has input into often you need to pass data to and from web services or databases. This obviously requires an active internet connection but what happens if the users connection drops? Well in Silverlight 3 the NetworkInformation namespace was introduced which allows you to hook up an event to your application and capture when the connection is alive or dropped.

In this tutorial I am going to show you how to hook up this event and also inform the user of the issue on screen.

I hook up the event on the App.xaml.cs but before we hook up the event we need to create a control which we display on screen. Once you have your project created add a new file ‘Silverlight User Control’

Create a Silverlight User Control

Once the user control is created you need to add a textblock to the new control so you can inform the user what is happening. Here is the Xaml from my control

<UserControl x:Class=&quot;SilverlightForums_NetworkInformation.InternetConnectionStatus&quot;
    xmlns=&quot;http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;
    xmlns:x=&quot;http://schemas.microsoft.com/winfx/2006/xaml&quot;
    Width=&quot;400&quot; Height=&quot;300&quot;>
    <StackPanel x:Name=&quot;LayoutRoot&quot; Background=&quot;White&quot;>
        <TextBlock x:Name=&quot;Status&quot; Text=&quot;Internet Connection Lost&quot; />
    </StackPanel>
</UserControl>

Now that the Xaml is taken care of you can move on to the code. Obviously you should design the Xaml to fit in with your project but for this example it shall do Now in the app.xaml.cs create a private member of your new control.

#region Private Members
private InternetConnectionStatus _ics;
private MainPage mainPage;
#endregion

Also define a private member of MainPage as you can see I have done this above and it is called mainPage.

Now find the ‘Application_Startup’ method and comment out the line

//this.RootVisual = new MainPage();

mainPage = new MainPage();
this.RootVisual = mainPage;
_ics = new InternetConnectionStatus();

The next thing you need to do is hook up the NetworkAddressChanged event in the ‘Application_Startup’ like this

System.Net.NetworkInformation.NetworkChange.NetworkAddressChanged += new System.Net.NetworkInformation.NetworkAddressChangedEventHandler(NetworkChange_NetworkAddressChanged);

Once the event has been hooked up and created you now need to wire up the action for when the connection drops. So inside the event I have hooked up a simple if statement which checks to see if the connection has dropped and if GetIsNetworkAvailable() is false adds the instance of _ics (The user control you created earlier) to the mainpage. The oppersite happens if the GetIsNetworkAvailable() is true – it removes it.

private void NetworkChange_NetworkAddressChanged(object sender, EventArgs e)
        {
            if (System.Net.NetworkInformation.NetworkInterface.GetIsNetworkAvailable() == false)
            {
                if (mainPage.Root.Children.Contains(_ics) == false)
                {
                    mainPage.Root.Children.Add(_ics);
                }
            }
            else if (System.Net.NetworkInformation.NetworkInterface.GetIsNetworkAvailable() == true)
            {
                if (mainPage.Root.Children.Contains(_ics) == true)
                {
                    mainPage.Root.Children.Remove(_ics);
                }
            }
        }

Now the final stage is exposing the Root item on the MainPage.xaml.cs which is done by adding this public property

public Panel Root
{
get { return LayoutRoot; }
}

You should be able to build the Silverlight application and run the project (with your connection active). If you disable your connection (pulling out the Cat5 cable or switching off your wireless connection you should see a message be displayed on your screen like this

Silverlight Internet Connection Alert

Now that you know how to display a message on screen you might want to integrate this with a ChildWindow (see my previous post – Silverlight: Custom ChildWindow popup) as this will take the focus away to a popup in which the user must interactive with.

To do that add a Silverlight Child Window to your solution (I have called mine InternetConnectionStatusPopUp.xaml) and set up a private member for your popup

#region Private Members
//private InternetConnectionStatus _ics;
private InternetConnectionStatusPopUp _ics;
private MainPage mainPage;
#endregion

Now in the Application_StartUp create the instance of the ChildWindow

//_ics = new InternetConnectionStatus();
_ics = new InternetConnectionStatusPopUp();

Now if you rebuild the solution and run it you shall see the following once you drop your internet connection

Silverlight: Detect Network Changes with ChildWindow

Download the example from this post and take a look. If you have any issues or questions feel free to discuss them at Silverlight Forums.