Wednesday, December 30, 2009

Silverlight Hosting in WPF

Ok so we know this has been done. Yawn, and it can be done any number of ways from hacking it in a browser control but actually doing it in WPF without the browser control can be a huge pain. Here is a little trick that helps you do just that without all the jumping around.

Jeremiah, (this programmer extraordinaire with apparently WAY to much time on his hands) wrote this little codeplex project that is a 'WPF Panel' that hosts Silverlight.

pretty slick, if you dive into the code it is kind of complicated but to use it is straight forward enough. If you download the project and run it you can see it in his test application running a xap in Window1.xaml.

<slvp:SilverlightViewportElement BaseUrl=""
<DropShadowEffect BlurRadius="50" />
<RotateTransform Angle="10" />

you'll notice this is all the standard WPF fare but lets look at the properties on the main panel itself. First is our base url that tells the control the domain in which the xap or silverlight application lives. Next we have the 'Source' which points to our xap file. We then set a view port size as 'ViewportSize' and then the last one we will mention is 'RenderFps' which is the 'speed' that the Silverlight is 'rendered' into your panel. In effect your app now runs in the WPF app. Nice and clean as long as you don't look at the source for the panel which is more a work of art... :)

Self Editing XML File

This particular post is a rehash of one I didn't some years back. Basically it is a little technique I developed some 7 or 8 years ago to solve a simple database issue once but I wanted only one file to exist in this case the exe or sorts that was also the xml file. As this applies to Silverlight in the since that I can use this application technique to also be used as a shell for a Silverlight application without all the silly security barriers... > : )


But lets not focus on that... lets focus on the mechanics of what we are talking about. A long time ago in a galaxy far far away there was a company called Microsoft that as the center of the universe they released this cool little DHTML technology back before they changed the name to AJAX and it was still cool called an HTA or Hyper Text Application or 'HTml Application' which basically is an HTML file with the file extension of '.hta' instead of '.html' and when you have one of these locally and you click on it, it then renders without all that silly browser chrome/buttons etc. oh and with the rights of a win32 app installed locally...

Basically with a little markup you can control and manipulate the browser chrome and any com object on the system with a script friendly API you can talk to.

Now this 'hta' thing works if the page is hosted on a web page too... albeit you get ONE security dialog that doesn’t really explain what is going on and if the user clicks ok the hta runs as a locally installed app w/o silly security sandbox stuff going on... and yes that basically means it can for all intents and purposes fdisk your hard drive...


Like anything though this can be used for good and evil.

Ok back to how to-do it. if you Google HTA on Bing (or Google) you can get the reference material for hta's but basically it is an html file that runs in a version of IE w/o the sandbox. so basically any html that works there works in the hta too with the added addition of this tag:

applicationName="Virtual Desktop - Lite"
/ >

Now as mentioned you can also access any of your com objects the XML Document object or the 'File System' object... here is some sample code from my magic self editing file:

var oDOM = null;
var giHeight = 360;
var giWidth = 800;

function initFrm() {
try {
self.resizeTo( giWidth, giHeight );
self.moveTo( ( window.screen.availWidth - giWidth ) / 2, ( window.screen.availHeight - giHeight ) / 2 );

oDOM = new ActiveXObject("Microsoft.XMLDOM");
oDOM.async = false;
oDOM.loadXML( oXMLDATA.innerHTML );
} catch(e) {
alert( "Your OS is missing components or they are disabled for processing XML data!\nDESC: " + e.description );

Notice in this case the code creates the xml document object and loads part of the 'HTML' in...

And here is another sample:

function saveSelf() {
var oFSO = new ActiveXObject("Scripting.FileSystemObject");
var oTempFile = oFSO.OpenTextFile( "xLinks.XML.hta", 1 );
var sSelfSource = String( oTempFile.ReadAll() );

var oPAGEARRAY = sSelfSource.split( '<meta' + ' val="2345"/>' );

var sNewSource = oPAGEARRAY[0] + '<meta' + ' val="2345"/> <xml id="oXMLDATA"> ' + oDOM.xml + ';</xml><meta' + ' val="2345"/> ' + oPAGEARRAY[2]

var oSDOM = new ActiveXObject("Microsoft.XMLDOM");
oSDOM.async = false;
oSDOM.loadXML( sNewSource );

if( oSDOM.xml != "" ) {
var oNewFile = oFSO.CreateTextFile( "xLinks.XML.hta", 1 );
oNewFile.WriteLine( oSDOM.xml );
oNewFile = null;
alert( "Save Success!" );
} else {
alert( "Save Operation Failed!" );

This function creates a File System Object. The trick here is basically the file runs as an HTA i.e. executable but then loads itself as a xml file or custom xml data base and updates 'records' in itself and overwrites itself. Now the trick here is that your HTML must be XML complaint. Really if you don't know what this means maybe you should start somewhere else before reading about how to hurt yourself with this stuff... :)

Monday, December 7, 2009

Hacking the Silverlight Xap file

Every now and then I find I need to pull resources out of a Xap file. One of the issues with this is knowing what’s in the XAP. There have been a number of solutions I’ve used over the years (ok that is like 2.5 ish years) like having an index file either a Csv or Xml etc. A few weeks ago I ran across this little class that some guys were talking about on the Silverlight Insiders/MVP thread called un-zipper found here:

What is cool about this class is it makes getting the assets out of a zap even if you don’t know what is in the xap up front easy and straight forward. From a using standpoint you basically need to create a webclient and a call and use the Unzipper to run through the contents. The Unzipper class deals with mucking up what is in the xap so all you need to-do is run through the collection and pull out what you need… Let us take a look at what you need to-do:
Assuming you have the Unzipper class (download here) you need the following libraries:

using System.Collections.ObjectModel;
using System.Net;
using System.Windows.Controls;

From here we need to create a web client

WebClient wc = new WebClient();
wc.OpenReadCompleted += new OpenReadCompletedEventHandler(wc_OpenReadCompleted);
wc.OpenReadAsync(new Uri("HackingXaps.xap", UriKind.RelativeOrAbsolute));

In this code we create the WebClient, add a handler and run the call pointed at our xap we want to load.

void wc_OpenReadCompleted(object sender, OpenReadCompletedEventArgs e)
if (e.Error == null)
UnZipper unzip = new UnZipper(e.Result);

foreach (string filename in unzip.GetFileNamesInZip())
//do something with the file name…?

From here you can pretty much do whatever you want. Look to see this in the up coming version of the HackingSilverlight library.

Thursday, November 26, 2009

Making an Integrator

There are still a lot of names for it but I’m going with ‘Integrator.’ I’m not sure exactly who coined this but I tend to like it. But what is an Integrator? At least in the context of the WPF/Silverlight world an Integrator tends to be some one that sits between a design team and the developer team at least initially when a company first gets someone to fill the integrator role. In the long term the Integrator becomes more the designer as part of an integrated team where there is not a design team or a developer team and we get into this Agile sort of cross discipline team that is building better UX faster in order of magnitude then anything before. There are lots of things that have come together of the past few decades to make this kind of team possible. We are going to focus on the Integrator but let take a quick look at the cross discipline team that the integrator role tends to move teams towards.

The New UX team tends to be on one spectrum a developer that can do dev work in the data base, in the web services space and then into the .NET and WPF. This developer might be a software architect with expanded data modeling an application modeling etc but tends to also be able to do some light reasonable UI and knows what good design looks like. The next team member might be an IA or Information Architect. Granted the Software Architect might have some IA skills and if so might even be a UX Architect. So the IA helps make sure the data and the flow of the IA in the IA are solid on the up take for the team but on the end the IA is making sure the user experience is good and doing user testing and other interfacing with users to make sure what they see makes since and works well.

From IA we start to get into the Integrator role, the Integrator will have a sound understanding of IA, UX and be able to write code but most importantly they are able to visually decompose what they see into Xaml and do design and design integration. Going Past the Integrator is the pure designer then might live in more disconnected tools. But as a team evolves into this sort of zen state each role including the dev’s, the IA, the architects, the designers and integrators tend to take on some of the skills of all the others. When everyone can do a little bit of everything the team is able to functional more tightly than ever before using some version of Agile and WPF/Silverlight todo more better and faster than before. It is even possible to take this even further and bring in the PM (Project Manager) to be able to work with customers and take on much of the skills of the IA.

In a way the Integrator can become kind of a seed that when planted in the fertile soil of a dev team that loves design and a design team that loves to see their hot designs alive over time turns the team into a UX monster (in a good way). Here is where we see the best innovation and the hottest UX (User eXperiences) at least in my experience.

Integrators are not born though they have to be grown (again in my experience). Now we get to the point of the article… how do you grow, build or otherwise make and Integrator?
So there seems to be two kinds of coal for building the integrator: The Designer and The Developer. In either case there are good points and bad points about each kind of ‘coal’…
For the Developer (especially/mainly the WPF/Silverlight developer) the good points are if they are already comfortable with Xaml and building WPF/Silverlight applications jumping into blend and becoming technically proficient is relatively straight forward but on the downside… if a developer doesn’t have any design sense at all… really give up now before you hurt someone. The hardest part of making a rock star integrator is getting a design sense, point 8 Helvetica is NOT the same as point 9 Ariel and if there is a question over it then you need to start again. Ok so we then make a huge assumption that you have some design sense. How do you cultivate it? Well ideally working in blend with some hot designers (and no this does not mean ‘hot’ looking although that is good too). But here is a good reading list for the dev aspiring ‘Design Integrator’

• Presentation Zen (really you must stop making crappy slides)

• A Whole New Mind by Daniel Pink

• Foundation Expression Blend 3 with Silverlight By Victor Gaudioso ( )

• Neuro Web Design – What makes them click? by Weinschenk

• Information Architecture by Wodtike and Govella

• MVVM for tards ( )

• Foundation Silverlight 3 Animation by Jeff Paries

Once you get this or in the process of getting this along with working with a designer is learning how to talk to designers. More than any other thing is team dynamics and team dynamics is primarily about good communication. Outside of the basics of good communication is when coming from the dev world to the design world you need to get in touch with the vernacular as much as possible. Working with designers you can get it from osmosis to some degree assuming you don’t piss them off, part of this means that when you talk to designers about changing their process understand that you probably don’t understand their world and that you can’t be condescending with really you probably don’t know what you are talking about when it comes to design. As an example designer typically don’t’ name and group elements in the same way that a dev is going to need them. When you talk to designers about naming conventions you need to be nice and explain why you need their help to have things grouped and named in the assets even from Photoshop and Illustrator.

What about making a designer into an integrator?

In this case the biggest problem tends to be getting past the normal design tools to looking at Xaml at times, wiring up a basic event and some basic code. Understanding the basics of how to work with dev’s is secondary to getting the new design integrator up to speed. While the designer brings the most critical skill to the Integrator role (being a design sense) they have a huge learning curve to wrap their mind around Xaml and Code. While a designer doesn’t need to code an Integrator needs too at least a bit. Much like the dev needing to understand design at a certain level the same goes for the designer to understand some coding in the context of Xaml and Visual Studio.

So how do you get a Designer to be able to write a method in Visual Studio? I would say to start with the most obvious and that is blend. The designer has to be interested in being an Integrator. If the designer is not passionate about learning to make their designs real then they are going to have a hard time. Starting with Blend the tool is designed to at least on some level be straight forward for designers and for starters they can focus on the WYSIWYG. For example all the short cut key codes are the same or mostly the same as Photoshop and the tool is great for doing WYSIWYG sort of ‘design’ but the native format is Xaml. Once the designer gets to the point of being limited then introducing Xaml to the designer is a great next step. So building on this to being able to wire up and event in code and launching in VSTS is about the limit. Here is where the sweet spot kind of happens and this like the dev being an integrator works best when it is a composite designer developer team.

From a learning standpoint the reading list might be:

• Foundation Silverlight 3 Animation by Jeff Peries

• Foundation Expression Blend 3 with Silverlight By Victor Gaudioso ( )

• MVVM for tards ( )
• A Whole New Mind by Daniel Pink

• Neuro Web Design – What makes them click? by Weinschenk

• Information Architecture by Wodtike and Govella

So let us go back to what is an Integrator?

The Integrator needs to appreciate design and to do good design and recognize good design. An Integrator needs to be able to be able to visually decompose a design and build it in Blend as Xaml. An Integrator needs to learn how to talk to designers and developers and be able understand the needs of both. Dev’s need names, designers need design time data and that sort of thing. Most of all the Integrator needs to help facilitate the communication dynamic between design and development and that is what makes the magic juice you see in some of the high end UX companies building on the Microsoft Stack.

Lastly one of the key aspects of getting companies to buy off on supporting the transition from traditional approaches to composite teams (of designers, developers and integrators and IA’s and anyone else we can get our hands) is ROI for better UX. Companies need to see how better UX can increase productivity, increase sales and user satisfaction and more. And they need to see how the composite team using designers, developers and integrators using the Microsoft WPF/Silverlight stack (Xaml, .NET 4, Visual Studio, Expression Suite) saves development costs, time to market and enable the better UX in general. That is the job of the integrator…

Tuesday, November 24, 2009

Silverlight and Dual Screen Monitors...

So I'm working on this dual screen kiosk thing and want to use Silverlight as for some reason I can't use WPF / .net4 etc. long story and not the point. What do I do now?

Well along time ago in a galaxy mostly still down the street I used do alot of 'dhtml' or ajax kinds of things or whatever we are calling it now days and there was this little thing called an hta you could do to get around all that silly security stuff in the browser that keeps you from nuking the hard drive, and file system access etc.

So the trick I found is to have the hta host the Silverlight app and have it resize its self to take up all the monitors. with a third monitor hidden in the kiosk... poof, Silverlight dual screen full screen black magic.

for those interested in hta's:

basically you want the following properties set on the hta tag in the html header:


and then on load on the body tag execute the following:


which could be a function of
window.screen.availWidth and or window.screen.availHeight

see black ecma magic saves the day.

Thursday, October 22, 2009

Developers on Better Design, User Experience and Why It Matters

The PDC BOF team is pleased to announce another Birds-of-a-Feather session.

Developers on Better Design, User Experience and Why It Matters

What is the return-on-investment of building better User Experiences (UX)?
How does User Interface (UI) design affect your business?

Come join the discussion on why User Experience matters and how it applies to the real world.

In the current world of web 2.0 and with talk of design being important, help us understand why it matters to you and what we get out of good User Interface design. Let’s talk about the technologies on the web and on the desktop that do and don’t support the development of well designed applications, and how we can apply better practices to our own projects. Equally important, let’s discuss how we can bridge the typical gap in cross discipline team dynamics.

Tell us about your secret sauce or just listen to what others have to say. From great enabling technologies like Silverlight or WPF to tried and true web development in ASP.NET using MVC, everyone has a story to tell about UI and design in the Microsoft world.

Saturday, October 17, 2009

Finally a Simple MVVM in Silverlight

So a week or so ago I ran across this article/post by Jeremiah Morrill (MVVM-for-Tarded-Folks-Like-Me-or-MVVM-and-What-it-Means-to-Me.aspx ) was agasp that some spent the time to make MVVM so understandable. What will I do now that everyone can understand MVVM? I pinged Jeremiah and he was open to making this a framework on codeplex seeing as there are only 35 versions of MVVM frameworks out there already albeit no matter how good they are they usually include bits that have todo with 5 or 7 other design patterns so lets take a look at building an MVVM app with just the Simple Framework for MVVM. To start with the Simple framework consistes of one class with three lines of real code:

public class TardViewModelBase : INotifyPropertyChanged
public event PropertyChangedEventHandler PropertyChanged;

public void InvokePropertyChanged(string propertyName)
var e = new PropertyChangedEventArgs(propertyName);
PropertyChangedEventHandler changed = PropertyChanged;
if (changed != null) changed(this, e);

I know I know its a work of art but this really is all you need. Now using this class is just as simple to create an MVVM application using the simple framework. First create a model class like so:

public class AModelClass
// super easy version
public string SomeValue { get; set; }

ok so maybe also make it return some data magically. Next you need to create your complex view model class that inherits from ViewModelBase like so (WARNING: this is the complicated part...)

public class AViewModelClass : ViewModelBase
private AModelClass MyModel;

public AViewModelClass()
MyModel = new AModelClass();

public string SomeValue
get { return MyModel.SomeValue; }
if (MyModel.SomeValue != value)
MyModel.SomeValue = value;

So now we have a model that returns some data and then we have our view model that we can bind do. Now to create a View (ie user control) with xaml akin to this:

>Simple:AViewModelClass /<
>Grid x:Name="LayoutRoot" Background="White"<
>TextBox Text="{Binding SomeValue, Mode=TwoWay}" /<

If you really like you can get extra complicated and load view in shell or whatever in Xaml like so:

>simple:AViewClass /<

so some other fancy thing... but that is all it takes to have some Model View View Model going on. Nice simple...

stay tuned for maybe commanding for tards...

Friday, October 16, 2009

Silverlight Hack of the Week - Auto Zoom

Justin Angel did a tweet about this and I must admit its cool and I had never even thought out this before but you can set autozoom and on zoom event in silverlight for when the browser host supports zoom on a page.

Auto zoom is the simplest. hook this up in the html and this the silverlight control will be able to be zoomed as the browser zooms.

<param name="enableautozoom" value="[bool (ie true or false for the tards that dont know what a bool is]"/>

on zoom
so if you are using the first feature you can also then have an event handlers to do something special on zoom. the on zoom html param allows you to define an event handler on such.

<param name="onzoom" value="[functionname]"/>

all in all some simple hacks that are not so much hacks but just kind of obscure things in Silverlight.

Thursday, September 24, 2009

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">
<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" >
<RotateTransform x:Name="DialAngle" Angle="0" />

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);


if (Minimum > 0 && Minimum < 360)

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" >
<Grid >
<Ellipse Fill="Aquamarine" />
<Rectangle x:Name="Indicator" Height="10" Width="49" Fill="Blue" Margin="1,45,50,45" />

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

Monday, September 21, 2009

Blend/Catalyst Smack Down?

Designer and Developer Workflow

Is it a myth? Marketing lingo? Or could it be real with the help of powerful tools?

Listen in as Ryan Stewart from Adobe and Adam Kinney from Microsoft discuss the workflow concept from their respective point of views. Ryan will demonstrate how Flash Catalyst works within the Flash Platform development cycle. Adam will show how Expression Blend fits into the Silverlight development workflow.

Come join the fun with two of the best speakers in the world on Adobe/Blend at Interact

Thursday, September 17, 2009

The Gu a Silveright firestarter

if your paying attention and want to learn some Silverlight they are streaming the gu and more all star speakers free from the Silverlight firestarter at:

Saturday, September 12, 2009

Don't Forget about Silverlight Week

So this coming week is really really exciting and I wanted to make sure no one forgot. The stars have aligned and 4 big events are all happening in Seattle:

.NET Developer Association User Group Meeting - Featuring Jesse Liberty

Silverlight Geek Dinner

Interact Seattle - Featuring Tim Hueur

Silverlight 3 Firestarter Event

Wednesday, September 9, 2009

64bit Surface Hack

Not strickly speaking Silverlight but in setting up my new laptop to run the Surface SDK in 64bits I had to get special mojo to get it working so I can run my Simon demo (plus some work related stuff) from Silverlight to WPF to Surface. I did a bit of googling er I mean 'binging' and found some of the posts lacking mostly the orca link. Anyway Ariel sent me the link to this post: that had all the magic juice to make it work. if your trying to get this running on your box in 64bits these steps working for me.

Tuesday, September 8, 2009

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

Monday, September 7, 2009

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
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" >
<Grid >
<Ellipse Fill="Aquamarine" />
<Rectangle x:Name="Indicator" Height="10" Width="49" Fill="Blue" Margin="1,45,50,45" />

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;

Monday, August 3, 2009

MSDN Webcast: geekSpeak: Composite Application Development (Level 200)

Start Date: Wednesday, August 19, 2009 12:00 PM Pacific Time (US & Canada)
Duration: 60 minutes
Audience: developer

In this geekSpeak, Microsoft Most Valuable Professional (MVP) David Kelley discusses composite application development in Microsoft Silverlight and Windows Presentation Foundation (WPF). He covers the Silverlight Designer/Developer workflow, tooling, design patterns, anti-practices, and working with distributed teams. Your hosts for this geekSpeak are Glen Gordon and Mithun Dhar.

The geekSpeak webcast series brings you industry experts in a "talk-radio" format hosted by developer evangelists from Microsoft. These experts share their knowledge and experience about a particular developer technology and are ready to answer your questions in real time during the webcast. To ask a question in advance of the live webcast, or for post-show resources, be sure to visit the geekSpeak blog.

Guest Presenter: David Kelley, Senior Software Architect, IdentityMine

David Kelley is a Microsoft Most Valuable Professional (MVP) for Microsoft Silverlight, and he has been building Web-based, distributed applications for more than ten years. He is a Silverlight user experience architect at IdentityMine, and his passion is building user experiences that are elegant and easy to use. David's career highlights include a Silverlight demonstration with Bill Gates at TechEd 2008, and developing the "Entertainment Tonight" Web site for the Silverlight 1 launch and Emmy Awards. In his spare time, David is the executive officer of the Seattle Designer Developer Interaction Group.

Click Here to Register

Saturday, August 1, 2009

Designer Developer Communication and Interaction

I'm working on a joint research project with Interact (Seattles Designer Developer Interaction Group) to better understand the dynamics of designer and developer communication and Interaction. We will publish the information for everyone free but for now we need to collect the information. if you get a chance to fill out the survey please help us know :) The survey is in 2 parts and ideally we need both filled out.

Designer Developer Communication Survey Part 1

Designer Developer Communication Survey Part 2

Silverlight Firestarter - Seattle Sept 17th

Silverlight Firestarter in Seattle will be Sept 17th, with folks like Scottgu, Tim Heuer, Adam Kinney, Justin Angle, Kathy Carper, Karl Shifflett and more. Learn about all things Expression and Silverlightish and stay for pizza and fun. MVP's on hand for live streaming and Q and A

on facebook at

more to come shortly but stay tuned and keep your calenders clear.

Wednesday, July 22, 2009

INETA Silverlight 3 User Group Starter Kit

I got sucked into this cool off hours project with Ariel and David Silverlight todo this Silverlight 3 starter kit. Ariels design has been well received and I got the UI built out over the weekend and last night. From a design standpoint its simple and elegant and with the AnimatingCloud panel fun to play with. Screen shots can be found at:

The project is on codeplex but still in the process of wiring up the backend RIA Services, this is a fun engaging project that we hope to see on our home page for our user group shortly.

Monday, July 20, 2009

Silverlight 3 Out of Browser Quicky

One would think that being on the silverlight insiders list and being a silverlight mvp etc one would know when something changes but amoung all the meetings, and conferences and the like I missed a tiny change in the Silverlight OOB - from the initial beta and the release of Silverlight 3. That weekend that the release happened I went to go and upgrade all my projects to the latest bits and everything feel a part. I found when I removed all the out of browser stuff it all seemed fine. it didn't take long to realize the API's changed but took me a whole fraking (BSG lingo) week before I realized what happened to editing the application manifest. That being all the case let me recap how to build an OOB Silverlight 3 application.

Step 1, build a Silverlight application of some kind.

Step 2, right click on the properties of your Silverlight Project (the actual app project not a class library or something). Normally you should get the Silverlight tab of the properties pain.

Step 3, 'Click' the check box for 'Enable running application out of the browser.'

Optional step 4 would be to click the 'Out-of-Browser' Settings button and then to set icons and details as desired.

Optional Step 5 would be to customize the UI with an install button. In the case of Simon, in the page constructor that is using the Simon control we add some code like this to see if we should show the install button:

if (Application.Current.InstallState == InstallState.Installed)
installbutton.Visibility = Visibility.Collapsed;

then in the install Simon button event handler we use this line to trigger an install


from there you can pretty much do what ever you like. its easy simple and better then editing the raw manifest like we did with the beta, but to be honest I kind of like raw XML... Now those settings are not in the manifest but a seperate file called 'OutOfBrowserSettings.xml' which seems to contain everything that was in the manifest.

Thursday, July 16, 2009

Popfly is dead

Popfly is dead... going a way on August 24, 2009

With much sadness Popfly is going away.

Popfly was a IDE for hobbiest and non programmers for building online Silverlight mashups. Something like legos you could pick the popfly blocks you wanted and drag them on to a surface and then connect them and for the most part that was it. A cool technology but targeted towards a very narrow market and they couldn't get it to work with Silverlight 2 or newer so I'm guessing that this and more is the cause of pulling the plug. Moving forward I expect to see more mashup developement technologies in the future.

Monday, July 13, 2009

Silverlight 3 - Whats Next?

of course all the latest bits for Silverlight can be downloaded off of but a few other sites have changed that might be important to check out. This site if your familiar with Silverlight you might know of:

rumor has it Dr. WPF might have helped? maybe? but in any case the guys from IdentityMine, Inc. built the silverlight part.

Another good resource is the new IM syncated blog site that aggregates the sites of the best and brightest at IM:.

you'll find rock starts like Smitty, Laurent, Kurt, Jobi, Devin, me and more.

Tuesday, July 7, 2009

Silverlight? what about the hard ware geeks?

So Silverlight is cool, and working around here where everything is WPFish, or Surface-ish or Win 7-ish or Silverlight etc. or even stuff I can't talk about, I tend to forget about the geeky side of the hard ware we use. At IM there are lots of super cool, super smart poeple. Its a company of rock stars, that being the case however that turns out is true even of our IT guys. I finally got turned on to our IT guys blog... very geeky... :)

very geeky. One idea we had for the office is he likes this skelton case that looks like its out of a borg movie or something. we thought we could have one floor that has these cases and their uber cooling fans and other either steam punk or borgs sorts of things and then have all the cables drug up to the next floor so we don't hear the cooling fans...

Anyway if your in to hardware geekyness his blog is the bomb...

Saturday, July 4, 2009

Azure Simon

Davide Zordan posted a version of Silverlight Simon up in the cloud at

Davide had also added multi touch support to the WPF version. You can check out the code on the codeplex project

Wednesday, July 1, 2009

Silverlight MVP

about a year ago I was at TechEd 08 taking to a friend (Peter) and he asked me if I was an MVP and I had no idea what that was. Granted I had heard it but never spent enough time to put 2 and 2 together. Well over the course of the next year and half or so I did find my self more involved in user groups such as the Seattle Designer Developer Interaction Group and Silverlight Insiders Group and of course I was already going to all the cool events such as MIX. I got a tweet from Suzanne at Microsoft Tuesday evening that I had been awarded Silverlight MVP.

For many years now I have been scoofing at things like MCP etc as I found that certifications like this tend to be something students do but the guys that are really good were the ones that can whip out the stack of experience and code. So for the most part I didn't care about that. I guess why I'm so proud of the MVP award is that it is not something you can just take a test. It is awarded based on contribution to the community and on the work you do professionally. As I understand it other MVPs or MS employees are the only ones that can nominate you and to be recognized like that for the hard work (albeit doing things like Silverlight Simon I have a hard time calling 'work') by others that are generally smarter then me is something I'm really proud of. Of all the silly certifications from school or other industry related stuff the only one that matters to me is Silverlight MVP.

In any case here is my MVP Profile:

Tuesday, June 30, 2009

Simon a case study part 1 - designer developer work flow

So I while back a friend of mine and whom is another person that shows up to the local designer developer Interaction group and myself were talking about a simple demo app we could do that would show case a number of things, our goal was a good sample she could use on her resume and be a good sample application that could show case designer developer work flow and composite application development. Her idea was todo a simple Simon says game that we would have in Silverlight. As a team (such that two people being a designer and UX dev can be) we had our 'business requirement' but we needed to build on that with a comp or visual vision of what we wanted and a story (use case brief, scenario or other excuse for the same). Our user story went something like this:

John doe wants to play a game like Simon says. John sees link on a web page that says 'Simon says.' John clicks link and he doesn't have Silverlight installed so he gets a 'install me' link with a faded image of Simon. John can see from the faded image that Simon is what he is looking for and decided to install Silverlight. John then go to the Simon link and Simon comes up. John can click the new button to start a game and play a traditional game of Simon says buy following the sound and light patterns and clicking the appropriate game pads. John is able to use the high score button to see his high score. John has fun with and easy to use game and spends to much time playing the game.

with this as our user story, Ariel (the designer, names changed to protect the innocent or not) put together a wonderful bit of Xaml. Ariel being familiar with working with dev's took into account that things needed to be groups, and names reasonable or I would have a hard time working with the asset. For me the first thing I did was load the project and start to wire it up. One would think that Simon shouldn't be too complicated and at first it wasn't. A few events, and a game timer using a story board and we are good. Being the retentive dev that I am, I've had to learn to let go of that when it comes to Xaml as this tends to hamper or slow down the design to the point of just not being worth the time invested.

That all being the case we soon had a working game. Part of learning to work together and further learning to work on the same code at the same time that Silverlight and by extension WPF (actually that might be the other way around) is having the designer and dev work from source control. I know allot of dev's will have a cow about letting designer touch source control but its really not that hard. check out file, check in file... really even a designer can get the hang of it when their tool (Blend 3) supports it now. So we put this in source control ( the one little detail we had to over come though was Silverlight 2 vs Silverlight 3 and we both were on opposite sides of the fence. This probably was our biggest issue we had to work out where we disagreed. And any time there is a designer and developer on the same project you tend to have at least one disagreement. We ended up eventually on Silverlight 3 as it supports more, the tools are better and it is being released next week. But generally deciding on any issue should be done based on the requirements and when the requirements don't provide enough bases then other reasons should come into play. The key then is to communicate. granted we hear that in everything from time immemorial but really how much do we have to tell people before the get it. 'TALK' things through and normally logic will dictate the best solution.

moving on...

Once in source and having the app running we would start building the application out. Ariel can muck with the design in more detail and focus on the finer points of the design to it was pixel perfect and I could play with game logic and function and we both could do it at the same time. Truly a zen moment for designer developer relations.

Friday, June 26, 2009

MediaElement for Sound effects

In doing Silverlight Simon and friends and then trying to port the uber tile from Silverlight to WPF I found that for doing quick short sounds there was a limit in Silverlight and WPF to the preformance and bahavior you can expect. WPF's 'MediaElement' is just horride but even in Silverlight if I try to use the same media element to play 2 short 2 second clips with in 1 second you will get issues. I must say though the Silverlight team has done a bang up job on the media element. It is orders of magnitude better then the one in WPF.

As part of pulling bits out of the crossfader codebase to post on codeplex I built a new 'MediaElement' class (see that solves this problem with sound in Silverlight and WPF and makes my life just that much easier for building composite apps.

So Karim suggested something called channel support to solve this and in this control I implemented it. Basically what happens is that the usercontrol called 'MediaElement' creates a collection of MediaElements that it then can have events and flags for for tracking state and each of these is a 'channel'. When you call SetSource the control looks for the first available channel to assigns the source. this actually creates like a quing mechinism that allows me to rapidly play sound effects without loosing one or having to wait for the control to have its mediaelement in a ready state and I don't need to have an army of media elements.

Also in WPF and Silverlight the usage can be then the same where I call SetSource and pass in a local uri path like this:




in this case make sure the item is a local 'resource' in the xap with the control. In any case check out on the crossfader codeplex project or the HackingSilverlight library.

Tuesday, June 23, 2009

Silverlight Tour In Seattle

Just thought I would drop a note about the up coming Silverlight tour in Seattle. Erik Mork is speaking in Sept 2-4th.

and more about Erik

Wednesday, June 17, 2009

Silverlight at an End... RIP

I was aghast when I saw this article...

don't get me wrong I think html 5 is great but there are so many wholes and are we really expecting all the browser's to get together and get it straight as to rendering behavior? not to mention all the nonsense about 'assumed' markup that browsers try to fix poorly formed markup. I mean really why not just use the SGML spec and call it good...

Any case with the coming trends towards UX and high touch I think the html 5 spec is too little to late for killing Silverlight and flash.

Tuesday, June 16, 2009

MVVM Silverlight

So this topic has been going around for some time about building MVVM Implmentations in Silverlight a couple of people I know are doing toolkits (surprise surprise WPF guys mostly) but here are two of my favorites include Michaels:

and Laurents:

any real dive into the topic should also include shawn's blog/posts starting with say this one

In any case since I've been focusing on the composite apps as of late I'm going to work on something based on Michaels and get that posted.

Thursday, June 4, 2009

Setter Value Binding Helper

A great little Hack in Silverlight, kind of technical stuff for the beginner but a good thing to have down in your professional developer toolbox.

thanks to karim for this link.

More Simon the Saga

in this latest chapter of simon I have been trying to get 'Simon' to run in a scatterview control on surface to be more 'Surfacy'? [Sir - fa - see]? (new word?) In any case the code from Silverlight Simon to Surface Simon had to have even more hacks... Finally had to convert all the game pads to buttons, hack out the control template and create new event handlers for all 4 buttons. but alas Surface Simon is not available for Download off of codeplex at:

Also to get around the sound issue with WPF... which I must say the fact that the media element is so lame in WPF as opposed to Silverlight is very very sad. Anyway I changed the PlaySound method of Simon to look like this:

#if Silverlight
Uri MediaItem = new Uri(SoundFile, UriKind.RelativeOrAbsolute);
SimonSounds.Source = MediaItem;
SimonSounds.AutoPlay = true;
MediaPlayer mplayer = new MediaPlayer();
mplayer.Open(new Uri(SoundFile, UriKind.Relative));

you'll note the use of precompiler specifiers and that we are not using the Xaml based media element in the WPF/Surface versions any more...

Tuesday, June 2, 2009

From Silverlight to WPF to Surface... the Saga...

Going from WPF to Surface turns out to be a bit more in the line of code changes expecially in XAML then going from Silverlight to WPF. WPF Simon will run straight up in/on Surface the problem is all the click events are castrated by the Surface Framework as Suface focus's on 'Contacts'. In order these are the kinds of changes I had to make to make 'Surface Simon' playable.

First we couldn't just reference WPF Simon to make the chagnes we needed so I had to copy the code base. Then started with converting the 'Simon' user control to a 'Surface User control' something to the effect of:

<s:SurfaceUserControl x:Class="Simon.Simon" xmlns:s=""

and in the code behind:

using Microsoft.Surface.Presentation.Controls;
using Microsoft.Surface.Presentation;


public partial class Simon : SurfaceUserControl

then next thing I needed todo was swap out the button controls with surface button controls so I could get the contact events like this:

<s:SurfaceButton x:Name="ScoresBtn" Click="ScoresBtnClick" ContactUp="ScoresBtnContactUp" Style="{StaticResource ScoresBtnStyle}" Height="41" Width="34" Content="" Canvas.Left="98.407" Canvas.Top="-6" />

note I could leave the click even there and the new 'ContactUp' event basically just calls the click event like this:

private void NewBtnContactUp(object sender, Microsoft.Surface.Presentation.ContactEventArgs e)
NewBtn_Click(sender, null);

Thursday, May 28, 2009

Expression Blend

With the coming trend towards UX in general and my interest in Silverlight I have taken to following a number of up and coming designers. One 'Ariel' that I know has had her blog going for a while but hasn't posted a front end on her site finally got around to it. very cool :)

Saturday, May 23, 2009

Silverlight Simon/WPF Simon on codeplex

I posted the solution for Silverlight Simon and WPF simon up on codeplex:

this is a great solution for showing the conversion from WPF and Silverlight, using precompiler specifiers and other small differences between Silverlight and WPF elements.

Thursday, May 21, 2009

Flex Flash Smack Down and maybe some Silverlight

Last night was the Seattle Designer Developer Interaction Group (user group) meeting. its a user group focused on UX and the designer developer experience. We meet in downtown bellevue. Last night Yoeun Pen was our guest speaker and a did a great presentation on Flex/Flash. Granted we were bolted out of the board room by the local construction cure and we had to play ninja and come up with a venue on the fly but some a miracle (ie, talked to hotel that we have our room booked with normally) we got to use a better room near by (about 100feet). We had a great turn out and a great dicussion on the tools for designers vs the Flex IDE. I was pleased to learn that the designer developer story is better then some of the other technologies we looked at but not as clean as WPF/Silverlight.

Yoeun Pen covered a number of things including:
  • What is Flex?
  • MXML (flash version of Xaml)
  • Flash/Flex 4?
  • Flex SDK
  • Flex Builder
  • Flash vs Flex
  • Components
  • Embedding assets
  • Skinning

and he did a great job contrasting Flash and flex and compairing that with Silverlight/WPF. You can download the powerpoint at:

Yoeun's blog is at:

Hope to see everyone at the next SD2IG about the latest topic related to UX.

Monday, May 18, 2009

Silverlight 2 Installs Greatered the all others combined...

Can't get over the quote '... Silverlight 2, the platform is installed on more machines around the world than the web browsers Firefox, Safari and Chrome — combined. Damn. Them fightin’ words.' from:

Routed Events in Silverlight

Andrew the local uber genius at IM, likes to take on simple tasks... some of his recent accomplisments including, writing aber 3d physic's engine for surface, writing a UX gesture engine for fun and hey while he is at lets add Routed Events for Silverlight... So anyway Andrew posted his current little project on Codeplex for everyone and I'm certainly going to use it as the latest cool hack. :) So I'm going to include it in the HSL library but only the SL related bits. If you go out to Andrews codeplex project you can see that it is simple to use and extends Silverlight that much more. Its pretty click and lets you define and event, subscribe to events and they even get raised.

check it out at:

Sunday, May 17, 2009

Xaml WCF Binding Type

Just kidding... as of late I am not aware of such a think however, it could be done. I was pooring over the great project in outer darkness I'm working on and Karim sitting near by was talking about using Xaml as Clr Object markup and Xaml Reader. In joking about it came up to use Xaml as and WCF binding type. Eventually we got to a more serouse topic about the limitations of WCF support in Silverlight event Silverlight 3. In any case John Papa's book on data driven services with Silverlight 2 is probably the best resource on the topic as of late and John did quick post recently on Silverlight 3 and bindings supporting in Silverlight 3 which includes binary support which would be made in some 'Xaml' hack :)

Monday, May 11, 2009

MSDN Events Unleashed: Best of MIX

Doing a presentation on what is new in Silverlight 3 at the MSDN Unleashed event in July:

in your in the greater seattle area it will be alot of fun and we get to learn some new Silverlight 3 goodness. Hope to see you there.

Friday, May 8, 2009

Silverlight 3 to Silverlight 2

here is a cool post on going from SL3 to SL2 on the same dev box.

Stay At Home Server in Silverlight

The book as been out for a while, but its just wrong on some many levels. I certainly keep one in my office... now you can enjoy it online and read it to your kids at bed time too... and its in Silverlight no less.

WPF Blendables controls

a new drop of the WPF blendables control was released. not strickly silverlight but still cool.

Friday, May 1, 2009

WPF Simon

here are links to download WPF Simon (the WPF version of Silverlight Simon)
or just the zip

Converting Silverlight Apps to WPF

Using Ariel's Simon design I built this game called Silverlight Simon. Jobi suggested making it a WPF app and then a surface version. I got it working and will do a post on it later but strictly speaking here this is how I overcame some of the issues going from a Silverlight user control to WPF.

The first thing I found out when I moved my code into Xaml was a number of things that WPF doesn't do that you can do in Silverlight.

1. there is NO VSM... at all.
2. there is no autoplay on media element.
3. no 2.5D (ie, all the plane projection stuff)
4. and all my animation calls to story boards didn't work.

When I first ported the code over I knew the VSM and 2.5d was not going to work so I started with ripping that out. the first thing that then poped up was all my animations calls. For example say I have a click event and I'm doing something like [animationname].Begin();

well that doesn't work as all my animations are 'resources' I played with this for a while and with some Dr. WPF medicine I found that I basically had to change all my animation issues to something like this:

Storyboard foobar = TopSimonGrid.FindResource("PrefsBtnPressedKey") as Storyboard;

from their I got my animations working. I then removed my auto play on the media element and it would compile. but as soon as an event tried to fire a sound I got another error. I ended up having to add

that way my sound method started working. At this point you could play the game if you could get past the fact that all the styles that used the VSM looked like crap. I know there was this codeplex project called WPF Toolkit ( ) which included a prototype VSM (Visual State Manager). I pulled it down and tried it out. The only hard part was figuring out the right name space to get my vsm: working. as it turns out it is where you would expect if it was part of WPF kind of:


With this mojo going on everything worked but my flip fx control. I couldn't find that any one get industrous enough to build the 2.5d stuff for WPF so I took the old animations from the SL2 fx control but put them in the vsm flip animations generic xaml so that it would use that instead of the 2.5d. I then had to change the content presentor to have the transforms needed and then poof like magic Silverlight simon worked like a champ.

For something extra I ripped out the WPF window chrome so Simon sits on the desktop and I found that my drop shadow on Simon was know on my desktop.

for those that are interested ripping out the chrome which is way easier then it used to be I had to add this to the window tag:

WindowStyle="None" ResizeMode="NoResize" AllowsTransparency="True" Background="Transparent"

from there you can pretty much do what you want.

ok ok ok, here is a little update. for Simon the above works fine... but for my uber tile project a few more issues came up... starting with dependency property registration sanity check....

So it is not so much a difference other then that the code that shouldn't work does in Silverlight 3 but blows up properly in WPF. take a look at this code:

public readonly DependencyProperty BackLink2TitleProperty = DependencyProperty.Register("BackLink2Title", typeof(string), typeof(MediaPlayer), new PropertyMetadata(new PropertyChangedCallback(OnBackLink2TitlePropertyChanged)));

in the named registration value you can't have two of these with the same value. Silverlight will currently over look that little indiscretion. WPF... not so much :)

Tuesday, April 28, 2009

Silverlight Eval Function

So this is a huge hack and the only purpose really for me is to be able to say I can do it and YOU can too albeit don't do this... I know I would have a huge melt down if some one on one of my projects did this. But alas here it is. So I'm working on my new Silverlight 3 'Tools' class and I thought I would go ahead and add this little static member called 'eval' where you pass in some code and it gets executed. So as mentioned I have not been able to come up with a good reason todo this yet but anyway back to the topic. So the code looks like this:

Tools.eval([some code]);

So the 'some code' is any ECMA complaint code that can execute in the context of hte hosting page. and the source looks like this:

private static string ClientSideEvalName = string.Empty;
private static ScriptObject ClientSideEvalFunction = null;

public static ScriptObject eval(string ECMACode)
if (string.IsNullOrEmpty(ClientSideEvalName))
ClientSideEvalName = "eval" + (Guid.NewGuid().ToString().Replace('-', 'x'));
InsertECMAScript("function " + ClientSideEvalName + "(InputValue) { return eval(InputValue); }");
ClientSideEvalFunction = (ScriptObject)HtmlPage.Window.GetProperty(ClientSideEvalName);
return (ScriptObject)(ClientSideEvalFunction.InvokeSelf(ECMACode));

We start with two private static members The first one holds a string reference and the other will hold a reference to the external component of eval that makes it work. the eval function then basically checks to see if there is a client side element already that is ready to be called. If not then it will be created. Once it is created then the eval function invokes the reference and passing the input ECMA Code to execute it and return any results.

clean, no. dirty, yes, very. :)

Facebook and Microsoft demos facebook API's

something cool from facebook and microsoft

Silverlight Simon v.old

Ariel posted a version of Silverlight Simon that runs in SL2. it looses the flip, pref button doesn't do anything and the out of browser experience goes a way but still very cool :) the coolest part was the process Ariel had to go through to make it work in Silverlight 2 after I sent her the Silverlight 3 version.

and of course the SL3 version is at:

Friday, April 24, 2009

Bitmap Effects Generic PixelShader Helper Class

Personally I'm into simple code. Code should be as simple as possible todo the job and no more complex then needed. Case in point. Unless there is a strong reason to write my own command structure in Silverlight I'm going to go MVP or pMVP until I can see in Silverlight that MVVM is not just extra work (ie as when they get it to work like it does in WPF). Keeping this in mind I have been playing with pixel shaders. I tried this kind of thing by hand from scratch in Silverlight 2 and using Stegmens editiable bitmap class I could 'kind of' make this work however it was WAY to complicated to be reasonable. However with Silverlight 3 we have PixelShader support so we are gold. I reviewed a number of samples and wrote a few of my own in Shazzam (very cool tool I might add) but the one thing that bugged me was having a zillion pixel shader class's for each '.ps' so I made this simple yet generic class to clean up my source tree.

this is what I want to be able todo:

<Image Source="../Img/kasiadavid.jpg" Grid.Column="1" >
<hsl:Shader x:Name="TargetShader" SetEffect="Ripples" />

Here I want to set a dependency property, in this case 'SetEffect' to some key value that will case the control called 'Shader' from my HackingSilverlight library and based on that select some ps file designated.

Here is my class to implement my 'Shader':

public class Shader : ShaderEffect
public Shader() { }

public string SetEffect
get { return (string)GetValue(SetEffectProperty); }
set { SetValue(SetEffectProperty, value); }

public readonly DependencyProperty SetEffectProperty = DependencyProperty.Register("SetEffect", typeof(string), typeof(Shader), new PropertyMetadata(new PropertyChangedCallback(OnSetEffectChanged)));

private static void OnSetEffectChanged(DependencyObject DpObj, DependencyPropertyChangedEventArgs e)
ShaderEffect ThisElement = DpObj as ShaderEffect;

if (ThisElement != null)
((Shader)(ThisElement)).PixelShader = new PixelShader()
UriSource = new Uri("HackingSilverlightLibrary;component/PixelShaders/" + ((Shader)(ThisElement)).SetEffect + ".ps", UriKind.RelativeOrAbsolute)

as you can see this could break if there is not ps file with the key name but add a little error handling and your good. :)

Tuesday, April 21, 2009

Custom Text Runs, Data Binding and cheating...

Faisel sent posted a question:

I have a requirement of showing additional text in a TextBlock. I have a Class in my silverlight application. I want to bind two of the properties in a TextBlock in my main page and show text something like this : "You make me feel - BONFIRE ".
The first part of the text here is a song name and the second part here is artist name. I need to show artist name based on the song name. For example if song is by another artist. It will show song name - "Still loving you - SCORPIONS" .
I tried to bind the Text property of the run to bind the Artist property to show the additional text in the TextBlock. There's some example of WPF which binds the Text property of Run by creating a BindableRun Class which derives from Run. But the problem in Silverlight is Run Class is Sealed in Silverlight.
Is there anyone who can help me to get the desired result. Someone please help me.'

I did the following response that I thought was interesting :) if it might make a few cringe... lol

one easy method would be to loose the binding. I know alot of people would be freaked out and this totally feeds into Dr. WPF's MVpoo design pattern but you could do something like this, so lets say we have this xaml that looks like this:

<stackpanel name="MyPanel" orientation="Vertical">
<button type="submit" content="add" click="Button_Click">

so the button doesn't need to be there and we could use a scroll panel or custom control but any element with a children collection would work. but in this case lets say we have this method button_click which contains this code:

TextBlock ThisBlock = new TextBlock();
//ThisBlock.Style = [whatever]...
ThisBlock.Text = Guid.NewGuid().ToString();
Run NewRun = new Run();
//Run.FontStyleProperty = ...
NewRun.Text = " ABC ";


so each time you click the button you gets some text with a 'Run' at the end. to translate to the real solution when you load the page or get this data you need to parse it on your own in a loop and depending on some condition change the run context but you could also bind events and do other things at that time. of course you loose the whole data binding but really what it comes down to is does your code do the job?

the thread can be found at:

' '

anyway I know its a hacky way of doing things but hey, that is what 'hackingsilverlight' is all about :)

Wednesday, April 15, 2009

Silverlight Automated UI Testing

Working with alot of larger clients at IdentityMine we frequently work with teams that use automated testing and deployment systems. I did a post last year on deployment with msbuild and build environment deployments etc and today I'd like todo a quick post on wiring up a Silverlight application for automated UI testing. This is a great way to tied into existing test structures but keep in mind there is a Unit test framework off MSDN that is a great place to start.


So quick and dirty this method is kind of a hack to expose bits to existing web testing systems that can only talk to the DOM. with that... I'm going to focus on showing you alot of code...

To start with we have this simple application using this xaml keeping in mind I excluded the extrensous stuff...

<textbox name="inputhere" height="30">
<button name="Btn1" content="process input" click="Button_Click" column="1" height="30">
<textbox name="Output" height="30" column="2">

and in the code we add the following C#

private string ProcessString = "complete with [{0}]";

private void Button_Click(object sender, RoutedEventArgs e)
Output.Text = string.Format(ProcessString, inputhere.Text);

this works great but pretend it is much more complicated... So then we add the following code to our code behind...:

public void SetTextField(String InputValue)
inputhere.Text = InputValue;

public void ClickButton()
Button_Click(new object(), null);

public string GetValue()
return Output.Text;

and then we add the following to our page constructor:

HtmlPage.RegisterScriptableObject("MainPage", this);

and we add this #include er I mean 'using' statement:

using System.Windows.Browser;

from here we have exposed the key elements so any testing system that can talk to the Browser DOM can then wire up to what appear at JavaScript objects like this:

//simulates input:

// simulates a click

//gets a value.
alert( top.document.getElementById('Silverlight1').content.MainPage.GetValue() );

I know quick and dirty but now our automated UI web app infrastructure can 'test' our Silverlight application easily.

Tuesday, April 14, 2009

Dictionary Definition of Xaml (verb and noun)

A friend 'Ariel' from did a short post about Xaml being a verb. I've heard this a few times and thought this was cool to see it in print for the first time :)

