Dotnet/.NET - C#

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:

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.

    New Silverlight Project

  • 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.
 
 
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.
Twitter
Related Posts
This Post Has 3 Comments
Leave a Reply 
Your email address will not be published. Required fields are marked *
 
 
 
 
  
 Back To Top