Click here to Skip to main content
Click here to Skip to main content
Go to top

Silverlight Without XAML

, 20 Nov 2008
Rate this:
Please Sign up or sign in to vote.
Silverlight without XAML, just a playground for graphics and fun.

ScreenShot.jpg

Introduction

Silverlight is great, lots of things to do with Templates and UserControls. But, what if you want to make a game, or just a cool demo, with snow for the holidays? What is the use of XAML then? Let's get rid of it.

Creating a new Silverlight project

Start off by creating a new Silverlight project like you're used to. Click on File->New->Project... in the menu, or press Ctrl+Shift+N.

FileNewProject.jpg

Select Silverlight Application from the Silverlight Project types, and give it a fun name. I called mine SilverlightWithoutXaml. And, press the OK button.

CreateProject1.jpg

You could create a dynamic data driven ASP.NET MVC Web project for hosting your great Silverlight game, but for the simplicity of this article, we're picking the "Automatic generate" option from the dialog.

CreateProject2.jpg

Removing the XAML

Now, wait for a second to let Visual Studio create the nice XAML files we're going to delete in a few moments... Visual Studio shows a project like in the picture below. Just go on and delete both XAML files now. The .cs files will be deleted automatically.

DefaultProject.jpg

Besides some config and generated files, the project is empty now. Because Silverlight without code won't do much, we're going to add a new class now. Right-click the project and go to Add->Class... You can name it anything you want, but in the example, I've called it WithoutXamlApp.

AddClass.jpg

Silverlight needs a place to start the application. Therefore, the class that has just been added to the solution needs to be derived from System.Windows.Application.

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Shapes;
using System.Windows.Threading;
using System.Collections.Generic;

namespace SilverlightWithoutXaml
{
    public class WithoutXamlApp : Application
    {
    
    }
}

Next, we need to add an HTML file to host the Silverlight control. Add an HTML file the same way you just did for the class. Right-click the project and Add->New Item... Select the HTML-file template and name it StartPage.htm or anything you're more comfortable with. Add the following to the body of the HTML file:

<object id="ID" type="application/x-silverlight-2" width="600" height="400">
    <param name="source" value="bin/debug/SilverlightWithoutXaml.xap" />
    <param name="background" value="#00000000" />
</object>

Configuring the project

To run the application, you need to make a few changes in the properties of this project. Right-click the project and go to Properties. Make sure the Startup object is set to SilverlightWithoutXaml.WithoutXamlApp.

SetStartObj.jpg

Go to the Debug tab and press the button with the ellipses next to the Specific Page radio button. Select StartPage.htm from the dialog and press OK. Great! Hit F5 to build and run the application to see if it works. If you get a white HTML page in your browser with a black square and the Silverlight loading animation in the middle, you're good. If not, read the above again, or post a comment below and I'll try to help and fix your errors.

addHtml.jpg

Time for fun

OK, now you've got a XAML-less Silverlight application! What's next? I know, you saw that screenshot at the top and you're thinking: "Hey! I want white dots on my Silverlight app too!” Let's add some.

Before we can start our animation loop and do fun stuff, we have to wait until Silverlight is done loading and starting the application. Luckily for us, an event is fired when this happens. The first thing of the application class that is run by Silverlight is the constructor. This would be the perfect place to register to the startup-event. Add the following code to the WithoutXamlApp class:

public WithoutXamlApp()
{
    this.Startup += new StartupEventHandler(WithoutXamlApp_Startup);
}

void WithoutXamlApp_Startup(object sender, StartupEventArgs e)
{
}

Let's add a canvas to paint on. This canvas needs to be assigned to this.RootVisual of the application. The RootVisual is a UIElement that holds the main UI for the application, the root of the visual tree. Add the following code to the WithoutXamlApp_Startup method. This will initialize the root with a Canvas with a black background.

this.RootVisual = new Canvas()
{
    Background = new SolidColorBrush(Colors.Black)
};

For the animation loop, we're going to use a DispatcherTimer. This thing launches a Thread when started, and fires an event at a given interval. The great thing about this timer is that it’s very easy to implement. Add the following four lines code to the WithoutXamlApp_Startup method:

DispatcherTimer Timer = new DispatcherTimer();
Timer.Interval = new TimeSpan(300);
Timer.Tick += new EventHandler(Timer_Tick);
Timer.Start();

