Dynamic content (xaml) with Silverlight.NET and ASP.NET

January 25, 2008 00:12 by John M

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.


Currently rated 3.5 by 2 people

  • Currently 3.5/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Related posts

Comments

February 8. 2008 03:06

Gravatar

Hi,
aspx page would have only xaml so how to we refer and call the silverlight javascript?
Regards,
kiran

kiran

February 8. 2008 15:37

Gravatar

Hi Kiran,

The aspx page is just the file that you use as your XAML file. You will still need another page that references the silverlight.js script and createSilverlight.js script (if thats what you named it). So in the end you can have default.html or default.aspx created similiar to the one found in the link below:

http://silverlight.net/quickstarts/silverlight10/FileSetup.aspx

and in the createSilverlight.js script where it asks to reference your .xaml file, just replace it with your dynamic xaml file which is the .aspx file I showed above.

If it helps, I named my file createFilmStrip.js instead of createSilverlight.js. That is why above, the function in step 6 is createFilmStrip(). Let me know if you have any other questions. All in all you will need two pages.

- John M (author)

John_M

February 9. 2008 00:08

Gravatar

it works..thanks a lot

kiran

February 9. 2008 07:20

Gravatar

excellent!

John_M

February 12. 2008 09:25

Gravatar

Well the idea you showed is very good for static pages, but in a RIA, how will we access the silverlight events because the code behind (aspx.cs) file does not know about silverlight events and classes.

For example dynamically we created a Rectangle object. How to handle the mousedown event on it ?

This is the biggest problem i am facing at the moment, otherwise the idea is awesom.

ihtesham

February 12. 2008 09:29

Gravatar

Hi john its me again. If you can work around that please let me know at: iqazii@yahoo.co.uk

Thank you very much.

ihtesham

February 12. 2008 21:27

Gravatar

I will see what I can do about your situation or find a work around. If I understand correctly you are wanting to know how to handle the mousedown event through a rectangle your created dynamically?

Did you create the rectangle in the code behind or in javascript dynamically?

If you have any code samples feel free to email them to info@xdevsoftware.com or put them here in a comment so we can take a look at them and see if we can help you out. In the meantime I will see what I can do.

John M (author)

John_M

February 13. 2008 04:17

Gravatar

Hi john !!

The code is declarative syntax like

<Canvas Canvas.Left="20" Canvas.Top="40>

<Rectangle Width ="350"
Height="50"
RadiusX="5"
RadiusY="5"
x:Name = "ARect"
>
The problem is that in the code behind (Silverstrip.ascx.cs) file i want to change the RadiusX and RadiusY
on a mouseentered event. Unfortunately i cannot get reference to ARect nor can i access the mouse event because the API's are not available.

I have already sent you the entire application.
I am really looking forward to your help.

Thanks
Ihtesham

ihtesham

December 8. 2008 20:45

Gravatar

I really enjoy reading your browser..NC..Tnx...

Busby SEO Test

Add comment


(Will show your Gravatar icon)  

  Country flag




Live preview

January 6. 2009 14:41

Gravatar