Helmut Krämer

Windows 8 Store App: How to check network status and create a custom control

  • Tweet (http://twitter
  • Tweet (http://twitter

Today I’ll show how you can check internetstatus in your app.
The sample is also perfekt to create your own networkstatus control.

With this post I’ll show you the “HOW TO…”

Let’s start with creating a simple Windows store app:

For this sample we will take the blank app template. I think for our small solution it’s the right one.

After creating the project we have to add a new folder named control.

In the Folder, we have to create a new usercontrol.

Connectionindicator is a good Name for our usercontrol, isn’t it?

Half work is done now  :)

Now we need two nice Icons, one if we are connected to the internet and one for “no connection”. For creating Icons I use free Version of Metro Studio 2 (http://www NULL.syncfusion The Icons we’ll add to the Assets folder in your solution.

Now it’s time for coding. Open the code behind file of your custom user control (Connectionindicator.xaml.cs).

First we have to add following “usings”:

  • using Windows.Networking.Connectivity;
  • using Windows.UI.Xaml.Media.Imaging;
  • using Windows.UI.Core;

Now we have to declare:

  • Eventhandler if networkstatus changes
  • variable to detect if connection profile is registered
  • Image source for displaying the icons


Ok, now we have to register the eventhandler / networkStatusCallback.


What is missing? You’re right, we have to create “OnNetworkStatusChange”method.

Now we have only to check the connection status and display the right icon. We  can do this by checking if the “Internet Connection Profile” is not null
and “Network connectivity Level” have to be “Internet” to be shure that we have internet connection. If connection exits we set Image source to “Online Status”
if not we set it to “Offline Status”.

Now press F5 and ……..

…. nothing happens, black screen.

Now we know, that we have no coding errors :) and we know that we have forgotten to put our custom control to the MainPage.

First we have to implement the reference on top:

Second we have to add our custom control:
<indicator:ConnectionIndicator Grid.Column=”1″ HorizontalAlignment=”Right”/>

Now press F5 and ……

…. you have a working custom user control for your network status!

The code (http://sdrv this solution you can find here (http://sdrv

This entry was posted in English and tagged , , , , , , , , . Bookmark the permalink. Both comments and trackbacks are currently closed.