Click here to Skip to main content
15,868,141 members
Articles / All Topics

Part 1 of 4 : Tips/Tricks for Silverlight Developers

Rate me:
Please Sign up or sign in to vote.
4.91/5 (3 votes)
23 Nov 2010CPOL4 min read 13.4K   3   4
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:

image

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:

HTML
<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):

HTML
<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.

SNAGHTMLff37f8e

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:

HTML
<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>

image

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

HTML
<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!

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

image

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).

  1. This is a standard Silverlight Project file structure.
  2. This is a TextBlock that we wish to change the font for.
  3. 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.

image

You will notice a couple of things just happened.

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

SNAGHTML2e67ecf0

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

HTML
<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:

HTML
<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:

C#
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.

image

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

image

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.

alt Subscribe to my feed

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior) Telerik
United States United States
Michael Crump is a Silverlight MVP and MCPD that has been involved with computers in one way or another for as long as he can remember, but started professionally in 2002. After spending years working as a systems administrator/tech support analyst, Michael branched out and started developing internal utilities that automated repetitive tasks and freed up full-time employees. From there, he was offered a job working at McKesson corporation and has been working with some form of .NET and VB/C# since 2003.

He has worked at Fortune 500 companies where he gained experience in embedded systems design and software development to systems administration and database programming, and everything in between.

His primary focus right now is developing healthcare software solutions using Microsoft .NET technologies. He prefers building infrastructure components, reusable shared libraries and helping companies define, develop and automate process standards and guidelines.

You can read his blog at: MichaelCrump.net or follow him on Twitter at @mbcrump.

Comments and Discussions

 
GeneralMy vote of 4 Pin
Morteza Azizi18-May-13 21:36
professionalMorteza Azizi18-May-13 21:36 
GeneralMy vote of 5 Pin
Sandeep Mewara24-Dec-10 19:59
mveSandeep Mewara24-Dec-10 19:59 
GeneralPart 2 is located here. Pin
mbcrump2-Dec-10 4:06
mentormbcrump2-Dec-10 4:06 
GeneralThis is great ! Pin
Ashish Kaila23-Nov-10 6:16
Ashish Kaila23-Nov-10 6:16 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.