How to show Desktop Notifications in Silverlight

Introduction

 

You might want to show notification from your application like outlook does. As a Silverlight Evangelist I will only demonstrate the Silverlight way. It is just an easy thing to do.

Background

You can display desktop notifications in Silverlight only if you enable out of the browser option in your project.  

 

Using the code

We are going to use C# as our main language.

Start

I have attached an example project, but let me take you through it.  The first thing that you need to do is to create a normal Silverlight application and by default as you know it will add a “MainPage” for you. When done add another Silverlight page and call it “MyNotification”. The main page will contain a code that will trigger a notification and the page we created “MyNotification” will be the one that will show the display the actual notification.

This is the xaml for the “Notification 

<navigation:Page x:Class="DesktopAlert.MyNotification"
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
           xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
           xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
           mc:Ignorable="d"
           xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
          d:DesignHeight="300" d:DesignWidth="400"
           Title="Alert">
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="20" />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Border Grid.Row="0" Padding="8 2 8 2">
            <Border.Background>
                <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                    <GradientStop Color="#B6B6C9" Offset="0.0" />
                    <GradientStop Color="#9393AD" Offset="1.0" />
                </LinearGradientBrush>
            </Border.Background>
            <TextBlock x:Name="header" FontWeight="Bold" />
        </Border>
        <Border Grid.Row="1" Padding="8">
            <Border.Background>
                <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                    <GradientStop Color="#ECECF4" Offset="0.0" />
                    <GradientStop Color="#C3C2D6" Offset="1.0" />
                </LinearGradientBrush>
            </Border.Background>
            <TextBlock x:Name="message" />
        </Border>
    </Grid>
</navigation:Page> 

And in the cs of this notification , we set the message Dynamically as depicted below 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Navigation;
 
namespace DesktopAlert
{
    public partial class MyNotification : Page
    {
        public MyNotification()
        {
            InitializeComponent();
        }
 
        // Executes when the user navigates to this page.
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
        }
        public void Set(string headerText, string messageText)
        {
            header.Text = headerText;
            message.Text = messageText;
        }
    }
}

Remember this will be triggered by the Mainpage , let us look how the main page xaml

<UserControl x:Class="DesktopAlert.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="592" xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation">
 
    <Grid x:Name="LayoutRoot" Background="White" Width="592">
        <telerik:RadButton Content="Show Notification" Height="32" HorizontalAlignment="Left"Margin="134,64,0,0" Name="radButton1" VerticalAlignment="Top" Width="196" Click="radButton1_Click" />
    </Grid>
</UserControl>

 And now let us look at the cs file of this page; I have commented it so that you can understand what I am doing.  As you can see I have used a “Radbutton” , you can use a normal Silverlight button.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
 
namespace DesktopAlert
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
        }
 
        private void radButton1_Click(object sender, RoutedEventArgs e)
        {
            NotificationWindow Message = new NotificationWindow();
 
            Message.Height = 74;
            Message.Width = 329;
 
            MyNotification note = new MyNotification();
 
            note.Set("Alert", "You have a Message, from Dotnetfunda!");
            note.Width = Message.Width;//Dynamically set the width
            note.Height = Message.Height; //Dynamically set the height
 
            Message.Content = note;
            Message.Show(4000); //this is the time in Miliseconds that the popup will apear
 
        }
    }
}

And the cs looks like this and when you run this it will give you this 

And when you click the button it will give you this

 

 

Isn't this Simple and Clean !