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