Bryant Likes

Now that there is a central place to host your Silverlight applications, creating a Community Server Module for Silverlight is a lot easier. I took my previous WPF/E CS Module and modified it to work with the Silverlight streaming service. If you want to add this to your blog follow these steps:

1) Download my CS Module source code and compile it. Follow the installation instructions in the readme.txt file.

2) Create an account on the Silverlight streaming service.

3) Read Tim Heuer's excellent post on how to create and upload your Silverlight application to the server.

4) Write a blog post and embed the <silverlight /> tag with your information.

The Silverlight app should show up in the blog post, but I know that the url that I output in the feeds will not be correct. I've only found how to preview my own applications when I'm logged in but I haven't found an easy way to send a link. I'm sure this is possible (if not, can we get it added?).

Here is a sample Silverlight 1.1 app for your viewing pleasure.

Well I've been downloading the VS Orcas for a few days and it still isn't done. I really wanted to try out the .NET support in Silverlight 1.1 and so I asked if this could be done with VS 2005 and Scott Louvau replied:

Well, in VS2005 you can create a class library which will build against the Silverlight runtime, but it's a little work.

1. Create a Class Library.
2. Remove all references from it.
3. Right-click on the Project and pick Properties.
4. On the Build tab, click Advanced and check 'Do not reference mscorlib.dll'
5. Manually add references to mscorlib, agclr, System, System.Core, System.Silverlight, and System.Xml.Core from the Silverlight install folder (\Program Files\Microsoft Silverlight\)

At this point your build outputs should be Silverlight consumable binaries. It looks like the equivalent command line call to csc.exe (the C# compiler) should include the references to the mentioned binaries and the /nostdlib option but may require others as well.

 -Scott

I tried it out and it work pretty well. If you're interested I've uploaded my project so that you can download it and try it out. You will need Silverlight 1.1 installed and VS studio 2005.

Download the sample code here

I've also posted the code to my server but I couldn't figure out how to setup IIS to allow DLL files to be downloaded. Maybe tomorrow.

I'm going through the process of updating my WPF/E Samples to Silverlight. Since it is a little more painful than the last update I thought I would walk you through the process so you don't have to figure the out.

1. Copy the Silverlight.js file to your web server in order to replace the aghost.js file. You can delete the aghost.js file (you could leave it and replace the contents with the contents from the Silverlight.js file, but eventually you'll probably want to have the same file name to make future upgrades easier).
2. Change the script reference from aghost.js to Silverlight.js:

   <script type="text/javascript" src="Silverlight.js"></script>

3. Now you need to call Sys.Silverlight.createObject() instead of new aghost(). The parameters have changed quite a bit so here is the new mappings:

   WPF/E:

   new agHost( "WpfeControlHost", // DIV tag id. "WpfeControl", // WPF/E control id. "400px", // Width of rectangular region of WPF/E control in pixels. "100px", // Height of rectangular region of WPF/E control in pixels. "#D6D6D6", // Background color of rectangular region of WPF/E control. null, // SourceElement property value. "HelloWorld.xaml", // Source property value. "false", // WindowlessMode property value. "30", // MaxFrameRate property value. 'myErrorHandler'); // OnError property value -- notice use of single quotes.

    

   Silverlight:

   Sys.Silverlight.createObject( "HelloWorld.xaml", // Source property value. WpfeControlHost, // DOM reference to hosting DIV tag. "WpfeControl", // Unique control id value. { // Control properties. width:'400', // Width of rectangular region of control in pixels. height:'100', // Height of rectangular region of control in pixels. inplaceInstallPrompt:false,// Determines whether to display in-place install prompt if invalid version detected. background:'#D6D6D6', // Background color of control. isWindowless:'false', // Determines whether to display control in Windowless mode. framerate:'30', // MaxFrameRate property value. version:'0.9' // Control version to use. }, { onError:'myErrorHandler', // OnError property value -- event handler function name. onLoad:null // OnLoad property value -- event handler function name. }, null); // Context value -- event handler function name.

   Notice a few things have changed besides just the order and the addition of some new parameters. First, there are no quotes around the ID of the hosting DIV tag. Second, you really only have five parameters to pass in. The forth and fifth parameters are javascript objects that have multiple properties.

4. Now the real fun begins. At this point you can run your page to see if you get any Silverlight errors. When I ran my rolling gear example I got this error message:

At least the error messages are much more descriptive now. :)

So for my gear example I just had to change the routed event from Canvas.OnLoad to Canvas.Loaded and it now works.

As I upgrade the rest of my examples I post any other tips/tricks I find here as well.

Update: Tip #1 - Search and replace your Xaml files to remove all instances of java script: in your event handlers (note: I added a space in the java script so that my blog filter wouldn't comment it out).

Update2: The MouseMove event has changed quite a bit. Instead of getting the x and y like this: args.GetValue("X") you now call: mouseEventArgs.getPosition(element).x. The documentation always passing in a null for the element parameter, so I'm not totally sure what it is used for.

Update3: If you were hosting your script that used to create the aghost object inside the div that would host the control, you need to move the script outside the div tag since the script references the div by the id and not by the string (and I guess it isn't part of the dom yet since we haven't hit the end tag). Let me know if you need an example.

Update4: The CreateFromXaml method is no longer on the Silverlight control object directly, but under the content object. So instead of wpfeControl.createFromXaml("...") you now need to call wpfeControl.content.createFromXaml("...").

Update5: I wish I found this article sooner: What's New in Silverlight (1.0 Beta and 1.1 Alpha)?

Update6: ActualWidth and ActualHeight now require the content object as well. So you need to change control.ActualHeight to control.content.actualHeight.

Update7: SetSource now requires a part parameter. If you're using it to load images you pass an empty string as the part.

Woot! My Hong Button example is now working in Silverlight.

Today at MIX the Silverlight.net community site was announced. Along with that announcement Microsoft has closed the old WPF/E forums:

These forums are retired.  To join the conversation about Silverlight, please go to the new Silverlight community home:

http://silverlight.net/forums/

Thanks!

---

http://blogs.msdn.com/joemorel

 

I'm hoping to get back into blogging about WPF/E Silverlight real soon by checking out alll the new features. I got behind on my forum posting and blogging due to our new family member, but now things are settling down so I should be back soon. :)

Go check out the new community site plus all the new features. There are so many things to try out I'm not sure where to start!

Wow, I just came across the DesignersLove.Net blog today via Rob's post about CHATBlender which is a very cool combination of WPF/E and MSN Messenger. So I subscribed to it and since then there have been two more great posts that are worth sharing.

The first is a short tutorial about how to use Blend to do WPF/E design work. This is probably one of the top requests over in the WPF/E forums that I didn't have a good answer for and now I do. I won't spoil the read by copying any of the post since there is lots of good stuff to read over there.

The second post highlights a new WPF/E game: Rock, Paper, Scissors done by Thannap. Pretty fun little WPF/E game, go give it a try. :)

The WPF/E community is definitely growing fast!

Donald Burnett has an interesting piece call Poor, maligned, and misunderstood by many: WPF/E which I found to be an interesting read. He brings up two myths about WPF/E that (1) it doesn't support databinding and (2) it doesn't have any input controls. I think I've personally contributed to dispelling the first myth here and here but I haven't spent much time on the second one. I've spent a lot of time thinking about it and I've written about it in the WPF/E forums but haven't done anything beyond that.

Then today I read Martin Grayson's updated tutorial on creating glassy buttons in WPF.

I thought the buttons looked pretty cool and so I set out to create them in WPF/E. I decided to code them up as a server control instead of just writing plain old xaml. You can view the end result of my work here:

 I wrote the code to create the server code once and now I just use an ASP.Net page to generate my Xaml. The ASPX page is very simple and looks like this:

<%@ Page Language="C#" CodeFile="Buttons.aspx.cs" Inherits="Buttons" %>
<%@ Register Assembly="Wpfe.Controls" Namespace="Wpfe.Controls" TagPrefix="cc1" %>
<Canvas xmlns='http://schemas.microsoft.com/client/2007'
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="800" Height="600">
<cc1:GlassButton ID="GlassButton1" MouseLeftButtonDown="javascript:click" Left="200" Top="200" Width="179" Height="34" Text="My First Button" runat="server"/>
<cc1:GlassButton ID="GlassButton2" MouseLeftButtonDown="javascript:click" Left="200" Top="300" Width="179" Height="34" Text="My Second Button" runat="server"/>
<cc1:GlassButton ID="GlassButton3" MouseLeftButtonDown="javascript:click" Left="200" Top="400" Width="179" Height="34" Text="My Third Button" runat="server"/>
<Canvas.Background>
<ImageBrush ImageSource="Aero_grass.jpg" />
</Canvas.Background>
</Canvas>

To create the button controls I simple followed Martin's tutorial using notepad and created the WPF/E xaml. Then I wrote a server control that output the Xaml and added properties to allow the output to be formatted the way I wanted. The link to the source is below if you're interested, but really this is just a proof of concept. I think there is so much more that could be done in this area and this is just scratching the surface.

What controls would you like to see? I'm thinking a basic button, textbox, dropdown, radio, and checkbox controls would be nice to have and probably not to difficult to create. I'm hoping to finish up Part 3 of my WPF/E data grids series using a WPF/E data grid server control. Anyone interested in starting a codeplex project?

Source Code Download

The source code for this article can be downloaded here. You can view a live sample of the grid in action here.

This article builds on Part 1 where we used ASP.Net AJAX to get a list of employees and then format then with Xaml to add them to our data grid. Please refer back to Part 1 for all the requirements to get this running since we will be using the same database and project.

A Slightly Different Approach

In Part 1 we used ASP.Net AJAX to get an array of employee objects which we then formatted as Xaml using a template after which we positioned each employee canvas on a simulated grid. This works pretty well, but I wanted to demonstrate a slightly different approach to getting the Xaml for each employee. In this article we will make use of the downloader object to download the Xaml for each employee and the formatting of the Xaml will be done on the server using XSLT.

The approach of using the downloader object is probably best suited for applications where there is a lot of Xaml or there is a lot of formatting that needs to be done to the xaml (like replacing values). In this case it might make a lot of sense to push this task down to the server instead of performing it on the client's machine. However, since this may require more data to be transferred over the wire it could potentially slow things down for clients with slower connection. So both approaches have benefits and drawbacks.

Step 1: Get the Employee IDs

Diving into the code, the first step will be getting the list of employees from the server. To do this we will make use of ASP.Net AJAX again. In the code I created another web service method called GetEmployeeIDs which simply returns an array of integers of all the employee IDs. We call this method using ASP.Net AJAX just as we called GetEmployees in the previous version. We will store this list in our javascript grid object and use it to pull the Xaml for each employee. Below is the call to get the Employee IDs:

EmployeeService.GetEmployeeIDs(delegate(this, this.loadEmployees));

The loadEmployees method of the grid object stores the list of IDs and then calls the startDownload method of the grid object.

Step 2: Download the Xaml

In order to allow the grid object to download the Xaml for each employee we need to create a HTTP handler to do the job. Instead of using a find/replace method of formatting the Xaml with the employee specific information I decided to take the XSLT route since the final result is XML. The first step, however, is to get the employee data in an XML format. To do this I created another method on the EmployeeData object that makes the following SQL Query and returns the result as a string:

select EmployeeID, LastName, FirstName, Title from Employees where EmployeeID = @empID for xml auto

By adding the for xml auto to the end of the statement we will get our results in XML format which will look like:

<Employees EmployeeID="1" LastName="Davolio" FirstName="Nancy" Title="Sales Rep" />

Now we can run this through our XSLT to create the output Xaml that we want. You can view the XSLT here.

Our HTTP handler just takes the XML and transforms it using our XSL and then write it to the output stream. You can view the resulting Xaml here.

*Note: you might notice that I create a new downloader object for each download. I started out using the same object each time but it kept crashing IE so I think there is some kind of bug. Creating a new object each time seemed to solve the problem.

Step 3: Add the Xaml to the Canvas

Once we've download the Xaml we just add it to the canvas and set the Canvas.Left and Canvas.Top properties to position it on the grid.

var empXaml = this.control.createFromXamlDownloader(sender);

empXaml["Canvas.Top"] = this.top;
empXaml["Canvas.Left"] = this.left;
this.canvas.children.add(empXaml);

The top and left properties are incremented each time using the incrementMargins method of the grid object. Next we either download the next employee or if we are done we hide the progress bar which I've added since the last example.

Next Steps

Just like last time I've left out quite a few things. Some of them I plan to implement in Part 3 which I'm working on now. But others, like mouse over effects and better images, are left for you to do. Have fun!

I didn't think it was possible, but smargroth (the creator of the WPF/E Vista example) has posted in the forums about how to simulate 3D objects in WPF/E. You can view his example here. The example isn't perfect, but he explains that it will be fixed once frustum clipping is added (I really miss frustum clipping (what IS frustum clipping???)).

He has even posted some example javascript which you can use to create your own 3D objects in WPF/E. He leaves the task of lighting and coloring to the reader, but gives a hint that you can accomplish it with an opacity mask. I think I need to go buy a book so I can learn about all this graphics stuff. Any suggestions?

Last week Chad posted his Matrix style text animation which I thought was very cool. I wanted to experiment a little with keyboard events and using Glyphs. The result is the Matrix Reloaded:

The example takes keyboard input without any html help and then displays what you type like Chad's example but uses a Matrix digital rain type of animation. It took me awhile to figure out how to make this type of animation work with the limitations of the current CTP. In order to get the effect each letter is a seperate Glyphs object with its own gradient brush with five gradient stops which are all animated. I was pretty impressed with the performance which doesn't seem to slow at all even when you have lots of animations all going at once.

However, I was pretty happy with the results. The source code is a little messy because I had several different pieces which it stiched together in the end to make the completed example. If you know of an easier way, let me know. :)

Update: Adam asked for the source code so here are the links for the XAML and the Javascript. I created the example using notepad so there is no Visual Studio solution for it.

The source code for this article can be downloaded here.

While there is no official Data Grid in Windows Presentation Foundation (WPF) you can still layout your data quite easily using the Grid Panel. In WPF/E (E for Everywhere) there is no Grid Panel and you must lay everything out using a Canvas where you must specify the absolute position of every item. WPF/E also has no method of data binding, so creating a data grid is not as simple as DataGrid.DataBind().

In this article I will demonstrate how to simulate both a grid layout and data binding in WPF/E. This will be the first article in the series and will only show the basics with later articles taking this approach even further. Before we get started you will need the following items:

• Northwind sample database - For this article you can host this in SQL Server 2005, SQL Server Express, or SQL Server 2000. However, future articles will make use of SQL Server 2005 features and the source code was coded against SQL Server 2005.
• WPF/E Feb CTP SDK - You will need the SDK and the aghost.js file from the SDK.
• ASP.Net AJAX 1.0 - I also reference the ASP.Net AJAX Futures CTP in the project, but for this article you only need the base 1.0 features.
• Enterprise Library for .NET Framework 2.0 - This makes our calls to SQL Server much simpler.

Setting Up The Database

The first step is to attach the database to the SQL Server. In SQL Server 2005 you need to open up the SQL Server Management Studio, right click Databases under your server, and select Attach. Browse the the MDF file that was extracted from the Northwind sample database installer. We will be using the Photo column of the Employees table for our images (yes, they are terrible images, but for a demo they will work). However, there are two problems with the data in the Photo column (1) it has a header that makes it so you can load it in .NET and (2) it is a GIF image which isn't supported by WPF/E. So to get around this issue I wrote a console application that strips off the first 78 bytes and then saves the image back as a JPEG (it is included in the source code). So you will need to run that application against your database to convert the images to the right format.

The process for doing this with SQL Express is probably a little different and I leave this as an exercise for the reader (of course you can just add your own images instead using the ones in the database).

The Website Project

Next we can turn our attention to the website project. The project is made up of the following items:

• Default.aspx - the only page in the site
• EmployeeService.asmx - the web service that we will be calling
• PhotoHandler.ashx - the IHTTPHandler that returns the images from the database
• Web.config - the configuration file for the website
• App_Code/Employee.cs - the Employee object
• App_Code/EmployeeData.cs - the Data Access Layer (DAL) for Employee data
• App_Code/EmployeeService.cs - the code behind for the web service
• scripts/aghost.js - The WPF/E aghost file from the Feb CTP (part of the SDK)
• scripts/grid.js - The javascript that we will use to build our grid
• xaml/grid.xaml - The xaml for our grid (not much there)

I'm not going to cover how the DAL works or what the photo http handler is doing since that is outside the scope of this article and they are fairly simple. We will start with taking a look at the Default.aspx page since that is where everything begins. There are three important things to look at in this page. First, you will notice that we reference both the aghost.js file and the grid.js file. Second, we have the ASP.Net AJAX script manager which we point to our EmployeeService web service url. This tells ASP.NET AJAX to build a javascript proxy for our webservice which we can call via javascript. This is how we will get our list of employees out of the database and into our WPF/E data grid. Third we have the script to create the WPF/E control which makes a call to the code in the aghost.js file. This will load up our grid.xaml which is what we will look at next.

Building the Data Grid

The base of our data grid is the grid.xaml file. If you open this file you will see that it is pretty much an empty canvas. The two important things for this file are the Loaded="javascript:loaded" and the x:Name="root". The Loaded event gets fired when the control has finished loading the canvas. This is important because this is what will trigger the building of the data grid. We give the canvas a name so that we can add the elements of our grid to it at run time.

The javascript loaded function is found in the grid.js file. This file is where the action happens. The loaded function is very basic in that it simply creates a new instance of the javascript grid object that is defined below it. I try to encapsulate all my javascript code in to objects since it helps keep the code neat and I find it smells better than a bunch of functions by themselves.

In the grid object's constructor we define three properties: the WPF/E control, the root canvas, and the item template. If you want to change how your data grid items look you can tweak the item template. After defining these items we make a call to EmployeeService.GetEmployees. This is the javascript proxy that was created for us by ASP.Net AJAX. It is an asynchronous call and we pass to it the method we want to be called when the service returns. In this case we want it to call the loadEmployees method of our grid object, but we really want it to call the method on the grid object that we are currently using. In order to do this we use the delegate object which I borrowed from the WPFEPad project (which BTW is a great project to dissect in order to learn about WPF/E and javascript).

When the call returns it calls our loadEmployees method where we will start the process of adding the employees to our data grid. At the top of the method are some variables which you can tweak to change the spacing and layout of our grid. Make sure the itemWidth is the same as the Width of the canvas in the template, otherwise things will overlap. The javascript proxy returns an array of Employee objects (as defined in the Employee.cs file) which we will loop through, apply to the template to create the Xaml for each Employee, and then add back to the canvas with the appropriate Canvas.Top and Canvas.Left settings. Note that we reference the ActualWidth of the control to determine how much space we have to place the employees.

After we have added the employee xaml to the canvas, we find the name TextBlock (as defined by our template) and center it using the ActualWidth of the TextBlock. This is how you center text in WPF/E since there is currently no alignment property for TextBlocks.

Finally we check to see where we are to see if we need to start a new row of employees. If you run the example you should get something that looks like the following in your browser:

So you now have a very simple data grid created using WPF/E and ASP.Net AJAX.

Next Steps

At this point the grid is very simple so there are quite a few enhancements that we could add. Here are a few of the ones that I have in mind:

• Paging and Sorting
• Click Events that allow you to see the Employee details
• Mouseover effects
• Handle resizes and full screen

Another thing to keep in mind is that we could build a lot of this using an ASP.Net page that generates the Xaml and only use the javascript code to line the items up. This is another approach which I will leave as an exercise for you. :)

Technorati Tags: WPF/E