Part 1 of 4 : Tips/Tricks for Silverlight Developers

mbcrump

4.91/5 (3 votes)

Nov 23, 2010

CPOL

4 min read

13931

Here are some tips/tricks for Silverlight developers

I wanted to create a series of blog posts that get right to the point and are 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 #1

What is it? You can easily enable a visual Framerate counter inside your Silverlight Application. The end result looks like the image below:

Why do I care? This should be used for profiling/performance testing of your Silverlight Application before you move it into production status.

How do I do it? Simply add the following two lines inside your div tags:

<param name="enableFramerateCounter" value="True" />
<param name="enableGPUAcceleration" value="True" />

So your final div tag should look like the following (I’ve included the body tag):

<body>
    <!-- Runtime errors from Silverlight will be displayed here.
    This will contain debugging information and should be removed or hidden 
    when debugging is completed -->
    <div id='errorLocation' 
    style="font-size: small;color: Gray;"></div>

    <div id="silverlightControlHost">
        <object data="data:application/x-silverlight-2," 
            type="application/x-silverlight-2" 
            width="100%" height="100%">
            <param name="source" 
            value="ClientBin/DropBoxDemo.xap"/>
            <param name="onerror" 
            value="onSilverlightError" />
            <param name="background" value="white" />
            <param name="minRuntimeVersion" value="4.0.50826.0" />
            <param name="autoUpgrade" value="true" />
            <param name="enableFramerateCounter" value="True" />
            <param name="enableGPUAcceleration" value="True" />
            <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" 
                style="text-decoration: none;">
                <img src="http://go.microsoft.com/fwlink/?LinkID=161376" 
                    alt="Get Microsoft Silverlight" 
                    style="border-style: none"/>
            </a>
        </object><iframe id='_sl_historyFrame' 
            style='visibility:hidden;height:0;
            width:0;border:0px'></iframe></div>
</body>

Tip/Trick #2

What is it? You can clear isolated storage on your Silverlight application from the browser instead of through code. A surprising number of people are not aware of this.

Why do I care? It’s easy to access and do without writing any code. It also can be easily accomplished by an end user.

How do I do it? Simply right-click your Silverlight Application and select Silverlight, then click on the Application Storage tab. At the bottom of the tab, you can either delete an individual sites isolated storage or all sites.

Tip/Trick #3

What is it? Inserting a line break inside of a TextBlock/TextBox.

Why do I care? You will need to insert a linebreak into a TextBlock or Textbox at some point...

How do I do it? You can do it inside of XAML or in code behind by reviewing the samples below:

Here is an example using XAML:

<TextBlock FontSize="24" Height="71" HorizontalAlignment="Left" Margin="12,12,0,0" 
    Name="textBlock1" VerticalAlignment="Top" Width="229" >
    Hello, my name is <LineBreak/> Michael
</TextBlock>

You can also use any hexadecimal encoded value to represent a literal.

 <TextBlock Text="Hello, my name is &#x0a;Michael" 
 FontSize="24" Height="71" 
     HorizontalAlignment="Left" 
     Margin="12,12,0,0" Name="textBlock1" 
     VerticalAlignment="Top" Width="229" />

Another way is at runtime with the following code snippet: Do not use '@' in front of the string definition, it will not work!

private void button1_Click(object sender, RoutedEventArgs e)
{
    textBlock1.Text = "Line1\r\nLine2";
}

Tip/Trick #4

What is it? Embedding fonts (not included with Silverlight) into your Silverlight Application.

Why do I care? You will have a customer at some point that wants a custom font. Blend 4 makes this very easy, just be sure you have the copyright to distribute the font.

How do I do it? We are going to do it in Blend 4, because it is so easy. You can accomplish this in a matter of seconds and Blend does all the dirty work.

Let’s get started with a basic Silverlight project (refer to the numbers on each image).

This is a standard Silverlight Project file structure.
This is a TextBlock that we wish to change the font for.
This is where we are going to select a font to embed. Go ahead and select a font and put a check in the “Embed” underneath the font.

You will notice a couple of things just happened.

A new folder called Fonts was added and the actual Font TTF was placed inside of this directory.
A preview of the new Font.
The new Font selected with the “Embed” checkbox checked.

After looking at the code behind, you will see the following XAML. Pay attention to the FontFamily. That was easy.

<Grid x:Name="LayoutRoot" Background="White">
     <TextBlock Height="80" Margin="22,30,0,0" 
         Text="This is an example of a new font. " Width="235" 
         FontFamily="/SilverlightApplication17;component/Fonts/Fonts.zip#Engravers MT"/>
</Grid>

Tip/Trick #5

What is it? You can check and see if a user is connected to the internet and handle accordingly.

Why do I care? If a user has lost connection to the internet, your application needs to alert the user and save the current state.

How do I do it? We are going to add an Eclipse and textbox to our main page and follow up with some C Sharp code-behind.
Note: In order to do this, you may have to disable and enable your network connection for testing. You can do this by going to Network and Internet and Network Connection and selecting disable as shown below:

Just change your XAML to the following:

<StackPanel Orientation="Horizontal">
    <Ellipse Height="65" Name="ellipse1" 
    Stroke="Black" StrokeThickness="3" Width="59" />
    <TextBlock FontSize="24" Height="65" 
    Name="textBlock1"  Width="323" />
</StackPanel>

And your C# code-behind to the following:

public MainPage()
{
    InitializeComponent();
    NetworkChange.NetworkAddressChanged += new NetworkAddressChangedEventHandler(
        NetworkChange_NetworkAddressChanged);
}

void NetworkChange_NetworkAddressChanged(object sender, EventArgs e)
{
    if (NetworkInterface.GetIsNetworkAvailable())
    {
        textBlock1.Text = "Network State: Connected";
        ellipse1.Fill = new SolidColorBrush(Colors.Green);
    }
    else
    {
        textBlock1.Text = "Network State: Disconnected";
        ellipse1.Fill = new SolidColorBrush(Colors.Red);
    }
}

You will get the following screens when you have a valid network connected.

You will get the following screens when you have disconnected from the network.

That is it for Part 1, just 5 Tips/Tricks for a Silverlight Developer. Hopefully, you will subscribe to my blog for the last three parts.

Subscribe to my feed