How to show Desktop Notifications in Silverlight

Vuyiswamb
Posted by in Silverlight category on for Beginner level | Points: 250 | Views : 13285 red flag
Rating: 5 out of 5  
 2 vote(s)

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.

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 !

Thank you for visiting Dotnetfunda

Vuyiswa Maseko 
Page copy protected against web site content infringement by Copyscape

About the Author

Vuyiswamb
Full Name: Vuyiswa Maseko
Member Level: NotApplicable
Member Status: Member,MVP,Administrator
Member Since: 7/6/2008 11:50:44 PM
Country: South Africa
Thank you for posting at Dotnetfunda [Administrator]
http://www.Dotnetfunda.com
Vuyiswa Junius Maseko is a Founder of Vimalsoft (Pty) Ltd (http://www.vimalsoft.com/) and a forum moderator at www.DotnetFunda. Vuyiswa has been developing for 16 years now. his major strength are C# 1.1,2.0,3.0,3.5,4.0,4.5 and vb.net and sql and his interest were in asp.net, c#, Silverlight,wpf,wcf, wwf and now his interests are in Kinect for Windows,Unity 3D. He has been using .net since the beta version of it. Vuyiswa believes that Kinect and Hololen is the next generation of computing.Thanks to people like Chris Maunder (codeproject), Colin Angus Mackay (codeproject), Dave Kreskowiak (Codeproject), Sheo Narayan (.Netfunda),Rajesh Kumar(Microsoft) They have made vuyiswa what he is today.

Login to vote for this post.

Comments or Responses

Posted by: SheoNarayan on: 7/30/2011 | Points: 25
Excellent article Vuyiswa, keep it up!
Posted by: Mallikarjun on: 8/2/2011 | Points: 25
I am not able to find the sample project attached with this article. Please help me to get the sample project for this article.

Thanks,
Mallikarjun

Login to post response

Comment using Facebook(Author doesn't get notification)