NotificationWindow in Silverlight (Out of Browser Apps)

Silverlight 4 brings another feature to desk – NotificationWindow.  NotificationWindow is different from PopUp in following ways:

• NotificationWindow opens as a Splash Screen, while PopUp does not.
• NotificationWindow has an expiry time (set in MilliSeconds); while PopUp needs to be closed explicitly
• NotfificationWindow can be implemented only for Out-Of-Browser applications; PopUp can be used for both Web and Out-Of-Browser applications

With that, let’s see how to implement NotificationWindow for Silverlight Applications.

Statement – Create NotificationWindow to denote a Upgrade Window

First, we will design a NotificationWindow – Create a New Silverlight UserControl and give it name: UpgradeWindow

    <Grid x:Name="LayoutRoot" Background="White">
        <Border x:Name="Frame" Width="300" Height="100" Background="LightYellow">
            <StackPanel Orientation="Vertical">
                <Border Width="290" Height="24" CornerRadius="4" Margin="2,4,2,4">
                    <Border.Background>
                        <LinearGradientBrush StartPoint="0.5,0.0" EndPoint="0.5,1.0">
                            <GradientStop Offset="0.2" Color="#FF186220" />
                            <GradientStop Offset="0.9" Color="#FFFFFFFF" />
                            <GradientStop Offset="0.1" Color="#FF11A111" />
                        </LinearGradientBrush>
                    </Border.Background>
                    <TextBlock Text="{Binding Title, Mode=OneWay}" FontSize="12" FontWeight="Bold" Foreground="Black" Margin="4" />
                </Border>
                <TextBlock Width="240" Text="{Binding Content, Mode=OneWay}" FontSize="11" Foreground="#FF202020" TextWrapping="Wrap" Margin="4" />
            </StackPanel>
        </Border>
    </Grid>
 

Next, we define a Model class for UpgradeWindow – UpgradeWindowModel.cs

public class UpgradeWindowModel : INotifyPropertyChanged
    {
        private string _title;
        public string Title
        {
            get
            {
                return _title;
            }
            set
            {
                _title = value;
                OnPropertyChanged(value);
            }
        }

        private string _content;
        public string Content
        {
            get
            {
                return _content;
            }
            set
            {
                _content = value;
                OnPropertyChanged(value);
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;

        public void OnPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }

Further, we invoke this UpgradeWindow in our MainPage.cs

public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
            LoadPopUpWindowInOutofBrowser();
        }

        private void LoadPopUpWindowInOutofBrowser()
        {
            NotificationWindow win = new NotificationWindow();
            UpgradeWindow un = new UpgradeWindow();
            un.DataContext = new UpgradeWindowModel { Title = "Checking for upgrades",
                                                    Content ="Downloading content..." };
            win.Width = un.Width;
            win.Height = un.Height;
            win.Content = un;
            win.Show(10000);
        }
    }

And, the NotificationWindow will be displayed when the application is executed.

Related Posts:

• Silverlight Best Practices (Part 4 of 4)
• Silverlight Best Practices (Part 2 of 4)
• Silverlight Best Practices (Part 3 of 4)
• Silverlight Best Practices (Part 1 of 4)
• Creating Page Transitions in Windows Phone