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.


Demonstrated at Ottawa Demo Camp

Labels: SilverLight, WPF/E

Remember migrating from .net 2.0 from 1.1 at your ISP? Our ISP created a separate server with .net 2.0 libraries and selected clients moved their applications to that server. Of course, if the application included Web Service, Web Pages and Windows Client, ALL code had to be converted to .net 2.0 before it was deployed.

Migrating to Microsoft .net 3.0 is MUCH simpler, because the ASPX server is still a ASP.net 2.0 Server. Of course, our ISP seems to be taking a 'measured' approach. But does that stop us from playing with .net 3.0 and wanting to show our endeavors? Of course not.

Do you get annoyed when images are not clear on web pages because of rescaling? The really cool facet of .net 3.0 is Managed Code directly accessing un-managed code, namely DirectX. Use XAML - a new, mark-up language to build user interfaces with.net 3.0 libraries. Images can be displayed with amazing clarity.

Using Microsoft Expression Design, we created a simple WPF/E image control that displays thumbnails and allows the user to select an image that scales. Look at the clarity of this image. So how did this code reach the web?
1. Post code to ISP. Problem - XAML file type not recognized and hence the control did not display at all.
2. Change XAML file type to XML file type - control now displays!
3. Login to ISP technical page and chat with support staff. Ask them to add the XAML file type to the web server (use same characteristics as XML file type).
4. WPF/E control now displays in a web page from our ISP.
5. Go to 'virgin' PC (one that hasn't used .net 3.0). Open web page with WPF/E control. Because this control is a WPF/E control, the page displays a note that the WPF/E plugin needs to be downloaded. Click to download.
6. View fantastic WPF/E image selector control with great image clarity.

Labels: ASP.net, SilverLight

Lately we have looking at creating a better forms environment for our work with workflows and SharePoint. XML forms look interesting, but have a number of drawbacks. Recently we have been evaluating WPF/E for use as a Forms package base.

Here are some controls that we have created as part of a science project. The code is very crude, doesn't cover all the conditions, but you get the idea of how it can be done.

Short list of WPF/E (SilverLight) example controls.
ListBox - enhanced using a card shuffle style list. Shows some of the power WPF/E. Mouse over the thumbnails on the left to view animation.
ComboBox - Hard coded number of list items.
TextBox - Javascript code for this control only covers some of the conditions. Required is the ability to cut, paste, highlight and drag. In addition the cursor positioning (which is absolute and relative to the root canvas) needs to take into the account the scaling used, which could be difficult if this control is embedded in other controls each its own scaling factor.

The above controls are stand alone. For production they would need some sort of framework to work within (there are some examples at the Microsoft blog site).

Our conclusion (see foil) is to work with WPF/XBAP sacrificing some universality for speed of implementation. In the meantime we will continue look at putting together some controls and a framework as a continuation of this science project.

Labels: SilverLight, WPF/E

ASP.Net C# C# Coding GuideLines Jetfire Regular Expressions SharePoint Silver Light Visual Studio Web Parts Workflow WPF WPF/E