Working on a presentation I'm preparing about Silverlight 5.0, I wrote a funny example to demonstrate the new "Vector Printing" feature. My purpose was to put together a bunch of lines to send to the printer, but I was unsatisfied by any result I created by hand.

So, all of a sudden, I remembered the beauty of some figures, I drawed long time ago (perhaps I was 15), using the Logo Turtle Graphics principles and decided to write some code to draw them again. The result is funny. Try yourself to move the sliders in the following application to see the figures.

The code behind the example is really simple. I wrote a basic Turtle class that is able to manage the position of the turtle. It exposes a basic set of methods that emulates the movements that are tipical of a Logo procedure. Forward, Backward, Left and Right and so on.

   1: public class Turtle

   2: {

   3:     // Collection of geometries to draw the figure

   4:     private GeometryGroup Geometries { get; set; }

   5:     // current angle of the turtle

   6:     public double Angle { get; private set; }

   7:     // current position of the turtle

   8:     public Point Position { get; private set; }

   9:     // position of the pen

  10:     public bool IsPenDown { get; private set; }

  11:  

  12:     /// <summary>

  13:     /// Inizializza una nuova istanza della classe <see cref="Turtle"/>.

  14:     /// </summary>

  15:     public Turtle(Path path)

  16:     {

  17:         this.Geometries = new GeometryGroup();

  18:         path.Data = this.Geometries;

  19:         this.Angle = 0.0;

  20:         this.Position = new Point(0, 0);

  21:         this.IsPenDown = true;

  22:     }

  23:  

  24:     // lift up the pen

  25:     public void PenUp()

  26:     {

  27:         this.IsPenDown = false;

  28:     }

  29:  

  30:     // lower the pen

  31:     public void PenDown()

  32:     {

  33:         this.IsPenDown = true;

  34:     }

  35:  

  36:     // move forward

  37:     public void Forward(double size)

  38:     {

  39:         this.Move(size);

  40:     }

  41:  

  42:     //  move backward

  43:     public void Backward(double size)

  44:     {

  45:         this.Move(-size);

  46:     }

  47:  

  48:     // rotate to the left

  49:     public void Left(double angle)

  50:     {

  51:         this.Angle += ToRadians(angle);

  52:     }

  53:  

  54:     // rotate to the right

  55:     public void Right(double angle)

  56:     {

  57:         this.Angle -= ToRadians(angle);

  58:     }

  59:  

  60:     // move the pen of the specified size

  61:     private void Move(double size)

  62:     {

  63:         Point past = this.Position;

  64:  

  65:         this.Position =

  66:             new Point(

  67:                 past.X + Math.Sin(this.Angle) * size,

  68:                 past.Y + Math.Cos(this.Angle) * size);

  69:  

  70:         if (IsPenDown)

  71:         {

  72:             this.Geometries.Children.Add(

  73:                 new LineGeometry

  74:                 {

  75:                     StartPoint = past,

  76:                     EndPoint = this.Position,

  77:                 });

  78:         }

  79:     }

  80:  

  81:     // convert degrees to radians

  82:     public double ToRadians(double angle)

  83:     {

  84:         return angle * Math.PI / 180.0;

  85:     }

  86: }

Then a short C# function does the rest and draws the figure on the basis of a simple mathematical algorithm. It simply repeat a poligon a number of times, rotating the origin point of a short amount of degrees. The sliders change the number of sides of the poligon and the amount of the rotation expressed in fraction of 360°.

   1: private void Draw(Path pathToDraw)

   2: {

   3:     int sides = (int)this.SidesSlider.Value;

   4:     double corner = 360 / (double)sides;

   5:     int repeat = (int)this.RepeatSlider.Value;

   6:     double angle = 360 / (double)repeat;

   7:  

   8:     Turtle turtle = new Turtle(pathToDraw);

   9:  

  10:     for (int j = 0; j < repeat; j++)

  11:     {

  12:         for (int i = 0; i < sides; i++)

  13:         {

  14:             turtle.Forward(50);

  15:             turtle.Left(corner);

  16:         }

  17:  

  18:         turtle.Right(angle);

  19:     }

  20: }

I'm always impressed by the beauty of the simple mathematical drawing. The prints I got from this example have been forwarded to my daughter and some hours after they are completely coloured and becomed a beautiful picture for the door of our refrigerator. I hope you like this funny Vector Printing example.

Working on applications built with Silverlight, it is really common you have to deal with styles, templates, and often this means you have to build a theme pervading an entire application. Building a theme is not so simple as you may believe at the first sight. It requires instead a careful planning, from the conceptual side first and in the technical implementation then. There are lot of topics regarding the creation of a theme from the designer point of view but here I want to discuss about the implementation details that are often underestimated.

Styles are a great thing. But if you ever tried to use them without a careful planning you are aware that, more than often, they become a nightmare. We all are conscious about the reasons that move us to adopt styles in an application, but when the time comes we all tent to forget these reasons. And this is the mother of all the mistakes - ok, not only about styles - that usually makes our "stylesheet" more similar to a disordered trashcan instead of an useful thing. You start coding UI, then you understand that some properties have the same values, so you extract them and put it into a style. This may seems good but soon (or perhaps too late) you start to be unable to reuse the same style on more than two or three controls before you need to duplicate it.

Planning for styles is a difficult game, but it may change your life to the better if you know where to start from. And in my humble opinion the real start point - just after the end of the designer's work - is to create a palette. Colors and Brushes are usually the most obvious properties you move to a style, but having your colors spread over a 5 thousand rows stylesheet is almost not useful as if it was spread along all the pages. So, before you start, write down this sentence and put it on top of your monitor: "I will never write a color manually more than once".

#1 - Name your colors

It may seems silly but this rule automatically imply we have to name our colors. Ok guy, please stop writing now. Do not name Red as Red. Instead you have to use a more meaningful naming that adhere to the matter of your application. I usually make large use of adjectives like "Light" and "Dark". The reason to not name Red as Red (this is about to become another sentence to put on your monitor) it that easily, what it is Red now may become Green tomorrow and you for sure do not want to name as Red all your Green :) If a theme make its work fine it allows you to easily change lot of your UI without changing anything in the pages. So, here is a simple example of a named palette:

   1: <Color x:Key="ExtraDarkColor">#FF333333</Color>

   2: <Color x:Key="DarkColor">#FF666666</Color>

   3: <Color x:Key="BasicColor">#FF888888</Color>

   4: <Color x:Key="LightColor">#FFdddddd</Color>

   5: <Color x:Key="ExtraLightColor">#FFeeeeee</Color>

This is a very simple example but it explains the point effectively. You have to choose your names basing more on where or when they are used instead of the color they represent. It is a good rule of thumb to have a scale of light fore each color you use in your palette. This makes your life easy when you need to present selections, embossed borders (really? please avoid emboss your borders) and so on. This section has to be written at the very start of a ResourceDictionary (in another post I will explain how to organize the dictionaries) and it is the sole point where a color appears in the one I call the "sharped form" (remember the "#" in front of the color? ok you got the sharp).

#2 - Name your brushes

Ok, I'm reading clear on you the doubt. What the hell I can do with a bunch of colors? You all are right, colors are a form that is not ready to be used in your markup. 9 times over 10 a property of an element does not accept an instance of Color but instead it requires a Brush. So, as you did with colors, now you have to name your brushes. Brush names are more close to the real usage, and please keep in mind that nothing prevent you from use the same color in two or more brushes. Here is a set of brushes:

   1: <SolidColorBrush x:Key="BackgroundBrush" Color="{StaticResource ExtraLightColor}" />

   2: <SolidColorBrush x:Key="HighlightBrush" Color="{StaticResource LightColor}" />

   3: <SolidColorBrush x:Key="SelectionBrush" Color="{StaticResource LightColor}" />

   4: <SolidColorBrush x:Key="AlertBrush" Color="{StaticResource DarkColor}" />

As you can see, the brushes' name suggests the use you have to do with it. In this example you have Highlights and Selections rendered with the same LightColor and the AlertBrush is a DarkColor. This one is a good example of the naming: you do not need to have the Alert as Red, you only have to use a color that stands over the BackgroundColor. An the naming here helps you to remember the meaning instead of it color.

#3 - Name your gradients

Some applications make use of gradients. As you know gradients are simply a transition between a series of colors. And with your named colors you can for sure create a set of named gradients. Thanks to the Brush concept you can avoid to put gradients in the markup but you can easily put them side by side with the palette and the solid brushes and this way you are able in the future to change a solidcolor to a gradient and a gradient to a solidcolor:

   1: <LinearGradientBrush x:Key="SoftBrush" EndPoint="0.5,1" StartPoint="0.5,0">

   2:     <GradientStop Offset="0.0" Color="{StaticResource ExtraLightColor}" />

   3:     <GradientStop Offset="1.0" Color="{StaticResource LightColor}" />

   4: </LinearGradientBrush>

   5:  

   6: <LinearGradientBrush x:Key="ToolbarBrush" EndPoint="0.5,1" StartPoint="0.5,0">

   7:     <GradientStop Offset="0.0" Color="{StaticResource DarkColor}" />

   8:     <GradientStop Offset="1.0" Color="{StaticResource BasicColor}" />

   9: </LinearGradientBrush>

In my old applications I was use to call gradients as a named followed by "Gradient" but recently I've understand that it is a bad policy like naming Red as Red. You will understand it the first time you whant to flat your embossed toolbar and you transform a gradient to a solid brush.

#4 - Take advantage of Blend (with care)

Once you have created a palette and a set of brushes you can start using them and Expression Blend is your best friend but you have to pay attention to something.

On the right side you see the color tool of Blend. Instead of it you see a tab named "Color Resources". Please always remember to never use it. This tab exposes the Color instances you named in your palette. At the first sight is may seems a good idea to select colors from here but is means you put a Brush in the markup and this brush wraps the color you have selected.

Just because Colors are not directly supported, Blend expose them to let you edit gradients easily but it wraps them into a brush before to set the property of the element you are editing. You have instead to use the last button on the very top of the window. It is named "Brush Resources" and it shows the brushes you have laboriously defined.

It is all about colors

As I've already said, your palette is the central point of the theme of your application. And planning themes carefully let you change the look & feel easily making its lifetime much more longer. XAML Resources are ten times more powerful than CSS and the content of this post is a good example of this power. As an interesting excercise, please try to reproduce the matter of this post in a CSS and you will understand that it is simply impossible.

Implicit data templates are a new interesting feature of Silverlight 5.0. They are a new way to create templates that automatically applies to specific types. So, imagine you have a set of types defined, and you want to present a collection of them inside an ItemsControl, you can use an Implicit Template that apply to each one of the types you are binding. Automatically this template will be applied to the give type every time it appear in the collection.

As you can figure out if may become really useful to present every item in a different way. Let say you have an Event base class and two derived Alarm and Information. You can bind the ItemsControl to an ObservableCollection<Event> as usual. Then you specify a different template for each one of the derived types:

   1: <ItemsControl ItemsSource="{Binding Events}">

   2:     <ItemsControl.Resources>

   3:         <DataTemplate DataType="om:Alarm">

   4:             <TextBlock Text="{Binding Message}" Foreground="Red" />

   5:         </DataTemplate>

   6:         <DataTemplate DataType="om:Information">

   7:             <TextBlock Text="{Binding Message}" Foreground="Black" />

   8:         </DataTemplate>

   9:     </ItemsControl.Resources>

  10: </ItemsControl>

Running the example you will get Alarm instances written in Red and Information instances written in black. The example is trivial just because I'm pretty sure you already read about Implicit Data Templates. The interesting thing to observe in this example i that you put templates in a Resources Section. This section apply to each one of the instances created inside of the ItemsControl.

After thinking a lot about this detail I realized you can use Implict Templates to bind Hierarchical structures and present each node with a different aspect based on the type ot the node. So I've taken the most obvious hierarchical structure - the filesystem - and I created a WCF method on top of it:

   1: public class FileSystemService : IFileSystemService

   2: {

   3:     public const string Root = @"C:\";

   4:  

   5:     public IEnumerable<FileSystemItem> GetItems(string path)

   6:     {

   7:         List<FileSystemItem> items = new List<FileSystemItem>();

   8:  

   9:         DirectoryInfo directory = new DirectoryInfo(Root + path);

  10:  

  11:         foreach (var item in directory.GetDirectories())

  12:         {

  13:             try

  14:             {

  15:                 items.Add(new Folder

  16:                 {

  17:                     Name = item.Name,

  18:                     HasChildren = item.GetFiles().Count() + item.GetDirectories().Count() > 0

  19:                 });

  20:             }

  21:             catch(UnauthorizedAccessException)

  22:             { }

  23:         }

  24:  

  25:         foreach (var item in directory.GetFiles())

  26:         {

  27:             items.Add(new File

  28:             {

  29:                 Name = item.Name,

  30:                 Size = item.Length

  31:             });

  32:         }

  33:  

  34:         return items;

  35:     }

  36: }

Two words about this code. It is a method that accept a string representing the path to retrieve. The method simply points to the specified path and enumerates Folders and Files adding a few information specific to the type. Size for the file and HasChildren for the Folder.

After this, the service is ready so it's time to create the proxy on the Silverlight project and then start creating the front end. For the best result I used the MVVM pattern and create a page with its ViewModel then a ViewModel for each of the types returned by the service.

   1: public class FileViewModel : FileSystemItemViewModel<File>

   2: { }

   3:  

   4: public class FolderViewModel : FileSystemItemViewModel<Folder>

   5: { }

At the first sight it may seems you can use directly the types that comes from the service but usig a ViewModel is the best choice because I have to get commands from the nodes and I need to lazy load children items. So indise the MainPage view model I start the chain loading the first level to present in the hierarchy:

   1: public class MainPageViewModel : ViewModelBase

   2: {

   3:     public ObservableCollection<ViewModelBase> Items { get; set; }

   4:  

   5:     public MainPageViewModel()

   6:     {

   7:         this.Items = new ObservableCollection<ViewModelBase>();

   8:         this.Load();

   9:     }

  10:  

  11:     private void Load()

  12:     {

  13:         FileSystemServiceClient client = new FileSystemServiceClient();

  14:         client.GetItemsCompleted += new EventHandler<GetItemsCompletedEventArgs>(client_GetItemsCompleted);

  15:         client.GetItemsAsync(string.Empty);

  16:     }

  17:  

  18:     private void client_GetItemsCompleted(object sender, GetItemsCompletedEventArgs e)

  19:     {

  20:         this.Items.Clear();

  21:  

  22:         foreach (var item in e.Result)

  23:         {

  24:             if (item is File)

  25:                 this.Items.Add(new FileViewModel(item as File));

  26:             else if (item is Folder)

  27:                 this.Items.Add(new FolderViewModel(item as Folder, string.Empty));

  28:         }

  29:     }

  30: }

Since the File will not have any action in this example, but in an extended example it may trigger the download of the file. For the purpose of the article I will concentrate on the FolderViewModel. When the item is clicked I expect that the children is loaded and presented in the UI. So here is the code:

   1: public class FolderViewModel : FileSystemItemViewModel<Folder>

   2: {

   3:     public FolderViewModel(Folder folder, string path)

   4:         : base(folder)

   5:     {

   6:         this.Path = path + "/" + folder.Name;

   7:         this.Items = new ObservableCollection<ViewModelBase>();

   8:         this.ClickCommand = new RelayCommand(Click);

   9:     }

  10:  

  11:     private void Click()

  12:     {

  13:         if (this.Items.Count == 0)

  14:         {

  15:             FileSystemServiceClient client = new FileSystemServiceClient();

  16:             client.GetItemsCompleted += new EventHandler<GetItemsCompletedEventArgs>(client_GetItemsCompleted);

  17:             client.GetItemsAsync(this.Path);

  18:         }

  19:         else

  20:             this.IsExpanded = !this.IsExpanded;

  21:     }

  22:  

  23:     private void client_GetItemsCompleted(object sender, GetItemsCompletedEventArgs e)

  24:     {

  25:         this.Items.Clear();

  26:  

  27:         foreach (var item in e.Result)

  28:         {

  29:             if (item is File)

  30:                 this.Items.Add(new FileViewModel(item as File));

  31:             else if (item is Folder)

  32:                 this.Items.Add(new FolderViewModel(item as Folder, this.Path));

  33:         }

  34:  

  35:         this.IsExpanded = true;

  36:     }

  37:  

  38:     // here starts the Binding properties...

  39: }

In this snipped I omitted the Binding properties but remember that IsExpanded, Items and ClickCommand are respectively a boolean that indicated if the node is open or not, a collection of the child nodes and the command the user triggers when he click the node. When this happens, the service is called, and the returned children are loaded into the Items properties. I think the logic is really straightforward.

Finally it is time to watch the XAML code. Using two Implicit Templates, It is really simple to create a hierarchical structure starting from a simple ItemsControl:

   1: <Grid.Resources>

   2:     

   3:     <DataTemplate DataType="vm:FolderViewModel">

   4:         <StackPanel>

   5:             <StackPanel Orientation="Horizontal" Margin="2">

   6:                 <Image Source="/Images/folder.png" Width="16" Height="16" />

   7:                 <HyperlinkButton IsEnabled="{Binding Item.HasChildren}" 

   8:                                  Command="{Binding ClickCommand}" 

   9:                                  Content="{Binding Item.Name}" 

  10:                                  Foreground="Black" />

  11:             </StackPanel>

  12:             <ItemsControl Visibility="{Binding IsExpanded, Converter={StaticResource b2v}}" 

  13:                           Margin="20,0,0,0" ItemsSource="{Binding Items}" />

  14:         </StackPanel>

  15:     </DataTemplate>

  16:     

  17:     <DataTemplate DataType="vm:FileViewModel">

  18:         <StackPanel Orientation="Horizontal" Margin="2">

  19:             <Image Source="/Images/file.png" Width="16" Height="16" />

  20:             <TextBlock><Run Text="{Binding Item.Name}" />(<Run Text="{Binding Item.Size}" /> Kb)</TextBlock>

  21:         </StackPanel>

  22:     </DataTemplate>

  23:     

  24: </Grid.Resources>

  25:  

  26: <ScrollViewer>

  27:     <ItemsControl ItemsSource="{Binding Items}" />

  28: </ScrollViewer>

The DataTamplate relative to the FileViewModel simply presents an image and the TextBlock for the name. The FolderViewModel instead refers to a DataTemplate containing another ItemsControl binded the the Items property. Thanks to the propagation of the resources this ItemsControl again is able to generate children based on the same templates. Te result is a simple treeview that opens a node when you click on it. The Margin property indents the nodes and improve the TreeView aspect.

The figure on the side shows the final aspect of the treeview, decorated with beautiful images. The best thing is that you can create a lot of different nodes on the basis of the type you add to the collection.

I have to confess, at the first time I've tryied to generate this using a TreeView and a HierarchicalDataTemplate but I was unable to manage to have it working. It seems the HierarchicalDataTemplate does not support the implicit data templates.

The sole trick is given by the Converter I used to change the boolean type to a Visibility property. This let me to use the IExpanded property to show or not the ItemsControl.

If you are intersted in the working sample you can download it here. The code is complete and assumes you bind the service to the C:\ volume.

Download: XPG.ImplicitDataBinding (479Kb)

I would like to start this post saying I'm not a game development expert. During the first times of my work with computers I've been fashinated by the matter but I never gone deep on this development branch. Once I've meet the first time Silverlight 5.0 and I known about the 3D programming the first idea I had is to create a very simple maze as the one someone could write as the basis of a 3D game. In this post I want to briefly illustrate the work you can download at the end of the text. Here you can view a short video of the result of my work.

The maze in this video is made totally with the 3D API in Silverlight 5.0 and is totally compatible with the RTW bits. The maze is randomly generated every time you load the program and you can control the movement using the keyboard.

Generate the maze

At the base of the example there is a random generation algorithm. I think there are lot of algorithms you can find on internet and probably the one I used is really simple, but it is really effective.

The maze if based on a square divided in a number of cells and every cell has a wall on every side. Once I decided the size of the side I fill the square of celle and then I choose a random cell on a side. Then I search for an adiacent cell to move to. If the cell exists I remove the walls betweek the two cells then I move to the new position.

The algorithm continue to crawl the cells while there are room to move. If during this loop I meet a position that have not a free adiacent cell I crawl back on my steps searching for some cell to move to. When the position returns to the very first position where I started so the work is finished and all the cells have been used. Here is the core of the algorithm I described:

   1: int progress = 0;

   2:  

   3: Stack<Cell> stack = new Stack<Cell>();

   4: this.Reset();

   5:  

   6: Cell cell = this.GetRandom(0);

   7: cell.Type = CellType.Enter;

   8: cell.Visited = true;

   9:  

  10: while (true)

  11: {

  12:     Cell adiacent = this.GetAdiacentNonVisited(cell);

  13:  

  14:     if (adiacent != null)

  15:     {

  16:         stack.Push(cell);

  17:         adiacent.Visited = true;

  18:         cell = adiacent;

  19:  

  20:         progress++;

  21:  

  22:         this.OnGenerationProgressChanged((int)(progress * 100.0 / (this.Width * this.Height)));

  23:     }

  24:     else

  25:     {

  26:         if (stack.Count > 0)

  27:             cell = stack.Pop();

  28:         else

  29:             break;

  30:     }

  31: }

  32:  

  33: cell = this.GetRandom(this.Height - 1);

  34: cell.Type = CellType.Exit;

  35:  

  36: this.OnGenerationCompleted();

The figure on the side shows the resulting maze that is generated by the algorithm. It is very close to the labyrinths you can find in puzzles magazines.

Create the 3D view

Once the maze has been calculated it is time to render it using Silverlight 3D API. The rendering is made creating a square plan representing the floor of the maze and then iterating over oll the cells and creating the remaining walls.

A wall is exactly a parallelepiped created on a side. Since the thickness of the square side is zero, the wall is created across this line. some point external and some point internal. To avoid gaps in the corners all the walls include the corner of the square, also if another wall already used the same space.

Silverlight 3D API let you create every kind of figure using a collection of edges. The edges are drawed to create triangles.  A triangle is the sole surface you can create connecting three edges, that for sure is part of a single plane. Every other surface you can create can be constructed using a collection of triangles but is not necessarily part of a single plane. So to create the rectangle representing a face of a wall you have to use two triangles.

On the left side you can see the aspect of a wall. The figure shows the triangles that compose the three visible faces of the wall. Remember that the other side has exactly the same faces in the opposite position.

Drawing with the API you have to create the vertices of the figure then create the triangles connecting the vertices with edges. The full collection of edges makes the figure and it is added to a greater collection that represents the entire drawing. This collection is used to draw the final scene. The following snippet shows how to create a single wall:

   1: private void AddWall(List<VertexPositionColor> edges, float xOffset, float zOffset, float xSize, float zSize)

   2: {

   3:     var wall = new List<VertexPositionColor>();

   4:  

   5:     Vector3 topLeftFront = new Vector3(xOffset, this.Height, zOffset + zSize);

   6:     Vector3 bottomLeftFront = new Vector3(xOffset, 0.0f, zOffset + zSize);

   7:     Vector3 topRightFront = new Vector3(xOffset + xSize, this.Height, zOffset + zSize);

   8:     Vector3 bottomRightFront = new Vector3(xOffset + xSize, 0.0f, zOffset + zSize);

   9:     Vector3 topLeftBack = new Vector3(xOffset, this.Height, zOffset);

  10:     Vector3 topRightBack = new Vector3(xOffset + xSize, this.Height, zOffset);

  11:     Vector3 bottomLeftBack = new Vector3(xOffset, 0.0f, zOffset);

  12:     Vector3 bottomRightBack = new Vector3(xOffset + xSize, 0.0f, zOffset);

  13:  

  14:     Color c1 = Color.FromNonPremultiplied(200, 200, 200, 255);

  15:     Color c2 = Color.FromNonPremultiplied(150, 150, 150, 255);

  16:     Color c3 = Color.FromNonPremultiplied(100, 100, 100, 255);

  17:  

  18:     // Front face

  19:     wall.Add(new VertexPositionColor(topRightFront, c1));

  20:     wall.Add(new VertexPositionColor(bottomLeftFront, c1));

  21:     wall.Add(new VertexPositionColor(topLeftFront, c1));

  22:     wall.Add(new VertexPositionColor(topRightFront, c1));

  23:     wall.Add(new VertexPositionColor(bottomRightFront, c1));

  24:     wall.Add(new VertexPositionColor(bottomLeftFront, c1));

  25:  

  26:     // Back face 

  27:     wall.Add(new VertexPositionColor(bottomLeftBack, c1));

  28:     wall.Add(new VertexPositionColor(topRightBack, c1));

  29:     wall.Add(new VertexPositionColor(topLeftBack, c1));

  30:     wall.Add(new VertexPositionColor(bottomRightBack, c1));

  31:     wall.Add(new VertexPositionColor(topRightBack, c1));

  32:     wall.Add(new VertexPositionColor(bottomLeftBack, c1));

  33:  

  34:     // Top face

  35:     wall.Add(new VertexPositionColor(topLeftBack, c2));

  36:     wall.Add(new VertexPositionColor(topRightBack, c2));

  37:     wall.Add(new VertexPositionColor(topLeftFront, c2));

  38:     wall.Add(new VertexPositionColor(topRightBack, c2));

  39:     wall.Add(new VertexPositionColor(topRightFront, c2));

  40:     wall.Add(new VertexPositionColor(topLeftFront, c2));

  41:  

  42:     // Left face

  43:     wall.Add(new VertexPositionColor(bottomLeftFront, c3));

  44:     wall.Add(new VertexPositionColor(bottomLeftBack, c3));

  45:     wall.Add(new VertexPositionColor(topLeftFront, c3));

  46:     wall.Add(new VertexPositionColor(topLeftFront, c3));

  47:     wall.Add(new VertexPositionColor(bottomLeftBack, c3));

  48:     wall.Add(new VertexPositionColor(topLeftBack, c3));

  49:  

  50:     // Right face 

  51:     wall.Add(new VertexPositionColor(bottomRightBack, c3));

  52:     wall.Add(new VertexPositionColor(bottomRightFront, c3));

  53:     wall.Add(new VertexPositionColor(topRightFront, c3));

  54:     wall.Add(new VertexPositionColor(bottomRightBack, c3));

  55:     wall.Add(new VertexPositionColor(topRightFront, c3));

  56:     wall.Add(new VertexPositionColor(topRightBack, c3));

  57:  

  58:     edges.AddRange(wall);

  59: }

When the entire scene has been created it is time to draw it to the viewport. While you are drawing the scene, the collection of edges does not change anymore because it represents the object to draw on the 3D space. What really changes is the position from where the scene is viewed. This position is a vector located in the 3D space and have a direction to it points. Imagine it as your eye pointing a direction in the space that plus or minus is the direction pointed by your nose. Another important component of a scene is the light source. My example uses a omnidirectional light source but for the sake of simplicity I will leave this argument open. So here is the code that create the scene.

   1: XNA3DMazeRenderer renderer = 

   2:     new XNA3DMazeRenderer(System.Windows.Media.Colors.Red, (float)this.CellSize, 5.0f);

   3:  

   4: IEnumerable<VertexPositionColor> edges = renderer.Render(this.Maze);

   5:  

   6: this.Buffer = new VertexBuffer(

   7:     GraphicsDeviceManager.Current.GraphicsDevice,

   8:     VertexPositionColor.VertexDeclaration,

   9:     edges.Count(),

  10:     BufferUsage.WriteOnly);

  11:  

  12: this.Buffer.SetData(0, edges.ToArray(), 0, edges.Count(), 0);

Then the code that creates/updates the camera. It is full of matricial maths but it simply creates two points on the space and then connect one to the other. The first is the position of the camera and the second is the position of the target pointed by the camera:

   1: private void UpdateCamera()

   2: {

   3:     float x = (float)(this.CellSize * this.Maze.Width * this.Observer.Position.X);

   4:     float y = (float)(this.CellSize * this.Maze.Height * this.Observer.Position.Y);

   5:     float course = (float)(this.Observer.Course * (Math.PI / 180.0));

   6:     float tilt = (float)(this.Observer.Tilt * (Math.PI / 180.0));

   7:     Vector3 cameraPosition = new Vector3(x, 3.0f, y);

   8:     System.Windows.Point target = 

   9:         new System.Windows.Point(x + Math.Sin(course) * 100.0, y + Math.Cos(course) * 100.0);

  10:     float elevation = (float)(3.0 + Math.Sin(tilt) * 100.0);

  11:     Vector3 cameraTarget = new Vector3((float)target.X, elevation, (float)target.Y);

  12:  

  13:     this.View =

  14:         Matrix.CreateLookAt(cameraPosition, cameraTarget, Vector3.Up);

  15: }

As you can see in the code I use an "Observer" object that represents the player in the maze. It has a X and Y position on the 2D surface of the game, a course from 0 to 360 degrees representing the direction to it is pointing and finally a Tilt property that is used to move up and down. These properties are connected with the keyboard actions and determines the movement of the player onto the game surface.

Moving the player and making walls solid

Viewing the maze rendered the first time is for sure wonderful, but the very great thing is being able to navigate inside it with the keyboard. Every time a property of the Observer object is updated the change is reflected externally with the Change event. The event cause the update of the camera position and then the redraw of the scene. Using up and down arrow you can move forward and backward and with left and right arrows it is possible to turn the course in these directions. Additionally you can use PageUp and PageDown to tilt up and down the camera as the player tilt the head.

To catch the keyboard events continuously I use a trick. This is because keyboard event in silverlight does not repeats automatically. Using a KeyboardState class I created I check for KeyUp and KeyDown changing the status of monitored keys. Then a timer changed the observer properties according with the pressed keys. This tecnique allows also to use more that a single key at a time allowing the observer to turn since it is moving forward.

Finally you have to face another problem. While you are moving you have to check for the presence of a wall and cancel the motion when the observer hits it. Without this check the observer will pass through walls missing a great part of the realistic representation of the scene. The following code tests the presence of a wall and eventually cancel the movement:

   1: private void Observer_Changing(object sender, ObserverChangingEventArgs e)

   2: {

   3:     double x = this.Maze.Width * this.CellSize * e.Position.X;

   4:     double y = this.Maze.Height * this.CellSize * e.Position.Y;

   5:  

   6:     Cell cell = this.Maze.CellAt(

   7:         (int)(this.Maze.Width * e.Position.X),

   8:         (int)(this.Maze.Height * e.Position.Y));

   9:  

  10:     Rect boundaries = new Rect(

  11:         cell.X * this.CellSize + 1.25,

  12:         cell.Y * this.CellSize + 1.25,

  13:         this.CellSize - 2.5,

  14:         this.CellSize - 2.5);

  15:  

  16:     e.Cancel = false;

  17:  

  18:     if (cell.Top.IsSolid && y < boundaries.Top) e.Cancel = true;

  19:     if (cell.Bottom.IsSolid && y > boundaries.Bottom) e.Cancel = true;

  20:     if (cell.Left.IsSolid && x < boundaries.Left) e.Cancel = true;

  21:     if (cell.Right.IsSolid && x > boundaries.Right) e.Cancel = true;

  22: }

The collision algoritm here is very simple. It creates a buffer around the walls of the cell where the observer is located and then tests if the position goes out of these boundaries.

Working with 3D

Working with 3D in silverlight is for sure interesting but it requires a good knowledge of 3D math to achieve good results. Every time you get something really effective since it is a low level API using it programming interface becomes mostly difficult. So if you need to work with 3D I suggest to use an hi level framework that abstracts the API and let you think in terms of solid figures instead of collection of edges. Balder is for sure a good example of what I mean: http://balder.codeplex.com/

Download: http://www.silverlightplayground.org/assets/sources/SLPG.Maze.zip (270kb)

Just a few minutes ago I’ve received the good news about the release of Silverlight 5.0 RTW. This is the release many of us are expecting for the end of the year as stated in some previous events. Silverlight 5.0 is a great big step forward on the development of business applications due to a number of improvements introduced in this technology.

These improvements involve full-trust, databinding, P/Invoke, Multiple windows and the introduction of the new 3d API based on XNA. For a complete list of the new features please visit Pete Brown’s blog where you can find an useful index with many examples linked.

By my side I’m planning to start writing about the new feature asap, waiting just the time of making my experiments to become usable examples. Probably I will post about 3d in the next days.

For now please let me make my compliments to the Silverlight team to be able to deliver this release despite of the continuous voices spreading arount about the death of this technology. Now we can say that Silverlight is a mature technology we can start use everywhere we need to easily deliver powerful business applications developed as fast as the light.

Thanks to the new release of Windows Phone 7.1 "Mango", I've finally managed to publish the first release of Silver VNC 1.0. This version is made with the sources I've created for Silverlight 4.0 and published on codeplex at http://silvervnc.codeplex.com/.

On the left side I've posted a short video to show the capabilities of the Free Edition.

With Silver VNC free edition you can remotely view the desktop of a computer with the popular and free RFB protocol. You can easily install a VNC server downloading one of the known free versions like Real VNC, Ultra VNC and so on.

Please enjoy the application for free downloading it from the Windows Phone marketplace. I'm currently working on the next version that allows to send commands to the computer.

I know, from the title of this post you may understand that the topic I’m about to cover is not really Silverlight related. Please be patient and it will become clear that there is a relation with Silverlight in the next part when I will complete my exposition.

After a long pause, today I return to the Reactive Extensions, I’ve temporarily shelved for lack of time, and I want to present the implementation of a little server that uses a socket and takes advantage of the Extensions. A socket server usually listens to a TCP port and it can be easily consumed by a Silverlight application. This is not a usual scenario because often it is hard to get rid of firewalls and security people in a company, so the use of HTTP is way better in most of the cases. But, sometimes, tipically when you need a reactive communication that let the application to be always up to date with events on the server, the use of a Socket is an effective soluzione

For such people that are not aware of how a socket server works, a brief explanation. A regular socket server usually opens a port on the address it is binded. The port is represented by a number between 1024 and 65535 (numbers lower than 1024 are reserved) and it is expressed after the ip or dns name separated by a colon.

The server initially reserves the port and starts to listen for incoming connections. Until the arrive of a connection the server is substantially idle but when the connection is detected it has to "accept" the request and initialize the channel that will be used by both the parts to exchange the informations.

The acceptance phase of the server must handle the new connection like it is a completely new channel, so the problem is that the server will have a main channel where it accept connections and a number of channels, one for each client that has requested the connection. Usually this means that the server must spawn a new thread for each connection it accepts and the thread will separately handle its channel leaving the main thread free of returning to the listening phase.

Using Reactive Extension properly makes these operations very easy and the code required to handle the listening and acceptance is really compact. In my sample I use a Console Application that starts the listening ad finally remain available until someone hit enter and definitely closes the application. In the following box the main function:

   1: static CancellationTokenSource cts = new CancellationTokenSource();

   2:  

   3: /// <summary>

   4: /// Mains the specified args.

   5: /// </summary>

   6: /// <param name="args">The args.</param>

   7: static void Main(string[] args)

   8: {

   9:     if (IPAddress.Loopback != null)

  10:     {

  11:         TcpListener listener = new TcpListener(IPAddress.Loopback, 4530);

  12:         listener.Start();

  13:  

  14:         Console.WriteLine("Service is listening on {0} port {1}.", IPAddress.Loopback, 4530);

  15:         Console.WriteLine("Press enter to stop");

  16:  

  17:         Func<IObservable<TcpClient>> accept =

  18:             Observable.FromAsyncPattern<TcpClient>(listener.BeginAcceptTcpClient, listener.EndAcceptTcpClient);

  19:  

  20:         accept()

  21:             .Where(o => o.Connected)

  22:             .ObserveOn(Scheduler.NewThread)

  23:             .Subscribe(acceptedClient => OnAccept(acceptedClient, accept));

  24:  

  25:         Console.ReadLine();

  26:         cts.Cancel();

  27:     }

  28: }

In the first lines the server binds to the port 4530 of the localhost ip (127.0.0.1) and it starts to listen using the Start method. Then using the FromAsyncPattern method it is created an observable source that will notify once a new connection is detected. The observable will give the channel ready to communicate. So, the Subcribe method forward the channel to the OnAccept method that is responsible to feed the channel with informations retrieved by the computer (in this case if gives cpu usage and memory size in realtime). Obviously this is the operation we should spawn in a separate thread and the trick here is done by the ObserveOn(Scheduler.NewThread) that automatically initialize and start the thread using the body of the OnAccept method. Let me continue with the OnAccept method:

   1: static void OnAccept(TcpClient client, Func<IObservable<TcpClient>> accept)

   2: {

   3:     accept()

   4:         .Where(o => o.Connected)

   5:         .ObserveOn(Scheduler.NewThread)

   6:         .Subscribe(acceptedClient => OnAccept(acceptedClient, accept));

   7:  

   8:     Console.WriteLine("channel opened");

   9:  

  10:     while (!cts.Token.WaitHandle.WaitOne(100))

  11:     {

  12:         try

  13:         {

  14:             if (client.Connected)

  15:             {

  16:                 byte[] message = GetMessage();

  17:                 client.Client.Send(message);

  18:             }

  19:         }

  20:         catch (Exception ex)

  21:         {

  22:             Console.WriteLine(ex.Message);

  23:             break;

  24:         }

  25:     }

  26:  

  27:     Console.WriteLine("channel closed");

  28:     client.Close();

  29: }

As you can see the OnAccept method receives the connected TcpClient side by side with the instance of the observable and in the very first lines puts the main thread again on listen, just before starting its work. This operation closes the loop because the listener will continue to wait for new connections and the new thread will send the informations along the channel.

To gracefully handle the closure of the server, once you hit the enter key a CancellationTokenSource is used to forward to alle the threads the request of exit. The method GetMessage simply reads the informations of cpu and memory and translates them to a byte array that is sent on the channel.

   1: const ulong Mega = 1048576;

   2: static PerformanceCounter cpuCounter = new PerformanceCounter("Processor", "% Processor Time", "_Total");

   3:  

   4: static byte[] GetMessage()

   5: {

   6:     ulong totalPhisicalMemory = 0;

   7:     ulong availablePhisicalMemory = 0;

   8:     ulong totalVirtualMemory = 0;

   9:     ulong availableVirtualMemory = 0;

  10:     float cpu = cpuCounter.NextValue();

  11:  

  12:     NativeMethods.MEMORYSTATUSEX memStatus = new NativeMethods.MEMORYSTATUSEX();

  13:  

  14:     if (NativeMethods.GlobalMemoryStatusEx(memStatus))

  15:     {

  16:         totalPhisicalMemory = memStatus.ulTotalPhys / Mega;

  17:         availablePhisicalMemory = memStatus.ulAvailPhys / Mega;

  18:         totalVirtualMemory = memStatus.ulTotalVirtual / Mega;

  19:         availableVirtualMemory = memStatus.ulAvailVirtual / Mega;

  20:     }

  21:  

  22:     return Encoding.UTF8.GetBytes(

  23:         string.Format(

  24:             CultureInfo.InvariantCulture,

  25:             "{0:0.0}:{1}:{2}:{3}:{4}{5}",

  26:             cpu,

  27:             totalPhisicalMemory,

  28:             availablePhisicalMemory,

  29:             totalVirtualMemory,

  30:             availableVirtualMemory,

  31:             Environment.NewLine));

  32: }

To have a try with the server please runs the code and then open a command prompt and type the following

You will see a continuous stream of informations displayed on the console and you can also try to run multiple command prompt with the same instruction and all the connections will be connected. This example shows the powerfulness of the reactive extensions. In the next post I will show you how to use the library to consume this socket.

Continuing my experiments with Reactive Extension I put together a small example that show an alternative use of the library to create a little game. The game is the widely known Snake that many of us have played on his own Nokia when it is the sole game in the ancient models. Please take note that the game I wrote is not complete since it is first of all an example of the use of a technology and how it can simplify the development of a slightly complex logic like the one that is behind this game.

The core of the game is based on two separate uses of the Reactive Extensions. From one side I have a main loop that is based on a frequent timeout that in a complete version of the game could be used to change the game speed. In this version it is set to 75 milliseconds. Every time the timeout is elapsed I move forward the Snake of one position saved in two variables XDirection and YDirection. This variable can assume the values of 1 or -1 if the snake is moving along the direction and 0 if the snake is moving along the opposite direction.

Using this variables the GenerateWithTime method of the RX generate a stream of points that are the positions where the Snake have passed during its move. The length of the snake is determined by the TrailWhile method that evaluate the length using a third variable that is incremented every time the Snake eats a gem.

The other use of the RX is to handle the Manipulation events that are used to detect if the user touches the screen basing on this touches the XDirection and YDirection are updated to reflect the touch. As an example if when the snake is moving along the y axis like the screenshot the touch on the right side of the screen make change the direction to right and the touch on the left to left.

Here is the code of the main game loop:

Observable.GenerateWithTime(

    new Point(0, 0),

    p => this.IsRunning,

    p => p,

    p => TimeSpan.FromMilliseconds(75),

    p => this.NewPoint(p))

    .ObserveOnDispatcher()

    .TrailWhile(o => o > this.Length)

    .Subscribe(this.EvaluateAndDrawSnake);

private Point NewPoint(Point point)

{

    double x = point.X + XDirection;

    double y = point.Y + YDirection;

    if (x < 0) x = 22;

    if (x > 22) x = 0;

    if (y < 0) y = 36;

    if (y > 36) y = 0;

    return new Point(x, y);

}

The method EvaluateAndDraw is the part of the code that check when the snake eats itself to end the game and then redraw the snake on the screen. Here is the management of the screen:

Observable.FromEvent<ManipulationStartedEventArgs>(

    ev => this.ManipulationStarted += ev,

    ev => this.ManipulationStarted -= ev)

    .Select(

    o =>

    {

        return new

        { 

            X = Math.Sign(o.EventArgs.ManipulationOrigin.X - 240), 

            Y = Math.Sign(o.EventArgs.ManipulationOrigin.Y - 400) 

        };

    })

    .Subscribe(

    o =>

    {

        if (this.XDirection != 0 && this.YDirection == 0)

        {

            this.XDirection = 0;

            this.YDirection = o.Y != 0 ? o.Y : this.YDirection;

        }

        else if (this.XDirection == 0 && this.YDirection != 0)

        {

            this.XDirection = o.X != 0 ? o.X : this.XDirection;

            this.YDirection = 0;

        }

    });

The following link lets you download the complete source of the example. My highest score is 510. Have a good game.

Download: SLPG.ReactiveSnake.zip (140kb)

Starting from Silverlight 5.0 you can create custom Markup Extensions and this is an interesting feature to easily encapsulate some logic and make it easy to be applied to properties in the XAML markup. Until now you could only use a few extensions to apply resources (StaticResource), make databinding (Binding) and connect properties with parts of a template (TemplateBinding) but now, implementing a really simple interface you can build your own.

   1: public interface IMarkupExtension<out T> where T: class

   2: {

   3:     T ProvideValue(IServiceProvider serviceProvider);

   4: }

Using this interface you can specify the type to which the markup extension can be applied (the generic type T) but if you do not need a control about this type you can extend the MarkupExtension abstract class that is like you are extending IMarkupExtension<object>.

Inside the ProvideValue method there is the whole logic of the extension and using the IServiceProvider passed by the runtime you can get access to three services that let you get some informations about the markup where the extension is located.

IRootObjectProvider: provide a reference to the Root object of the VisualTree which the element is part of

IXamlTypeResolver : is able to resolve the name of the tags in the markup to the corresponding type.

IProvideValueTarget : gets a reference to the property and the elements which the markup extension is assigned

To retrieve an instance of this services you can use the GetService method on the IServiceProvider instance.

IProvideValueTarget target = (IProvideValueTarget)serviceProvider.GetService(typeof(IProvideValueTarget));

In this example I wrote a RoleBinding extension that a developer can use to connect parts of the User Interface with a Validator class that is able to authorize the access to these parts using a set of custom rules. Let start writing the markup extension:

   1: using System;

   2: using System.Net;

   3: using System.Windows;

   4: using System.Windows.Controls;

   5: using System.Windows.Documents;

   6: using System.Windows.Ink;

   7: using System.Windows.Input;

   8: using System.Windows.Media;

   9: using System.Windows.Media.Animation;

  10: using System.Windows.Shapes;

  11: using System.Windows.Markup;

  12: using System.Security.Principal;

  13: using System.Windows.Data;

  14: using System.Xaml;

  15: using System.ComponentModel;

  16: using System.Diagnostics;

  17: using System.Security;

  18: using System.Reflection;

  19: using System.Globalization;

  20:  

  21: namespace SLPG.MarkupExtensions

  22: {

  23:     public class RoleBindingExtension : MarkupExtension

  24:     {

  25:         /// <summary>

  26:         /// Gets or sets the name of the group.

  27:         /// </summary>

  28:         /// <value>

  29:         /// The name of the group.

  30:         /// </value>

  31:         public string GroupName { get; set; }

  32:         /// <summary>

  33:         /// Gets or sets the name of the feature.

  34:         /// </summary>

  35:         /// <value>

  36:         /// The name of the feature.

  37:         /// </value>

  38:         public string FeatureName { get; set; }

  39:         /// <summary>

  40:         /// Gets or sets the converter.

  41:         /// </summary>

  42:         /// <value>

  43:         /// The converter.

  44:         /// </value>

  45:         public IValueConverter Converter { get; set; }

  46:         /// <summary>

  47:         /// Gets or sets the converter parameter.

  48:         /// </summary>

  49:         /// <value>

  50:         /// The converter parameter.

  51:         /// </value>

  52:         public object ConverterParameter { get; set; }

  53:  

  54:         /// <summary>

  55:         /// Provides the value.

  56:         /// </summary>

  57:         /// <param name="serviceProvider">The service provider.</param>

  58:         /// <returns></returns>

  59:         public override object ProvideValue(IServiceProvider serviceProvider)

  60:         {

  61:             IProvideValueTarget target = (IProvideValueTarget)serviceProvider.GetService(typeof(IProvideValueTarget));

  62:  

  63:             bool isAuthorized = false;

  64:  

  65:             if (RoleManager.Current != null)

  66:                 isAuthorized = RoleManager.Current.Validator.Authorize(this.GroupName, this.FeatureName);

  67:             else

  68:                 isAuthorized = true;

  69:  

  70:             if (this.Converter != null)

  71:                 return this.MapToType(isAuthorized, target, this.Converter, this.ConverterParameter);

  72:  

  73:             return this.MapToType(isAuthorized, target);

  74:         }

  75:  

  76:         /// <summary>

  77:         /// Maps to type.

  78:         /// </summary>

  79:         /// <param name="isAuthorized">if set to <c>true</c> [is authorized].</param>

  80:         /// <param name="target">The target.</param>

  81:         /// <param name="converter">The converter.</param>

  82:         /// <param name="converterParameter">The converter parameter.</param>

  83:         /// <returns></returns>

  84:         private object MapToType(bool isAuthorized, IProvideValueTarget target, IValueConverter converter, object converterParameter)

  85:         {

  86:             PropertyInfo info = target.TargetProperty as PropertyInfo;

  87:  

  88:             if (info != null)

  89:                 return converter.Convert(isAuthorized, info.PropertyType, converterParameter, CultureInfo.CurrentCulture);

  90:  

  91:             return isAuthorized;

  92:         }

  93:  

  94:         /// <summary>

  95:         /// Maps to type.

  96:         /// </summary>

  97:         /// <param name="isAuthorized">if set to <c>true</c> [is authorized].</param>

  98:         /// <param name="target">The target.</param>

  99:         /// <returns></returns>

 100:         private object MapToType(bool isAuthorized, IProvideValueTarget target)

 101:         {

 102:             PropertyInfo info = target.TargetProperty as PropertyInfo;

 103:  

 104:             if (info != null)

 105:             {

 106:                 if (info.PropertyType == typeof(Visibility))

 107:                     return isAuthorized ? Visibility.Visible : Visibility.Collapsed;

 108:             }

 109:  

 110:             return isAuthorized;

 111:         }

 112:     }

 113: }

First of all I extend the MarkupExtension class. The core of the extension is the ProvideValue method. Inside this method I get a service that implements the IProvideValueTarget interface to retrieve informations about the property where the extension is applied to. In my case I need to know the type of the property because I have to map the boolean information (true means authorized, false means not authorized) to the property. For example if the target property is Visibility I map the true to Visible and false to Collapsed.

A markup extension can have a number of parameters. They are public properties exposed by the class. Differently from other existing extensions the custom extensions cannot have unnamed parameters. This is a choice of the Silverlight team I hope will change in future releases just to make extensions very close to the WPF ones. In my case the extension support these parameters:

GroupName and FeatureName: two strings that are used to select the feature and the category of feature the element is part. You can specify for example "Products" as GroupName and "Create" as feature. The values and their meaning are completely up to you. By default they are interpreted as role names where the two parts are joined by a dot: GroupName.FeatureName.

Converter and ConverterParameter: like the Binding extension it is a class that implements IValueConverter and a parameter passed to the class during the conversion. It is used to apply custom conversion to the boolean value that comes from the Validator. In the code provided with the post I use a converter to map the boolean to a Color (Red or Green). 

The extension rely on a Lifetime Object that contains the roles granted to the current user. In my example these roles are passed using the InitParams but please do not repeat this in a production environment because a malicious user can easily impersonate different roles. Probably the better thing  is to use an AuthorizationDomainService provided by the WCF RIA Services.

Once you add the RoleManager service to the App.xaml you can also specify a custom validator that will get the authorization requests and can apply every type of logic you need to perform the authorization. This class can be easily created by implementing the IRoleManagerValidator interface.

You can download the code of this article using the following link. I appreciate every suggestion to improve this extension.

Download: SLPG.MarkupExtensions.zip (30KB)

Following the announcement made today on the scene on MIX 2011 I’ve prepared an example for the purpose of showing the new powerful 3D available in the beta bits. Remembering ancient days when I enjoyed myself writing small programs to plot 3D functions on the screen of my Amiga 500, I decided to follow again this path and put together a few lines of code to draw the sample functions in Silverlight (so this pairs with the fractals experiments made in occasion of MIX 2009).

Drawing 3D scenes in Silverlight is not so intuitive as it is in WPF due the fact that the API exposed by the plugin is on a lower level than the WPF one. The team choosed to implement an API that is very close to the XNA framework one. So to create objects in 3D space you have to deal with lot of triangles, vertex and pixel shaders and other exotic stuff. Nonetheless, once you understand the way the thing works the results don’t delude you.

Basically to create a 3D scene you have to put in the markup a special element named DrawingSurface. This element is able to render a 3D set. Every time it surface needs to be rendered it raises an OnDraw event passing to the handler and instance of a GraphicsDevice that is useful to actually draw the scene on the surface. In the example a class named Scene is used to setup the 3D environment (camera, viewing direction and elements in the scene) do inside the OnDraw event the Scene’s Draw method is called to perform the draw.

Inside the Scene class every element draw itself. In my case the scene is populated only by FunctionPlot class that contains the function to draw and receives some parameters. During the rendering is is possible to apply some transformation matrices that apply rotation, translation and scaling.

The drawing of the function is probably the simplest thing. While the x and y coordinates run on the plane the vertexs of a square are build. The area of every square is divided in two triangles.

A detailed explanation of how the 3D pipeline works is out of the scope of this article and should take an huge number of posts, not few lines. For now I give you the code I wrote for this example and I hope you appreciate like me the beautiful images that it creates.

Download: SLPG.3D.zip (256kb)

I have to confess, the more I play with reactive extensions the more I enjoy the result I get and appreciate their power. With this post I would like to show how it is possible to  take advantage of these extensions to easily obtain something that normally requires a complex code. The example is really simple and probably not so useful by itself but there are lot of uses I can imagine for the trail functions I will show in a few.

Using the Reactive Extensions make very simple to collect and manipulate the events coming from a source, like you are querying a database. The library itself define a number of methods that operate this way. The buffering functions for instance take a stream of events and collect them in groups based on count or timeout. BufferWithCount gives chunks of counted events and BufferWithTime collect the events generated in a specific timeout.  For example, given this sequence:

1,2,3,4,5,6,7,8,9

TrailWithCount(3) returns

1,2,3 - 4,5,6 - 7,8,9

In the following code I show an extension method that is able to collect the events creating a Trail based on count. I called it TrailWithCount; Given the previous collection the result will be

1,2,3 - 2,3,4 - 3,4,5 - 4,5,6 - etc...

   1: public static IObservable<IEnumerable<T>> TrailWithCount<T>(this IObservable<T> observable, int count)

   2: {

   3:     Queue<T> queue = new Queue<T>();

   4:  

   5:     return observable.Select(

   6:         o =>

   7:         {

   8:             queue.Enqueue(o);

   9:  

  10:             while (queue.Count > count) queue.Dequeue();

  11:             return queue.ToArray();

  12:         });

  13: }