The interval of 300 I've chosen gives a smooth animation. The event handler for Timer.Tick is shown below. The last line kicks off the time. From that time on, the Tick-event is called every 0.03 seconds.

void Timer_Tick(object sender, EventArgs e)
{
}

We're almost there. The final piece of code consists of three parts. One that loops through and updates all the dots and remembers those that need to be removed from the visual tree, the second that performs the actual removal of the dots, and the last one that adds a new dot at a random X-location to the Canvas. Let's take a look:

void Timer_Tick(object sender, EventArgs e)
{
    // list of dots to be removed
    List<Ellipse> ElToRemove = new List<Ellipse>();
     foreach (Ellipse child in ((Canvas)this.RootVisual).Children)
    {
        // if a dot leaves the canvas area
        if (Canvas.GetTop(child) > 400)
            ElToRemove.Add(child); // add it to be removed
        else
        {   //update the location of the dots
            Canvas.SetTop(child, Canvas.GetTop(child) + 2);
            Canvas.SetLeft(child, Canvas.GetLeft(child) + 
                                    (rnd.NextDouble() * 4) - 2);
        }
    }

    //remove the dots from the visual tree
    foreach (Ellipse item in ElToRemove)
    {
        ((Canvas)this.RootVisual).Children.Remove(item);
    }

    //add a new dot at a random x-location, 
    //with a random size
    int size = rnd.Next(3, 15);
    Ellipse el = new Ellipse()
    {
        Width = size,
        Height = size,
        Stroke = new SolidColorBrush(Colors.White),
        StrokeThickness = size
    };
    Canvas.SetLeft(el, rnd.NextDouble() * 750 - 150);
    Canvas.SetTop(el, -15);
    //and add it to the visual tree
    ((Canvas)this.RootVisual).Children.Add(el);
}

To make this work, you need to declare private Random rnd = new Random((int)DateTime.Now.Ticks); at the beginning of the class. This will give us really random numbers.

Now press F5, and enjoy the animation!

What's next?

There's so much to go from here. One thing I've been planning to do is to use a XAML-less Silverlight control to alter the HTML DOM at runtime. And, I'm thinking about writing a Raycasting-engine, to be the heart of a Wolfenstein 3D clone. I even may do an article on that.

In the mean time, have fun with Silverlight!

History

  • 20-11-2008 - Initial upload.

License

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

Share

About the Author

Timmy Kokke
Software Developer (Senior) Centric Netherlands B.V.
Netherlands Netherlands
Microsoft MVP Client Dev . Founder of http://StoreAppsUG.nl, the Dutch Windows Store apps and Windows Phone apps usergroup. XAML / HTML5 developer. Writer. Composer. Musician.
 
Twitter
@Sorskoot
 
Awards / Honers
• October 2010,2011,2012,2013: Awarded Microsoft Expression Blend MVP
• June 2009: Second Place in the WinPHP challenge
• February 2009: Runner-up in de Mix09 10k Challenge
• June 2008: Winner of the Microsoft expression development contest at www.dekickoff.nl
 
Bio
I started programming around 1992, when my father had bought our first home computer. I used GWBasic at that time. After using QBasic and Pascal for a few years I started to learn C/C++ in 1996. I went to the ICT Academy in 1997 and finnished it in 2002. Until December 2007 I worked as a 3D specialist. Besides modelling I worked on different development projects like a 3D based Scheduler and different simultion tools in C# and Java. Though out the years I've gained much experience with ASP.NET, Silverlight, Windows Phone and WinRT.
Follow on   Twitter   Google+   LinkedIn

Comments and Discussions

 
GeneralExtremely useful PinmemberDimitrios Kalemis28-Nov-08 1:11 
GeneralRe: Extremely useful PinmemberTimmy Kokke28-Nov-08 2:18 
GeneralWoaw PinmemberWilliamSauron21-Nov-08 8:35 
GeneralRe: Woaw PinmemberTimmy Kokke21-Nov-08 9:59 
Thank you! I'm currently exploring other uses of silverlight. I believe it's far more powerfull than doing some "flashy" stuff.
 
Dawn is nature's way of telling you to go to bed.

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

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

| Advertise | Privacy | Mobile
Web01 | 2.8.140916.1 | Last Updated 20 Nov 2008
Article Copyright 2008 by Timmy Kokke
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid