Home > C#, WinRT > How to react to network availability changes in Windows Store apps

How to react to network availability changes in Windows Store apps

04/02/2013

If our app needs Internet access, it is a good practice to inform the user whether the connection is available or not, for example showing an information icon. To accomplish this task, we can use the NetworkInformation class, like in the following example:

using System;
using Windows.Networking.Connectivity;

namespace WindowsStore.Helpers
{
    public class InternetConnectionChangedEventArgs : EventArgs
    {
        public InternetConnectionChangedEventArgs(bool isConnected)
        {
            this.isConnected = isConnected;
        }

        private bool isConnected;
        public bool IsConnected
        {
            get { return isConnected; }
        }
    }

    public static class Network
    {
        public static event EventHandler<InternetConnectionChangedEventArgs> 
            InternetConnectionChanged;

        static Network()
        {
            NetworkInformation.NetworkStatusChanged += (s) =>
            {
                if (InternetConnectionChanged != null)
                {
                    var arg = new InternetConnectionChangedEventArgs(IsConnected);
                    InternetConnectionChanged(null, arg);
                }
            };
        }

        public static bool IsConnected
        {
            get
            {
                var profile = NetworkInformation.GetInternetConnectionProfile();
                var isConnected = (profile != null 
                    && profile.GetNetworkConnectivityLevel() == 
                    NetworkConnectivityLevel.InternetAccess);
                return isConnected;
            }
        }
    }
}

Network is an helper class that raises the InternetConnectionChanged event to notify about Internet connectivity changes: it handles the NetworkInformation.NetworkStatusChanged events and checks whether the profile returned by the GetInternetConnectionProfile method (line 41) has a network connectivity level equal to NetworkConnectivityLevel.InternetAccess.

Suppose that, as said earlier, we want to show an icon when Internet connection isn’t available, for example the following one:

Offline icon

Offline icon

So, add an Image element to our page:

<Image Source="Assets/Offline.png" x:Name="offline"
       Height="64" Width="64"></Image>

Then, insert the following code in the code-behind:

public MainPage()
{
    // ...

    offline.Visibility = 
        (Network.IsConnected ? Visibility.Collapsed : Visibility.Visible);

    Network.InternetConnectionChanged += async (s, e) =>
    {                
        await Dispatcher.RunAsync(CoreDispatcherPriority.Normal, () => 
        {
            offline.Visibility = 
                (e.IsConnected ? Visibility.Collapsed : Visibility.Visible);
        });
    };
}

First of all, we check the IsConnected property of Network class to set the initial visibility of the icon. After that, we register the InternetConnectionChanged event to be notified about subsequent changes. Note that we use the Dispatcher to update the UI because the InternetConnectionChanged event is raised on the same thread of the NetworkInformation.NetworkStatusChanged event, that is a background thread.

In a real app that uses the MVVM pattern, we can expose the network availability as a property on the ViewModel.

Categories: C#, WinRT
%d bloggers like this: