Codeplex Projects Everyone Should Know About

(a guest post by Ryan Davidson and chapter 3 of Hacking Silverlight)

First of all, we should probably explain what Codeplex is. Codeplex.com is a collaborative website where individual contributors create, maintain, contribute, and share code samples for various Microsoft technologies. In this chapter, you will get a brief introduction to some of the open source tools that everyone should know about. These projects include design tools, development tools, libraries and toolkits, back-end and server-side technologies. They include samples of best practices by some of the most accomplished Silverlight users today. These projects showcase people hacking Silverlight in new and interesting ways.

It’s important to note that all of these projects are open source, created by people who have a desire to help the overall Silverlight community. If you find the projects useful, take some time to contribute, or better yet, start your own. Codeplex is waiting. First up, it’s infectious, it’s compelling, it’s the MVVM fever and it’s time for you to break out of your pedestrian design patterns.

MVVM Light Toolkit…

“MVVM is so hot right now!” Pardon the Zoolander reference, but it does seem appropriate as an introduction to MVVM due to the incredible popularity and overall buzz around the Model-View-ViewModel design pattern within the Silverlight community.

So what is MVVM? We could easily, and others already have, dedicate an entire book to answering this question, so I’ll just skim over the details and say that MVVM is a architectural pattern that helps developers create applications that are cleaner, easier to maintain and extend, and also highly testable. It’s a variation on the Model-View-Controller pattern that takes advantage of the rich data binding capabilities of Silverlight. The ultimate goal of MVVM is creating a development workflow with true separation between the user experience layer (View) and the programming or business logic layer (ViewModel). Or more simply, you can work on and test either the front end user experience or the back end logic without having to worry about what the other half is doing.

MVVM is just a pattern, all the toolkits (including MVVM Light), classes, and frameworks are just helpers to expedite your implementation of the MVVM pattern. The power of MVVM is really in the rich data binding. Let’s take a moment to look at the data binding syntax in XAML and the C# code behind with a basic TextBlock control.

<textblock text="{Binding Welcome}">

public class MainViewModel : ViewModelBase
{
public string Welcome
{
get{ return "Welcome to MVVM Light";}
}
public MainViewModel(){ }
}

What is happening is the TextBlock has a Dependency Property of a Text value. That value is bound to public Welcome property inside the MainViewModel class. This value of Welcome is determined at runtime. What this gives us is a way to determine the value of a property based on multiple inputs including, user defined preferences, resources, styles, or data binding. The beauty of data binding is that if a property changes in either the ViewModel or the View the data remains bound to the Dependency Property and will update both visibly in the View and in ViewModel data objects accordingly.

How does this binding work? There is a lot of magic that Microsoft has set up and tested for us already. All you really need to know is that you need to set up the Welcome property to use the INotifyPropertyChanged event. Then whenever the property changes it raises the property changed event to all objects bound to that property. Those objects can be set up to handle the event and update properties accordingly.

How do you bring the View and the ViewModel together? First you’re going to create a new XAML prefix in your App.xaml:

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:vm="clr-namespace:MvvmLight2.ViewModel"

Then set up your MainViewModel as a data source within your Silverlight Application.

<application.resources>
<?xml:namespace prefix = vm />
<vm:mainviewmodel key="MainViewModel" isdatasource="True">
</vm:mainviewmodel>
</application.resources>

Then in your MainPage.xaml you can set the DataContext of your UserControl to your View Model.

<?xml:namespace prefix= [default] http://schemas.microsoft.com/winfx/2006/xaml/presentation NS = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" />
>usercontrol class="MvvmLight2.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" datacontext="{Binding Main, Source={StaticResource Locator}}">
</usercontrol>

Now all the child elements of your UserControl inherit the data context of your ViewModel and can be bound do any data exposed in the ViewModel using the Binding syntax we mentioned earlier.

Another very useful benefit of MVVM is Blendability. Blendability is the ability to consume and design against your ViewModel data within Expression Blend and Visual Studio 2010 visual designer. You can use the ViewModel data to design against which can greatly inform your user experience design. The beauty of an MVVM application is that you can see your data inside Blend.

The MVVM Light Toolkit was created and is lovingly cared for by Laurent Bugnion with the ultimate goal of creating an approachable version of MVVM. I say approachable because only the most essential components are included. Don’t call it, "dumb down", it’s just streamlined. All the power is there. The goal of the MVVM Light Toolkit is to "break the monotony" of writing all the standard code and allow you to build your whole application rapidly. Another benefit of the MVVM Light toolkit is that the code works the same in WPF and Silverlight (with a few small exceptions). Plus, since this works in Silverlight it means it will work on the Windows Phone 7 as well.

The installer on Codeplex is packaged as a MSI installer. Follow the installation instructions to set up the necessary elements. Once the install is complete you can create a new Silverlight project type called MVVM and the base MVVM components will be in place ready to use.

MVVM Light Toolkit Version 3 SP1 was release in March 2010 with some great new additions including templates for the Visual Studio 2010 and Blend 4 including a Windows Phone 7 template. There are two DLLs in the install; one is called Essentials which includes RelayCommand, ViewModelBase and others including Commands, RelayCommands, Messaging and much more, the other is called Extras which has more useful elements including; EventToCommand which is a behavior (we’ll learn more about behaviors later in this chapter). EventToCommand allows you to bind any event on any framework element to any command. This removes the annoying restriction of Silverlight and WPF that required you to only bind on a Button based element’s click event.

One final note on performance, MVVM Light Tooklit, as with all open source projects is constantly being optimized. The Databinding elements that MVVM relies on have been heavily optimized by Microsoft and should have little impact on your overall application performance. This is something to consider when thinking about using MVVM for your application.

To read full installation instructions, find additional resources, and of course, download the current source code visit the Codeplex project at http://mvvmlight.codeplex.com/.
Another critical Codeplex project for developing in is the Silverlight Toolkit.

Silverlight Toolkit

User interface made awesome!

When a new version of Silverlight is released it comes with a set of included elements including controls, templates, themes, samples, etc. The Silverlight Toolkit is an open source project sponsored by the Microsoft Silverlight product team where developers can contribute, enhance, and ultimately use the hottest new controls in Silverlight without having to wait for the next version of Silverlight to be released.

One of the most valuable aspects of the Silverlight Toolkit is the iterative development model. Controls are developed over time and constantly receive valuable feedback from the community. As controls are developed they fall into one of four Quality Bands: Mature/SDK, Stable, Preview, and Experimental. These controls can make creating otherwise tricky or cumbersome user interface elements a snap. The tools have been created in response to a need for a common set of user interface scenarios. Rather than hacking together a user control from scratch by yourself, this project puts the community to work for you.
In addition to helping to create great functionality with controls, you have to make things look good. You knew that right? Anyway, that leads me to another very powerful feature of the Silverlight Toolkit controls, themes. Themes are the visual styles that you can apply to any control. If your application has a certain look and feel, or you have some brand guidelines you have to follow, you can use one of the included themes or break it open and modify it to match. Once your theme is created you can save it as a resource and apply it to everything inside your Silverlight application with a few clicks in Blend. Yeah, it’s that powerful.

Getting started with the Silverlight Toolkit is easy. You download a single Windows Installer package, which does all the heavy lifting for you. It will install all the components on your system so you can get started right away using the new controls and themes in Blend or Visual Studio.

Open up a new project in Expression Blend 3 and under the Assets tab you’ll see a list of new Controls that you can use.



Figure 3.1A – Toolkit in Blend

You can learn more about Silverlight Toolkit and the controls included at
http://www.codeplex.com/Silverlight.

Now that you have your interface data bound and stylized, it’s time to explore how we can use those control elements to present content with the Silverlight Media Framework.

Silverlight Media Framework

Have media, we’ll serve! The Silverlight Media Framework (SMF) gives media producers all the tools they’ll need to serve up amazing quality content using Silverlight and IIS Smooth Streaming.

As bandwidth pipes open up and high speed internet connections proliferate more and more users expect the highest quality content delivered quickly wherever they are. In the past that was a Catch 22. You couldn’t deliver high quality content without your user having to wait for lengthy downloads or you could get your content quickly but at a lower quality. Those days are gone. With IIS Smooth Streaming the server knows how fast the connection is and scales the quality of your content accordingly. It’s such a simple idea but it has taken years to finally hit the main stream.

What SMF offers you is a complete set of tools to prepare, encode, and deliver your content anywhere using Silverlight. SMF is still in its infancy, but it already has some very high profile implementations including the 2010 Vancouver Winter Olympics. Smooth Streaming alone not enough to convince you to use Silverlight? Well, Smooth Streaming is just one of the multiple tools included in SMF. There are also DVR type controls, logging, with future releases planning to implement advertising, improved API, better plug-in support and improved accessibility. The future is bright, and in full HD.

The download has all of the necessary DLLs which you’ll need to include in your project solution as resources. In addition, you’ll need to download and install the IIS Smooth Streaming Player Development Kit for everything to work properly. Once you have things set up you can take your content and stream it to the world. You can learn more at http://smf.codeplex.com/.

Sometimes just serving up high quality video isn’t enough. Lets take a look at how the Silverlight Hyper Video Player is pushing video into the future.

Silverlight Hyper Video Player

"Can we do for video what hyperlinks did for text?" -- Jesse Liberty
That is the question that is driving the Silverlight Hyper Video Player (SLHVP) project. There is a lot of video available on the web these days. The subject of these videos can be simple entertainment like a dog riding a skateboard or complex like a college lecture on particle physics. Wouldn’t it be great if while you were watching these videos you could learn more about what you’re seeing just by clicking, like clicking a link on a webpage?

Let’s create a quick "for instance". Say you’re watching a TED Lecture and the speaker uses a term you’re not familiar with. With the Hyper Video Player you can click on a link that shows up at that moment in the video. The link takes you to a dictionary definition of that term. Let’s say you are really enjoying the video and don’t want to pause it to look up the term. You can bookmark the link so you can return to it later. These are just two very simple potential user experiences within the Silverlight HVP.

Silverlight has impressive video play back capabilities, but this project is really about taking video to the next level. It’s adding functionality that just hasn’t existed before, and that is what Hacking Silverlight is all about. The theory behind this project is that a video can and should be ‘clickable’ like a web page. It’s just information after all. You should be able to link related content to any moment of any video to create a richer, more engaging experience for your users.

One of the best parts of the Silverlight HVP project is the training materials being developed to teach about Silverlight HVP are using Silverlight HVP to deliver it. Nothing speaks better about a technology than using it to promote itself.

So how does one go about creating content for the Silverlight HVP? First of all, you will need some video. You’ll need to set up meta data and key frames that correspond to information inside the video. Then it’s time to let the project come to life. When you play back your media you’ll notice call-outs, links, and summaries all appearing as the video plays. It’s the ultimate in enriched user experience and the potential for this technology is amazing.

Getting started is easy. Version 1 of the SLHVP project was released in March 2010. The download is a project solution with full source code. Open the project and you’re off. Visit http://silverlighthvp.codeplex.com/ to download source code and start watching some Silverlight HVP enabled mini-tutorials.

Let move away from video in Silverlight and take a look the next frontier, Silverlight games.

Farseer Physics and Physics Helper

Want to make a game? Want to use physics in that game? Enter Farseer Physics and Physics Helper, the ultimate in Silverlight physics. In the real world, just like in programming, objects have properties. Properties like mass, inertia, velocity, etc. When objects interact in the real world these properties affect each other, and what Farseer does is give you these "real world" properties inside Silverlight.

Sometimes all you want to do is have two balls bounce around the screen. Well instead of having to figure out all the complex calculations between object properties, you can plug in Farseer Physics and you’re off. Farseer physics does have one limitation, it only supports 2D. Once you use it, however, you won’t mind that it’s only 2D, trust me!
So let’s talk about Physics Helper for a moment. Physics Helper takes the Farseer Physics engine and packages the most common physics computations into Behaviors. I’ll talk more about behaviors in the Expression Blend section below. Just know that the Physics Helper is a huge time saver when building any game that requires physics. You can learn more about Physics Helper at http://physicshelper.codeplex.com/.

To apply the physics to your application you will need to set up a PhysicsControllerMain. This will let Farseer know where your "world" is. Once your "world" is created, you can add properties to it like gravity and special collisions. The best part of Physics Helper is that the all the complex math is taking place behind the scenes and you don’t have to worry about it.

PhysicsControllerMain _physicsController = LayoutRoot.GetValue(PhysicsControllerMain.PhysicsControllerProperty) as PhysicsControllerMain;

_physicsController.Simulator.Gravity = new Vector2(0, 500);

_physicsController.Collision += new PhysicsControllerMain.CollisionHandler(_physicsController_Collision);

Finally, all you have to do is register some XAML or other UI elements using the PhysicsObject. This includes them in the "world" and applies all the properties you’ve set up in your world to them.

Ellipse ball = _physicsController.PhysicsObjects["ball"].uiElement as Ellipse;

Starting to use Farseer is really easy. Many of the available downloads include simple samples. The beauty part is simple samples of physics can scale to any size project. The object forces are the same. Go to a http://www.codeplex.com/FarseerPhysics and start playing with the samples. It won’t take long before you’re building entire virtual worlds that look and function like the real world. Neo and Morpheus will be so proud!

Balder 3d

Silverlight is a very powerful platform for all sorts of content presentation experiences including games. However, Silverlight does not offer rich 3D capabilities out of the box. Integrating or creating your own 3D engine can be a serious undertaking and thankfully the Balder 3D project is breaking through 2D barriers to implement true 3D in Silverlight.
Balder was created by Einar Ingebrigtsen and is described as a "Managed Game Engine with both 2D and 3D support targeting Silverlight, XNA and OpenGL." That’s right you don’t need to use Silverlight, but currently it’s a great platform to develop games in.
You can use Balder in two ways. One, you can download the DLLs, include them in your project solution as resources and get started leveraging Balder’s core feature set right away. Two, you can download the Balder source files and get your hands dirty exploring the guts of a complete managed game engine.

Implementing the Balder engine in Silverlight is very simple. Once you have all your resources you just need to add the Execution namespace illustrated below and you Execution:Game object has the core features ready to hook up in your code behind. Inside the Execution:Game object you can add your 3D meshes, light sources, and a camera for true 3D effects.

<usercontrol class="Balder.Silverlight.SampleBrowser.Samples.Events.Mouse.Content" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" x="http://schemas.microsoft.com/winfx/2006/xaml" execution="clr-namespace:Balder.Core.Execution;assembly=Balder.Core">
<grid name="LayoutRoot">
<execution:game width="800" height="600">
</grid>
</usercontrol></execution:game>

Once you’ve downloaded the DLLs you can include them as resources in your project. You can add Physics to your 2D and 3D models easily with the Farseer Physics engine which I will talk more about in the next section. Head to http://balder.codeplex.com/ to get the latest source code and see some samples in action.

The projects we’ve highlighted so far have talked about how to create rich data binding, stylized controls, rich media delivery and an outstanding game environment. Now we’re going to talk about a project that will make creating all of these easier, Behaviors!

Expression Blend – Behaviors Library

Have you ever had to develop an interface? Expression Blend is your friend. It’s a huge time saver when creating visuals for Silverlight, plus it has some incredible features to help you develop Silverlight applications faster. Besides the graphics capabilities, Blend offers a rich XAML editing view, a unique Storyboard driven animation layout, and many more features. What we’re really interested in here are the features you probably haven’t heard of. Let’s start with behaviors.

Behaviors save time, which, be honest, you don’t have enough of. This Codeplex project will introduce you to some of the most useful behaviors already included and ready to use in Expression Blend. That’s right! You just need a default install of Expression Blend to take advantage of behaviors.

If you’re one of those "afraid of code" types, Blend has your back and behaviors are your best friend. You can think of behaviors as drag and drop code. You can work in a design view and add functionality to your elements just like dragging a file from one folder to another. You want this button to start a video? Use a behavior. You want this little ball you created to bounce around the screen? Use a behavior. It’s so simple it’s scary, like some magic voodoo hamster is inside your computer making everything just work.

Do you have a specific visual effect that you’re trying to re-create and you can’t find it within Blend? Take a look at the Effects library, also part of the Codeplex project. There are lots of visual effects you can use such as motion blur, bloom, gray-scale, and more are being added all the time.

Now, conversely, let’s say you’re one of those "I need to code everything myself" types. Behaviors still give you plenty to get your hands dirty. You can build customized behaviors in Visual Studio. You can also use the Effects library as a template for creating your own custom Effects with Pixel Shaders.

The installer package available on Codeplex will put all new elements directly into your Blend Library and they will be available to use the next time you start up Blend. Now go play! http://expressionblend.codeplex.com/.

Earlier we talked about Silverlight 3d but if you’re really hard core and maybe doing a bit of XNA on the side then this might be your thing…

Silver Sprite

Speaking of play; let’s talk games! How would you like to build once, play everywhere? Silver Sprite gives XNA developers a tool set that allows them to publish their games on the web using Silverlight without making code changes to their game. This is the essence of Hacking Silverlight. With Silver Sprite you can take your code base and run it using Silverlight without having to change virtually any code. XNA is the language that Xbox and Zune games are developed in.

Getting your game prepared to run in Silverlight takes essentially only two lines of code. Create a new Silverlight project. Then add all your game resources into that project. In the Main XAML page add a game namespace which references your project and a game class object to a canvas. That’s it.

xmlns:game="clr-namespace:MyGame

<canvas>
<?xml:namespace prefix = game /><game:game1 name="game"></game:game1>
</canvas>

Believe me, being able to port games from platform to platform that easily without making code changes is the holy grail of development hacks. Every developer, including you, would much rather write code once, and be able to deploy it everywhere. It saves time, money and sanity.

Silver Sprite 3.0 is still in alpha at the time of publication, but it already gives you some great features to port your game to Silverlight. You can easily import and leverage your graphics, fonts, and other game resources simply by adding them to the Silverlight project. Silver Sprite does all the tricky work for you.

Visit the Codeplex project at http://silversprite.codeplex.com/ to download the DLLs and find examples of Silver Sprite in action.

Summary

The projects in this chapter are all great examples of making Silverlight work for you. In the truest sense, they are all Hacking Silverlight. The best thing about these projects, and Codeplex for that matter, is that everything you’ll find is open source. The best thing about open source is that there are new projects starting up constantly. These are just a few of the projects that we find useful and we think will inspire you to push Silverlight to the next level. Your next challenge is to take some time and do a Bing search, visit Silverlight community sites and blogs, and of course visit Codeplex.com. There is likely to be some impressive new projects popping up every day. Happy Hacking.

HackingSilverlight Code Browser

So sometime ago I had been working on a sample browser for all the different samples I had used for hackingsilverlight and for blog posts. After awhile with all the jumping around between projects, and my failing memory I found I needed a quick easy way to remember all the code clips I used often. For me I needed something like a rola-deck for code so after taking my toys and leaving the sandbox as it were regarding the book HackingSilverlight between projects for the 5 minutes here or there I've been working on a tool that I'm using in place of the older sample browser. And so the HackingSilverlight Code Browser was born. Its still a work in progress and really its all about me and my workflow but on the off chance it might help some one here it is:

http://www.hackingsilverlight.net/HackingSilverlightCodeBrowser.html

of course if you go to just hackingsilveright.net there is a click here to install button that will install the oob version but from this link you can also just right click and select install. Remember this tool is not designed to teach anything or example things to anyone, its purpose is to quick recall code that I know how to use already and make it easier to remember. So remember this isn't silverlight 101 , its more like silverlight 400 :) In any case when you first load the app there is a number of key elements. First on the left is a tag cloud where the tags related to blocks of code that have been 'tagged'. in the center is everything matching the search result and then in the far right is the search box. there is no search button as it updates dynamically as you type. I did put a reset and help link below this but really just start typing.

in the bottom corner you'll notice a version number, a contributor link and a add to library link so if I run across a bit of code that I think is important I can send email to my self to remind me. Also back on the left at the top is a cover shot that links back to the site and if you are running an outdated version you will get a warning along the left side.

If you happen to select one of the results from the middle you get a code box viewer that does some simple formating of the code and lets you select the contents. also all the tags associated with that block are shown and they are clickable. Clicking tags will close the code viewer and do a search on that tag. There are two arrow buttons if you get board and want to scroll through blocks quickly plus there are the help and contributor dialogs.

The help dialog is much like this post just giving a basic discriptions of functionality and then the contributor dialog is is a list of everyone that has helped, inspired or contributed in some way.

And thats pretty much it. oh and one more thing. only constructive feedback is of any use or more importantly if you have cool snippets to add... please feel free to contact me about it. And the code base I'll use to replace the existing HSL codeplex project...

Building a Dial Control

A friend posed a question a few weeks back about implementing a dial control. I found a few but they seemed problematic so I decided it can't possibly be that hard. So the idea is a control with a custom event for dial position change that I can add templates etc to change the look and feel of the control to any kind of dial I want and bind an event handler to so that in can control say volumn. I posted how to implement a custom event last week so I'll focus specifically on the rest of the dial control. Lets start with the template in Generic.xaml.

<Style TargetType="DialTest:Dial">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="DialTest:Dial">
<Grid x:Name="Knob" Background="Transparent" >
<ContentPresenter x:Name="Background" Content="{TemplateBinding KnobBackground}"/>
<ContentPresenter x:Name="DialKnob" Content="{TemplateBinding KnobFace}" RenderTransformOrigin="0.5,0.5" >
<ContentPresenter.RenderTransform>
<TransformGroup>
<RotateTransform x:Name="DialAngle" Angle="0" />
</TransformGroup>
</ContentPresenter.RenderTransform>
</ContentPresenter>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

So from this template we can see that the control will have a wrapper grid to force content to be resized as set and two content presenters one for the background and one for the dial and further a rotate transform on the dial so we can make it turn. As noted these content presenters imply that we have two dependency properties for the dial face and background but we will also have DP's for setting the start or minimum or max angle setting of the dial (0 to 360 degrees).

In our constructor then we set our template and then OnApplyTemplate() we wire things together like so:

Knob = ((Grid)GetTemplateChild("Knob"));
DialAngle = ((RotateTransform)GetTemplateChild("DialAngle"));

Knob.MouseLeftButtonUp += new MouseButtonEventHandler(Knob_MouseLeftButtonUp);
Knob.MouseLeave += new MouseEventHandler(Knob_MouseLeave);
Knob.MouseLeftButtonDown += new MouseButtonEventHandler(Knob_MouseLeftButtonDown);
Knob.MouseMove += new MouseEventHandler(Knob_MouseMove);

base.OnApplyTemplate();

if (Minimum > 0 && Minimum < 360)
{
SetPosition(Minimum);
}

this wires our internal events we use to make the wiring work. What we are doing todo is on mouse down we will calculate the angle of that related to the control and then turn the dial to that position. we then fire off the angle changed event or custom event. The hard part turned out to the just figuring out the math and it turns out that this not the best method 'mathmatically' speaking but this works well. Once get a point from the mouse down we do this to get the relative angle:

double TheDiameter = Knob.ActualWidth;
double CurrentHeight = Knob.ActualHeight;

double Radius = TheDiameter / 2;

double AngleOfRotation = AngleOfRotationQuadrant(TheDiameter, CurrentHeight, NewPoint);

//int DialQuadrant = 1;
if ((NewPoint.X > Radius) && (NewPoint.Y <= Radius))
{
//DialQuadrant = 2;
AngleOfRotation = 90.0 + (90.0 - AngleOfRotation);
}
else if ((NewPoint.X > Radius) && (NewPoint.Y > Radius))
{
//DialQuadrant = 4;
AngleOfRotation = 180.0 + AngleOfRotation;
}
else if ((NewPoint.X < Radius) && (NewPoint.Y > Radius))
{
//DialQuadrant = 3;
AngleOfRotation = 270.0 + (90.0 - AngleOfRotation);
}
return AngleOfRotation;

Basically we calculate 90 degress of position for he dial face quadrant that the event was in and then add the relative additional quadrants as needed to get the correct angle. getting the quadrant goes like this:

double DialRadius = CurrentWidth / 2;

Point CenterPoint = new Point(DialRadius, CurrentHeight / 2);
Point StartPoint = new Point(0, CurrentHeight / 2);

double TriangleTop = Math.Sqrt(ToThePowerOfTwo(NewPoint.X - CenterPoint.X) + ToThePowerOfTwo(CenterPoint.Y - NewPoint.Y));

double TriangleHeight = (NewPoint.Y > CenterPoint.Y) ? NewPoint.Y - CenterPoint.Y : CenterPoint.Y - NewPoint.Y;

return ((TriangleHeight * Math.Sin(90.0)) / TriangleTop) * 100;

now we can set the angle in 'SetPosition(); like this:
if (Minimum > 0 && Max > 0 && Minimum < 360 && Max <= 360 )
{
if (AngleOfRotation < Minimum)
{
AngleOfRotation = Minimum;
}
if (AngleOfRotation > Max)
{
AngleOfRotation = Max;
}
}

DialAngle.Angle = AngleOfRotation;

OnPositionChanged(new DialEventArgs(AngleOfRotation));

the last line being our custom event. and poof it works... So in xaml using the control might look like this:

<cc:Dial x:Name="NewKnobControl" Height="100" Width="100" PositionChangedEvent="NewKnobControl_PositionChangedEvent" Minimum="45.0" Max="135" >
<cc:Dial.KnobFace>
<Grid >
<Ellipse Fill="Aquamarine" />
<Rectangle x:Name="Indicator" Height="10" Width="49" Fill="Blue" Margin="1,45,50,45" />
</Grid>
</cc:Dial.KnobFace>
</cc:Dial>

nice and simple, needs some design love but you get the point. The dial control code will be up on HackingSilverlight.codeplex.com some time this week.

Custom Control Development: Simple code guidelines

Jeff Wilcox did a great post on custom control conventions that is cool, if for nothing else that I feel vindicated with regard to the use of regions. Some time ago I got into a heated discussion on this topic and I feel as much as it is esoteric regions help break things down into logical understandable chunks. The rest of the article is great too as to best practices which seem to be still evolving around Silverlight

http://www.jeff.wilcox.name/2009/08/custom-controls-simple-code-guidelines/

Custom Events on Silverlight Controls

So this weekend my project of choice was to build a dial control. I'll post more on that later. But one cool thing I ended up doing was building a custom event on the dial control called OnPosition Changed. Typically when you use or build controls the events you use are more straight forward but this case, we have a dial so the 'mouseover' or click isn't really want you want. So what we want is when the dial moves to a position we want the 'position changed' event called.

To start with you need some custom event args as we want to pass the 'angle' of the dial to the event handler in the consuming application. So the custom event args looks like this:

public class DialEventArgs : EventArgs
{
private double angle;

public DialEventArgs(double _Angle)
{
this.angle = _Angle;
}

public double Angle
{
get
{
return angle;
}
}
}

In this case its a pretty straight forward class that drives from eventargs and we add a constructor that lets us set the angle property easily. Next we need in our control class to define the event like this:

public delegate void PositionChangeHandler (Object Sender, DialEventArgs e);

public event PositionChangeHandler PositionChangedEvent;

protected virtual void OnPositionChanged(DialEventArgs e)
{
PositionChangedEvent(this, e);
}

With this in place a consuming xaml page if they use the control will be able to set an event handler for this event. But first we need to actually call the event when the angle of the dial changes: In the method that sets the angle we have this code:


OnPositionChanged(new DialEventArgs(AngleOfRotation));

Now when you have an event handler set in xaml you get the event called at the correct time. In xaml this might look like this:

<cc:Dial x:Name="NewKnobControl" Height="100" Width="100" PositionChangedEvent="NewKnobControl_PositionChangedEvent" Minimum="45.0" Max="135" >
<cc:Dial.KnobFace>
<Grid >
<Ellipse Fill="Aquamarine" />
<Rectangle x:Name="Indicator" Height="10" Width="49" Fill="Blue" Margin="1,45,50,45" />
</Grid>
</cc:Dial.KnobFace>
</cc:Dial>

Now in the client code you need an event handler and in this case in my demo app it looks like this:

private void NewKnobControl_PositionChangedEvent(Object sender, DialEventArgs e)
{
// applicable values
double Angle = e.Angle;
}

DevTeach Conference Content - Best Practices, Hacking Silverlight, Controls

Last week I traveled to Montreal Canada for DevTeach 08. It was a great conference. not as big as MIX but alot more 'cozy' with great content and lots of cool people. I had the chance to hang out with lots of poeple that were smarter then me such as Dave Cambell and a few guys from INETA and Microsoft. The trip there was a bit of a 'challenge'. Granted my flight out of seattle was delayed once but coming out of Chicago... I swear I heard every single excuse in the book including the airplane didn't have enough air and we had to wait to take off until we could get enough air...

enough air???

Anyway ignoring that little episode it was great. Here are the links to session material and content (mosting slide decks and sample code and some talk track notes I used to memorize content)

http://www.hackingsilverlight.net/samples/SLV421.SLArchitecture.zip
http://www.hackingsilverlight.net/samples/SLV467.SilverlightControls.zip
http://www.hackingsilverlight.net/samples/SLV469.HackingSilverlight.zip

Seattle Code Camp

In a couple weeks there is the Seattle Code Camp in Redmond that I'll be presenting the first versions of the sessions I'm doing at devteach. Early Sunday is the best day for code camp of course as I'm presenting 3 sessions straight with lunch in the middle.

https://seattle.codecamp.us/sessions.aspx#HACKING+SILVERLIGHT+2+

Come check it out and help me get ready for DevTeach.

Silverlight 2 RTM Controls Leaked...

hmm... oops some one leaked some controls. of course some of these like wrappanel already have pretty awesome version available online that other poeple wrote from scatch like 'Animating Wrap Panel' etc but its good 'publicly' know the RTM bits will be pretty complete. Here is the list:


DockPanel
WrapPanel
ViewBox
Label
HeaderedContentControl
Expander
TreeView
NumericUpDown
AutoComplete
Accordion

and of course the leak:

http://visualstudiomagazine.com/columns/article.aspx?editorialsid=2789

and a discusion on topic

http://silverlight.net/forums/p/27906/93454.aspx

Silverlight 2 Custom Cursors

Check out Josh's post on Custom Cursors in Silverlight. nice and simple

http://blog.dobaginski.com/josh/?p=38

Dev Teach 2008 Toronto Canada

I'm doing at least 3 sessions at DevTeach Dec 1-5th in Toronto Canada so far the 3 sessions I'm doing are:

Building Silverlight Controls
David J Kelley - SLV467
Designed primarily for Developers. This technical presentation walks through a number of senerios for building Silverlight Controls including user controls and custom panels. The usage of properties, dependency properties, events, reusability, and encapsulated control architecture is reviewed in detail. In the presentation we will build a custom chart control based on a user control and built custom panels and review dispatch timer and multi threading in the context of controls.

Hacking Silverlight 2 - For Designers and Developers
David J Kelley - SLV469
Designed for Designers and Developers. This engaging presentation gets the audience involved in bridging the gap between design teams and software development using Silverlight and the Silverlight toolablity story. The presentation is full of audience participation and skits that get audience members up out of their seats and excited about Silverlight. The basics of team work using Microsoft tools for design and development are used and the audience is shown some of the coolest Silverlight hacks that can make Silverlight applications really shine. With the “Coming out of the closet” skit the audience is shown sexy UI using Silverlight, learning about speed of development and why we care about Sexy engaging Web 2.0 experiences.

SilverLight 2.0 Achitectural Best Practices
David J Kelley - SLV421
Designed Developers and Architects or people wanting to understand Silverlight archtecture. This presentation startings with a detailed technical review of Silverlight control, application architecture and design patterns. Design patterns as applied to Silverlight application development and general best practices are reviewed in detail. The presentation includes learning from the trenchs of building Silverlight apps on a large scale including horror stories and ‘Anti-Patterns’ or things ‘not to do’ are reviewed.

check out http://www.devteach.com/Session.aspx for more information

Control Library on Codeplex

I started a code plex project on code plex... dah... that has a Silverlight control library solution with items from the forth coming book. right now I only did unit tests for 7 of the controls namely multi panel and some of the other panels and then mouse wheel support and browser history control etc. Robby's animating panel base (notstatic.com) from Mike H's blog (blogs.msdn.com/mharsh/). download the dll free at:

http://www.codeplex.com/HackingSilverlight

Creating and Using Panels

If your familiar with WPF (Windows Presentation Foundation) from the programming point of view at all you must know what a panel. A panel in its simplest form is a container like a canvas that manages the layout of the children it contains. In Silverlight, we have a panel base class and a stack panel. The Stack Panel lay’s out its children either horizontally or vertically and can be seen in chapter 3. In WPF one of the more popular ‘Panels’ is a Wrap panel. Currently Silverlight doesn’t have one but using the base class Panel we can create one. This will give us a chance to look at the anatomy of Custom panel and how they work. Lets start by creating WrapPanel class as in this example:

public class LamePanel : Panel { }

From here we need to start by overriding two base members on the Panel class ‘Measure’ and ‘Arrange’. Measure is called so that the size of everything can be calculated before things are laid out and then Arrange is called to actually do the layout. Together the methods should look like this:

protected override Size MeasureOverride(Size availableSize) { }

protected override Size ArrangeOverride(Size FinalSize) { }

These won’t compile yet as we are not returning values so lets work out what each one does to create a Wrap Panel. Lets start with the first method that gets called namely ‘MeasureOverride’. Of the two this is the simplest one. Basically we need to go through each child in the panel and ‘Measure’ it so that we know the size for sure. In the following list we can see is loop through the children calling ‘Measure’ on each child to get it as large as possible with in the size allotted it.


for (int x = 0; x < this.Children.Count; x++)
{
this.Children[x].Measure(
new Size( double.PositiveInfinity, double.PositiveInfinity));
}

return new Size();

We need to return a size so we return a new size at the end. Now once we make sure we call Measure on all the children we can then write our ArrangeOverride method. In Arrange we want to layout all the children of our Panel and in this case we want to lay them out horizontally to the end of the line or width and then wrap the children down to the next line and so forth. The first step is to declare the variables we will use like this listing:

double Top = 0;
double Left = 0;
double Width = 0;
double Height = 0;
double NextTop = 0;

All of these values are used to track the current values used to layout children elements. Next we need to run thorugh each child and do the lay out. Start that process by adding a loop like this example:

foreach (UIElement element in this.Children) { }

From here we need to start be checking each childs desired height and width. We can do that easily like this and set the Width and height values we will need:

Width = element.DesiredSize.Width;
Height = element.DesiredSize.Height;

This gives us a point to start with as we run through each child. Next we need to see if we are still on the same line and if not we need to change a few of the of the base values we are using to move us to the next line using this listing:

if ((Left + Width) > FinalSize.Width)
{
Left = 0;
Top = NextTop;
NextTop = 0;
}


At this point we have our basic values we need to layout the current child so we need to actually do that like this:

element.Arrange(new Rect(Left, Top, Width, Height));

Using the values we calculated we create a new Rectangle and pass this into the element Arrange member. Before being entirely complete with this method we do need to do a little bit more calculation. We need to get the next Left value and the next top value like this listing:

Left = Left + Width;
NextTop = Math.Max(NextTop, Top + Height);

Now we just need to return the Size value that we passed in and our panel is complete. Run it and you can see it wrap and stack the panel children that you add in xaml.

I could show you a few more panels but the key take away is how easy it is to creating layout panels like this.

Actually Using Multi Scale Images in Silverlight - DeepZoom and Mouse Wheel Support with only Silverlight Code...

Using Silver Dragon is pretty straight forward. We start with adding a multiScaleImage to our Xaml and then pointing it at our collection 'bin' file. Generally we would take the output from DeepZoom and then input it into our web project, that we are using to build out our Silverlight application. Then we point the source to the info.bin file. In the case of the collection we built in the last sections it will look something like this:

<MultiScaleImage x:Name="SilverdragonImage" Source="/collection/info.bin" Height="400" Width="400"/>

With just this, when we run our project the MultiScaleImage will animate the zoom of our collection up to the point of being constrained by either the height or width whichever occurs first. Using our collection we created in DeepZoom we then using a default empty solution with only the MultiScaleImage added we will get this figure on the screen.

At this point we can bind events to our MultiScaleImage. The mouse events are typical but we might want to use some of the additional events such as ImageOpenSucceeded, where we can fix up the UI as needed relevant to the image. Once everything is wired up our Xaml.

<MultiScaleImage x:Name="MyFirstMultiScaleImage" Height="400" Width="400"
MouseLeftButtonDown="MyFirstMultiScaleImage_MouseLeftButtonDown" MouseLeftButtonUp="MyFirstMultiScaleImage_MouseLeftButtonUp" MouseMove="MyFirstMultiScaleImage_MouseMove" MouseLeave="MyFirstMultiScaleImage_MouseLeave"
ImageOpenFailed="MyFirstMultiScaleImage_ImageOpenFailed"
ImageOpenSucceeded="MyFirstMultiScaleImage_ImageOpenSucceeded" />

This shows the key events on the MultiScaleImage element we might want to wire up but for zooming in and out we might want to consider using the scroll events, for the mouse wheel off of the window object to give the control rich functionality for users. This will require a bit of hacking in our object so we don't have to use JavaScript in our page. Then we will actually build our class such that it will all be Silverlight code, which by design doesn't support the mouse wheel events. This primarily has to do with the fact, that different browsers expose it differently where we can overcome this in using client side ECMA code, that will be generated in our Silverlight application. Let us start with the click related functionality. For some of the functionality we are going to do, we will need to include another 'using' reference at the top of our application source or C# user control page. The using needs to look like this:

using System.Windows.Browser;

This gives us access to the DOM bridge we will use. To build out all functionality we will use we will need to add some private members and flags for state tacking and references. The initial values we need include the following listing:

public string Source = "SilverDragon/source images/OutputSdi/collection/info.bin";
private bool _IsMouseDown = false;
private bool _IsDragging = false;
private Point _LastImagePoint = new Point(0, 0);
private bool _ErrorState = false;

The first one is used as our Source for MultiScaleImage, the next two are obvious flags for conditions in our application and a point object to show us what the last 'point' was, and the last one is if the class is in an error state and broken. This all need to be members of our user control, and you can tell that is the case by the use of the key word 'private' in front of the declaration. Next we need to make sure the constructor has what it needs to set up the application into the state we will need: The constructor should have the following code listing:

if (Source.IndexOf("http") < 0)
{
string URL = System.Windows.Browser.HtmlPage.Document.DocumentUri.AbsoluteUri;
Source = URL.Substring(0, URL.LastIndexOf('/')) + "/" + Source;
}

MyFirstMultiScaleImage.Source = new Uri(Source);
HtmlPage.RegisterScriptableObject("MySilverlightObject", this);

Here we will make sure the source has a hard URL and if not we will complete it assuming the relative path is relative to our execution location on the server via http. With this we can now look at the actual binding events we use.

void MyFirstMultiScaleImage_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
if (!_ErrorState)
{ MyFirstMultiScaleImage.CaptureMouse();
_IsMouseDown = true; _IsDragging = false;
_LastImagePoint = MyFirstMultiScaleImage.ElementToLogicalPoint(e.GetPosition(MyFirstMultiScaleImage));
}
}

Here we check to see if the application is in its error state and if not we can perform the event. First we capture the mouse in case we are going to do any panning and we test our event flags for mouse down and dragging. Then we get the last point and save it if we are panning and/or zooming in or out. Next let's do our Mouse up with this listing:

void MyFirstMultiScaleImage_MouseLeftButtonUp(object sender, MouseButtonEventArgs e){
if(_IsMouseDown && !_ErrorState)
{
if(!_IsDragging)
{
Point MyPoint = MyFirstMultiScaleImage.ElementToLogicalPoint(e.GetPosition(MyFirstMultiScaleImage));
double ThisFactor = (Keyboard.Modifiers == ModifierKeys.Alt) ? 0.5 : 2;
MyFirstMultiScaleImage.ZoomAboutLogicalPoint(ThisFactor, MyPoint.X, MyPoint.Y);
}
MyFirstMultiScaleImage.ReleaseMouseCapture();
}
_IsMouseDown = false;
}

In this case we can see we checked that the mouse down flag is set and the error state is not true. If those are correct we also check to see if we have been 'dragging,' and if so we grab the current zoom point, calculate a factor based on the alt key, then perform a zoom operation, release the mouse capture and set the mouse down flag to false. This method then deals with either what was the mouse down event or if there was the drag operation or scroll operation. Next we will actually do our mouse move event with this listing.

void MyFirstMultiScaleImage_MouseMove(object sender, MouseEventArgs e)
{
if (_IsMouseDown && !_ErrorState)
{
_IsDragging = true;

Point p = MyFirstMultiScaleImage.ElementToLogicalPoint(e.GetPosition(MyFirstMultiScaleImage));

Point delta = new Point(p.X - _LastImagePoint.X, p.Y - _LastImagePoint.Y);

MyFirstMultiScaleImage.ViewportOrigin = new Point(MyFirstMultiScaleImage.ViewportOrigin.X - delta.X, MyFirstMultiScaleImage.ViewportOrigin.Y - delta.Y);

}
}

Here we first test for the mouse down and error state flags. If they are correct we start our drag operation by setting the value to true. Next we then grab the current point and calculate the delta point, from the last point and then set the viewport origin on our MultScaleImage. Nice and simple right? Now lets add a few methods to help deal with error conditions. First the ImageOpenFailed event that fires if something goes wrong with the source using this listing:

private void MyFirstMultiScaleImage_ImageOpenFailed(object sender, ExceptionRoutedEventArgs e){ _ErrorState = true; }

All it needs to do is set the error state flag if there is a source failure, which will basically set the application into an error state. We could add more code here to do things like switch sources, or something else if we wanted to. Next on the off chance that we are in an error state and the image open succeeds then this method will set the application back into a good state with this listing of the Image Open Succeeded event:

private void MyFirstMultiScaleImage_ImageOpenSucceeded(object sender, RoutedEventArgs e){ _ErrorState = false; }

This sets our application back into a happy state where we can perform deep zoom operations, but next we need to deal with the mouse leave event so we don't leave our MultiScaleImage in a weird state. We do this by using the mouse leave event like this listing:

private void MyFirstMultiScaleImage_MouseLeave(object sender, MouseEventArgs e)
{
_IsDragging = false;
_IsMouseDown = false;
MyFirstMultiScaleImage.ReleaseMouseCapture();
}

Here we reset both; the dragging and mouse down flags and release the mouse capture if it is captured, so we can move on. This basically completes the functionality that Silverlight 2 supports, but we can build mouse wheel support with the following section

HACK - Mouse Wheel Events in SL and with the MultiScaleImage

The 'Mouse Wheel Events' are not really supported. This is in large part due to disparity between how the different browsers support getting this event into a plug in. That however being the case also makes it worth our while to look at the fact that the mouse wheel support inside the context of the scripting engine for browsers is fairly well built out such that we can build a client side solution that feeds into our Silverlight application. However this approach feels like to much of a hack, and we can build out this same hack and make it all in our Silverlight. This still however is a hack, but it really is a lot more pleasant when the Silverlight class can wire all this on its won without us having to build out anything special in our web page (html, asp or whatever). Remember we already added the using statement so we could use the DOM bridge? Now let us start by adding a couple more properties at the top of our class with this listing.

private static string _MOUSEWHEELHANDLER_JS = "function OnMouseWheel() { ($get('Xaml1')).content.MySilverlightObject.MouseWheel(window.event.clientX, window.event.clientY, window.event.wheelDelta); } ";

private static string _MOUSEWHEELEVENT_JS = "window.onmousewheel = document.onmousewheel = OnMouseWheel; if(window.addEventListener) { window.addEventListener('DOMMouseScroll', OnMouseWheel, false); }";

Gasp, I know many of you will note that these two values contain ECMA script. Since Silverlight supports what we need and scripting does, but we don't want to be writing everything in the client, this approach allows all to be built out in our Silverlight code and it makes the class more easily reused. Next we need to add a little private method that does our black magic here with this listing:

private void InsertECMAScript(string JavaScript)
{
HtmlElement Script = HtmlPage.Document.CreateElement("script");
Script.SetAttribute("type", "text/javascript");
Script.SetProperty("text", JavaScript);
HtmlPage.Document.DocumentElement.AppendChild(script);
}

I know this really might give some people heart burn, but it really makes our DeepZoom class more portable. In this case anything we pass into this element will get tacked onto the end of our web page HTML DOM and since it is script up front it gets executed. We use this function in our object constructor like this:

InsertECMAScript(_MOUSEWHEELHANDLER_JS);
InsertECMAScript(_MOUSEWHEELEVENT_JS);

Again, this is really giving some people heart burn, but I think it is cool and much less hassle. One thing to note though is we still didn't add our Mouse Wheel event in our code. Todo this we can add this event handler as in this listing:

[ScriptableMember]
public void MouseWheel(double x, double y, int delta)
{
if (!_ErrorState && !_IsDragging)
{
double ZoomMultiple = (delta < 0) ? 1 / 1.33 : 1.33;

Point p = MyFirstMultiScaleImage.ElementToLogicalPoint(new Point(x, y));

MyFirstMultiScaleImage.ZoomAboutLogicalPoint(ZoomMultiple, p.X, p.Y);
}
}

When we compile it and run it, we now get the click zoom in and out behavior. We can use the alt key when we zoom out on click, and the mouse wheel event is tied into our MultiScaleZoom and it is a reusable class.

Silverlight 2.0 - more to come

So this is just killing me. So much goodness in the super secret builds that I can't talk about that its just killing me... SOOOO just so you know as soon as it is public there will be LOTS and LOTS of stuff to post that I cant really talk about at all. In fact probably the first day I'll post probalby 50 things plus. Anyway now that 'that' is almost off my chest.

Vista Sidebar Gadgets, Silverlight and JSON

ok, so I've posted about JSON in sidebar gadgets before and using Silverlight... when it comes to JSON (in vista side bar gadgets) just say no. at least directly, there are soooo many issues with this that it is unbelievable not to mention I'm running on a 64bit box that shouldn't even run silverlight to begin with the issues are not even consistent across different variations of vista and silverlight... really this is killing me. I found that it is eaiser to just make xml calls which is what I normalled used todo before some one came up with this brillant JSON thing... not that it is a real protocol and all but it is slick, anyway don't use JSON directly in a side bar gadget especially with Silverlight.

That being said, there are a number of ways doing old fashioned xml posting to get what you need and you can just parse and do the old fashioned xml thing and if your extra Industrious or need to write out something and the JSON eval thing solves some problems for you (namely less work) then add some begin and end tags and a nice CDATA section and your good...

But if you find a pratical way todo this let me know (JSON, sidebar gadget, vista, silverlight...), I'd love to see a code sample.

Parsing XML in Silverlight 1.0 - Cross Browser

One problem we have seen and dealt with allot lately is parsing XML client side. My favorite solution I must admit is to just toss out XML and use JSON as it is so much more elegant. In the case of the ET Minisite we did as of late this turned out to solve a lot of our problems. But still what if I can't do JSON for whatever reason? if you only care about IE or even firefox that seems to be much less of a problem. But for a really cross browser experience I my solution is the XML document mini me. Granted this is a bit of hack (like much of JavaScript and Silverlight)... :) but it works well... IF your XML is pretty stable and IF there isn't to much XML weirdness like multipul nested levels and such but it works.

So the XML Mini me is a simple XML parseing engine written in Javascript. It only supports a limited subset of something like the real xml parser in .NET like XMLReader or even XMLDocument but it does so a few simple things including some simple xPath like behavior. I hestiate to say a subset of xpath as the mini me is so extremely limited. I also suspect that the silverlight team at some point will have a good XML parser built in to silverlight at some point but we will see. there is of course Silverlight 1.1 but if you can't do the .NET part it doesn't do much goo.

In Silverlight, you have the downloader object so its really reasonable get XML easily no matter what. So then using the XML mini me looks something like this:

var MyDom = new XMLDocument();
MyDom.LoadXML( SomeXML);

I tried to keep the syntax as famliar as possible. So now we have our XMLDOM called 'MyDom' and then to get data out we can do this:

var ArrayOfVAlues = MyDom.SelectNodes("//items");

In this case the mini me will return all the text values of all the items nodes in the dom in the form of an array. Underneath the covers the parser is just doing some 'string' manipulation but for small groups or data or simple RSS feeds or config files it seems to work well. large XML parseing would scary me preformance wise as would writing a more full featured parser that is entirely written in JavaScript.

Some things to note on the class is that it has an XML property like the XML parser we used to use in classic ASP but otherwise it only has two methods currently as those are the ones I need to get it working for my particular project. lets look at the XML it can deal with for starters, here is a sample:




http://www.hackingsilverlight.com


http://www.hackingsilverlight.com


http://www.hackingsilverlight.com


http://www.hackingsilverlight.com


http://www.hackingsilverlight.com




So in this sample using some simple xml our parse deals with it easily. In this case when we make a call to SelectNodes("//url") we will get an array of all the urls values with all the < ! [ CDATA stuff stripped off into an array. simple, easy and fast but easly breakable if you muck up the xml to much. So for the time being its a great stop gap and if JavaScript works then this works at it uses only intrinsic language features.

So the little XML mini me is great for simple stuff but when you really need to do real work with XML you really need a more robust solution that includes a real XML parser. Now that can prove problematic especially when it has to work in lots of browsers. To address this problem with my own work I wrote another class that wraps the cross browser functionality and wraps some key elements that I use. Typically I need things like all of properties of a given node in a list in the form of an array. Plus things like xPath and the like for Silverlight.

So the attached javascript class wraps the core functionality. It includes the HTTP request functionality and XML parsing with the other bits I 'might' need. Basically the class works like this:

var NewDOM = new XML();
NewDOM.Load("Sample.xml");

This code fires when the html page script code behind fires. When you call 'Load' and pass a url to an xml file it then depending on the browser it uses the appropriate HTTP request object to load the file and assign the onload event. On the XML files load the call back is called and the object does the appropriate processing. Once this does its thing we now can use it to parse our XML.

On the onload event for the page in my little test I make two calls to different methods. The same methods are supported on this class as the XML mini me but additional ones are included like 'SelectNodesAttributes'. Also I noticed in firefox by 'onload event gets called twice so I put a flag on it so it only fires once. So in this sample I call the two methods that return arrays but you can have direct access to the DOM and use xPath etc using NewDOM.XmlDocument.

Building a TextBox in Silverlight 1.0...

One of the problems I have seen a lot of is building full blown forms in Silverlight 1.0. For the most part, Silverlight apps have placed HTML over Silverlight. This certainly works, albeit not the ideal situation and Silverlight 1.1 promises to deliver us a real text box. However, in the mean time, I decided I needed a 'Silverlight 1.0' text box. So here is how I made one work.
In building a text block there are a number of key bits of functionality we need todo: making the control look like a text box, making the text box behave with focus like a text box (have a cursor) and getting key board events into the text box. If you can address these then things like wrap, overflow and size ratio's etc are pretty straight forward.

Actually making a control to look like a text box is not too hard. Basically we have a canvas with a nice boarder in XAML and you can make something that looks like a text box. In this case something like this:




Nice and simple. Now that it 'looks' like a text box we need to have a cursor when it gets focus... For the cursor you can do a number of other things but lets start with a little line rectangle. We set the size and starting position in our XAML and then make it invisable. In our code behind we wire up an event on the box so that on 'MouseLeftButtonDown' we get the event and set the 'textbox' into a focus state. Basically these means we set a flag, changed opacity and started an animation on the cursor to make it blink.

Now our text block looks like a text block when we click on it and the cursor shows up... Now we need to actually make it work. Todo this we can add a text block element and wire an additional event to the document object of the page to capture keyboard events. In our keyboard event handler we need to check the key codes against our look up table so we know what they mean and add the character to our text box. If we run our text block now we notice that this appears to work but the cursor doesn't move. So then we make our event handler move the cusor as well.

So in less then a few hundred lines of code we have a working text box. From here we now need to be able to deal with text overflow moving the cursor back and forth and sizes and ratios. When the control is wrapped nicely in a class and xaml file we can use it in our projects by just creating the class and passing in a destination or target and 'poof' instance text box. Almost like its built in.

Now to see if anyone is actually reading the blog... If any one is interested in the code let me know. :)

Ok Ok, so it seems some one actually does really read my blog. :) I feel much better so I'm going to post more on the text box.
Lets start by updating our xaml a bit.



now we have added the cursor and textblock we talked about earlier. In our code behind we have our event handler called:

TextBox_OnKeyPress and an initialization routine called InitTextBox. In the onload event we then call our iniatilizer and wire up the key press event handler. Now the trick here is that we are not wiring anything to 'silverlight' persay but in IE we wire it up to the document object like this:

function onload(sender, args)
{ InitTextBox(sender); document.onkeyup = TextBox_OnKeyPress; }

Ideally this all is wrapped in a consumable control which I'm will finish when I finish this cool char size algorythm so everything isn't hard coded but in the mean time this example uses a number of present values in the xaml and things like font size and base increment in the code. Also there is a GetWidth function with hard coded values that is used for moving the cursor on the text box surface.

So back to our function InitTextBox(sender). In the sample I did initially this function basically saves some references to different parts of the control such as the cursor and text box for manipulation and then it adds an event listener to the text box canvas. This function is around actually giving the control 'focus' effectiving. There are a few other things you might want todo that is not in the sample like code for getting the control out of focus etc. So our add event in the initializer looks like this:

TextBox.addEventListener("MouseLeftButtonDown",
function( sender, args )
{
IsTextBoxMouseCaptured = true;
TextBoxCursor.Opacity = "1";
CursorAnimation.begin();
} );

So when some one actually clicks on to the control we set our flocus flag to true and turn the cursor on by setting the opacity and turning on the blink animation.

Back to our key press event. This guy remember we wired up to the document object but we only want to get events when the control has focus. That means in the event handler we need to test for the flag and if true then we can do something. Here is a sample:

function TextBox_OnKeyPress()
{
if( IsTextBoxMouseCaptured )
{
var EventCode = Number(event.keyCode);
switch(EventCode)
{
case 48: SetCharacter( "0", ")", event.shiftKey );
break;
case 37:
TextBoxCursor["Canvas.Left"] = LastPosition();
break;
}

So in this case we see the flag test and then we grab our 'EventCode' from the keyboard and we use a case statement to determine what character this is and what todo. To make the example easier I removed all but two character examples. The first case we are dealing with the zero/close paren key. Note we call a function called SetCharacter and pass in three events. The SetCharacter function gets the current shown text, determines which charater we want based on shift condition adds the charater to the real text value we keep in a variable and then determines what text is to be shown places the text and calculates the cursor position based on another function called GetWidth which determines all the offsets from the base character size (this is the one that needs the cool algorythm so all the values are not hard coded...).

The last case is a move back button which calls the 'LastPosition' function and moves the cursor based on the character behind it. So that is basically all the key aspects of doing a text box in Silverlight 1.0.

}}