Componentizing Silverlight - what I consider best practices

  • Article

I was looking at a post on Mike Harsh's blog about a utility that turns XAML into javascript and I didn't entirely agree with what this utility accomplished.  A while back I posted an entry about hooking in web services, Silverlight (WPF/E) and ASP.NET Ajax.  Although I did use string concatenation in the sample, I was posting a simple example just to demonstrate how to piece those three technologies together.  After creating large solutions with multiple Silverlight components and really digging deep into the technology, I recommend a different way of building out applications.  Here's what I found to work best and a way to really manage all the pieces easily. 

Lets say you are building a list in XAML and what gets populated in that list comes from some data source (text file, web service, etc.).  Of course you could do this in javascript and create xaml in the javascript and add objects to the canvas.  But, from what I've found, this gets hard to manage and your js files become enormous.  What I did was create a XAML template and give your dynamic values based on format items, like so:

<

Image Height="26" Width="32" Source="{2}" Canvas.Top="{3}" Canvas.Left="6"/>

Now, the file that has the above line of code in has a lot of different attributes that are set based on code.  So, lets see how to hook it up.  You have created elements that have the values being defined as a format item and you need to add those values.  How I did this was to create an object that has a property in it that represents the fragment, like this:

public struct Item

{

   public string XamlFragment;

}

Then set the property to the correct data item by streaming in the XAML template and replacing the format item with the correct value, like so:

string itemTemplate = HttpContext.Current.Server.MapPath("~/Xaml/Item.xaml");

            string xamlText = String.Format(File.ReadAllText(itemTemplate)

                , myfirstvalue

                , textTop

                , item.TypeIcon);

 

I built an ArrayList of Item structs in C# and then have a method in javascript to call a C# web service method that returns the arraylist.  In javascript, have your function that calls the web service method point to a function that takes in the results as a parameter, like so:

 

MyService.GetItems(OnSucceeded); //call web service

function OnSucceeded(result)

{

    _results = result;

    Array.forEach(_results,AddXamlResultElement);

}

 

Then use the Array.foreach method, and point it to the function to add the xaml fragment to the canvas, like so:

 

function AddXamlResultElement(element,index)

{

    properCanvas.children.Add(canvas.CreateFromXaml(element.XamlFragment));

}

Hopefully this will help you build projects and manage them that could potentially be very large.  As you can see, it cuts down on the amount of javascript you have to use to keep concatenating the strings and adding them.  Plus its a lot easier to maintain, speaking from experience.