Part 2 of 4: Tips/Tricks for Silverlight Developers

mbcrump

5.00/5 (1 vote)

29 Nov 2010CPOL3 min read

10.1K

Tips/Tricks for Silverlight Developers

Part 1 | Part 2 | Part 3 | Part 4

I wanted to create a series of blog post that gets right to the point and is aimed specifically at Silverlight Developers. The most important things I want this series to answer are:

What is it?
Why do I care?
How do I do it?

I hope that you enjoy this series. Let’s get started:

Tip/Trick #6)

What is it? Create a Notification Window in a Silverlight Out Of Browser Application.

Why do I care? It's a great way to alert users of something that needs their attention. It works similar to the notification you would get with a new email in Outlook.

How do I do it:

Make sure you are developing an OOB application. Right click on your Silverlight Project and make sure there is a check in “Enabled running application out of the browser” as shown below:

Add a button to your page and drop in the following code snippet. This creates a very simple Notification, but you can add borders and more.

private void button1_Click(object sender, RoutedEventArgs e)
{
    NotificationWindow notify = new NotificationWindow();
    notify.Height = 100;
    notify.Width = 200;
    TextBlock text = new TextBlock();
    text.Text = "This is the Notification Message";
    text.Foreground = new SolidColorBrush(Colors.Red);
    notify.Content = text;
    notify.Show(3000);
}

Here is an example of what it looks like:

Tip/Trick #7)

What is it? You can increase isolated storage if you need more space.

Why do I care? Eventually, you will get a requirement that will call for more space than what is originally allocated by default.

How do I do it? This trick has to come from a Button click Event. So drop a button on the Silverlight Page and paste the following code inside of it.

Note: This code snippet came directly from MSDN.

private void button2_Click(object sender, RoutedEventArgs e)
{
    using (var store = IsolatedStorageFile.GetUserStoreForApplication())
    {
        // 5 MB of isolated storage space is needed
        int spaceNeeded = 1024 * 1024 * 5;

        if (store.AvailableFreeSpace < spaceNeeded)
        {
            if (store.IncreaseQuotaTo(store.Quota + spaceNeeded))
            {
                // The user accepted the request
            }
        }
    }
}

When the user clicks the button, the following dialog will appear. If they click “Yes”, then it will increase Isolated storage.

Tip/Trick #8)

What is it? Use the StringFormat in XAML to format your data (for example, a Birthdate).

Why do I care? It allows you to use standard formatting expressions in XAML rather than put it in code behind.

How do I do it: To format a string into a Birthdate, do the following: add a TextBlock to your main page.

XML

<TextBlock x:Name="txtDOB" Text="{Binding DOB, StringFormat='MM/dd/yyyy'}"/>

Add a class to your project to hold the data:

using System;

namespace SilverlightApplication16
{
    public class TestClass
    {
        public DateTime DOB { get; set; }
    }
}

Now add in the code to populate the TextBlock:

TestClass data; 

public MainPage()
{
    InitializeComponent();
    data = new TestClass() { DOB = new DateTime(1979, 5, 1) };
    txtDOB.DataContext = data;
}

Now when you run the application, your DOB has the following format:

If you do not format the data, it would have looked like this:

Pro Tip: http://www.csharp-examples.net/string-format-datetime/ has a lot of great StringFormat examples for DateTime.

Tip/Trick #9)

What is it? A simple way to change the Silverlight Page that starts when your application is launched.

Why do I care? When you are working on a Silverlight application and want to try different tests without messing up your MainPage.xaml or if you want a different startup page to launch when your application is started.

How do I do it: Navigate to your App.xaml.cs and look for Application_Startup. You will want to modify the line highlighted below to point to the new Silverlight Page that you created. Make sure that you comment out the first line that points to MainPage() as shown below:

Tip/Trick #10)

What is it? The GridSplitter control is actually a useful Silverlight control that isn’t talked about very much.

Why do I care? Use the GridSplitter control to provide an easy way to resize rows/columns in a grid at run-time. Depending on the application, your users may like this.

How do I do it: You can accomplish this by adding the following code into a Silverlight Page.

XML

<navigation:Page x:Class="SilverlightApplication16.Page1" 
           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:DesignWidth="640" d:DesignHeight="480"
           Title="Page1 Page" 
	    xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />

        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition />

        </Grid.ColumnDefinitions>
        <Rectangle Fill="#FF2626D8" Margin="37,29,63,21" Stroke="Black"/>
        <Rectangle Fill="#FF52F519" Margin="60,29,40,21" Stroke="Black" Grid.Column="1"/>
        <Rectangle Fill="#FFFF3A00" Margin="37,25,63,25" Stroke="Black" Grid.Row="1"/>
        <Rectangle Fill="#FFE71EB2" Margin="60,25,40,25" Stroke="Black" 
		Grid.Column="1" Grid.Row="1"/>
        <sdk:GridSplitter Grid.Column="1" HorizontalAlignment="Left" 
		Margin="0,-9,0,0" Grid.RowSpan="2" Width="14" Background="Black"/>
        <sdk:GridSplitter Grid.ColumnSpan="2" HorizontalAlignment="Stretch" 
	Height="21" Margin="-12,0,8,-4" VerticalAlignment="Bottom" Background="Black"/>

    </Grid>
</navigation:Page>