Check the post out here:
Alternative uses for XAML

I also saw another post by a guy at MS Rob Relyea did a quick post references the first one. In Robs Post ( he mentions a need for a definition so I'd like to offer a definition of Xaml including it as a verb and noun:

Xaml \Za - mul\

Etymology: Modern Technical Term English

Noun 1. Extensible Application Markup Language. Developed by Microsoft as a UI application Xml (Schema) based markup language designed to model application user interfaces suing a series or set of 'tags' as defined by the Xaml Schema of which there are a number of schemas depending on environment ie: WPF v.s. Silverlight.

Verb 1. The action or process of converting a visual asset or visualization into a Xaml(noun) based format for consumption in WPF/Silverlight related environements or tools. ex: I'm going to Xaml this image for you.

Monday, April 13, 2009

Indexablity for Search Engines in Silverlight

I saw a question as of late around the indexability of Silverlight for search engines much like an html based web site or web application. I know from my work with Microsoft and the Silverlight team that this has been taken into account and goes well with the toolablity story of microsoft. Compiled Silverlight is in a 'xap' file which is really a zip which is easily opened and any text based files, xml or xaml can be indexed and this was done with intent for this purpose. That being said that doesn't mean that all the of this is working up front as to my knowledge none of the spiders actually search zips yet but we expect that to happen at some point. Assumping that this happens then we want to make sure that our Xaml has logical names related to the content for all our x:name elements and that they are not only included in the application dll but as loose xaml in the xap.

Another thing to consider though is that as mentioned zips(xaps) are not indexed yet so it is a good idea to do the same kinds of things to our host files (actually is a good idea even if the zips are indexed) that you would do to optimized the page for search indexing. ie, meta tags, install experience code etc.

Happy Search indexing optimizationizing...

Thursday, April 9, 2009

Silverlight Simon and New

So this is only for 'testing' certainly don't go check it out unless your doing it to test. It is certainly not ready for public consumption yet... So I'm working on a new version in SL 3 of the hackingsilverlight site that I uploaded today for testing. This includes Silverlight Simon (Ariel did the design for this)

So check out the new design and I'll be adding the rest of the design over the next few months.

Wednesday, April 8, 2009

Silverlight 3 Fonts Loading or Not

Ariel ( built this cool Simon says UI in Xaml (remember the electronic version that first came out I think in the early 80's) and asked me to add some brains for fun :) the game logic is pretty simple enough by C# standards. Ariel even got this cool electronic LED looking font. So I got it all working and I noticed that once the score got above 2 the cool font started being not so cool. I thought this might be a messed up or incomplete font or something bizarre but Ariel mentioned something about loading only the parts of the font needed on render or only the part of the font need is compiled into the xap... ??? hmmm... I could see a hack coming on.

I put this bit of xaml in the simon control:

<TextBlock Height="56" Width="60"
FontFamily="./Fonts/ Readout" Text="0 1 2 3 4 5 6 7 8 9"
Visibility="Collapsed" /$gt;

I compiled Simon and played a few turns until it got a bove 2 and poof my score board was working with all the font elements I need and still w/o the characters I'm not using. Its a hack but works great.

Silverlight 3 LOB Apps

I did this email interview about building LOB apps in Silverlight 3. I think its worth a read if your interested in the topic. My main point is/was 'yes' its ready :) so check it out.:

"Silverlight 3 is on its way with tons of new goodies. But each technology has to be well accepted from the business users in order to be successful. But what can help the business to take such a decision? We, at, think that sharing experience is a good start.

This article is a part of our “Shared Experience” initiative that aims to give a place to every person or company that has experience in a commercial Silverlight product or project to share that knowledge. If you are one of them and you are willing to participate, download and answer our questions. In return, we will publish not only your answers, but a white paper of the Silverlight solution you have.

Let’s take a look at what David Kelley from IdentityMine has shared..."

Image Animations Problems in Silverlight 3

I was working on a new version of hacking silverlight (the sight) at mix using Silverlight 3 and one of the things I wanted todo was have more of a cloud sort of display of hightlights as opposed to a billboard and do this fakem up 3d using Faisels ViewPanel3D he sent me. it was all great but when the images animated to their new positions it was not smooth and no matter what I did I couldn't seem to be them to animation smoothly.

I talked to a few designers about this and some one mentioned pixel slitting or something like that so I did a bit of research (IE. paid attention to all the items in intellisence for images) and found a nifty setting that fix's the problem.

so it turns out there is not really pixel split or whatever it is they were saying or maybe there is under the covers but for pref reason it is turned off. So the magic setting that puts it back is:


which seems to turn this thing off so what I think happens normally is that Silverlight is moving the image to the next pixel as opposed to pixel splitting and that can make slow moving images look like they are jerking a bit. So the images then look like:

<Image x:Name="CloudImageElement" Cursor="Hand" Stretch="UniformToFill" Opacity=".8" UseLayoutRounding="False"
MouseLeftButtonUp="CloudImageElement_MouseLeftButtonUp" >
<DropShadowEffect ShadowDepth="5" Opacity=".7"/>

and this seemed to work great. :)

Saturday, April 4, 2009

Surface Everywhere

check out this TED conference demo doing multitouch sort of on any where. I can totally see this when I walk up to some one and then their shirt will suddending say this guy is an idiot so I know up front whom I am dealing with...

I totally want a 'six' sense...

Wednesday, March 25, 2009

Multi-Touch Gesture Engine

One of the cool things about Silverlight 3 is the new multi-touch support. From a UX stand point this is just awesome to provide this kind of functionality. I know this guy Andrew that works at Identitymine that wrote a gesture engine for Surface that is just awesome. He was showing me this on his tablet at MIX at one of the many dinners. Its just amazing in part as he is just a supper genious :) really but also the kind of UX this provides for Windows 7 apps and more is just amazing. anyway check out the press release :

its pretty slick and hoping he will port this to Silverlight 3 :)