Categories: Dotnet/.NET - C#ProgrammingSilverlight

My Silverlight 2.0 Hello World Application

This is an update to my original article that was based on Silverlight 1.0 alpha. The code for the old article no longer worked with the current Silverlight runtime.

Instead of the traditional and simple display of a string, this Hello World application uses animation in code to say “hello”.

Pre-requisites

You will need to have the following installed:

Visual Studio 2008 with Service Pack 1
Silverlight 2.0 Runtime
Silverlight Tools for Visual Studio 2008 SP1

Create a New Silverlight Project

In Visual Studio 2008, choose File/New/Project and select Visual C#/Silverlight/Silverlight Application. The Silverlight project type is added when you install the Silverlight Tools.
Give your project a name and choose OK.
On the next dialog window, accept the default “Add a new ASP.NET Web project…” and choose OK.

Silverlight Project Files

Since we will be drawing objects, we need a Canvas control instead of the default Grid. Change your Page.xaml file to read like this:

<UserControl x:Class="SilverlightHelloWorld.Page"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Width="520" Height="140" Loaded="UserControl_Loaded">

    <Canvas x:Name="MyCanvas"/>

</UserControl>

Press F7 when you have Page.xaml opened to switch to the code-behind file Page.xaml.cs, and replace the code there with this code:

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.Threading;

namespace SilverlightHelloWorld

    public partial class Page : UserControl

        // private Storyboard _timer = new Storyboard();

        private DispatcherTimer _timer;

        private List<Cell> cells = new List<Cell>(); // list of all cells

        private int _xSize = 26; // width of the grid, in number of cells

        private int _ySize = 7; // height of the grid

        private int _numCells; // total number of cells

        private int _cellIdx = 0;

        /// <summary>Represents a cell on the grid</summary>

        private class Cell

            public double X; // x-coordinate of cell

            public double Y; // y-coordinate

            public bool On; // True if cell is "on"

            public double Order; // Display order

        public Page()

            InitializeComponent();

        private void UserControl_Loaded(object sender, RoutedEventArgs e)

            // Assign a random value to each cell

            Random rnd = new Random(Environment.TickCount);

            _numCells = (int)(_xSize * _ySize);

            string template = "                          "

                + " x  x xxxx x    x     xx  "

                + " x  x x    x    x    x  x "

                + " xxxx xxxx x    x    x  x "

                + " x  x x    x    x    x  x "

                + " x  x xxxx xxxx xxxx  xx  "

                + "                          ";

            for (int y = 0; y < _ySize; y++)

                for (int x = 0; x < _xSize; x++)

                    Cell cell = new Cell();

                    cell.X = x * (this.Width / _xSize);

                    cell.Y = y * (this.Height / _ySize);

                    cell.Order = rnd.NextDouble();

                    cells.Add(cell);

            for (int i = 0; i < template.Length; i++)

                cells[i].On = template[i] == 'x';

            // Sort the cells by the random values

            cells.Sort(

                delegate(Cell c0, Cell c1)

                    return c0.Order.CompareTo(c1.Order);

);

            _timer = new System.Windows.Threading.DispatcherTimer();

            _timer.Interval = TimeSpan.FromMilliseconds(1);

            _timer.Tick += new EventHandler(timer_Completed);

            _timer.Start();

        void timer_Completed(object sender, EventArgs e)

            if (_cellIdx < _numCells)

                // Get the next cell

                Cell cell = cells[_cellIdx];

                // Draw the cell

                Rectangle r = new Rectangle();

                r.Stroke = new SolidColorBrush(Colors.DarkGray);

                if (cell.On)

                    r.Fill = new SolidColorBrush(Colors.Red);

                else

                    r.Fill = new SolidColorBrush(Colors.LightGray);

                r.Width = this.Width / _xSize;

                r.Height = this.Height / _ySize;

                r.SetValue(Canvas.LeftProperty, cell.X);

                r.SetValue(Canvas.TopProperty, cell.Y);

                MyCanvas.Children.Add(r);

                _cellIdx++;

            else

                _timer.Stop();

Save the file. Right click on SilverlightHellowordTestPage.aspx and choose Set As Start Page, then run the app.

Hosting the Application

To host the application on your web site, just copy the following files:

Silverlight.js
SilverlightHelloWorldTestPage.html
ClientBin/SilverlightHelloWorld.xap

Click here to see the application in action.

Chinh Do

I occasionally blog about programming (.NET, Node.js, Java, PowerShell, React, Angular, JavaScript, etc), gadgets, etc. Follow me on Twitter for tips on those same topics. You can also find me on GitHub. See About for more info.

Next Wrap Your Unit Tests in Transactions »

Previous « Bag of Links #1

View Comments

Justin Etheredge says:

January 27, 2009 at 8:13 pm

That is a pretty neat little effect! Excellent.
Chinh Do says:

January 27, 2009 at 9:18 pm

Thanks, Justin!