This method take in input an IObservable<T> and returns an IObservable<IEnumerable<T>>. This is very close to the BufferWithCount method that returns an IObservable<IList<T>>. I preferred the use of IEnumerable<T> instead of IList<T> because I do not need the Insert and Remove methods of this interface. In the first row of the method I create a Queue<T>. It is important to remember that this collection will be created once the first time the method is called and thanks to the usage of lambda expression it will be alive and available to the body of the Select method for each event we get from the stream.

So, every time we get an event, in the Select method I add it to the Queue and then I remove the ones that exceed the count. Finally I select the items in the queue a result of the lambda expression so they are forwarded to the next extension method in the chain.

The same way, but taking advantage od the Timestamped<T> class I can operate to collect the trail events by time. The Timestamped<T> class is useful to add a timestamp (the moment when the event was received) to the item I add to the queue. So instead of removing items from the queue when they exceed a count I compare the timestamp with the current time and I remove the ones that are outside the defined timeout. Here is the method:

   1: public static IObservable<IEnumerable<T>> TrailWithTime<T>(this IObservable<T> observable, TimeSpan timeSpan)

   2: {

   3:     Queue<Timestamped<T>> queue = new Queue<Timestamped<T>>();

   4:  

   5:     return observable.Select(

   6:         o =>

   7:         {

   8:             DateTime now = DateTime.Now;

   9:  

  10:             queue.Enqueue(new Timestamped<T>(o, now));

  11:  

  12:             while (now - queue.Peek().Timestamp > timeSpan)

  13:                 queue.Dequeue();

  14:  

  15:             return queue.Select(v => v.Value).ToArray();

  16:         });

  17: }

Ok, now that we got the Trail method it is time to use them. To visualize the resulting trail I will catch the MouseMove events and collect the resulting points to draw the trail on the plugin area. So first of all I attach the MouseMove using the Observable.FromEvent then I transform the output events to a stream of Point calling GetPosition for every EventArgs. Finally I call the TrailWithCount (or TrailWithTime) method just before subscribing to the stream.

   1: Observable.FromEvent<MouseEventHandler, MouseEventArgs>(

   2:     ev => new MouseEventHandler(ev),

   3:     ev => this.LayoutRoot.MouseMove += ev,

   4:     ev => this.LayoutRoot.MouseMove -= ev)

   5:     .Select(o => o.EventArgs.GetPosition(this.LayoutRoot))

   6:     .TrailWithTime(TimeSpan.FromSeconds(3))

   7:     .Subscribe(DrawLine);

The Subscribe method will call a Draw method that simply assign the points of the trail to a Polyline. This will show a trail that grow to the required length then is shortened at the end when the mouse moves. Here you can try by yourself moving the mouse on the following instance of the plugin:

In the attached code you can download you will find the methods I discussed above and an additional TrailWithTimeAndCount method that have an hybrid behavior that combines both the other methods. To make the download working you have to download the Reactive Extensions from Nuget and add a reference to them in the project.

Download: http://www.silverlightplayground.org/assets/sources/SLPG.Trailing.Silverlight.zip (17 KB)

Recently I’m trying the Reactive Extensions, an interesting set of extensions that aim to improve the handling of asynchronous programming with an innovative implementation of the observer pattern. These extensions provide some useful methods that solve in an elegant way some recurring problems that everyone have found for sure when calling the network. So, after lot of attempts I found a pattern I will start to use implementing the Data Access facade in my Silverlight applications.

Before discovering the Reactive Extensions (starting from here I will refer to them using the abbreviation RX), I was habit to use a widely adopted pattern that exposes two additional parameters to every method of the Data Access class. For instance, a method made to download a feed from the network may have the following signature and body:

   1: public static void DownloadFeed(Uri uri, Action<SyndicationFeed> success, Action<Exception> fail)

   2: {

   3:     try

   4:     {

   5:         HttpWebRequest request = HttpWebRequest.CreateHttp(uri);

   6:  

   7:         request.BeginGetResponse(

   8:             asyncResult =>

   9:             {

  10:                 try

  11:                 {

  12:                     WebResponse response = request.EndGetResponse(asyncResult);

  13:  

  14:                     using (StreamReader sReader = new StreamReader(response.GetResponseStream()))

  15:                     {

  16:                         using (StringReader reader = new StringReader(sReader.ReadToEnd()))

  17:                         {

  18:                             using (XmlReader xReader = XmlReader.Create(reader))

  19:                             {

  20:                                 Deployment.Current.Dispatcher.BeginInvoke(

  21:                                     () => success(SyndicationFeed.Load(xReader)));

  22:                             }

  23:                         }

  24:                     }

  25:                 }

  26:                 catch (Exception ex)

  27:                 {

  28:                     fail(ex);

  29:                 }

  30:             }, null);

  31:     }

  32:     catch (Exception ex)

  33:     {

  34:         fail(ex);

  35:     }

  36: }

Using the HttpWebRequest made the code more complicated but the WebClient does not makes significant changes to the way the network call works. This pattern is interesting because using some lambda expression the resulting code remain compact. The drawback is that every method has two more parameters so the code is hardest to be understood.

The RX framework contains two methods that are useful to handle a network connection; Observable.FromAsyncPattern is really useful if you want to use an HttpWebRequest because it can automatically handle the Begin and End parts of the asynchronous pattern. On the other side, Observable.FromEvent can attach an event and gracefully detach when it is not reqired anymore; it is the case of the WebClient class tha expose a DownloadStringCompleted event. So we start handling the async pattern of an HttpWebRequest:

   1: public static IObservable<SyndicationFeed> DownloadFeedWebRequest(Uri uri)

   2: {

   3:     HttpWebRequest request = HttpWebRequest.CreateHttp(uri);

   4:  

   5:     return Observable.FromAsyncPattern<WebResponse>(request.BeginGetResponse, request.EndGetResponse)

   6:         .Invoke()

   7:         .ReadToEnd()

   8:         .ConvertToFeed()

   9:         .ObserveOnDispatcher();

  10: }

These few lines does the trick: The Observable.FromAsyncPattern method encapsulates BeginGetResponse and EndGetResponse. The resulting object is a synchronous representation of the async pattern. The Invoke method call the service then two methods I wrote read the resulting stream and convert the string to a syndicationfeed. Finally, with the ObserveOnDispatcher method I marshal the thread to the user interface using the dispatcher.

The return value is an IObservable<SyndicationFeed> instance that enable the caller to listen for the completion of the operation. The way the method is called is very similar to my previous patter but the method now has only the needed parameters:

   1: DataSource.DownloadFeedWebRequest(new Uri("http://api.twitter.com/1/statuses/public_timeline.atom"))

   2:     .Subscribe(

   3:         r =>

   4:         {

   5:             feed.ItemsSource = r.Items;

   6:         }, HandleExceptions);

   1: public static IObservable<SyndicationFeed> DownloadFeedWebClient(Uri uri)

   2: {

   3:     WebClient client = new WebClient();

   4:  

   5:     IObservable<SyndicationFeed> result = Observable.FromEvent<DownloadStringCompletedEventHandler, DownloadStringCompletedEventArgs>(

   6:         ev => new DownloadStringCompletedEventHandler(ev),

   7:         ev => client.DownloadStringCompleted += ev,

   8:         ev => client.DownloadStringCompleted -= ev)

   9:         .Select(o => o.EventArgs.Result)

  10:         .ConvertToFeed();

  11:  

  12:     client.DownloadStringAsync(uri);

  13:  

  14:     return result;

  15: }

In the method we have to specify the attach and detach actions. These action will be called by the RX when the Subscribe method is complete; Here we do not need to call the ReadToEnd method because the WebClient returns directly a string and also we do not have to marshal to the UI Thread because the WebClient already does the trick. The select method convert the resulting EventArgs to the value expected from the ConvertToFeed.

I’m very intersted in your opinion on this example. My feel is that the code is more reusable, and compact, but if someone have a suggestion to improve the method pleare