your .net design team: Using Code Creator to Create SilverLight Controls (WPF/E)

Tuesday, May 1, 2007

Using Code Creator to Create SilverLight Controls (WPF/E)

SilverLight is small, efficient and has the promise of making great Web experiences for the browser user. To fufill this promise SilverLight code (Xml) must be created dynamically. This can be done via JavaScript in the client browser or at the server. We believe using CodeCreator at the server is a much simpler, faster and more maintainable approach.

Below is an example of a SilverLight control with CodeCreator constructs. This can be used to dynamically create a control demonstrated in this link.

<!--<cc:Repeat/>-->
  <Canvas >   
    <Rectangle x:Name="button0"
               Width="120"
               Height="75"
               Canvas.Left="0"
               Canvas.Top="0"
               Stretch="Fill"
               MouseEnter="javascript:ImageButtonEnter"
               MouseLeave="javascript:ImageButtonLeave"
               MouseLeftButtonDown='javascript:ImageButtonDown0'
               >
      <!--<cc:Replace Attribute="Canvas.Top">$Top$</cc:Replace>
      <cc:Replace Attribute="x:Name">button$Counter$</cc:Replace>
      <cc:Replace Attribute="MouseLeftButtonDown">
javascript:ImageButtonDown$Counter$</cc:Replace>-->
      <Rectangle.Fill>
        <ImageBrush ImageSource="images/JetSki.jpg" ></ImageBrush>
        <!--<cc:Replace Attribute="ImageSource">$Images$
        </cc:Replace>-->
      </Rectangle.Fill>
    </Rectangle>
  </Canvas>
  <!--<cc:Evaluate>Top = Top + 30;</cc:Evaluate>-->
  <!--<cc:Evaluate>Counter = Counter + 1;</cc:Evaluate>-->  
<!--<cc:RepeatEnd/>-->

CodeCreator will create the following code.
<Canvas>
<Rectangle x:Name="button0"
Width="120"
Height="75"
Canvas.Left="0"
Canvas.Top="0"
Stretch="Fill"
MouseEnter="javascript:ImageButtonEnter"
MouseLeave="javascript:ImageButtonLeave"
MouseLeftButtonDown="javascript:ImageButtonDown0"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Rectangle.Fill>
<ImageBrush ImageSource="images/cf18.jpg"></ImageBrush>
</Rectangle.Fill>
</Rectangle>
</Canvas>
<Canvas>
<Rectangle x:Name="button1"
Width="120"
Height="75"
Canvas.Left="0"
Canvas.Top="30"
Stretch="Fill"
MouseEnter="javascript:ImageButtonEnter"
MouseLeave="javascript:ImageButtonLeave"
MouseLeftButtonDown="javascript:ImageButtonDown1"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Rectangle.Fill>
<ImageBrush ImageSource="images/jetski.jpg"></ImageBrush>
</Rectangle.Fill>
</Rectangle>
</Canvas>
<Canvas>
<Rectangle x:Name="button2"
Width="120"
Height="75"
Canvas.Left="0"
Canvas.Top="60"
Stretch="Fill"
MouseEnter="javascript:ImageButtonEnter"
MouseLeave="javascript:ImageButtonLeave"
MouseLeftButtonDown="javascript:ImageButtonDown2"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Rectangle.Fill>
<ImageBrush ImageSource="images/soundbarrier.jpg"></ImageBrush>
</Rectangle.Fill>
</Rectangle>
</Canvas>

The JavaScript code will also need to be created using simalar techniques. See the CodeCreator Blog posting for more information.