John Mendez

I wanted to provide a quick example on how someone can utilize XAML and ASP.NET to create a dynamic XAML page so it can be more flexible with content being provided on a page. You will find out that it is not too difficult and this concept can be used for many ideas!

1) create a normal web form page in your ASP.NET application. 

2) Set the content type to "text/xml"

3) Delete everything after the 1st line (so all the HTML stuff)...So your page should look something like this after the first line:

<?xml version="1.0"?>
<Canvas Width="205" Height="425" xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

  <Canvas Width="205" Height="425">
    <Rectangle Width="205" Height="425" RadiusX="10" RadiusY="10" Canvas.ZIndex="-101">
   
    </Rectangle>

    //..... any other XAML content you would like 
       
    <%= makeXAML() %>
     

 </Canvas>
   
   
 
</Canvas>

Notice the function call in there <%= makeXAML() %>.  This is actually stored in the code behind file.

4) create the function in your code behind file.

5) The function may look and do something like this.

 //create XAML that will be returned to the aspx page.
 protected string makeXAML()
 {
        DataSet ds = new DataSet()
 // fill your dataset from your datasource

        StringBuilder strXamlImages = new StringBuilder();

        int canvasTop = 5; //used to position out the images in the xaml page so they don't sit on top of each other

        for (int i = 0; i < ds .Tables[0].Rows.Count; i++)
        {
            strXamlImages.Append(string.Format("<Image Source=\"{0}\" Tag=\"{3}\" x:Name=\"{1}\" Width=\"100\" Height=\"100\" Canvas.Top=\"{2}\" Canvas.Left=\"8\" Opacity=\".5\" />", ds.Tables[0].Rows[i]["columnName"].ToString(), ds.Tables[0].Rows[i]["columnName"].ToString(), canvasTop, ds.Tables[0].Rows[i]["columnName"].ToString()));
           
   canvasTop += 105;
        }

        return strXamlImages.ToString();
}

6) The next step is to just reference the aspx page in your createSilverlight function in your javascript

   function createFilmStrip()
{ 
    Silverlight.createObject(
        "webPage1.aspx",                  // Source property value.
        parentElement,                  // DOM reference to hosting DIV tag.
        "div_0",         // Unique plug-in ID value.
        {                               // Per-instance properties.
            width:'210',                // Width of rectangular region of
                                        // plug-in area in pixels.
            height:'425',               // Height of rectangular region of
                                        // plug-in area in pixels.
            inplaceInstallPrompt:false, // Determines whether to display
                                        // in-place install prompt if
                                        // invalid version detected.
            background:'#000000',       // Background color of plug-in.
            isWindowless:'false',       // Determines whether to display plug-in
                                        // in Windowless mode.
            //framerate:'24',             // MaxFrameRate property value.
            version:'1.0'               // Silverlight version to use.
        },
        {
            onError:null,               // OnError property value --
                                        // event handler function name.
            onLoad:null                 // OnLoad property value --
                                        // event handler function name.
        },
        null);                          // Context value -- event handler function name.
}

This should get your started on how to dynamically create content with Silverlight.NET 1.0.  I know it says you can do it in Javascript, but I prefer this way so I can use C# and make calls to databases.

Silverlight silverlight.net, asp.net