HackingSilverlight

Turning XAML into an image (jpg) in WP7 isolated storage and to the Phone Media Library

2011-12-12T22:30:00.000-08:00

So one thing that has been kind a trick since the old avalon then wpf days was to be able to can a snap shot of part of the visual tree and make that an image so that you can clean up the visual tree from some xaml complexity and replace it with a plain image. I ended up trying todo with with my princess paper dolls app and found that its not as straight forward as wpf used to be but this works well enough with only a few lines of code. To start with you need to covert the UIElement root you want to turn into an image or rather a bitmap like this:

WriteableBitmap bitmap = new WriteableBitmap(480, 800);
bitmap.Render(master_03_14_2011, null);
bitmap.Invalidate();

So in this case 'master_03_14_2011' is the name of my canvas that holds the 'princess' in the app 'princess paper dolls'. Next I need to create a file name and convert the bitmap and store it to isolated storage

String FileName = String.Format("PrincessPaperDoll_{0:yyyy-MM-dd_hh-mm-ss-tt}.jpg", DateTime.Now);

var myStore = IsolatedStorageFile.GetUserStoreForApplication();
if (myStore.FileExists(FileName))
{
myStore.DeleteFile(FileName);
}
IsolatedStorageFileStream MyFileStream = myStore.CreateFile(FileName);

StreamResourceInfo sri = null;
Uri uri = new Uri("Princess;component/" + FileName, UriKind.Relative);
sri = Application.GetResourceStream(uri);
bitmap.SaveJpeg(MyFileStream, int.Parse(master_03_14_2011.Width.ToString()), int.Parse(master_03_14_2011.Height.ToString()), 0, 85);

ok so also we checked to see if the file exists before we try to write it and delete the old version. granted given how I'm creating the name its still kind of scares me to risk it. Next we do some clean up:

MyFileStream.Close();

Yes that was easy but now we need to use that stream again to get the image into the media library. First we create a stream again from the file in isolated storage.

MyFileStream = myStore.OpenFile(FileName, FileMode.Open, FileAccess.Read);
.

Now we can save it to the media library either to saved pictures or to the camera roll.

MediaLibrary library = new MediaLibrary();
Picture pic = library.SavePicture(FileName, MyFileStream);
//Picture pic = library.SavePictureToCameraRoll(FileName, MyFileStream);
MyFileStream.Close();

and some clean up and your good. unfortunately as of late there is no way to open up to the image in the media library.

So You Want To Build Apps?

2011-12-06T09:07:00.000-08:00

If you want to build apps for any number of mobile devices we thought we would provide those resources to you. The emerging mobile application space has exploded in recent years with developers even ametures making lots of money on the side with little marketing or other resources you would normally think of as having been done by a full company. From hobbiest to students and professionals ever one is building apps. Start by picking your poison (the platform you are interested in)

Android (Phone and Tablets)
Dominating the marketing but in a very fragmented way. Certainly the potential to really be the best platform if the carriers every can get out of the way. http://developer.android.com/index.html

iOS (iPhone/iPad)
The platform that started it all and arguable the best industrial design for mobile platforms... iOS. http://developer.apple.com/devcenter/ios/index.action

Cross platform Native(ish)
more or less a .NET environment like Java for mobile ...

Read the rest at: http://www.vnext.org/if-apps/so-you-want-to-build-apps

Those Darn Gray Box's

2011-11-10T11:01:00.000-08:00

(if you just need the hack er I mean 'solution' skip to the end)

ok so I was talking or rather tweeting with @ColinEberhardt about this issue with the gray box in IE on #wp7 (see his post at: https://github.com/phonegap/phonegap-wp7/issues/26). I've been working on my own HTMLApplicationHost Framework for doing HTML based WP7 apps and post this on codeplex: http://htmlappwp7.codeplex.com/ since what march I think. I've gotten 3 such apps in the Windows Phone 7 market place and one in Android that are HTML based. Here are a few links to some of those.

SMART Spending Habits: Windows Phone 7 (Deeplink, Paid version): http://windowsphone.com/s?appid=b44a9f3a-3480-4923-aa35-df26f6eb3c9e

SMART Spending Habits: Android 2.2 Version: https://market.android.com/details?id=com.SMART.SpendingHabits

I'm not sure I'm an expert at HTML phone apps yet but I do strongly believe that just about anything is possible and that there must be a solution to this gray box issue on phone 7 (wp7). So I took on the task of seeing what I could do. I started with creating a new phone 7 app that used my HTML Application Host framework etc (blah blah blah setting up stuff etc) so I got to the point of having my index.html page and started my tests in #wp7.

So the first test looked like this:

function test1() {
test1Location.innerHTML = "test 1 complete";
}

<div id="test1Location"><a onclick="test1();" href="http://www.blogger.com/post-create.g?blogID=887975141009593463#">test1</a></div>

running this clearly made the gray box... so I tried this:

<div id="test2Location"><a href="javascript:test2();">test 2

function test2() {
test2Location.innerHTML = "test 2 complete";
}

and as expected this made a nice gray box as well. So I tried this hoping it would work better:

function test3() {
test3Location.innerHTML = "test 3 complete";
}

<div onclick="test3();" id="test3Location"><u>test 3</u></div>

but alas this made a nice gray box too... *grr* so at this point I went back to Colin's post and watched the video and read a few other related posts then knowing that I didn't have a solution I had to try this:

function test4() {
test4Location.innerHTML = "test 4 complete";
}

<div id="test4Location"><a onclick="test4();" href="http://www.blogger.com/post-create.g?blogID=887975141009593463">test4 (will break)</a></div>

and yes this created a gray box AND blew up when the control tried to navigate to no where... and finally I thought I would try something else... yes this time a bit of a hack and messy, not very clean as such but lets take a look:

function test5() {
test5Location.innerHTML = "test 5 complete";
}

<div id="test5Location"><img onclick="test5();" src="http://www.blogger.com/test.jpg" width="99" height="99" /></div>

Amazingly enough, no gray box. Now this is kind of a hack but if I have to do this certainly this gets rid of the gray box AND using some design skills in PhotoShop or even paint.net or even just paint, I can create the image to look like any legitimate bit of rendered HTML... AND no gray box until the windows phone team can manage a real fix for this annoying bug...

APPortunties for Mango WP7 App's

2011-11-04T10:44:00.000-07:00

So there is a group of Silverlight/Phone 7 insiders helping with this contest to win some samsung slates running windows 8 and some free advertising for an app of your choice. There was a contest like this a few months back and certainly the free advertising helped me with my zillion apps so I'm hoping to win my self so you better get to it or I'll win (not that this would be bad ). Basically gets some Mango (also known as Windows Phone 7.5 apps into the market place, and no this doesn't count apps already in the market place and then go the link on this image blow and enter the super secret code: DKELL

HTMLApplicationHost Framework Posted to Codeplex

2011-10-27T15:38:00.000-07:00

One of my projects has been building an HTML Application framework for phone 7. Basically so I can build HTML5 based applications using HTML, JavaScript and CSS for mobile devices in particular Windows Phone but then being able to use that application on other platforms. Today I uploaded version 4 onto codeplex (http://htmlappwp7.codeplex.com/) which adds HTML Host Application back stack integration with the Phone's application navigation stack. On wp7 that means that when you hit the back button it doesn't just navigate out of the app but just to the last view in HTML making really applications easy to do that will get past the marketplace and into the hands of the public but even more important setting the stage for apps on iPhone and android using similar HTML5 based application frameworks.

The first app using this framework was the JavaScript application but now that test app is in the marketplace I've been working on a new real app called 'SMART Spending Habits', its a simple budgeting application designed to priority and sort your purchases automatically. Its a great little tool and it should be in the market place next week or so.

download the HTMLApplicationHost Framework Source code here:
http://htmlappwp7.codeplex.com/

The Metro Design Aesthetic and Windows 8 and the new Gesture Language

2011-10-12T12:22:00.000-07:00

In next months Seattle Interactive Conference check out David Kelley’s session on “Metro Design Aesthetic and Windows 8 and the new Gesture Language.”

Abstract: Building off the Metro Aesthetic designed for touch and mobile devices the new Windows 8 application model is wrapped around encouraging apps designed around the Metro Aesthetic. This session is about designing for metro, the use of touch and gesture in interaction design and implementation along with thinking around the new gesture types, and how the experience in the win8 Metro environment can be integrated into other experiences on the slate.

The Seattle Interactive Conference
When: November 2nd – 3rd
Where: The Conference Center at the Washington State Convention Center

About:
The first-annual Seattle Interactive Conference is a two-day...

read the rest at: http://www.interactseattle.org/?p=971

The Crazy Ones, One More Thing and Apple

2011-10-05T22:42:00.000-07:00

I found out today that Steve Jobs has died today. I know over the years I've had a love hate relationship with Apple, some of you know me for my work as a Silverlight MVP drinking the kooliade but in 1996 or so I was sporting my Powerbook 150 and doing some ANSI C in code warrior and waiting for the next edition of Mac Addict in the mail while I would fight with the Mac Toolbox. I still keep that power book on my shelf to remind me of where I started.

Steve Jobs was a visionary, no one was perfect and like most shining stars they were not always fun to work with but Steve Jobs vision for industrial design and out of the box thinking has really changed the world. In my industry with so many smart people coming up with cool stuff all the time, Job's has been in many ways our guiding light, raising the bar and moving civilization forward. Steve knew that it wasn't about what we could do as much as how we can do it with style. His life's work is littered with revolutionary work that has fundamentally broken us out of the box. Even at the big Microsoft Conference BUILD a few weeks ago looking at all the new hardware coming out next year... really it was all inspired by Jobs. He has made us all better and his loss no matter what side of the kooliade your are drinking is lose to us all. He inspired us, he changed us and his mark will forever be felt in the human family. It truly is a sad day when one of our brightest stars passe's and to all those in the community, at Apple and his family. Our thoughts and prayers are with you and we all morn his loss.

http://www.youtube.com/watch?v=8rwsuXHA7RA&feature=player_embedded&noredirect=1

Windows 8 and what it means for Silverlight and the coming Slate Wars

2011-09-19T07:53:00.001-07:00

What does Windows 8 mean to the Silverlight world?

To be honest the past year has been kind of a let down with some certain ms employee's saying this that or the other thing that really effectively killed most Silverlight work and its made me somewhat bitter about the whole thing. That being said I was trying hard to have a good attitude going into BUILD last week.

BUILD was really a lot of drinking from the firehose albeit I must say that I was right on most accounts. I knew about some improvements, I may have had access to a hacked version of windows 8 that some one might have let me play with so I knew some. Certainly new about XAML and C++ and HTML5 but really so much has changed. Last week reframed Windows in so many new ways.

First lets start with the basic's, Windows 8 cold boots in 4 seconds... I've tried it allot just so I can believe it... my Windows 7 dev box takes 30 seconds at least... unbelievable in a good way. The memory profile is something like cut in half and really Windows has been rebuilt from the ground up for all intents and purposes. That being the case on the windows front things are good architecturally speaking but everything isn't a bed of roses.

So what is wrong with Windows 8? In all fairness its only a developer preview so I'm not going to harp on things that are likely to be addressed as Windows 8 approaches public release. That being said I break my issues into 4 things and one is even not really Windows 8 but will affect Windows 8 adoption.

Starting with plug-in architecture... plug-in's work on the desktop side of windows 8, this is good however the problem is that plug-in's DONT work on the metro side. What this means is that grandma is going to click the ie icon and go to youtube or whatever and find it doesn't work for her and she is not going to understand and who is microsoft to dictate which sites we can go to. One ms employee told me that they didn't want their users to experience a non metro UI and everyone should upgrade to HTML5. HTML5 might be the direction of where things are going but users are not going to understand why they current stuff doesn't work and are just going to get frustrated. having to go into the desktop side of windows 8 is not going to work from a users stand point. its expecting a higher level of understand then should be expecting from users and its not Microsoft's place to say which web sites we can go to? really is ms going to act all self righteous like Apple?

Speaking of Apple, it seems that the manufactures got a clue about industrial design but more on that later.

Back to my issues, the second issue is XNA, ok xna doens't work. no xbox games on windows 8 and now fancy direct x... but wait that isn't exactly true. there is a whole NEW set of Direct X api's and though the old code is out certainly there is a good direction going forward and further some guy that will remain unnamed managed to get XNA running in a wrapper... still though if xBox games would run natively it opens the door to a whole new level of Windows Awesomeness that is going to be lacking.

My third issue is more of the awesomeness that could have been where Windows 8 pulls an Apple where even Apple doesn't pull one (good job Apple by the way). Case in point with Apple my iPhone apps run on iPad just fine. But Windows Phone Apps do NOT run on Windows 8. From Microsoft standpoint I know that Windows Phone 7 is not the same architecture as wp7 but really this is something consumers will expect I think. And if win8 supported wp7 apps then ms could say they have 30,000+ apps and its only a dev build. Not to mention I don't want to rewrite all 43 of my apps... maye only a few of them but not all of them...

Now my last issue isn't really Windows but actually a change to Microsoft's Gold partner program. Take our ([wire] stone) company, we are currently a Gold Partner and our work is used by Microsoft frequently to show the power of the Microsoft platform (2 of Ballmers keynotes in the past year). To be frank, Microsoft is making Gold Partnership tied directly to the sale of Microsoft sku's which means companies that just build the most awesome Windows based solutions have to pay a huge amount more in developer licensing then we did before. This gets back to the fact that we are an design/interactive agency that is primarily an adobe design shop that only delivers microsoft solutions as they help us delivery faster time to market solutions and lower dev costs, our work includes things like the Nike Touch Wall, the Microsoft Retail Software Kiosk, the Boeing 737 experience or the Jordan marketing campaign last year where people uploaded shoes and it was composed in azure into this huge Mosaic of Jordan. If Microsoft wants us to deliver stuff on the ms platform they need us to be Gold platforms or it is less cost effective to build ms solutions. After talking to many of my friends at other agencies it seems we are not the only ones that face this issue.

On the whole though it seems that the ipad finally awoke the sleeping giant, it was heart warming for MS to preach 4 hours of UX design to its core developer community. This was just awesome. Windows 8 is generations ahead of windows 7 and designed around touch. But also at BUILD we got a look at the new generation of hardware that seems to finally have taken a clue from Apple's awesome industrial design. Looking at the new hardware its no longer variations on a theme in black plastic. From brushed aluminum anodized in purple with embedded fiber optics to something vaguely like a Mac book air but the screen flips around and turns into a slate. Baring my issues above this level of hardware competition and Windows 8 will spark real competition in the market between all the devices and it all can only be good for the consumer.

David J Kelley Named Phone 7 Developer Hero of the Week

2011-08-31T14:02:00.000-07:00

Microsoft Names David Kelley Windows Phone 7 Developer of the Week Hero:

"David Kelley’s background in UX and as a Silverlight MVP set him up to be a great mobile app developer, which lets him pursue these passions as well as a third – speaking! You can catch David presenting about Windows Phone 7 at local events and some larger ones, like DevConnections.

If David could choose a superpower, it would be immortality … so he could finally have time to check off everything in his Outlook to-do list! And the man certainly is busy; he’s created tons of apps and is still going.

The app that’s closest to his heart is Princess Paper Dolls, with the animation & live tile modeling and voiceovers done by his 4-year-old daughter, Hanna. He watched her play a tablet-based app and decided to make something better for Windows Phone 7. David built the AllRecipes app Dinner Spinner with his team where he works, and created Tools for Phone 7, a.k.a. the “Swiss Army knife” of apps, to put all those handy apps in one place (duct tape not included).

David’s working on a few new apps including a framework for building Windows Phone 7 apps in HTML and JavaScript, so keep watching, developers—more great things to come from this developer hero! "

See the rest at: http://phone.microsoftplatformready.com/HeroesDetail.aspx?heroId=7

29 Ways to make your wp7 app killer and make money

2011-08-30T07:58:00.000-07:00

So you want a make a killer phone 7 app? make it into the top 100? well I've managed to have 3 of my apps in the top 100 and here is what I learned. Free Apps (1) are the only way to go. As a developer the best chance of success is to build a free app but further an app that is not specialized (2). That means a mass consumer focused app, such as Simon Said the game or Tools for phone 7 or Allrecipes. There are mass market consumer apps. Now an xbox title would be good but if you don't work for a game studio then you out of luck.

Now that you are building a free app that is for the mass consumer market how will you make money? Advertising (3) Advertising is the best way to make money from a free app. you add value and customer get the app for free and only a small amount of visual noise and your golden. Next you need an ad service. I recommend Microsoft AdCenter (4). Now when using the adcenter control you want to optimize its use as much as possible to not only help the adcenter target ads but mainly to get your eCPM value up which means more money. How do you do that? Once in your app ideally in OnNavigateTo do something akin to this:

(5) AdControl.TestMode = false;
(6) AdControl.Gender = Gender.Male;
(7) AdControl.PostalCode = "98104";

now you can't just set the zip code but if you have a way of extropalting that or just using Bing outright to get the zip from the geo-coordinates (8) then you can set the postal code. Also things like gender should be set ONLY if you can say your demographic is female or you KNOW they are female. Part of this is to actually get targeted ads which increases the likelihood of some one clicking an add which means higher eCPM values and further more money. In the XAML also set this value:

(9) RotationEnabled="True"

now lastly if the adservice is down then to still get some advantage put an ad behind the ad control to one of your other apps (10) or something like that. Further you can rotate those ads to more then one app (11) and then deeplink or market place link them to those apps.

One more thing about ad's is to make sure that the ad channel your using is as close to your demographic as possible. An example of this targeting would be if you app is primarily for fishermen then maybe ad's related to fishing? for example.

Now lets get back to the design, nothing is better then good UX. At the very least make sure you have some of the people you might now that are part of your target demographic and get them to use your app (12). and further 'pay attention' make it easy, make it discoverable, and use the metro aesthetic (13). So much has been done to help make that easy and using it gives you discover-ability for free. when doing metro also think simple. simple is always better for users...

Next think about analytics (14), albeit you need to do this in the end AFTER you have built your application but Microsoft covers the the cost of using an enterprise solution specifically Preemptive (the makes of Dotfuscator) to magically instrument your project. This allows you to see what users do most in your and helps you focus on further development.

Next look at a paid upgrade (15). This way if users get sick of your adds they have a place to go AND you get money. for the most part this seems to be the only reason for paid apps and that I can tell.

Next lets talk about updates. Update your application often. Each time you update your app it shows up on the latest panel in the market place which gets you more visibility (16).

Along the way a few other things might be helpful such as using live tile (17) that actually update for something related to the app. Apps with live tiles are just cooler.

Use touch and gestures, along side metro. Implementing things like 'list' with scroll and touch w/o interfering kind of thing (18). I see a lot of apps that have buttons or other 'click' or mouse like metaphors in a list box and that is not what I mean. Really this is about not using that kind of metaphor, but a touch metaphor where the list is the button based on the touch behavior, even if its just implemented using click and mouse events this can be done fairly well and users will enjoy the clean and reactive experience.

Now here is another brilliant idea... share your app and the deep link (19)... *gasp* I know it seems obvious but frequently people don't do it and I'm not sure why... what is social media for if your not going to post a few links now and then.

Also contests, enter them all (21) there are a lot of phone 7 contests and anything that gives you more exposure or better yet gives you app more exposure is bonus.

next consider your target market a bit and do some internationalization (22). For example if your dealing with formats like dates or even doubles consider the regional settings and test in them and deal with it. A case in point with floats for example is the difference between 11,5 and 11.5 which means you need to do something like this potentially:

_CurrentValue = _CurrentValue + Double.Parse(Results.Text, CultureInfo.InvariantCulture);

Another fun thing you can do that users tend to find interesting is if there is a fun easter egg in the app, a hidden feature etc (23) something fun that might even be mentioned in the app description so users know about it. Most of my apps have easter egg's.

Then there is tactile feedback (24), while there are some users that want to be able to turn this off in an application I have found that most users find it easier to know when they have done something if you use this feature. Tactile feedback can be as much as a 35 millisecond burst from the vibration motor on the phone. this might look like this:

// class or view members
private VibrateController _Vibration = VibrateController.Default;
private TimeSpan _ThisTime = new TimeSpan(0, 0, 0, 0, 30);
private Boolean TactileFeedback = true;

// called in any touch event
private void PresentTactileFeedback()
{
if (TactileFeedback)
{
_Vibration.Start(_ThisTime);
}
}

Ratings are also key to going higher in the market (25). Try putting a rate my app button or icon in the application to encourage users to 'rate' your app. In the event handler for this you might use code like this:

MarketplaceDetailTask Details = new MarketplaceDetailTask();
Details.ContentIdentifier = "29c27356-7862-e011-81d2-78e7d1fa76f8";
Details.Show();

Lastly get others that are your friends to rate the app (26) the more they rate the app the more your app shows up higher on search's based on the keywords (27) that you lovingly set in the app hub when you submitted your app. Oh yes and while your in the app hub, upload as many pictures as the market place hub will although including the background image if you ever want to be featured (28). With that happy app building. (and if you need ratings, rate mine and I'll rate yours 5 stars (29), assuming they are free or trail apps)

Parchment Apps Blog

2011-08-29T22:30:00.000-07:00

I've got something like 40 apps in the market place. mostly due to hacking up the tools app for Mary so we would get a zillion apps in the market to win this contest some time back but still there is like 13 serious apps and each one of those has a free version and a paid version or at least mostly. I think totally I'm up to almost 400,000 downloads and 8 million impressions and a total of 3 apps that were in the top 100. In any case, to manage the documentation of all the apps I finally decided to just use a blog... namely this: http://parchmentapps.blogspot.com/

CloudPlumbing - Podcast/Interview

2011-08-15T11:42:00.000-07:00

David Kelley (that's me), Principal User Experience Architect at Wirestone, talks about how UX should be a concern of everyone on the team and not just fluffy designer stuff. David has described his role as being the glue between designers and developers. He makes a strong case for both designers and developers to learn more about the other discipline for the sake of better communication and better products.

check it out here:
http://cloudplumbing.com/episode/david-kelley-interview

Book Review: Microsoft SharePoint 2010 Enterprise Applications on Windows Phone 7

2011-08-14T22:03:00.001-07:00

One of the most important developer space's on the Microsoft stack is the still emerging LOB app space for phone 7. This particular book is focused on SharePoint 2010 applications on Phone 7 which is an increasingly important sector of the increasingly important Phone 7 developer segment... yes I know a bit repetitive but still...

The thing in this book that really made it for me a "must have" for LOB wp7 folks is the fact that it separates the basic's skills need on each related platform (wp7 and sharepoint) and then includes the cross over elements of working with both platforms as well. Although narrowly focused this as I pointed out an increasingly important segment that this book is targeted towards and as an LOB developer sometimes myself its an important part of my collection.

The downside of this book would be the lack of depth for phone 7 and sharepoint specific information but that really is beyond the scope of the premise of the book so I can't fault that on the book but that also means that to make the most of this particular book you should probably look into something on sharepoint and another book on windows phone7.

remore about the book here: packtpub book site

Check out the book on Amazon at: http://www.amazon.com/Microsoft-SharePoint-Enterprise-Applications-Windows/dp/1849682585/

What is User Experience Design (UX Design) ?

2011-06-29T15:04:00.000-07:00

An article I wrote for Media Magazine:

Many people including you probably have no idea who I am and frankly sometimes I don’t know who I am but sufficeth to say my name is David Kelley and I’m a UX professional. Am I a graphic designer? Well no not really. Am I programmer of some kind? Not exactly but I can write some code. My title is ‘Principal UX Architect’ and typically I don’t even find myself dictating ‘architecture’ of any kind albeit I’m passionate about that too. My job when it comes down to it is communication, to bring people together and more or less be the chief Kool-Aid drinker.

What? Now you’re more confused than when we started?

Ok let’s dial back a bit then. My job is to help my team design an experience that fills a need and tells a story. To understand what that meant you really need to understand ‘User eXperience Design’ commonly called UX Design. If you look up what UX Design...

read the rest here:
http://www.interactseattle.org/?p=919

Using HTML App Host Tasks from the ECMA Script Context

2011-06-15T11:16:00.000-07:00

Using the task framework (http://htmlappwp7.codeplex.com/ and the taskprocessor are pretty easy. Basically it needs to look like this:

window.external.notify("Email:pieseczek@hotmail.com:Email from JavaScriptFWP7");

the format for calls are:

window.external.notify(" Task Name : Paramter1 : Parameter2 : etc ");

the current supported tasks include:

Email : To Email : Subject
SystemTray : Boolean Value
EnableFrameRateCounter : Boolean Value
alert : message value : message box title
play : sound uri path
vibrate : hours : minutes : seconds
MarketplaceSearchTask : app id
Analytics : Parmeters * n
MarketplaceDetailTask : app id
WebBrowserTask : URL String

There is also a custom event on the AppHostShell called ScriptNotify that allows you to extend what you can do with tasks for example in the code base the sample app does this extension from the custom event:

private void webBrowser1_ScriptNotify(object sender, NotifyEventArgs e)
{
switch (e.Value.ToString())
{
case "task1":
EmailComposeTask emailComposeTask = new EmailComposeTask();
emailComposeTask.To = "pieseczek@hotmail.com";
emailComposeTask.Body = "";
emailComposeTask.Subject = "Email from JSWP7";
emailComposeTask.Show();
break;
case "task2":
NavigationService.Navigate(new Uri("/About.xaml", UriKind.Relative));
break;
}

}

this gets around a limition with calling the navigation service that I'm currently working on.

Increasing App sales with Analytics: Free apps versus trials

2011-06-14T10:34:00.000-07:00

Since Sebastian quotes me I and supports the supposition that free w/ premium upgrade in great detail which has been more or less my mantra for several months I thought I would point everyone at his post(s):

Increasing App sales with Analytic's: Free apps versus trials: http://apps-are-people-too.blogspot.com/2011/06/increasing-app-sales-with-analytics.html

and also

Implementing Customer Feedback Forms AND fine tuning try/buy strategies with Runtime Intelligence: http://apps-are-people-too.blogspot.com/2011/06/implementing-customer-feedback-forms.html

Building an HTML/HTML5... Based Application for Phone 7

2011-06-07T08:00:00.000-07:00

So you want to build an HTML based application for phone 7, but wait there is not a way or at least a 'supported' way of doing that for phone 7. Why would you want to? For for starters wouldn't it be cool to have the same app/code base run on android and iphone. I realize a good portion of the 3 readers on my blog are probably aghast that I use the term 'iphone' (oops there it goes again) but in all honesty as an app developer it would be sooo cool to be able todo that. Let iterate some of the benefits: less time developing for multiple platforms, larger reach to my target demographic, really its not about the technology or the platform but reaching my target demographic.).

The obvious solution is to have a shell like a web browser control or web browser runtime using a local html file structure. But wait that is easy todo and I found that I can do that in Silverlight easy enough creating a HTML App Host Framework for phone 7. I got it working on the phone and couldn't think of a reason they would not let it go through. So I submitted a test app that was all HTML and JavaScript and what surprised me is it was accepted! (here is a deeplink if you don't believe me: http://social.zune.net/redirect?type=phoneApp&id=832ce0cd-788e-e011-986b-78e7d1fa76f8 )

So from here I decided to create a simple framework around this and post it on codeplex so others can build apps that are HTML/JavaScript based on this framework and have them deployed to the marketplace. To download the framework (dll) you can go to this link: http://htmlappwp7.codeplex.com/

Here is how to use it:

Using the HTML App Host Framework

the HTML App Host Framework current consist's of 3 critical parts. 1, the app host shell, 2, the html loader and 3 the task processor. For an HTML application developer you don't really need to worry about most of it but in the following context. To start you need to create an empty Silverlight application in visual studio and then reference the HTML App Host dll. Then you need to create a directory called HTML and add your HTML application to this. The HTML application can include html files, resources, images, css, script files etc and folder structure or whatever you need. On the downside you need to create a 'manifest.xml' file at the root of the html folder that maps all the files. This allows the HTMLAppHostFramework to consume your application and run it on the phone. Here is a typical manifest.xml file:

<?xml version="1.0" encoding="utf-8" ?>

<IsolatedStorageManifest>

<Files>

<File Name="index.html" />

<File Name="about.html" />

</Files>

<Directories>

<Directory Name="inc">

<Files>

<File Name="script1.js"/>

<File Name="script2.js"/>

</Files>

</Directory>

</Directories>

</IsolatedStorageManifest>

Basic a simple index of your html application. the trick here is that html assets can't be referenced directly from a xap to say a webbrowser control so the apphost used class called 'IsolatedStorageResourceHelper' to copy everything from the xap based on the manifest.xml file into isolated storage where it can be referenced and executed directly.

The next step is to edit your main page in your app to reference the AppHostShell and your html. The AppHostShell is used much like a webbrowser control but it extends the control to deal with the IsolatedStoargeResourceHelper' class and to expose Phone 7 API's to the script environment so that the script can call out to those API's through 'tasks' using the 'TaskProcessor' class. Also the AppHostShell exposes an event called 'ScriptNotify' so you can extend what is dealt with if there are special cases you want to handle in your own code.

After the HTML app is created, then added to the HTML directory AND you have finished the manifest.xml file, the next step is to add the namespace reference in the XAML of your start XAML page. I like to rename the default 'MainPage' to 'Shell.xaml' but if you do this you have to edit the master app manifest under properties to point at the new name or your app won't work. But you can leave it as 'MainPage'.

In any case, in this page the namespace reference should be in the rootnode and look something like this:

xmlns:HTMLAppHost="clr-namespace:HTMLApplicationHostFramework;assembly=HTMLApplicationHostFramework"

then you can add the control to the xaml surface generally you can just rip out everything in the page and replace even the root grid with this:

<Grid x:Name="LayoutRoot" Background="Transparent">

<HTMLAppHost:AppHostShell Source="/index.html" />

</Grid>

</phone:PhoneApplicationPage>

You'll note that now when you run the app your app on the phone will be entirely your app, well save the system tray and I like to turn that property off in the root node but you can do that in your javascript too using the task api that is created by the HTMLAppHost control.

If all of your app is HTML based you're done but if you need to call out to phone 7 api's from your javascript you can make calls like this:

window.external.notify("Email:pieseczek@hotmail.com:Email from JavaScriptFWP7");

Basically the syntax of the string is "[task name]:[param]*n" currently I've only added a few tasks like email but that I'll be adding much more in the coming weeks. Ping me if you use the framework for your app's, I'll give your app some social media love.

Tethering Windows Phone 7 - Hack

2011-06-01T14:32:00.000-07:00

One of the features people frenquently complain about with phone 7 is the tethering or lack thereof support. But alas there are a number of hacks out there for doing it. If you have an LG phone you could try this (at your own discretion, you of course should not try it...):

http://www.gadgeteasy.com/how-to-utilize-usb-tethering-on-wp7-running-lg-phone/

if you have a Samsung phone try this:

http://www.wired.com/gadgetlab/2010/11/easy-hack-enables-usb-tethering-on-wp7-phones/

again, if you try this and something goes wrong, its your fault. Please don't try this at home...

Monetizing Phone 7 Application Methods and Approaches

2011-05-13T15:29:00.000-07:00

The past 6 months have been a bit of a wild ride with Phone 7 going live and all the apps I’ve been working on. I guess I really started preparing for phone 7 the end of 09 heading into MIX 10 where I started building apps for the upcoming release. Going from 0 to making money with WP7 apps was kind of a long journey and this is my story, the story of Simon Said and my phone 7 obsession…

For several years there was this thing in the Silverlight Insiders (Super Secret Kabal of Silverlight Universe) about the upcoming new version of the MS phone/mobile platform and many of us knew about the two device directions and in fact knew people on the teams including the super secret design stuff going on in downtown Seattle. This kind of cloak and dagger thing drew our attention but most of what we had to work with for the longest time was conjecture, rumors and half truths. Thank goodness I wasn't a mobile 6.x MVP as I feel they really got the short end of the stick but the Silverlight MVP's had an awesome deal. Coming into MIX10 we had mostly all jumped on board and were building apps albeit for the longest time there were two few prototypes phones we could get our hands on that were weak and most of us were stuck with emulator which was horribly weak as well. (Currently we are still eagerly waiting for Mango, which is promising to be more awesomeness.)

Don't get my wrong, the Silverlight/WP7 team was working over time to get the new phone platform to market so the fact we got an emulator at all was great. Of course it wasn't long before this was hacked and we started getting our fingers into the OS and post the excitement of MIX11 the Dev community started to pick up momentum around the phone and building phone 7 apps. But the question in every bodies mind was will it actually make us money? and how could we be successful?

For the longest time no one wanted to talk about this aspect of the phone much, info was few and far between and hardly anyone knew anything or would tell you anything. Now that the market is open and we have been able to see some of the dynamics in action and some of us have made some money I'm hoping to help bring at least some of my experience to others. Let's start with understanding the basic revenue models that you can do on the phone.

Model 1: The Paid App

The paid application is the most basic model for making money. 'Free App's' do not constitute a revenue model by themselves w/o a more complex model. The idea of buying something, using the existing structure put in place, in a onetime fee sort of way becomes the most basic structure. On the good side this model is the most simple, you need only have a developer account ($99 typically albeit there are MS rebates if you get 2 apps into the market place), the tools which are free and an application. Issues with getting things approved aside, it’s just not hard to do but most of the people I know have not made money at this (at least not a significant amount). For the most part given the current market conditions and the expectation of free apps that developers have themselves propagated by educating the target demographic about the evils of paid apps has made this model difficult to use. The success that I’m aware of with this model have come with primarily with strong 'existing' brands and lots of marketing (any Xbox Live game as an example).

Model 2: Paid w/ Trial

The paid with trial model for making money is really just a variation on a theme from the first model and is only marginally more successful. For the most part all the examples I refer to about Paid apps is basically this model. So unless you have a good Xbox Live company you work for… its not likely you will be successful. Now that certainly can change as the market changes which will happen as the Windows Phone market becomes increasingly viable but not yet.

Ok so how I can Make money with phone 7 apps?

Model 3: Free w/ Advertising

The idea here is that an application is free to the user but you basically sell ad impressions to an ad service such as Microsoft AdCenter and show the ad’s in your application. Companies pay firms for the said advertising. The best part of this model is that it works. A good, well designed application that is targeted to a general demographic will work great. There are problems and complexities to this model but it is achievable to the average developers... When you are talking about AdCenter it really comes down to targeted ad’s. The better you can target your app’s ads the better your 'ecpm' value is which translates into more money. 'Ecpm' basically standards for how much a 1000 impressions of an ad are worth in your application. I’ve tested this and certainly the more you can tell the AdCenter control about your user and the more your ad’s are something that would interest your users the more money you make.

Model 4: Free w/ Paid Version

This model is basically a way of driving sales to a paid application. I’ve seen this one tried but with little success so far. I suspect this might become more viable as market dynamics/conditions change allowing more sales of apps to take place as a larger market share is formed around Windows Phone 7.

Model 5: Free w/ Advert w/ Paid Version

A forth model is a variation of the third. This model really doesn’t make a lot more then model 3 but I think it is well positioned to take advantage of how the market dynamics will change over the next couple years. What this model is, is two applications like model 4 but focused on advertising in the short term as revenue stream. In this model you have an application that is free with advertising that is also driving sales of a paid version. In most cases where I’m seeing success is when the free version is very popular with a built out feature set and not handicapped but at the same time the paid version looses ad’s but also might ad some premium feature. A simple example is that I have a morse code application in the market place that is free with a rich feature set from saving code blocks, sending and transmitting code etc. The paid version of course is w/o ads but also has a complex sound transcoding feature but for the most part the feature set is the same short the one. Then the free version doesn’t expire, is a good free app but also passively drives paid sales. Have a free app tends to drive many, many more eye balls and downloads.

Model 6: In App Purchasing/Purchase Upgrades

Ok here is a six model that can be used with the others and that is in app purchases. There is no market place support for this but if you have the ability to roll your own certainly it can be done. What this means is that in your app either paid or purchased the users has the ability to pay for additional elements, features or other purchases as defined by the application. Basically if you want to write the code you can do this but there is no current support for it however there is a nifty hack I learned about primarily it looks like this… You have this app, and then you have other apps in the market place are packs or expansions for the first app. These ‘pack’s give you a code or other set value that allows you to ad more elements to the first app, maybe some under the covers sync etc. A cool idea but really a bit of a hack and could be cryptic for users.

Case Study: Of a free app?

I have this one application in the market called 'Simon Said' that is now in the top 100 most downloads apps. This started off some years back with a demo project called 'Silverlight Simon' to show how to build composite WPF/Silverlight assets and controls. 'Silverlight Simon' being the case in point. Over the course of several years and 2 mvps 'Silverlight Simon' was in Silverlight, WPF, Surface, Azure, OOB and then the phone came along so I took the existing Simon game control and put it into a Phone 7 application shell and submitted it to the market place just to see that it could be done. At the time I didn’t really think it would be big but I did add the AdCenter control as I was trying all the basic models I could think of. ~3.9 million impression’s later and ~150,000+ downloads I’ve learned a lot about phone 7.

At first people would download the app and get upset that the animations lagged or the timing was slow but I was just focused on testing so Ignored this as the app description talked about this only being for testing and demo purposes but I kept getting issues and less than stellar ratings. I finally realized that there were tens of thousands of people downloading the app so I finally capitulated to building a new version optimized for the phone.

Now the Simon Says is basically a picture of Simon, 4 paths and a text box plus an app bar and the ad control and some code. The highly complex XAML that made of Simon needed to go and that turned out to be 90% of the problem. Most of the other features are implemented as separate views and a combination of a good design, well built app, a degree of familiarity and the AdCenter Ad control and the app being free has continued to drive the apps popularity as one of the top apps in the market place. Of course some guerrilla marketing helps too, a few blog posts, videos etc and its all good but as of late, if you’re a one man or women shop, free with advertising is the way to go.

A Letter to Some Listing to Silverlight Haters...

2011-05-12T09:16:00.000-07:00

Deborah;

I guess up front this topic is one of my hot buttons but I’ll try to be as even as possible in my explanation. But in fairness I do have a vested interest in Silverlight as a Silverlight MVP for the past two years, a published author and professional speaker as well as being one of the Silverlight insiders at Microsoft… besides having a vested interest it also puts me in the know as it were.

First WPF or ‘Windows Presentation Foundation’ to say is dead would be on par as saying Windows is dead as WPF is the primary method for building native applications on Windows. VSTS is in WPF, most other ms products are written in either WPF now or are C++ written in VSTS which is in WPF. That notwithstanding, there hasn’t been as much excitement about WPF as most of the industry talk has moved on to other things, even the last version of WPF was more or less a support release. Where all the talk in the ms world is as of late around Kinect (oh but all of these apps are WPF or C++), Phone 7 (which is XNA/Silverlight) or HTML5 (which the browser is written in WPF on windows) etc. WPF is therefore for native Windows Only applications. WPF primarily consists of XAML markup and C# code.

Silverlight which is also XAML markup and C# code, is a cross-platform lite version of WPF (Silverlight was first called WPF/e), it is cleaner with lighter overhead and runs on Mac, Linux, phone7, Symbian, CE, windows etc.

Last year ms decided that the HTML standard moving to 5 was a good thing and that they would support it for cross browser applications but that was never what Silverlight was about. During PDC last year (MS Professional Developer Conference) a former ms employee that at the time was senior vice president… Bob ‘what’s his name’ was interviewed on TV and made some less then well thought out comments about Silverlight which started this silly-ness about Silverlight being dead and ms has been doing damage control ever since. In Dec they announced the feature set for Silverlight 5 coming out later this year and demo’d features like pinvoke, native 3d and hardware acceleration even on the mac and XNA support built in. Silverlight is also the primary method for building apps for Phone 7 which ms is basically bet the company on. They will make it work which means supporting Silverlight for the foreseeable future. Silverlight is for building immersive cross platform user experiences and high end video, LOB apps that are cross platform etc. Developing Silverlight is for the most part the same as WPF, if you learn one, you can do the other easily.

One last point is that I work for an interactive design agency of almost 200 and we are primarily an Adobe shop. We do things like the Nike Touch wall or the Jordan retail kiosk, or the Microsoft Software Kiosk in the new MS Retail Store’s etc. Our clients don’t care about technology and projects should generally never be about the technology but the best way to deliver the Best Possible User Experience to the target demographic. I believe in this more than anything and is also way I helped start ‘Interact Seattle’ – designer developer interaction group. We meaning ‘[wire] stone’ deliver most of our work in WPF or Silverlight as our time to market is double our competition over say Flash which used to be our primary delivery model for interactive designs. Silverlight allows us our dev teams to build almost directly against illustrator files so that we are able to not have a design team or a dev team but a single team working together. In short as mentioned it cuts time to market in half once the dev’s and designers learn to work together and the designers can continue to use their tools they are used to. Therefore for business reasons we continue to use Silverlight…

I hope that helps :) please feel free to ask any questions and if you are in Seattle feel free to come by our office.

Sincerely;

David J Kelley
Principal UX Architect, MVP
[wire]stone | Blog/Site | {Interact} | SeattleSlug
twit: @DavidJKelley

Creating Borders in Silverlight

2011-03-08T23:48:00.000-08:00

So this might seem simple enough but I was asked a couple times recently so I thought I would put a post out there on topic, ok so its more of a half tweet half blog post as its pretty simple but here is how to create a 'border' in silverlight without some hack on a rectangle or some sillyness.

<border borderthickness="20" background="white" borderbrush="Green" padding="3" cornerradius="10" >
<textblock text="Hello World" />
</textblock>
<border/>

So here you can see that you have some basic properties you can sent, like color, padding, thickness but intellisence in visual studio will tell you all you need to know. and thats it, that is how to create a use a 'border' in XAML in Silverlight.

Simple Twitter Integration

2011-02-23T06:18:00.000-08:00

A few posts ago I did a quick post on simple Facebook integration but in HTML . Twitter is even simpler and this method can be applied to Silverlight easy enough. First lets look at the HTML version:

<a href="http://twitter.com/share?url=http://www.HackingSilverlight.net&text=check out this awesome site&via=DavidJKelley"
>Tweet</a>

you can see that basically its just a hyper link to the twitter share URL but it adds 3 query string parameters namely URL , text and via. URL gets parsed into a short URL by twitter and then the text is inserted and then a note about what user it came from meaning in this case the twitter would be something to the effect of:

check out this awesome site http://t.co/nn6oQN8 via @DavidJKelley

keep in mind that users will have to login and the tweet will be posted as them.
In HTML rendered the above code would look like this in your browser:

Tweet

now from Silverlight in C# it is about as simple with something like:

System.Windows.Browser.HtmlPage.Window.Navigate(new Uri("http://twitter.com/share?url=http://www.HackingSilverlight.net&text=check out this awesome site&via=DavidJKelley"), "_blank");

this would do effectively the same thing opening a new browser window and ask them to login to twitter and then let them post the same thing. Nice and simple :)

Bytes by MSDN: David Kelley and Tim Huckaby on building applications for Windows Phone 7

2011-02-16T14:03:00.000-08:00

This week, meet MVP David Kelley, Principal User-Experience Architect at Wirestone, as he is interviewed by Tim Huckaby, Founder of InterKnowlogy. David and Tim discuss the user experience on large screens, such as the Nike touch wall, and small screens, including Windows Phone 7. David offers tips on how to build applications on Windows Phone 7, using Metro as the aesthetic, with a rich user interface.

watch the video at: https://channel9.msdn.com/Blogs/Bytes+by+MSDN/Bytes-by-MSDN-David-Kelley-and-Tim-Huckaby-on-building-applications-for-Windows-Phone-7

Silverlight TV 61: Chat on Deep Zoom, Touch, and Windows Phone 7

2011-02-16T11:15:00.000-08:00

Thinking about writing a touch intensive Windows Phone 7 application? In this episode, David Kelley of Wirestone shares his experience creating rich experiences with Silverlight. David has been involved with many high profile applications and he shows off both the Jordan Deep Zoom mosaic and his Simon for Windows Phone 7 application that's in the marketplace (for free). This is a great discussion with a Silverlight user experience expert.

Watch the video here: http://channel9.msdn.com/Shows/SilverlightTV/Silverlight-TV-61-Expert-Chat-on-Deep-Zoom-Touch-and-Windows-Phone

Jordan Mosiac: http://www.jumpman23mosaic.com/

MS Retail: http://blogs.msdn.com/b/mvpawardprogram/archive/2011/01/04/achieving-digital-zen-in-retail.aspx

DeepLink for Simon on the phone: http://social.zune.net/redirect?type=phoneApp&id=65c23c5b-73e9-df11-9264-00237de2db9e

App Development for Windows Phone 7 101

2011-02-11T13:23:00.000-08:00

App support for the Windows Phone 7 platform is occurring at an accelerated rate. At one time the quantity of available apps was in the hundreds, now it’s in the thousands. Some of this acceleration is due to a relatively straight forward and clearly-defined development platform. This article explains the basics of developing an app for the Windows 7 phone on both the Microsoft .NET and XNA development platforms. Whether you're programming an app that'll be placed for download, or developing a premium app on your own web hosting services, this article is designed to help get you started.

Application development for the Windows Phone 7 is accomplished through the help of the Microsoft .NET application programming interface (API). The .NET development platform supports multiple languages and executes from within a common language runtime environment. Two different frameworks can be used to develop apps. One is the Silverlight application framework and the other is the XNA framework.

Microsoft Silverlight is a browser-diagnostic development platform built on the .NET framework that utilizes a variety of technologies that support a multitude of programming languages. Microsoft Visual Studio is the primary application used in the Silverlight platform and it is also shared with the XNA development platform.

The XNA development platform is a development framework that utilizes XNA Game Studio. XNA Game Studio is a managed-code class library designed specifically for game development. Its advantages are an easier learning curve with a free toolset. Apps using XNA Game Studio are playable on a variety of gaming platforms, including Windows Phone 7.

The first step in developing apps for the Windows Phone 7 is to setup the proper development environment. At a minimum, Windows 7 or Vista and a DirectX 10 compatible graphics card are required. Go to http://create.msdn.com/en-us/home/getting_started and follow the instructions to install all the free development tools. These include:

- Silverlight
- Visual Studio 2010 Express
- Windows Phone Emulator
- XNA Game Studio 4.0
- Microsoft Expression Blend for Windows Phone
- .NET Framework 4

To begin creating your first app, perform the following steps:

1) Open Visual Studio 2010 Express. This may take a few minutes, if this is the first time Visual Studio has been run. It will initialize various settings. When this process is complete, Visual Studio displays a startup page that lists a variety of information.

2) Click the “New Project” link from the menu bar on the left side of the GUI. The New Project screen displays a variety of templates.

3) Click “Windows Phone Application” from the list of templates. The template name appears highlighted.

4) Enter a project name in the “Name” field towards the bottom of the GUI.

5) Enter a name in the “Solution Name” field towards the bottom of the GUI.

6) Click the “Create directory for solution” check box above the OK button. This assists in organizing your project.

7) Click the OK button. The new project is created.

After the project is created, Visual Studio loads and displays the contents of a file called MainPage.xaml. The GUI is in design mode with the left pane showing how your application will look on the Windows 7 phone and the right pane showing the code. At any time you can press CTRL+F5 to compile the current code and run it in the Windows Phone Emulator. While developing, any changes entered on the right development pane will display on the left pane.

At this point, you’re ready to begin app development using the Visual Studio editor. Visual Studio provides an effective platform to develop code and there are a number of online resources available as well as WP7 Help hosting companies to assist during the development process. Here are a few that are worth bookmarking:

The App Hub website is an excellent resource for Windows Phone 7 development with lots of tips and downloads just a mouse click away. http://create.msdn.com/en-US/

The Windows Phone Developer Blog is also an excellent site for information.

For those seeking to develop games in the XNA framework, it will be necessary to have a rudimentary grasp of the C# language. The XNA environment has some limitations in terms of use. For example, it doesn’t support drag-and-drop and it’s necessary to have a more firm grasp of C#, but, as with programming with Visual Studio, there are a number of websites that offer help using the XNA framework. The Microsoft Beginner Development Learning Center at http://msdn.microsoft.com/en-us/beginner/default.aspx is an excellent place to learn more about C#.

Programming in the XNA framework requires the same minimum graphics requirements as programming in Visual Studio. The XNA Wiki (http://www.xnawiki.com/index.php?title=Graphics_card_compatibility ) contains a list of graphics cards that are compatible with XNA Game Studio.

The following steps describe how to begin programming in the XNA framework.

1) Ensure Microsoft Visual Studio is installed, as explained earlier.

2) Install the latest version of Microsoft XNA Game Studio. Only install this application from the Microsoft website. Some mirror sites offer compromised builds. Play it safe and always download the installation directly from Microsoft. XNA Game Studio 4.0 is available at http://www.microsoft.com/downloads/en/details.aspx?FamilyID=9ac86eca-206f-4274-97f2-ef6c8b1f478f

3) Start the Visual Studio application.

4) Click “File” and select “New Project”. A dialog box lists various tree nodes, each represent a project type.

5) Select the “XNA Game Studio” tree node. This is located under the “Visual C#” node. A list of projects displays in the right pane.

6) Select “Windows Game” in the right pane.

7) Enter a project name in the “Name” field on the lower portion of the GUI.

8) Enter the directory path in the “Location” field. This defines where the new project will be created.

9) Click the OK button. The new project is created and the GUI switches to code entry mode.

You are now ready to begin developing your game within the XNA framework. Refer to Getting Started with XNA Game Studio Development for a development tutorial.

When you create your new project, the basic code structure is automatically created for you. Within the code that has already been inserted, you can now add various methods and loops. Here’s a brief rundown of the code elements you will want to learn and explore:

- Draw loop: (http://msdn.microsoft.com/en-us/library/microsoft.xna.framework.game.draw.aspx ) Used to define frames and screen-render backgrounds and objects.

- Update look: (http://msdn.microsoft.com/en-us/library/microsoft.xna.framework.game.update.aspx ) Used when processing game logic, such as object movement, user input, or processing simulation data.

- Initialize method: (http://msdn.microsoft.com/en-us/library/microsoft.xna.framework.game.initialize.aspx ) Used to load any nongraphic resource.

- LoadContent method: (http://msdn.microsoft.com/en-us/library/microsoft.xna.framework.game.loadcontent.aspx ) Used when loading graphic resources, such as textures and other graphic elements.

As stated, this article is designed to get you started developing apps on the Windows Phone 7 using either the Microsoft Silverlight development dedicated server platform or XNA Game Studio Developer. Links to helpful sites have been provided, but this is only a start. There are extensive information available online and it is strongly recommended that each person perform their own research to locate the proper resources, tutorials, and code samples.

With the proper applications loaded and ready to go, websites bookmarked, and resources and code samples at your fingertips, you’re now ready to explore the exciting development opportunities offered for the Windows Phone 7 platform.

HTML 5 Is Dead!

2011-02-02T15:52:00.000-08:00

“gasp” what? How can that be? What can this guy be talking about? What can this blogger possibly know and why would he say something so sacrilegious? I’m aghast…

I’m sure that is the kind of response that many of you are having when reading this article but I wanted to make a point, with all the excitement around HTML 5, not so much that its bad but people seem to be in one camp or the other and few are looking at the big picture. Yes HTML 5 is awesome and all but many of the ‘HTML 5 is awesome’ crowd is saying other RIA technologies are dead and it is just not logical to make a whole sale generalization like that and it drives me nuts. I hear things like ‘Flash is dead’ or ‘Silverlight is dead’ (even from some less then razor sharp micrsoftee’s).

HTML fine is the foundation of all our content on the web and all but a technology whose last major version is 10 years old is not making rich immersive technologies like flash out dated? That’s just crazy. Flash and Silverlight both in particular have proven over and over again that they iterate faster and more importantly ‘innovate’ faster than more open technologies like HTML. Both of those technologies do more, better and faster than HTML 5 and are more cross platform, more tool-able and have better dev/workflow stories across the board. But why do people put these technologies up against each other at all? That’s like saying apples are better than oranges? They are just different.

HTML 5 is a cross platform long term foundation for web based content and web based apps and great it now is more richer then before but RIA technologies such as Flash and Silverlight both are not nor have they ever been dubbed as a replacement for HTML (at least not anyone I know). These technologies both live out of the browser and are ways of delivering on all the promises that Java first made when it came out. Rich cross platform immersive UI experiences on so many platforms from droid phones to xbox to browsers and desktop apps.

HTML is for the rich distributed web stuff and Flash and Silverlight is for immersive experiences that may or may not be on the web at all. HTML in the browser or maybe even an HTA sort of app and Flash/Silverlight is for UX that leaps out of the browser. HTML 5 is cool but that doesn’t mean that more powerful RIA technologies are dead. To each his own and to each problem space its technology; there is room enough for it all. Let’s all be a bit less zealous about things and focus on building better apps regardless of the technology you want to use.

Heck if apple had any since they would get flash on the iphone for building cool apps so we don’t have to use that objective C…

Achieving Digital Zen in Retail at MIX11

2011-01-25T08:32:00.000-08:00

Vote for my session at mix11:

Abstract:

The road to Digital Zen in building cohesive, immersive experiences in retail from the web to touch walls in the real world can be long. This session is about the long road to designing building and implementing real world experiences that go from the web to brick and mortar using real world examples including the Nike Touch wall and the Microsoft Retail store and more using technologies like WPF/Silverlight. The session will touch on design elements including topic on and off screen from hardware, software, sensors and mobile devices like Phone 7.

Vote here: http://live.visitmix.com/OpenCall/Vote/Session/87

and don't mind the cats...

'Extending' Your Phone 7...

2011-01-13T10:00:00.000-08:00

So I can't condon hacking phone 7 outside of the context that MS has provided in any case... however it can be done easily enough.

I've found that it is straight forward enough to hack. One thing that has bothered me with the phone was the default accent colors on the phone are lame. for the most part I don't really like any of them. One way to fix it is this app you have to side load, called advanced config. Currently it only works for HTC but does let you test registry hacks on phone 7.

You can get the app (xap) from here http://www.touchxperience.com/

In this case there are a number of cool phone 7 hack apps. but for me having a nice steel gray just makes the phone more zen.

Again I'm not responsible for you mucking up your phone... don't do any of this...

Achieving Digital Zen in Retail

2011-01-05T13:24:00.000-08:00

"My “thing” is more or less about embracing the digital space, integrated experience, and fluid emotional connections with a target demographic. I want to hear “wow that’s cool!” That’s when I know it’s a success. That was our goal with the on-demand software kiosk my team at Wirestone and I created for the new Bellevue Microsoft retail store.

Microsoft’s developer centric approach (“Developer, developer, developer!”) has put the experience with Microsoft tools at least a decade ahead of everyone else. Now we need to look beyond the developer centric approach and more and more focus on a user centric approach.

..."

Read the rest and watch the video here:

http://blogs.msdn.com/b/mvpawardprogram/archive/2011/01/04/achieving-digital-zen-in-retail.aspx

Simple Facebook Integration

2010-12-22T13:27:00.000-08:00

So strickly speaking this isn't about Silverlight but it is cool and relates a bit to what I do when I blog or build sites that use Silverlight. Basically here is how to add a facebook 'like' feature to any site. The HTML looks like thus:

<iframe src="http://www.facebook.com/plugins/like.php?layout=button_count&show_faces=false&width=80&action=like&font=lucida+grande&colorscheme=light&href=http://www.hackingsilverlight.net/" allowtransparency="true" style="border: medium none; overflow: hidden; width: 80px; height: 21px;" frameborder="0" scrolling="no"
> </iframe>

when you run that html is should show up in your browser like this:

[ > ]

So going back up to the html code above you'll note its all an iframe referencing the facebook 'like' php file via an http reference (url). when looking closely we can see that there are a number of query string parameters. for the most part the only one you need to edit is the last one which should be the url of the page in which you embed this html. and thats pretty much it. :)

Making the MS Adcontrol REALLY work on phone 7

2010-12-07T14:24:00.000-08:00

So you want to use ad's in your windows phone 7 apps as a revenue stream and you followed the directions and it seems like it 'may' work but alas everyone that that has your app never see's an ad and come to think of it you haven't either save the test add...? Hmmm...

You went out to this site:

https://pubcenter.microsoft.com/Login

and created an 'ad unit' and gotten an application id for your app.

you then have downloaded the phone 7 ad SDK from this link

http://advertising.microsoft.com/mobile-apps

included and referenced the ad DLL and created the xaml that looks to the effect of :

(at the top of your xaml)
xmlns:advert="clr-namespace:Microsoft.Advertising.Mobile.UI;assembly=Microsoft.Advertising.Mobile.UI"

(some where on the page)
<advert:AdControl x:Name="AdvertControl"
ApplicationId="[Guid here]" AdUnitId="[ad unit id here]"
AdModel="Contextual"
RotationEnabled="True" Width="480" Height="80"
Margin="0,-1,0,0" UseLayoutRounding="False" VerticalAlignment="Top" d:LayoutRounding="Auto"
d:LayoutOverrides="Height" >
</advert:AdControl>

you've compiled and uploaded and even went so far as to test your app using the test values they provide for the application id and ad unit id... your app is approved but your not getting any hits...

hmm... what you have over looked... oops they left out one tiny detail... at least in all the directions I have found... in your constructor or in our override onnavigateto try adding this little bit of C#...

AdControl.TestMode = false;

really? as much as it makes me tired all over... yes this is all the magic I needed todo...

Windows Phone 7 Socket Support...

2010-12-03T21:47:00.001-08:00

or not...

if you have a dev account and or otherwise unlock your phone you can run unmanaged code... again Jeremiah does a wonderful hack with source using sockets on phone 7... don't worry this is another hack that won't get through the phone 7 market place vetting process but its fun to play with. check out Jeremiah's project here with source code:

http://groups.google.com/group/wpf-disciples/browse_thread/thread/e8f14483a41e6b0d

What I tell Designers to give me... Integrating and Digital Zen

2010-12-03T11:52:00.000-08:00

Having composite teams with designers, integrators, dev's and the like on staff on the same time and working all in a unified set of tools like say, Expression Blend, Visual Studio, Silverlight etc etc etc for most of us is a luxary that we don't have. I have worked on teams like that and its awesome and all but not realistic all the time. Wirestone (the company I work for) is a great example what I would call the best interactive experience design firm in the world especially in the public facing/retail space (kiosks, touch walls, media marketing integration, social media marketing etc). We are truely awesome... But amazingly enough even though alot of these experience we build are based on some XAML related technology it doesn't mean that we have a zillion designers in blend for example. Like us it is not cost effective from a business standpoint to retrain all the designers out of Adobe, nor are most designers eager to switch...

Your response probably depends alot on your background. If you a ms zeolot you might think, why the heck not? if your a designer you might think 'dah' and there is a spectrum in between but as it turns out the biggest reason that its not cost effective is that there is a way... a straight and narrow path to a User Experience 'Zen' like team that works much like the above w/o using all microsoft coolaide (*gasp).

shhh... don't tell the ms ninjas...

As it turns out Microsoft did a bang up job with expression blend and probably the key thing is that blend does a wonderful job of importing adobe assets so well in fact that with a little bit of communication and learning to work together we still are able to achieve that zen state of designers, developers, IA's and the like working together at the same time on design and implmenetation. But there is a bit of a list I like to give my designers :) (don't worry there is another list for dev's;) for work on digital experiences

item 1. a pdf of everything they send me showing what they see looking at the assets (wiresframes, comps, redlines etc) native format is awesome too.

item 2. all typography with any font of any element that could maybe ever be dynamic as part of a digital experience I want a PSD typographic red line.

item 3. TTF's for all the special fonts that didn't come over in the PSD typographic red line.

item 4. all the UI elements are in AI (Adobe Illustrator). why? because it comes into blend almost as native XAML as its all vector based.

item 5. make sure all the elements are grouped in illustrator and named with something meaningful to humans... :)

item 6. illustrator elements must be inside the illustrator canvas or they don't work at all.

item 7. communication, communication, communication. talk about it. lets design together, walk me through the vision.

item 8. be nice to developers, not all of them understand the difference between Verdana and Helvitica nor do many of them appreciate the difference between padding=5 and padding=5.56793845. they are handicapped that way frequently.

now we can build some hot and sexy ui which is the only way I like my ui. if I don't have an emotional experience when I look at the ui the first time its not good enough.

From a business standpoint its not cost effective to re-train and re-purpose when we can do the same thing and still keep people in the tools they enjoy.

note: there is also a rumor aobut FXG files but I haven't tried yet but promises to be better the AI files.

Performance Optimization on Phone 7

2010-12-01T13:26:00.000-08:00

A preview of an article I wrote for Code magazine. For the rest you'll need to wait for the magazine to come out. (oh and this is the unedited version so don't get to upset about things like passive voice or other what I call minutia)

For those of you that know me, you might wonder why I would be writing an article on Performance Optimization for Phone 7, I mean sure it’s Silverlight; and phone 7 has this coolness factor but I always talk about User Experience right? So what gives you ask?

Well when it comes down to it, without performance you don’t have much to experience. The dirty little secret is that performance optimization is a critical often ignored part of good user experience design more so when we are talking about a device barely bigger then a pocket calculator. Time and time again I’ve seen user studies where users see nothing changed for 2 seconds and they navigate away or otherwise assume the application is broken or the device is broken or the web page is broken. Users have no patience and the worst part is that 99% of performance optimization is… wait for it… managing user expectations or in other words ‘perceived performance’

Perceived Performance

Perceived Performance, what is that all about? Perceived performance is the difference between letting the user know that your app is doing something (by say using a loading animation) verses just a black screen. In fact much of the requirements around getting Windows Phone 7 applications into the market place are about perceived performance. Take the preloaded image that is included in your default project, if you don’t have one of those preloader images in your application then your application had better be bleeding fast or no market place for you. Applications only get a few seconds before they have to be up and loaded. For building ‘perceived performance’ and a great user experience start here with a custom preloader. Don’t just go with the default from visual studio either:

Figure 1: Default Splash Screen Image From Visual Studio

Start by building anticipation on phone 7 for your application with making this default preloader screen cooler or more ‘engaging’. You’ll note that in the default project this file is called ‘SplashScreenImage.jpg’. When you edit this file make sure it stays a ‘JPG’ too. JPG rendering on phone7 is much faster than PNG’s and certainly don’t stick other formats on your phone. The one exception to this would be using PNG’s when you need transparencies for example when making app bar icons. Here is an example of a great preloader that builds anticipation:

Figure 2: Customized Splash Screen Image

In this case the user is so caught up in the preloader that in this example the user generally wants to figure out how to get back to this preloader screen. Not only does this build anticipation but the user is generally so engaged that they don’t even notice the slow load and even might complain it loads to fast.

Perceived performance is about engaging the user quickly even if you app isn’t ready and this was one example. If you expect to sell your app your UX (User Experience) needs to be more than just a pretty face it needs to be highly optimized even if that just means perceived optimization. Let’s look at other ways we can make our apps scream.

9/10s of the law

Perception is 9/10s of the law figuratively but after the splash screen what is next? After your splash screen or preloader is thrown up on the screen next your app has the chance to load. Making sure you app loads quickly is critical again to over all perceived performance. In practice this means that your constructor should not execute more than it needs to quickly get something up. If you start some doing some huge work in your constructor then you are going to quickly start blocking your UI. Don’t do real work in the constructor as this will slow your UI loading. The less code between your preloader image and the app the better, but you ask what if I have a real app that needs to do real work?

Ok fine you’ve written a real app that needs to do some real work before it start working. Again part of managing user expectations is about ‘perceived performance.’ This doesn’t mean your app can’t do real work on such an under powered device (compared to my dual proc quad core 64-bit, liquid cooler desktop dev box), it just means you have to do it more intelligently. Our first real trick in learning to do this other then learning what not to put in your constructor is to use elements that are pushed onto the composition thread to keep people waiting.

What? Composition Thread? What is that about?

Threading on Phone 7

A big part of performance on the phone 7 is understanding the threading model. On the phone 7 we don’t get back ground process’s that we can run when our apps are not on the screen but we do get a few tricks that allow us to do some simple threading in the app. Basically on the phone you have 2 threads, the UI (User Interface) thread that is basically your app plus you have can some user defined threads but you also have this idea of a composition thread which you don’t have direct access to but you can take advantage of.

What is cool about the composition thread is that it is not blocked by the UI thread. If you have work that can be done on the composition thread it can continue even if your app is completed blocked via the UI thread doing some huge work. Typically you might have a waiting animation or a progress bar when something like this happens.

Say our app is loading something and we block our UI thread so we and the default progressbar control that is build into the Phone 7 Silverlight framework like this... (the rest will be in Code Magazine)

Using the Visual State Manager

2010-11-22T10:27:00.000-08:00

Part of the job of the designer or creative that you typically see being done in Expression Blend is skinning and templating controls, views, and other objects. For the most part, all controls have built-in templates, and in Visual Studio it is very difficult to get at these as they are part of the framework and not exposed. Expression Blend has a great tool to help you get at the templates by creating copies of templates for any control, putting them into your code and allowing you to edit them in the Designer using the Visual State Manager area labeled States that was mentioned earlier.

This States tab, and moreover the entire Visual State Manager infrastructure, was built as part of Expression Blend but has been added to the underlying framework as of Silverlight 4. You can tweak the code in Visual Studio, but the VSM was designed for use in Expression Blend or specifically to make it easier for designers to work with visual states of objects. Here, you will use the VSM to create a custom skin or template and then use the VSM to help build or change the default animations and transitions between states.
Start by creating your custom control template.

Creating a Control Template(s)

Since control templates are baked-in, sometimes creating a control template can be very difficult to extrapolate independently without Expression Blend. In Expression Blend it's really simple.

1. Start by selecting the control. At the top of the design surface, you see a breadcrumb that shows the control in question as the root item. If you select the breadcrumb, you will get a drop-down menu that lets you select either Edit Template or Edit Additional Template.

2. Normally you select Edit Template, which displays an additional menu consisting of Edit Current, which will be disabled; Add Resource, which will also be disabled; as well as Edit a Copy or Create Empty. You will also generally want to select Edit a Copy, at least until you understand the templates enough to build them from scratch and know what "states" are available. For most people, it is easier to just edit a copy of the default template.

3. When you select Edit a Copy, the Control Template dialog appears. Because a control template is a style resource, a box comes up so you can give the resource a proper name. All the correct settings are there by default. You do have the option to have the new control template put into the application or you can also create a new resource dictionary and have the control template go there.

4. Once you select the settings you want, click the OK button. All of the underlying code required to support this new custom template (that is a copy of the one baked in) is added to your project; in addition, the control is bound to this new custom template. Now you click the States tab.

All the states and transitions to each state are divided into what is a tree. When you select any of these, that state is applied visually in the design surface. In addition, the state properties show in the Properties pane so that they can be customized as needed visually without going into code. However, you can open the project in Visual Studio and edit the template if you want to. You will also note that the Visual Tree shows all the elements of the template for you to select as well, and you can remove any element you do not need to complete your custom control template.

Note: The Visual Tree is a representation of your UI and how it is rendered visually and how the underlying engine renders elements to the screen. Some things might not be in the Visual Tree because they are in a collapsed state. In other words, Visibility='Collapsed' rather than Opacity='0' where the Opacity='0' is considered to still be in the Visual Tree.

Customizing Visual States

When customizing elements of your control template, you generally are going to use the VSM States tab and the Visual Tree in the Objects and Timeline viewer, as well as the design surface and Properties pane. (You can also edit it in the raw XAML if you are comfortable with that but, keep in mind that some default templates can be very complex.) Often when you are customizing the control, the entire look and feel needs to change. When you select your control, you can go to the Visual Tree and delete anything you do not want or entirely replace it by pasting in whatever it is you want or editing it on the design surface.

To change the state, select the correct state in the VSM State tab, which turns on the State Recorder, and change the control however you like. For example, if you select the state of a button, that state is shown on the control on the design surface. You then can select the element of the control in the object tree of the control that you want customized and edit it - say, change the color or add a transform.

There is also in the VSM tab on each element, a Transitions drop-down that you can select to add specific transitions to one state or the other as needed. Right on the transition, you can set the timing of the transition as well; however, the transition details are edited elsewhere. The last important element of working with transitions that you will need to know is that when you select a transition, you get the Timeline view next to the object tree. This allows you to do custom key frame animations.

note: this article is an edited version of a a section of a chapter I wrote for the WROX title: Silverlight 4 Professional, check it out on: http://www.wrox.com/WileyCDA/WroxTitle/Professional-Silverlight-4.productCd-0470650923.html )

Native Code On Phone 7

2010-11-16T13:41:00.000-08:00

So a friend of mine showed me this article and he tried it and it worked (http://www.futile.com/). In any case he tried it and it works but I'm pretty sure this won't get by the app store... :) In any case here is the article on how this guy got some native code going on phone 7:

Windows Phone 7 & “native” apps, the missing link!

Building and Using Expression Blend Behaviors

2010-11-15T13:48:00.000-08:00

Behaviors are a cool way of adding functionality to XAML design elements in Expression Blend. The idea is that some rich functionality that would be hard for a designer to do can be wrapped in a way that can then be used as a drag-and-drop feature to add that functionality to a XAML element in Expression Blend. A Behavior then is an ‘object’ that implements a certain base class and member(s) so that it can be easily consumed in Expression Blend as a drag-and-drop ‘behavior’ on the design surface. To build a new behavior you need to start in Visual Studio.

Implementing Behaviors

Implementing a Behavior is straightforward and can be as complicated or as simple as you like. To start with, you will need Expression Blend installed so you can test your behavior in Expression Blend. If you are already in Expression Blend, right-click the project and click "Open in Visual Studio," which this implies correctly that you need both Expression Blend AND Visual Studio installed to create and test a Behavior. Once the project is opened in Visual Studio, right-click and select "Add New." Then in the "Add New" dialog, select Class. Give the class a name, and then you need to get the Expression Blend Library into your project. To get the base class (and the associated name space), you must add a reference to the System.Windows.Interactivity name space that comes with the Silverlight 4 framework. Right click on references and select "Add Reference.” Once the namespace is included, you are ready to build out the class you created into a Behavior. You need to start by adding the namespace at the top like this:

using System.Windows.Interactivity;

This gets the base library (namespace) you need so you can inherit from the behavior base class. Next, of course, you need to set up your class to inherit from TargetedTriggerAction and make your class look in effect like this:

public class SomeBehavior : TargetedTriggerAction
{
}

TargetedTriggerAction is our base class, where you will be able to apply it to a class of type FrameworkElement. For the purposes of this example, the Behavior will also be targeted specifically at Shape objects. The next step is to implement Invoke, which is what is fired when the Behavior is applied to the target. Invoke needs to look like this block of code:

protected override void Invoke(object parameter)
{
}

From this point, you need to get a reference to the object that your behavior targets and do to the object whatever is necessary to make the object do what you want it to do (the ‘behavior’). In this case, you typically would add a member event handler to the targeted object event to the associated object, and you start be creating a location for the reference to the target object:

Shape TargetElementItem1;

Now when Invoke is called, you would get your reference, cast it to a Shape and place it into the member reference:

TargetElementItem1 = (Shape)(this.AssociatedObject);

This code then needs to be in the Invoke member. At this point, the implementation for each Behavior will be increasingly different for each Behavior that you build. This example changes the color back and forth between two colors when a user clicks on the shape. Next, you need to add these members to the Behavior class like this:

Brush Color1;
Brush Color2 = new SolidColorBrush(Color.FromArgb(0,0,0,0));

This gives you a color to switch to and the reference to the base color of the class. To populate Color1 with the base or start color of the object, add this second line to the Invoke method:

Color1 = (Brush)(TargetElementItem1.Fill);

Now that the Behavior has a reference to the colors and the Shape is typed and referenced, you can then add your behavior logic. In this example, add two event bindings to the Shape reference like this:

TargetElementItem1.MouseLeftButtonDown += new
MouseButtonEventHandler(TargetElementItem1_MouseLeftButtonDown);
TargetElementItem1.MouseLeftButtonUp += new
MouseButtonEventHandler(TargetElementItem1_MouseLeftButtonUp);
These lines won’t actually work until you add the two methods, which should look like this:
void TargetElementItem1_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
TargetElementItem1.Fill = Color1;
}
void TargetElementItem1_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
TargetElementItem1.Fill = Color2;
}

This completes the Behavior. You should now be able to use it in Expression Blend.

Consuming Behaviors

Besides visual behaviors, you can also add non-visual functionality as you might in a command. Therefore, if you are familiar with commanding, a good way to look at Behaviors is as "commands for designers in Expression Blend." To be able to use Expression Blend to work visually on an element, you need to be able to see the element that you want a Behavior to be applied to. For example, in the last section, you built out a simple behavior. Now you need a Shape to apply the Behavior to. You can start by dragging a Rectangle from the toolbar onto the design surface in Blend. Then you need to set the fill to a solid color brush using the Properties pane. The XAML code might look like this:

<rectangle fill="Green" />

Now you should open the Asset Explorer from the toolbar. On the left side of the Asset Explorer, select Behavior and you will see that your behavior is one of the Behaviors listed as well as others that are built in to Expression Blend. Select the Behavior you want and drag it onto the object, in this case Rectangle, and you are finished. The XAML code will appear something like this:

<rectangle fill="Green">
<i:interaction.triggers>
<i:eventtrigger&g;
<local:SomeBehavior />
</i:eventtrigger&g;
</interaction:triggers>
</rectangle>

If you look at this closely, you will note that there is a couple namespaces referenced here. You will find these referenced at the top of the XAML document that were inserted by Expression Blend dynamically. A designer or creative is not going to care, but as a developer, it is important for you to realize this. Behaviors, as you can see, are a way to provide rich functionality that is bound to controls in XAML that also, and more importantly, is easy for designers and developers to use in building, maintaining, and customizing the UX/Design of views in Silverlight applications.

(note: this article is an edited version of a a section of a chapter I wrote for the WROX title: Silverlight 4 Professional, check it out on: http://www.wrox.com/WileyCDA/WroxTitle/Professional-Silverlight-4.productCd-0470650923.html )

Codeplex Projects Everyone Should Know About

2010-11-11T08:18:00.000-08:00

(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.

Why Use the MVVM Pattern with Silverlight Applications?

2010-10-21T12:50:00.000-07:00

The probability of hearing or reading about the title question of this article if you are either a Silverlight or WPF developer is substantial. However, there are significant problems when searching for a proper answer to this question.

To begin with, there are numerous and varied ways in implementing methodologies like MVVM, most of which are used based on personal preference. To a novice trying to educate themselves, this leads to disparity in information. Complicating this factor is that many of the articles or videos that attempt to describe the MVVM pattern also include components of other architectural patterns. This adds unnecessary complexity to understanding the MVVM pattern because of the inconsistencies in the pattern being described. In this article, I will elucidate only the MVVM pattern - nothing more, nothing less.

First of all, let me answer the title question succinctly. Silverlight (XAML) and the Model-View-ViewModel (MVVM) architecture evolved together, thereby affecting each other. In effect, this means that inherent in Silverlight's framework elements and CLR objects are the mechanisms to implement MVVM's loose coupling and separation of concerns. I will go into greater detail on the specific classes and objects in .NET that are primarily involved in hooking everything up further on in this article.

The loose coupling and separation of concerns translates to the ability of large developer teams to work independently on different parts, bringing the pieces together at runtime utilizing classes or object interfaces (as opposed to user interfaces). Another enormous benefit of this is that not only can multiple developers work on different parts of the application simultaneously, designers - for the first time in the history of .NET development - and developers can work on the same code at the same time. Having designers "speaking the same language" as developers solves the longstanding dilemma of a developer taking what the designer gives them and having to rewrite everything to work with the applications. Furthermore, designers - for the first time also - can see what they are doing with data driven controls in the design view in Expression Blend. It's evident that the workflow between professional graphic designers and application developers has been monumentally improved.

Let me back up a bit and give an overview of what MVVM is and does for those of you who aren't familiar with it. MVVM, as architecture, is the mature, successful version of what n-tier attempted to accomplish: quarantine the user interface from the program logic and data. Where Model-View-Controller (MVC) may sufficiently accomplish this goal for ASP.NET applications, MVVM is a refined evolution custom-fit for Silverlight.

There have been intermediate patterns between n-tier and MVVM, all with the same goal, but none of them truly accomplishing the objective until the advent of MVVM and XAML. XAML, being an extension of XML, is inherently tool-able, resulting in the ease of building visual and other editors for those who use it.

If a new Silverlight developer were to dive into a new project without knowing better, they might attempt to put all logic into the codebehind of the MainPage.xaml.cs, as typically has been done in ASP.NET pages. Not only would this lead to difficult testing scenarios, but this methodology doesn't lend itself to long-term maintainability or extensibility. Testing code built like this needs a user interface (UI) to run and a human to debug, which adds to the complexity of finding errors. On the other hand, by using the MVVM architecture, only the "ViewModel" (which will be explained in the next couple of paragraphs) need be tested and verified before ever being bound to the UI.

Properly using MVVM, there is much less codebehind in MainPage.xaml. This is simply pure UI. Each entity in MVVM has its unique tasks, and they do them extremely well with complete separation. MVVM is an acronym for Model-View-ViewModel; let's elaborate on the functionalities of each entity.

At the uppermost level we have the "View". Ideally, the view consists only of the XAML UI and related UI logic. These are the Silverlight screens that are presented to the user. The View's responsibilities are to present data to end users and collect data from end users, period.
At the lowest level we have the "Model". This represents the entities that live on the server as well as the objects that are responsible for interacting with the data stores the application uses along with data persistence. Data interaction in Silverlight can be anything from RIA Services to web services or raw XML. Any CLR-object can be the binding source.

In between these two entities is the "ViewModel". This entity's responsibilities are numerous, but can be summarized as aggregating data that will be bound to the View, retrieved from the Model. This includes methods and states. Since Silverlight doesn't databind to methods, just properties and dependency properties, most of our data logic needs to be in property setters and getters in this ViewModel.

As previously promised, now I'll explain the specific objects in the .NET Framework that are involved in making MVVM and Silverlight work together. The binding mechanism in Silverlight links the View and ViewModel through primarily dependency properties and data context. Each framework element in the View (controls, UI elements, etc.) has a dependency property. These properties can be bound to instances of exposed public properties in the ViewModel. The ViewModel can update the View via the INotifyPropertyChanged interface in the ViewModel base, which is used to discover if the value of the properties have changed by raising the OnPropertyChanged event. This is a two-way conversation that extracts all of the data and logic from the View, but doesn't alter the UI's normal functionalities.

Lastly, I'd like to describe one last tremendous benefit of utilizing this pattern. Because all the logic is in the ViewModel, this entity can be copied from a Silverlight application and inserted into a WPF or Surface application, for instance. This cross-platform extensibility greatly increases return on investment (ROI) for companies that target multiple platforms.

- By Kim Schmidt, Guest Author from the Silverlight Group

LayoutTransform RenderTransform Size Resize Sizing Xaml Hack and black magic...

2010-10-07T07:17:00.000-07:00

ok, so this is just really making me tired all over. about every size months or so I run into this problem but really after solving it I nicely forget until it hits me in the face again. So amoung the zillion projects I'm working on I volunteered to help on any projects that have something for me. Fabio and Curtis are working on this cool project I can't talk about as such but here is this layout thing that came up in working on this control that needed fixed.

The issue is basically this. You have a control that is a set size and it has some element that is or needs to be layed out outside that control box's size. since its a custom control and its top element is a grid any thing laying out can only be the width of the grid. Event when rendered outside the control box using a translate transform etc. the last time this issue came up I remember there was also a rotate transform taht took me probably a day to figure out what was even going on but between Fabio, Curtis and I there wasn't to much wasted cycles on it but after going back and forth I did a number of tests to just to see what actually worked.

keep in mind that the control is a set size and the root element is a grid.

That being the case, here are the methods I tried to get something larger then the control box size layed out outside the box.

method 1: putting element in popup (wpf only trick, well sort of, you can do something like this in sl but its an even more aweful hack) works but lots of control issues... with behavior not the least of which is the element might still be there if the view is switched... this is a bad plan...

method 2: just trying to use a translatetransform to put it outside the box... no soup for you as your element is croped to the size of the control box (root element grid)... another bad plan...

method 3: chuncking the element into parts and transform it all into place... this works but is a silly hack... due to how messy the xaml gets... to me this is really a bad plan too unless something else didn't work.

method 4: put the element into a canvas and then transform it out... really? this works... feels like a hack but the xaml is very clean... #tiredallover

method 5: use negative margins... this really is against my inner designer or rather the xaml mess I've seen it cause is mind numbing. But alas used spairing this this is a clean xaml solution. Just bad on principal because it leads to abstract layouts that are difficult to visually decompose and mape to the xaml.

method 6: use a layout transform and then a render transform to size it down to smaller then the control box and then the layout transform to get it back to size and outside the control box...
...

this works... I don't even wnat to know why... I actually do know but really this is just well it makes me cringe but the xaml is fairly clean but its totally a hack... don't do this just for sanities sack but really it works... f... here is an example:

<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="2.88" ScaleY="2.88"/>
<TranslateTransform X="210"/>
</TransformGroup>
</Grid.RenderTransform>
<Grid.LayoutTransform>
<ScaleTransform ScaleX=".5" ScaleY=".5"/>
</Grid.LayoutTransform>

I went with the canvas trick as the xaml is the most clean.

9 Speaking Engagements in the space of 5 weeks... about Silverlight

2010-10-01T11:22:00.001-07:00

I think my head will explode or I'll get pretty good at it :) but here is my speaking engagements over the next four weeks oh and this is getting off from presenting at the big IxDA/Interact event 2 weeks ago...

* Windows Phone 7 Unleashed in Bellevue on Oct 07th http://wp7-bellevue.eventbrite.com/ on Phone 7 User Experience

* Windows Phone 7 Unleashed in Redmond on Oct 14th http://wp7-seattle.eventbrite.com/ on Phone 7 User Experience

* Windows Phone 7 Unleashed in Boise on Oct 25th http://wp7-boise.eventbrite.com/ session 4 on Phone 7 User Experience and Session 2

* SilverlightConnections/DevConnections - Going from Silverlight to Phone 7
http://www.devconnections.com/shows/FALL2010ASP/default.asp?s=151

* SilverlightConnections/DevConnections - Multi Dos and Don’t touches
http://www.devconnections.com/shows/FALL2010ASP/default.asp?s=151

* SilverlightConnection/DevConnections - Breaking Down Walls
http://www.devconnections.com/shows/FALL2010ASP/default.asp?s=151

* Mediations on Xaml Zen - Corporate Xaml Workshop for Wirestone
(private workshop by invitation Only in Boise Oct 26th)

* SilverlightConnection/DevConnections - Metro for Developers on Windows Phone 7
http://www.devconnections.com/shows/FALL2010ASP/default.asp?s=151

* SilverlightConnection/DevConnections - Windows Phone 7 Application Performance Optimization
http://www.devconnections.com/shows/FALL2010ASP/default.asp?s=151

I'm wondering if this means I'm a professional yet? :)

Professional Silverlight 4 - Book Review

2010-09-28T13:20:00.001-07:00

ok, truth be known I helped write this book (a small part) and so I won't comment on the part that I did. but still it is pretty awesome, fine maybe the architecture section was light but WROX is about great references. I have bought just about every wrox book for he past 10 years and not just because the colors match. Very few people buy a wrox book to learn a technology and why I was so interested in this book or any wrox title is just for being the reference. Some people say that google (or bing, pick your poisen) but I like the feel and tacktile experience of a book and wrox is a must have and since I'm a professional Silverlight guy...

Like most Silverlight books it has been targeted to a specific version but WROX has done a great job of updating the professional series for each version and this is the latest. As anyone in the industry knows you cant be consider a professional without a WROX title on your shelf for the topic you work on so if you are a real Silverlight dev then you must have this book. in my opinion.

http://www.wrox.com/WileyCDA/WroxTitle/Professional-Silverlight-4.productCd-0470650923.html

Windows Phone 7 UX with David Kelley (thats me)

2010-09-13T09:40:00.000-07:00

Had a great time talking about phone 7 ux this morning on MSDN Radio doing a podcast. Here are some great phone 7 resources related to touch and UX:

Phone 7 Links:
http://developer.windowsphone.com/windows-phone-7/
http://www.windowsphone7.com/
http://www.mobileappmatch.com/?fbid=IzTBJbx-cNj

Josh Blake as a great book on multitouch: http://manning.com/blake/ or http://nui.joshland.org/

http://www.Silverlight.net/
http://www.SilverlightCream.com/

user groups:
http://www.interactseattle.org/
http://www.SeattleSilverlight.net/

Other UX blog links that are cool:

teasers and trasitions

early ux phone 7 concepts

Windows Phone 7 Series User Interface (UI) codenamed “Metro” Design and Interaction Guide

Metro UI The Windows Phone 7 Aesthetic

Its Ok to Think Out-Of-The-Box

2010-09-07T12:20:00.000-07:00

It is ‘Ok’ to think out of the box, at least we keep telling ourselves that. I know we always talk about thinking out of the box but frequently this tends really be ‘think out of that box as long as it’s not too far out of this box’ so just use a different box and stay in it. Begs the question how to really think out of the box and how do we let ourselves know its really ok to do that?

Case in point was a project we did recently where we were tasked to build a touch wall for Nike Basketball and the World Basket Ball Festival in New York City. One of the key elements was this idea of helping people (ie targeted demographic being male ages 14 to 35) connect with the history of basketball. The idea of the ‘history’ of anything in most ideation processes is going to bring up a time line. How boring is a timeline though, been there done that. This story is abit about how we broke out of the mode of a stereo typical timeline but still be a timeline and not some other metaphor that is been overly used like the carousel or something like that and therefore how we really thought out of the box and allowed our selves to do it.

So how can we let ourselves think out of the box ‘more’ better [yes yes I know English, it’s just more fun this way]? With that let us talk about 3 points on how we can better enable real life out of the box thinking without limiting out selves to preconceived notions and build really sexy User eXperiences (in this case all about basketball) and be ok with it.

Emotional Connections

One of the biggest problems we have as User eXperience professionals is: understanding our users. Do we really understand them? Have we bothered? Do we think we understand them but not really? Being open to the fact that you might not, as a team, really know your target demographic is a good start to not just thinking out of the box but being able to let yourself think out of the box. In doing so how then to you really know your users and in that how do we know we know? I would argue that we must always be in a mode of trying to better understand our users as they are diverse and ever changing and as soon as you think you know them you don’t, so therefore don’t stop getting to know them.

More than anything then you need to learn to connect with them emotionally and through constantly working on that connection emotionally you can better use that connection and cater to it. Working with emotional connections with users gives us a basis for building UX that takes it to the next level and we can vet those against our users to gage how well we connect and we can see if our out of the box ideas will fly. The user then is the judge of our ideas and not our perceived notions about them.

When we are building UX it is important to keep this process of emotional connections with our users as this is how our ideas will be connecting and how our ideas fail. To really get out of the box that emotional connection is critical. Now the reason I chose to bring emotional connects up first is that this idea of emotionally connecting with users helps us in the other two points I wanted to bring up.

Communication, Communication, Communication

Remember when building awesome UX it is not just you. It helps me and my team at Wirestone to think of ourselves as a single unit. It is not the developers vs the designers, it is our team and us including designers, developers, information architects, UX architects, PMs, the customer, and even demographic representatives. Its all of us working together and as I’m sure you’ve heard if you have studied group or team dynamics at all the trick always gets down to communication. When we communicate and ideas flow freely in a positive non critical way where we can talk about them and try them out we always come out of with cooler better ideas. No idea is bad it’s the degree in which it is awesome that matters. When a group or team then understands the business goal, understands the ROI, the technology, the information and content and are passionate about what they are doing and then fully communicate openly freely and often then things always, always go better.

Let’s get back to that Nike touch wall thing I mentioned earlier. As it turns out this was a case in point where brainstorming with the entire team was really a key defining moment it this projects success. With content we clearly had a demographic that was passionate about the content but really we had 2 kinds of elements to present and the typical time line was just so over done and not unique and some one other then the designers and developers in the room suggested why don’t we just have two lines one for this and one for that… of course at first much of the team scoffed but it was the most unique idea and no one could think of a reason not to at least try it. Getting a sample of the content together and putting in to a dual timeline that would expand and grow depending on which elements were of interest was an interesting idea and when put in front of users it worked much to many of our surprises. Further with a slight bit of gratuitous movement we found that it made it easier for users to wrap their heads around the content and learn to explore making the new dual timeline metaphor easier to understand or in other words more ‘discoverable’.

Let the Users Decide

The key then to the Nike touch wall success turned out to be putting it in front of users and letting the user decide if it was cool or not. Frequently we jump to conclusions about our users that may or may not be true and truth be told nothing is better than putting the UI in front of the real users to see if a UI/UX works or not.

Part of putting your ideas for UI in front of users is for the team to understand who the user is. One of the key tools a lot of people find successful is to have personas or virtual people that personify your typical user. This method also makes it easier to help other understand the user your team is targeting and help is finding real life version of the user. Even informal UX testing helps and in fact in our case we use some informal UX testing up front and additional more formal UX testing at all phases of the project to help let the user’s guide our creativity and our thinking. When we put our ideas in front of users it helped us focus on what worked best and in fact find the out of the box ideas that really worked.

Summary

That all being the case, letting ideas flow and putting all of them or the most unique ones in front of users can help bring focus to the out of the box thinking, where the entire teams is involved and no idea is left un vetted in front of users. Why is it ok to think out of the box? The reason is you will find the next best idea waiting for you and through that idea and the emotional connect with the user that you understand your UX will more likely hit the mark, be out of the box and a home run metaphorically speaking. Thinking out of the box requires that you let yourself as a team be open to all ideas, to give them serous configuration and let the user decide for you. Go forth and think out of the box (well at least head in the right direction). Like anything it takes time for a team to get up to speed and a willingness from everyone on the team to work together with novel techniques like ‘communication’, ‘brainstorming’ and the like. Here is hoping to see your next Hot and Sexy User eXperience…

also published at: http://www.interactseattle.org/?p=704

Silverlight 4 and SharePoint 2010 Integration

2010-09-07T08:16:00.000-07:00

My first response to this is just say no. But, my personal biases against sharepoint aside, alot of people need to work with Sharepoint including myself in the past so with some trepidation I agreed to review the book 'Microsoft Silverlight 4 and SharePoint 2010 Integration' by Gaston Hillar. I don't know if I know Gaston personally but the fact I don't recall means if I have meet him and one of a zillion conferences it we never touched base outside of that. One thing I have noticed with packt books is that there seems to be less talking and more samples which is a good thing as far as I'm concerned and this book is no different. The chapters are broken out in detail covering related topics from just creating a web part in sharepoint (which if you have never done it before is a pain and having it well documented in a book is great) to WCF, RIA, Rich Media and all the points in between. The book isn't thick and short on words but as mentioned lots of examples which is what is important to me. I know many years ago when I learned classic ASP the book was lots of reading and I found over the years that it is more important to have samples you can follow along and a book that can be used as a reference with which this book has fallen into the catagory of books I'll keep just in case I have todo any sharepoint work again (which I'm less then fond of). I know I know some people like the google or even the bing but its nice to have it in print and for us old timers it is sooo much easier to read in print. In any case if you must do sharepoint, user Silverlight and build something hot but use this book to help get it in Sharepoint fast and spend more time doing something else :)

http://www.packtpub.com/microsoft-silverlight-4-and-sharepoint-2010-integration/book?utm_source=hackingsilverlight.blogspot.com&utm_medium=bookrev&utm_content=blog&utm_campaign=mdb_004103

Once in a life time you get the chance to hire a Luminary

2010-09-01T10:45:00.000-07:00

Industry #Luminary & #Silverlight #MVP is looking for his next role, the race is on, if u'd like to have a rock star @ your company see @WynApse author of Silverlight Cream. see http://geekswithblogs.net/TehGrumpyCoder/archive/2010/09/01/day-1-of-being-unemployed.aspx

Hiring an MVP like David Campbell is just an almost unbelievable oppertunity for a company to gain enourmous creditbiltiy as wellas a huge strategic asset. Having heard that David (not me, but Mr. Campbell) I almost chocked. I would give my eye teeth to hire some one of his calibur and there is such low chance of ever being able to hire some one like him. In any case it will be interesting to see what company gets him first :)

some more about David Campbell:

http://www.silverlightcream.com/

http://wsinsiders.com/the-silverlight-mvp/

http://geekswithblogs.net/TehGrumpyCoder/archive/2010/09/01/day-1-of-being-unemployed.aspx

http://www.wynapse.com/

http://twitter.com/WynApse/

Getting the Root Visual in Phone7

2010-08-24T12:37:00.001-07:00

ok, so this should have been easy for me but for some reason it took a half hour to figure it out so I figure it must be something that some one else might struggle just in case. That being the case if you are in some nested set of user controls and need to get a reference to the top level of your phone 7 UI here is the code:

PhoneApplicationFrame Temp = Application.Current.RootVisual as PhoneApplicationFrame;
MainPage TheUI = Temp.Content as MainPage;

now main page is the loaded PhoneApplicationPage is this could change pending your code and further 'TheUI' is something I made up but all things the same the reference to TheUI would then allow you to call any instances of the root visual. and the best part is this is admittedly a bit hacky... :)

Interact and Seattle Silverlight Videos Online

2010-08-23T13:47:00.000-07:00

in the 5 minutes of free time I have each month I finally managed to get some videos that were takening with a flip cam at some of the local user group meetings posted on vimeo:

Summer Series Touch and Beyond: The Psychology of Future Interactions
http://www.vimeo.com/14095704

Summer Series - Windows Phone 7 Development Going Deeper (Session 2)
http://www.vimeo.com/14101547

10 Ways to Attack a Design Problem And Come Out Winning
http://www.vimeo.com/14105139

Accessibility Makes the Experience More Usable by More People - IxDA Interact
http://www.vimeo.com/14125563

Modern UX Creation from the Eyes of a Developer
http://www.vimeo.com/14370107

The Difference Between Silverlight and Silverlight Based Phone 7 Apps

2010-08-06T10:05:00.000-07:00

The past week I was asked a couple times about the difference between Silverlight and Silverlight for phone 7. Really? Other then a few minor technical differences in the most current version of Silverlight vs a bit more limited version in phone 7. The cool thing is that Silverlight for phone 7 really is Silverlight so the same code base can be used on just about anything. But back to the details. Phone 7 is just a 'specific' more limited version so most stuff you can normally do work fine. There are no new skills, not really anything new save maybe a few api's specific to the phone. The biggest diffence is really just the basic pages and user control names. In phone 7 you really have a set size and 2 orientations. That being the case the phone 7 silverlight team has built these controls to deal with the 2 orientations of the screen and the specific size for phone 7. With that start making phone 7 apps its easy and fun just like any other Silverlight app. ok well you will need to download the special wizbang version of visual studio for phone 7 from http://www.Silverlight.net/ just click on 'Get Started' and go from there.

Updates to Silverlight Code Browser

2010-06-09T11:32:00.000-07:00

A couple of bits of news. I did a number of updates to the HackingSilverlightCodeBrowser here:

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

including things like MEF and IsolatedStorage. As to the community edition of the book, I'm still trying to get some contributors to finish. I've been slammed with 60 hour weeks so chapter 2 and 4 and appendix a still need edits. maybe a weeks worth of work pending time which tends to be limited in my life. :)

Isolated Storage Made Easy

2010-06-04T00:05:00.000-07:00

In its most simple form Isolated Storage allows you to save name value pairs and retrieve them at some other time the next time your app runs. Granted we could get into XML and text files etc but I'm going to stick with just name value pairs. Lets take a look at this line:

private void PresistKeyValue(string _Key, string _Value)
{
StreamWriter MyWriter = new StreamWriter(new IsolatedStorageFileStream(_Key, FileMode.Create, IsolatedStorageFile.GetUserStoreForApplication()));
MyWriter.Write(_Value);
MyWriter.Close();
}

Nice and simple. using this block we can use a line like this:

PresistKeyValue("foobarkey", "blah blah blah");

this like saves a key falue of 'foobarkey' with the 'blah blah blah' as the 'value'

Now then to get the data you need a block like this:
private string ReturnKey(string _Key)
{
string Output = String.Empty;

StreamReader sr = new StreamReader(new IsolatedStorageFileStream(_Key, FileMode.Open, IsolatedStorageFile.GetUserStoreForApplication()));

string ALine = String.Empty;
while ((ALine = sr.ReadLine()) != null)
{
Output += ALine;
}

return Output;
}

Yes a little simple but you should be able to lift both of these functions directly and use the code as such like this to regtrieve values:

string SomeValue = ReturnKey("foobarkey");

nice and simple.

Dependency Properties Made Easy

2010-06-03T23:43:00.001-07:00

ok so I found that for some reason I thought I did a post on this before and I couldn't find it. So I thought I would make a new post as simple as possible. Here is a simple dp:

public readonly DependencyProperty ResistanceProperty = DependencyProperty.Register("Resistance", typeof(double), typeof(AnimatingPanelBase), null);
public double Resistance
{
get
{
return (double)GetValue(ResistanceProperty);
}
set
{
SetValue(ResistanceProperty, value);
}
}

Nice and simple right? why bother you ask, well the biggest issue is that if you want to animate properties of a custom control of some kind using data binding and what that change to filter into the UI of some control. Otherwise I try to avoid DP's as much as possible. So if you need todo some mucking around in your control after the DP value has changed then do this:

public static readonly DependencyProperty MinimumProperty = DependencyProperty.Register("Minimum", typeof(double), typeof(Dial), new PropertyMetadata(new PropertyChangedCallback(OnMinimumChanged)));

public double Minimum
{
get
{
return (double)GetValue(MinimumProperty);
}
set
{
SetValue(MinimumProperty, value);
}
}
private static void OnMinimumChanged(DependencyObject DpObj, DependencyPropertyChangedEventArgs e)
{
// some code :
}

You'll note that this has a changed handler but otherwise is like the first version. and that is pretty much it. :)

Microsoft Silverlight 4 Data and Services Cookbook

2010-05-25T22:01:00.000-07:00

Alas I find my self doing another book review... its not clear to me that I should continue to do that but on this particular book it heads in the right direction. As noted in an earlier post I find the idea of a cook book to be of particular interest and useful in my work with Silverlight. This book has gotten closer then any other to date in building the ideal Silverlight book. Albeit the book does make an attempt to teach Silverlight to some degree but it tends to be more of a reference book, the down side is that there is more in the book about teaching and less about more esoteric topics not connected to data. Certainly though for the professional Silverlight developer this is a great addition to your library.

http://www.packtpub.com/microsoft-silverlight-4-data-and-services-cookbook/book/mid/130510v8s5cu?utm_source=hackingsilverlight.blogspot.com&utm_medium=affiliate&utm_content=blog&utm_campaign=mdb_003316

Silverlight Connections - Vegas Nov 1-4

2010-05-19T07:44:00.000-07:00

got asked to speak at SilverlightConnections in Vegas in Nov. :) topics include: 'Breaking Down Walls – The Story of Getting designers and developers working together in an Agency Environment' and 'Multi Dos and Don’t touches –Multi Touch Development from the trenches' and 'Going from Silverlight to Phone 7 Silverlight Application Development'

http://www.devconnections.com/shows/FALL2010ASP/default.asp?s=151

Title: Breaking Down Walls – The Story of Getting designers and developers working together in an Agency Environment
Type: Regular session
Category: Expression Blend
Level: 300 -- Advanced

Abstract: Breaking Down Walls is about the wall between designers and developers in the typical design shop. Getting everyone to cross over, communicate and build better UX is where we are going and where many of the best Interactive Design firms are already. When designers and developers learn to communicate, and work together they really start to be able to make the best use of the tools they have from Adobe to Expression to Visual Studio, all these tools can be used in an open collaborative environment like never before. Learn to make magic here or at least learn how it has been done at Wirestone and other agencies that have done it successfully.

Title: Multi Dos and Don’t touches –Multi Touch Development from the trenches
Type: Regular session
Category: Architecture, Patterns and Practices
Level: 300 -- Advanced

Abstract: David talks about his experience in the retail space with real world multi-touch applications from touch kiosks to Surface and Silverlight. David will talk about the customer experience and how user centered design and multi-touch work in the retail world with ‘live’ customers as well as the perspective of designers, developers, IA and others regarding multi-touch. From stories about developers touching too much and about good ideas gone amuck David gets it all out on the table.

Title: Going from Silverlight to Phone 7 Silverlight Application Development
Type: Regular session
Category: Windows Phone 7
Level: 200 -- Intermediate

Abstract: This session is about making the leap to Silverlight for Windows Phone 7 and using your Silverlight Skills to build cool Silverlight applications for Windows Phone 7. We'll talk about the basics, game development and even business(ish) apps for Phone 7.

MEF (Microsoft Extensibility Framework) made simple (ish)

2010-05-17T14:21:00.000-07:00

Microsoft Extensibility Framework or MEF is one of the great features in Silverlight, designed around making Silverlight applications more extensible generally and provides a much more complete story for the separation of concerns. MEF then begs the question 'Why we care?' and 'What can MEF really do?' and we will address that here.

Let us talk about a real world example for a moment.

Say you are a vertical selling corporation of some kind, meaning that you sell to companies that do similar things. For example you might be selling to retail stores and your application will show their products. One of the problems is that your application will need to integrate with their CMS (Content Management System) to get product data. In Silverlight 3 your customers might need to provide a WCF Service to talk too. That WCF service they then provide has to have a certain API Signature or worse still they might need your code and need to recompile or YOU have to recompile for each customer or some other hack to make the application work.

Using MEF your customer still will need to get the data somewhere but it makes it easier on them to do this without mucking with your code. To make it work a customer can drop a 'XAP' that provides the content and your application doesn't care about WCF API signatures or other requirements that make it difficult to wire it into the existing system. Your customers can now easily extend, change or filter what and how their data gets to the application you built for their vertical.

In many ways this is like making the model of your application (speaking in the MVVM since) 'open source' and not only pulls the model out of the rest of the application into just about anything else and lets that model be manipulated by the client without rebuilding the application in any way.

Getting Started With MEF?

MEF is pretty straight forward to get started using since it is part of the Silverlight framework in these name spaces and you need to make sure you reference them at the project level.

System.ComponentModel.Composition
System.ComponentModel.Composition.Initialization

Now that we have the bits available, using MEF is as easy as Importing, Exporting and maybe a little code. The main idea is to be able to code or property decorations to allow MEF to find elements either being exported or imported and tie them together. We can look at this process as being able to export the data, import the data and composing the data in an abstract way that allows the elements of this process to be abstracted from our application to a degree that it can be done externally to the application post compile. "Gah!," you say? Let's take a look at the next section and learn more about this process?

MEF'd Properties in and out of our Application

Here we will work out the basics of using MEF in our application. We can start simple by creating some properties and decorate them so that we can build out our application and have them magically set by MEF. Ok maybe it is not magic so let's focus on the properties that will be set first and see how it is done. Take a look at the following code sample:

[Import("SomeValue")]
public string SomeValue;

You can see here we have 2 lines of code. The second line is our traditional string property of some object like a string. The declaration line before it is what exposes our property to MEF and allows MEF to set it. You'll note that we use a magic string here. I know this is generally not well thought of by your standard architecture astronaut but you need to have a key value in the form of a magic string to have MEF do the data mapping unless you want to define your own import attributes which we will talk about later on. Next we can take a look at the code that sets this value.

CompositionInitializer.SatisfyImports(this);

You can see here that we are doing this programmatically and we get our data from the MEF catalog. By doing this in the constructor we allow MEF to go get our data where it is coming from and loading it and we can then use it as needed in our view. This MEF process is much like dependency injection might be used in a MVVM View. Really making this work then requires that we also have this object we are talking about in our constructor. To make this week we still need to have a simple class that exports that data in such a way as we can have some data. The following code does that.

[Export("SomeValue")]
public string SomeValue = "foobar";

Notice the export declaration in this sample. When this current assembly is running we get this data element automatically added to the catalog. Going back to the sample that included the catalog you can see that we created an instance and added the current application running as our package. Once we have added a package to our catalog we can then create a container that using the container we can then ask MEF to match the elements together to do our 'binding' So how then do we make this a two way street or deal with larger collections?

Making our Properties a 2 way Street

A popular construct in Silverlight and in the XAML world altogether is the ObservableCollection. ObservableCollections allow us to do lots of things but let us focus on the fact that it is a bindable collection of data that we want to be populated by MEF. Now take a look at the following lines that show a declaration and a collection property of come class.

[Export("SomeStuffs")]
public string Stuff1 = "blah1, blah";

[Export("SomeStuffs")]
public string Stuff2 = "blah2, blah";

[ImportMany("SomeStuffs", AllowRecomposition = true)]
public ObservableCollection SomeStuffs { get; set; }

As you can see this looks mostly like the first property we looked at earlier but here we are creating an observablecollection. The ImportMany declaration above it he collection allows the multiple element collection to come through and by also setting 'AllowRecomposition' the property can then be set over and over again by MEF. From this standpoint point we are ready to really build something separate from our application.

Exporting a Class in a Separate Xap

To create a Xap we can use a standard Silverlight project that we add to our solution. Since we are going to load the xap we can get rid of the classes (x and y). Create a class called z and make it look like this code:

public class SomeClass
{
[Export("SomeValue")]
public string SomeValue = "foobar3";
}

In this class you can see we create a class with 4 properties and use export to the same key name. This creates the effect of the values being exported to the MEF catalog as a collection that will get associated with the collection we created in the last section. For this to work we need to make sure that our Xap is referenced in our first app.

Downloading Xap Dynamically

Now that we have our collection and a new xap with a class that exports values we want we can look at importing the Xap and using MEF to wire that up to the data we need. Take a look at the following code:

[Import("SomeValue", AllowRecomposition=true)]
public string SomeValue;

DeploymentCatalog catalog = new DeploymentCatalog("MEFModel.xap");

// in constructor:
CompositionInitializer.SatisfyImports(this);

catalog.DownloadCompleted += new EventHandler(catalog_DownloadCompleted);
catalog.DownloadAsync();

void catalog_DownloadCompleted(object sender, System.ComponentModel.AsyncCompletedEventArgs e)
{
// some code...
}

This code can be added to the constructor of our application just after the call to AddPackage. You can see that we pass a Relative URI to our other Xap and that we add it to the package when it loads. This can also be an event handler to to the load. In this case we get the content added to the package and it gets wired up based on the name key values that we have set by the ImportMany and Export declarations. Now the cool thing is that we don't need to keep this in the constructor. We can call this same 'DownloadPackageAsync' from any event handler or other block of code that we need. We could use this to load content dynamically pending on certain conditions such as localization.

This is all wonderful but there is one problem with using a separate Xap that has the MEF bits in it. This means that both Xaps have MEF and now ours Xaps are twice blotted from MEF using more memory then needed. Fortunately there is way around this is to set the additional Xaps to use include this in the build. In Visual Studio in the other projects find the Library reference to the MEF and right click and select properties. On the reference property pain there is a property called 'Copy Local' and we need to set this to false. This way only one copy of the MEF bits will be in the overall application saving Xap size by not blotting all the Xaps with the same bits.

Book Review: Silverlight 4 Business Application Development

2010-05-07T14:27:00.000-07:00

I normally don't do book reviews here but this book is kind of cool and what I'm looking for. Silverlight 4 Business Application Development, here is a book that is kind of not so much on the UX side but what stands out about this book is the fact that it is more pictures and code then text especially when compared to a regular book. For me in particular this is awesome as Im more into pictures and code samples. Much like a recipe book this kind of thing is right up my ally so I can focus on making the applications User eXperience cool. That being the case I would recommend it. On the downside the book is from a publisher I haven’t not heard up and the technical editors are more well known in the authors but once getting past that its a good resource to have. You can download a sample chapter here:

http://www.HackingSilverlight.net/Downloads/9843_SampleChapter.pdf

and purchase the book on their site:

Silverlight 4 Business Application Development

some of the samples will also show up the the HackingSilverlight Code Browser:

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

HackingSilverlight Code Browser

2010-05-05T23:15:00.000-07:00

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...

Launching a URL from an OOB Silverlight Application

2010-05-03T21:51:00.000-07:00

So I'm working on this code browser mostly to help me with my fading memory. In the app I want to be able to launch a url. So I do my normal thing and put a line of code that looks like this:

System.Windows.Browser.HtmlPage.Window.Navigate(new Uri(ThisURI), "_blank");

I was agast when I realized that this didn't work, for that matter it didn't even blow... grr... but with a bit of research I found that the hyper link button worked so a ended up making a little class like this:

public class MyHyperLink : HyperlinkButton
{
public MyHyperLink(string navigateUri)
{
base.NavigateUri = new Uri(navigateUri);
TargetName = "_blank";
base.OnClick();
}
}

even better the code to make this works looks like this:

MyHyperLink button = new MyHyperLink("some url here...");

Hacking Windows 7 Phone

2010-04-05T13:19:00.000-07:00

So here is the Hack of the Week. For those who have had their heads in the closet and haven't heard Microsoft is coming out with this Windows Phone 7 - the mythical vapor ware for a number of years now has been made public. Like many Silverlight geeks especially we are estatic as this phone now public will run Silverlight as the primary way to develop applications for it. On the downside if you installed the developer kit, the VM for the phone lacks pretty much... um... everything... no sensors, (how can we do anything cool without sensors), no apps , not settings no nowthing except the Internet explorer and apps we write as long as they don't need sensor access. At least give us some proxies or fake data etc. But for now we are on our own.

Some people counldn't live with that and they hacked the vms. So one such example is Dan Ciprian from Italy and here is his two posts. I can attest to say that this seems to work as I have seen in live work, not that I my self would do such a thing and I can neither confirm nor deny that I did any such thing but Here are links to his posts on topic.

http://sviluppomobile.blogspot.com/2010/03/wmp7-emulator-unlock.html

http://sviluppomobile.blogspot.com/2010/03/wp7-emulator-unlocked-how-to.html

I was also aghast to see that one one greated a copy of the hacked VM and posted it here:

http://www.1800pocketpc.com/2010/03/20/how-to-unlock-the-windows-phone-7-emulator-download-the-unlocked-bin-file.html

which will get you a running version of the emulator unlocked in you follow these directions...

Talking about Immersive Retail Prototype at MIX 10

2010-04-02T08:45:00.000-07:00

Here is a quick video that Pixel8 (Craig Shoemaker) did showing the TouchTag Prototype Hardware and Arduino controller and sensor I have been working on.

http://community.infragistics.com/ux/media/p/225460.aspx

http://channel9.msdn.com/posts/Psychlist1972/Pete-at-MIX10-David-Kelley-on-the-Prototype-WPF-and-Silverlight-Retail-Experience/?FlagType=Rating&FlagState=1#Page=1

Video From PDC 2009

2010-04-01T09:45:00.001-07:00

Found this video this morning with me and Victor Gaudioso talking about UX and Silverlight.

http://www.youtube.com/watch?v=hUqd3vJwRg4

Immersive UX Changing the Face of Retail

2010-03-26T09:17:00.000-07:00

Changing the Face of Retail is an article I’ve been thinking about most of the past couple weeks. I think my goal with the article is to one talk about how technology built into the retail environment can be used to build better experience’s for customers and 2 to talk about how this kind of evolutionary extension of the retail environment is better for customers AND retailers.

I walked into the Microsoft Retail Store or at least one of them, (see one at Mission Vejo or Scottsdale) and its really impressive how the store is built with this wide open and inviting layout, if you didn’t pay close attention one might think it’s more about interior design then about selling computers and software. One of the most striking features is the video wall that wraps around the entire store. But once I walked around looking at everything, what strikes me the most about this store is actually in the far corner or the software section where this small ‘podium’ with a touch screen built in sits. Granted up front I have a strong emotional tie to this ‘kiosk’ but I can’t really talk about it, with that said I wanted to talk about the idea that this ‘kiosk’ represents from a retail standpoint regarding targeted customer experience and UX in general.

So I played with this ‘kiosk’ and what I found interesting besides the ‘metro’ design aesthetic was that as I browsed software titles on this ‘Software’ Kiosk I realized that each time I entered a new ‘category’ of software the video wall nearby changed with the top 5 titles in that category. And then what I really think (in the case of the MS store) what is the most impactful is that they manufacture most of the titles in this kiosk on the spot when I ask for them. Theoretically the store could have a limitless list of titles, no inventory and just manufacture anything I want on the spot. How is that for brick and mortar?

My point in this story is how technology integrated into our environment can be such a huge game changer. When me, a person interested in software, in a retail space has this elegant multi-touch podium with a grand view of all the software in the universe that can lead me easily through all the titles, finding what I need and manufacturing it on the spot is the norm then other business’s in the same line of work or even Amazon.com will really need to bring up the game or fall behind. This is the kind of technology that really changes the face of retail.

So I work for Wirestone an Interactive Design Agency (so I have a vested interest in the technology). We do work like this touch kiosk in the retail space and specialize in ‘Targeted Customer Experience’s.’ So how would I help a retail store build a ‘game’ changing user experience like this (minus the replicator in back)? How can we make a ‘Retail’ experience that much more emotionally engaging, interesting, fun etc? Can we make something cooler that what we saw in the ms store? I really wanted to have something as engaging so I went and spoke with our R and D team in Seattle and we came up with a vision of a retail space like the following user story that we thought we could implement in our UX lab in Seattle.

Let’s say we have John Doe that is interested in Camera’s. He goes into our theoretical retail space looking to buy a camera. He sees one that looks interesting? As he stands in front of it for a few seconds and the price tag visually transforms. The price is adorned and highlighted and across the bottom some text slides in that says ‘touch here to compare’. John touches the digital price tag and the wall behind the product comes alive as that camera slides in to center in front of John with some of the key features listed below. John then takes a few steps down the aisle and realizes that the product detail on the wall follows him; he then touches another tag of a similar camera and that one slides in next to the first on the wall and John can see the key differences highlighted. John quickly is enthralled with this ‘experience’ and the short is he spends lots of money…

With this in mind I started out to build a prototype. One of the Integrators on our team besides having great design and UX skills, happens to write custom serial drivers for fun… I talked with him about it and he pointed me in the right direction including sensors, controller boards and drivers and sample app etc. (See Ryan’s post here: http://www.futile.com/2010/02/wpf-sonar-application-using-arduino-and-ping-sensor/ ) That aside I wanted to be able to talk about this kind of technology at MIX around integrating technology into the retail environment so I had to get busy. What I ended up with was a custom Silverlight control built out to include custom events and interfaces so it could be consumed by a WPF windows object controlled by a custom ‘windows’ manager in WPF for having lots of these little usb powered touch screens all wired together. Plus adding some more ‘custom’ code, some serial port programming over USB, a few config issues, sensors and a simple design later I had my working app for MIX.

Now dragging this around mix was kind of shock to see how interested people were and how extremely geeky it was to have all the cables and the sensors and the like mucking about but it turned out to be a great conversation starter. The next step in developing this kind of technology was around the Business Intelligence aspect of this. In our typical retail touch kiosk work it is always interesting to see how things are used. We normally do lots of user studies with the target demographic getting everyone from IA to devs and creative involved with working with the data collected around making the UX not just work but better. In the case of our touch tag prototype a lot of things came to mind. I ended up talking to a friend at Preemptive Solutions (Gabriel Torok) that did this cool BI tool for Silverlight and we met at MIX to talk about how integrated BI analytics would enhance our work around the touch tag prototype.

Many times knowing how users interact with a system and with the environment helps a business better enhance what and how users experiences a retail space to better help the custom solve the issue that they might not even know they have. With the touch tag system we are looking at retail heat maps, working with touch and interaction data as it related to products and POS data. Questions like what products to people pick up? Vs what do the buy? Vs what do the put back vs. what area of the store is most interesting? What areas of the store are ignored? How can I make better use of my retail space?

Being able to engage customers faster with more interesting experiences that get them engaged with the product they are most interested in and in how that product is the best for them through touch, through visuals and all the senses helps the customer connect with the product emotionally faster. In user studies we have found that this kind of holistic approach to the retail environment really ups the game not only for the end users or customer and the retailer but also for everyone else that has to compete. This is how you change the face of retail.

Next on my list of to-dos is making the average retail employee a super star with augmented reality. You might even think I’m kidding but I’m not. I meet with another friend a few days ago that runs a small but high end UX shop in Canada and that is our next project. I’d love to hear what everyone else is doing to make targeted customer experiences that much better.

Oh and here are a couple of pictures of the UI and hardware for the prototype:

http://www.facebook.com/photo.php?pid=4246729&l=bfecdad661&id=721326429

http://www.facebook.com/photo.php?pid=4246858&l=8936a70219&id=721326429

I published this post initially on the Interact Seattle Site at:

http://www.interactseattle.org/?p=538

some related links include:

post from MIX w/ video showing prototype hardware:
http://community.infragistics.com/ux/media/p/225460.aspx?CommentPosted=true#commentmessage

and this one talking about touch in general and mention the touch tag prototypes:

http://hackingsilverlight.blogspot.com/2010/03/me-on-windows-7-touch-and-i-mention.html

and the Silverlight TV ep3 I did on multitouch:

http://hackingsilverlight.blogspot.com/2010/01/silverlight-tv-episode-3-multi-touch.html

the touch tag demo at MIX on Channel9:

http://channel9.msdn.com/posts/Psychlist1972/Pete-at-MIX10-David-Kelley-on-the-Prototype-WPF-and-Silverlight-Retail-Experience/?FlagType=Rating&FlagState=1#Page=1

Developing Functional Specifications based on the UML Model

2010-03-26T09:13:00.000-07:00

A few days ago I found this white paper I did around 2004 way before I started really blogging:

The Process Overview

Use-case to Specifications is a processing using UML use-cases to identify user requirements and model systems to be able to properly define functionality. This document is intended to serve as an execution based walk-through of this process.

As background: ‘The Unified Modeling Language (UML) is a language for specifying, visualizing, constructing, and documenting the artifacts of software systems, as well as for modeling business and other non-software systems. The UML represents a collection of best engineering practices that have proven successful in the modeling of large and complex systems.’ ~OMG Unified Modeling Language Specification

Use-case – Basic’s

In this process we are focusing on the use of use-cases to identify requirements. The goals of building a use-case is to first identify the actor. This is the person or entity performing the actions described in the use-case. In some cases, the actor is simply a component of the system and not necessarily a user or consumer of it. Second is to identify the goal or what we are looking for the end result to be. Third, and last, is the process in which the actor will take steps to reach the end result or goal. This process interaction is typically described in story form and contains a complete end-to-end walk-through of the actions taken by the actor to reach the goal in the proposed system. To this end, it helps to think of a use-case as a stand-alone story that isn’t dependent on any outside parts to be considered complete. Use-cases serve as a primary tool to help us work out system interaction issues, such as the way it’s accessed, how a part of it might be used or perceived, or how a particular aspect is intended to operates. Basic use-cases will include the following elements, all of which are derived from the overall story-line created:

Name
Actor
Triggers
Story
Steps
End conditions
Failed conditions
Success conditions
Alternate scenarios.

Use-case’s

To develop a use-case we first need to start with an actor. There are several ways to determine an appropriate actor. One way is to ask a couple of basic, but key, questions: 1. Is this actor a component of the system, like a class or object set, or is it another type of entity, such as an administrative or end user. 2. Is the actor a consumer of the proposed system or does it live and/or work within the system. Second, we need to come up with the goal. What is the end result we are expecting from the interaction process? The next step is to develop a story that describes how this actor interacts with the proposed system in order to reach the end result or goal. The following example uses ‘Microsoft’s ACME Project’ or MSAP as the proposed system and an end user “Joseph” who has specific privileges within the system. The goal in this case is to register for an existing course.

Example:

“Joseph, a gold level user and technology buff, has just learned that a new course is being offered for his favorite technology: C#. He immediately rushes onto the MSAP and signs in using his Passport credentials. Joseph then selects the MSAP Center link from the left-hand navigation menu. Once there he is able to quickly search for content relating to C#. Joseph locates the course in the search results that were returned to him and clicks the “Register” link. Joseph is able to get more information on the course while reading through the summary page. He decides that this class is definitely worth while and proceeds through the registration process. Once registration is complete he receives an email confirming his successful registration. Joseph marks the course date and time in his calendar and quickly gets back to his day-to-day tasks.”

Summary:

The story in this example use-case is fairly refined. When we carefully look at this story it identifies a number of qualities about the actor as well as the process used to reach the end goal. From this story we can derive requirements and even data elements needed to ensure that the functionality described matches what was proposed to be built.

First we see that we have given our actor a name. This allows us to reference the actor more easily throughout the use case. From this story we can see that each relevant step our actor goes through has been described. Additionally we can derive actions that “trigger” other actions and can see the basis for some assumptions that were made. As the story’s end draws near we take note of end conditions and finally, after the basic story is completed, we can assess whether or not there are alternate scenarios and even failed conditions that need to be documented.

Derivative Requirements

Once we have worked out the use case we can derive requirements from this. Let’s start with data elements… In the case of the above use-case we can identify the fact that we will need a user that has the following attributes:

User name
User level
Skill set(s)
Course(s) registered for
Course(s) history (assuming we want to keep track of what happens)
Language (if this is used internationally i.e. is he viewing this in English or does this apply to any local? )
Passport account
PUID
Partner
e-mail address

So we now know that the system will need at least the ability to define the above elements and logically we can think of this as an object.

As to the system, we know that we will need to have gold users be able to login via passport then search and finally register for events. From this we know that MSAP will need to use passport at some level, as well as have built in search functionality and registration functionality. In identifying these elements we also then know that we need to track these data elements as well in the system. So that means we need course information or a ‘course’ object that has search functionality and we need to be able to tie that into registration. An instance of registration would also then be associated to a user and to a course or event.

From this point we are able to identify the basic groups of functionality as well as document data elements from just one use case. These become our derived requirements based on developed use cases.

Building Specifications

From these derived requirements we can also do flow diagrams and sequence diagrams for each use case and this feeds our design process by making it easier to come up with object models and sequences etc.

To focus on specifications, we need to take from the original business requirements and data from our use cases and any requirements list to build functional specifications. Typically organizations have a template of sorts. Microsoft is no different with excellent templates that allow the collected data to be plugged in quickly and effectively. Use cases can be prioritized by this derivative process which in turn prioritizes the feature requirements. In our above use case, from the users stand point, the ability is needed to search and find classes and be able to register. If a user can’t do this then there would not be much point in the example software.

Regardless of templates or other things a functional spec should include all the critical use-case stories or summaries, a feature list, prioritization of features, any external requirements or limitations, assumptions, critical data, issues/risks and a summary of the document.

No Silverlight and Preloader Experience(ish) - in 10 seconds...

2010-03-22T13:56:00.000-07:00

here is the basic's...:

<body background="Img/ScreenShot.png" >
<object id="SilverlightControlObj" name="SilverlightControlObjNm"
data="data:application/x-silverlight-2,"
type="application/x-silverlight-2" width="100%"
height="100%">
<param name="source" value="ClientBin/SUGWTK.xap"/>
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="3.0.40624.0" />
<param name="autoUpgrade" value="true" />
<br /> <br />
<center>...</center>
</object>

if that didn't make since... so for reference take a look at my site http://www.hackingsilverlight.net/ and view source. If you don't know how to view source on a web page... you probably should stop before you hurt your self...

lets start with the background image in the case of the same above... this is basically a screen shot of what a user could see if they have silverlight. then where you see the center tags that is where you put your 'non' silverlight stuff. If you refer back to my site source code you can get complicated and add an entire downlevel experience for non silverlight users. If you have an ecom site then you really need todo this. if on the other hand your site is called hacking silverlight like mine then you can be a bit more less friendly for silverlight.

In any case one other thing you can do is add a preloader animation.

here is a link to the preloader on my site:

http://www.HackingSilverlight.net/Inc/Preloader.xaml

and to use one you add something like this to the object tag used to create your silverlight application:

<param name="SplashScreenSource" value="Inc/Preloader.xaml" />

In any case doing a preloader and custom install experience is the best way to help the non silverlight visitor and help making the loading your site that much cooler for the Silverlight users of your site.

Me on Windows 7 Touch (and I mention Silverlight Hack)

2010-03-22T13:35:00.000-07:00

At the MPV Summit 2010 I was asked to talk a little bit about Windows 7 touch and so I talk abit about this touch tag Kiosk technology and our experience at Wirestone working with Windows 7 Touch, WPF and Silverlight. Anyway its pretty cool:

http://www.vimeo.com/10357419

Searchability and Indexability in Silverlight Sites

2010-03-22T10:17:00.000-07:00

I got a question from a friend last week that I thought would be a great question to post the answer to about Searchability and Indexability with Silverlight apps. Here is the question,

"I have created a site and I followed the approach something like this : I have created 5 projects for five pages and added the five xap in the main SilverlightProject. and then I have write the code something like this for each menu buttons : HtmlPage.Window.Navigate(new Uri("/Default.aspx",urikind.relative) ;
My question is : Does this help me solving providing the unique url's for search engine optimization ? "

my respone: linking in the xap does not expose those pges to search engines as such but does lay the ground for exposing those pages to the robots/search engines. to expose them to the search engine for indexing the best method is to use the install experience to expose the different elements as links in the html. remember as of late the search engines see nothing inside the xap. specifically they only see the html and a custom install experience provides not only a better user experience to users with out silverlight but that also is what the search engines will see.

MIX 2010 - in 10 seconds...

2010-03-18T21:45:00.000-07:00

um...

windows phone 7

Silverlight 4

better ux

lots of parties (MIXer was awesome)

OData (ado v35.5?)

number of problems with conference direction, still coolest of the public ms conferences

did I mention the iphone killer windows phone 7 (aka, Zune Phone, windows mobile 7) and amazingly enough it might actually be some real competition for iphone, ux is awesome (after 4+ freaking years it had better fraking be freaking awesome)

You can get all the videos here http://live.visitmix.com/Videos

AND Wirestone sponsored it, stole a sign with our Wirestone logo and more parties and friends.

The worst part of MIX was not getting to see everyone I was hoping to. there may have been talk of other things such as azure but they are really that critical and I didn't pay attention...

Did I say windows phone 7 and all its apps are Silverlight and XNA? freaking awesome

Dirty Dirty Silverlight Hack... - Silverlight 4 Hack: Use Native/Desktop CLR Without COM Registration

2010-03-12T09:46:00.000-08:00

Here is a hack of the month. Jeremiah is probably my favoriate Silverlight Prodagy and he has done it again with this wonderful hack, 'Use Native/Desktop CLR Without COM Registration' I like the first line, "WARNING: Information and code here can easily be abused. Please do not use it as a crutch in application planning, but more for utter despair or experimentation. Thus I wrote this blog post from that perspective."

Certainly Jeremiah's code can be abused but what is really interesting to me is how this is one more way to push the limits of what Silverlight can do. 'Hacking' doesn't have to be evil but can be just that pushing the limits and making things better. With that commentary here is the first paragraph and sample code from his article and for the rest you will have to go read his post:

Silverlight 4 + OOB + Elevated Trust gives us the ability to use COM. That would be extremely useful (vs. really useful), except we cannot use just any COM class. It has to support IDispatch (COM automation). It also has to have a ProgID associated to it. That leaves you still with quite a few built-in COM objects to work with, as Justin document's quite well here. What about running our own native or .NET code? One would have to register a COM object first, which requires administrator rights. That’s no fun for an end user! Optimally, it would be nice to be able to add your desktop CLR objects as resources to your XAP, and from Silverlight code, be able to instantiate and use your Desktop .NET classes. This is a hack to do just that.

Huh? What does the hack do?
Let me explain it in code.

/* Create our Desktop .NET helper */
dynamic fullDotNetProxy = fullDotNetProxy = ComAutomationFactory.CreateObject("ClrProxy");

/* Have our .NET helper load up our .NET assembly we extracted from our SL app resources */
dynamic assembly = fullDotNetProxy.GetAssembly(m_assembliesPath + "\\Inject.Test.dll");

/* Get our .NET Type */
dynamic testClassType = fullDotNetProxy.GetDotNetType(assembly, " Inject.Test.TestClass");

/* Create an object instance of our .NET type */
m_testClass = fullDotNetProxy.CreateInstance(testClassType);

/* Run our RunMe method on our .NET object */
m_testClass.RunMe();

Read the rest at:

http://jmorrill.hjtcentral.com/Home/tabid/428/EntryId/442/Silverlight-4-Hack-Use-Native-Desktop-CLR-Without-COM-Registration.aspx

Programatically Setting Margin On Elements...

2010-03-04T14:43:00.000-08:00

Foo.Margin = new Thickness(0, 50, 24, 6);

really thats it...

as defined by:

[Named UIElement].Margin = new Thickness( [double] , [double], [double], [double]);

or go the extra mile and use intellisense...

Does Your Agile/UX (User eXperience) Shop have a CMM Rating?

2010-03-03T21:32:00.000-08:00

I posted this article on Interact:

"CMM? what is that? is the typical response I get when asking about CMM. For starters CMM = Capability Maturity Model For Software Engineering project methodologies. Basically it’s a way to rate how good a software shop is with regard to its process. Now in the UX/Agile space talk of applying Software Engineering metrics such as the Capability Maturity Model For Software Engineering from Carnegie Mellon University might be a bit more than most will deal with however being exposed to both worlds I think it is worthwhile to talk about what UX/Agile can learn..."

Read more at http://www.interactseattle.org/?p=476

Hacking the Xap for Business Intelligence (BI)

2010-02-16T11:27:00.001-08:00

I did a post a while ago on 'Hacking Xap' files primarily around dynamical loading resources. The past few months I have been playing with another even cooler way to 'hack' xap files. In this case its about business and taking a precompiled xap file and instrumenting that xap file without recompiling your application or any code changes to the application. This kind of detailed usage information can be extremely helpful in looking at how applications are used and help identify key areas to focus on. From a hack standpoint to take a precompiled xap and put 'code' into all the method calls dynamically is just cool. Granted that collected information just doesn't show up on your desktop, you have to build a web service to collect the data but just the fact that I can take a precompiled xap and get it wired up without any jumping around is just cool.

so lets get to the meat of my experience...

I meet with a guy at PDC09 at well PDC from Preemptive Solutions http://www.preemptive.com/ and he brought up a tool that they have that is part of their 'dotfuscator' product. Most .net developers have either heard of 'dotfuscator' or seen it since its part of visual studio. But part of their main 'dotfuscator' tool is around 'Business Intelligence' and a little known additional feature that in my mind should be the main focus is my main interest and the subject of this post. In any case I got excited about this xap hacking tool er 'Business Intelligence tool' and he got myself a license.

So I got my license and found that getting it working is/was very problematic, not only a license key but an activation key and a bi key etc. I had to get a hold of tech support basically twice with an ongoing thread with their tech support... to be honest I'm no longer a fan of DRM or any other security system that prevents apps from running when installed or secures files. I understand that this is needed to keep software from being pirated and intellectual property stolen but preemptive got way overly excited with their implementation.

Install experience and setup aside it all seems pretty straight forward. The hard part of using the software is building the wcf service and collecting the data. Once you get a service up and running though you basically just need to load your xap and pick where you want to collect data in your app and point it at the web service. The fact that you don't need to re-compile your xap is just awesome. And from a ux standpoint getting this data really gives you insight into your application that you just couldn't get without writing alot of code up front.

If BI around usage of your application is important to you in building better Silverlight apps then this tool is worth the hassle of getting it setup. As a Silverlight 'guy' I would list this as a critical tool in your tool Silverlight toolbox.

So to be fair to the company they provide an endpoint that users can use and I'm told there is a codeplex project for helping you build an in house solution and put the results on a sharepoint web part. My only issue with that is having another company have my usage data which or course would be crazy. Certainly I would not want anyone having my data as I have virtually no trust in other companies and their network security... but alas others might be ok with that. and using sharepoint... well just say no ;) Sharepoint provides a great solution if you don't want to customize it too much... :)

More On Pixel Shaders

2010-02-11T09:18:00.000-08:00

So don't get to excited, I'm certainly not the apotheosis of man and pixelshaders like Walter (http://shazzam-tool.com/ ) but I do think they are really cool and along those lines I saw this great post off nokola this morning on 'Hue Shift in Pixel Shader 2.0' If your into pixel shaders this is a cool shader effict that as suggested in the title 'shifts the hue'. one of the reasons this post is cool is that it provides the shader source which makes worth while. :)

http://nokola.com/blog/post/2010/02/09/Someone-Said-it-Was-Impossible-Hue-Shift-in-Pixel-Shader-20-(Silverlight).aspx

Silverlight 4 - 3D (ish)

2010-02-10T14:35:00.000-08:00

One of the great new features in Silverlight 3 was the ability todo psuedo 3d via what alot of us joke about as 2.5D. things like prespective transforms and the like.

One of my fellow MVP's Einar Ingebrigtsen got a bit zellous (must have been bored) and make this awesome tool kit for 3d (ish) in Silverlight 4. Granted its not native into the platform but honestly I'm not sure I want it built in. To much over head... But using a toolkit likeEinar's Balder really makes it reasonable.

Here is the Sample Browser:
http://www.ingebrigtsen.info/silverlight/Balder/20100208/TestPage.html

and the code here:
http://balder.codeplex.com
and
http://github.com/einari/Balder

from a ux standpoint I think the kind of visualization work for business is just awesome. Balder should be in everyones tool kit.

Lunch With Interact - MVVM Made Easy

2010-01-22T10:53:00.000-08:00

We did a cool video pod cast on MVVM Made Easy. Had Erik Mork, Fabio Matsui and Jeremiah Morrill and we talked about MVVM and MVVM made easy and did a demo showing how to build an MVVM using this simple approach for an application in Silverlight.

http://www.vimeo.com/8915487

check it out for more info...

Dependency Injection Made Easy

2010-01-21T15:51:00.000-08:00

Part of the whole fun with doing 'ard'd samples is just the fun of doing something not quit PC but the bottom line really is doing clear and concise samples that are easy to understand. Granted MVVM really was getting out of control so there was allot of passion about this but in general simple, clear and concise works much better in teaching ideas and concepts especially for less then geniuses such as my self. Today's post comes out of some editing of a video blog post on MVVM Made Simple and some one's mention of using dependency injection over standard binding to a ViewModel in MVVM. That said that is what I'll show today. The most simple implementation of Dependency Injection. Take a look at this sample Xaml code from a few from a Silverlight app using MVVM Made Simple:

<UserControl.DataContext>
<Simple:AViewModelClass />
</UserControl.DataContext>

You can see that we are setting the data context to the view in XAML to a particular ViewModel. In MVVM the idea is that the View is data bound to a ViewModel using DataContext and typically done in Xaml. From here Dependency Injection is one of those concepts that is over complicated by most poeple and mixed with MVVM that makes all of it harder to understand. So really if you are already reading this I'm making the assuming you have worked with MVVM Made Simple and understands it complete. That being the case Dependency Injection is a tweak to MVVM that allows from a programmatic standpoint more flexibility as to the ViewModel being bound to the View.

The Xaml we looked at above is removed or at least the contents of DataContext is removed but in our codebehind we can do this:

this.DataContext = new AViewModelClass();

and now you know Dependency Injection... for 'ards (like me) at least. :)

Silverlight TV Episode 3: Multi-Touch 101 with Silverlight

2010-01-20T11:22:00.000-08:00

John interviews Silverlight MVP David Kelley (thats me) about developing multi-touch applications in Silverlight. I discuss the types of multi-touch hardware and my experiences in developing real world multi-touch applications. Then I jumps right into the code and shows how to create a multi-touch application with Silverlight 3 or 4! The application David demonstrates walks through the key multi-touch events, handling those events, touch IDs, tracking the location of the touch points, and much more. Being a sly devil, John even got David to commit to coming on the show again and demonstrating some advanced multi-touch samples and sharing his stories of how developers have broken their monitors using multi-touch!

David also calls out props to Tim Heuer and Davide Zordan!

http://channel9.msdn.com/shows/SilverlightTV/Silverlight-TV-Episode-3-Multi-Touch-101-with-Silverlight/#Page=1

here is a quick post to the SL3 code we used from Tim Heuer

Watch the video here:
http://timheuer.com/blog/archive/2009/07/30/silverlight-3-multi-touch-introduction-fundamentals-basics.aspx

this code converts easily to SL4 also here is a quick post more about the UX concepts used in multitouch

http://hackingsilverlight.blogspot.com/2010/01/silverlight-multi-touch-in-real-world.html

also the simon demo that includes multitouch (will have an SL4 version at MIX) that Davide Zordan and I worked on.

http://simon.codeplex.com/

also John's post is http://johnpapa.net/silverlight/multi-touch-101-silverlight-tv-episode-3/

watch for more on this topic in the next few months.

MIX10k Wirestones - the game...

2010-01-14T16:57:00.000-08:00

first shameless self promotion... Please check it out and vote 5 starts... Here is the link:

http://mix10k.visitmix.com/entry/details/186

That aside this is an interesting contest where the goal is to build the coolest application in under 10k in Silverlight 4 (what other kind is there?) and the problem is that this is not the binary but the source files... and it turns out the wirestone log in Adobe Illustrator had a lot of path data or defined 'points'... that being the case it took me a while to get something that would fit.

If you interested in games like this there is a codeplex project we use for demos at http://Simon.codeplex.com/ and you can go to http://www.HackingSilverlight.net/Simon.html to play the game.

Silverlight Multi-Touch In the Real World (once you go touch you never go back)

2010-01-14T07:47:00.000-08:00

John Papa asked me to help do a 10 minute segment for the Silverlight TV show for Channel 9. This got me thinking about multi touch from a demo standpoint and made me really think about what we have learned so far.

In the general since we (as an industry or society) are really just starting to see touch become a major part of our day to do human machine interaction. On the Microsoft stack using Surface, Windows 7 and WPF/Silverlight Multi touch support it is really becoming standard stuff. At Wirestone we have really been on the fore front of doing user experience testing and real world development over the past year primarily in the retail space. Now the specific projects I can't talk about yet but let me see if I can come up with some usability rules that might help in your development. If you first just trying to figure out how to do it in Silverlight (starting in at least Silverlight3 or better) there is one main API you need to care about.

take a look at this line of code:

Touch.FrameReported += new TouchFrameEventHandler(Touch_FrameReported);

this associates our one event handler that we care about. now lets take a look at using the event handler:

void Touch_FrameReported(object sender, TouchFrameEventArgs e)
{
foreach (TouchPoint tp in e.GetTouchPoints(Positions))
{
if (tp.Action == TouchAction.Down)
{
// DO SOMETHING
}
else if (tp.Action == TouchAction.Up)
{
// DO SOMETHING ELSE
}
else if (tp.Action == TouchAction.Move)
{
// OR DO SOMETHING MORE ELSE
}
}
}

you'll note that basically we are looping through the touch points, we get touch id's and based on the touch action we can do whatever it is we want. I encourage you to take a look at Tim's post on this and download his sample as he goes through this in detail and built a great multi touch app for testing how touch works using this method.

check it out here and download Tims app. (it also converts to SL4 seamlessly):

http://timheuer.com/blog/archive/2009/07/30/silverlight-3-multi-touch-introduction-fundamentals-basics.aspx

so now that we talked out how to do basic multi touch lets get back to my experience in user experience development with multi touch.

In our work we have been doing allot of users studies with Retail systems including kiosks, touch walls, surface and the like. But my favorite lesson learned has todo with the UX professionals... One day have a long day of debugging and unit testing I went home and wanted to check email on our home computer. I forget what it was exactly but I went to touch the screen and for several minutes I couldn't, I think I almost broke it before I realized that it wasn't touch. And the next week I realized that everyone on the team was having the same problem. Worse still once you realized that was a problem I found I can't stop... really once I went touch... I can't go back. don't get my wrong 'touch' will not replace the mouse in its current form/technology but it extends our experience and allows technology to be better integrated into our lives.

So lets talk about another story we saw in users studies. There are lots of different kinds of hardware, apps and technologies. One good thing to watch out for is the 'kinds' of things that register as a 'touch'. So in Silverlight on my multitouch laptop its not a big deal but I have seen hardware that the light conditions effect touches and even worse some of the hard where is so sensitive that the brush of a sleeve can cause problems. Granted this is more a surface thing then the typical Silverlight retail kiosk but still. When building experiences you need to get they system, hardware and any other bits in place so that you can see how users interact with the system so I can identify things like this 'before' they go live.

When considering design some good things to think about include How the user will tend to interact with the system. On thing you notice is that you loose those the mouse. no mouse overs etc. We have found that user's need and expect feedback. and many times when users 'touch' elements in the UI and nothing happens the user then tends to think that they did something wrong. Help the users by providing feed back even if its just a subtle 'bonk' noise that lets the users know the touch was received. When the user does touch something that does something make sure that 'something' shows that on the screen IE drop shadow forms and element moves slightly etc.

Also remember that we have trained our users to do and respond to computer UI a certain way. Consider that frequently we see users 'double' touch where the users expects there to be something like a double click. Users also tend to click the bottom of images or things below the image before things above. I can't express enough how much better a system is that has gone through extensive user testing and user centric design can be from a User Experience standpoint.

Another big topic in now days is gestures, in Silverlight this can mean 'more' code :) but focusing on the user we found that users tend to do only a few things 90% of the time or more... Touch, move and pinch... everything else that users use once they get past the fact they can touch everything is secondary at least currently. Although subtle things like letting users resize via pinch and the use of touch in the UI that has been carefully thought out regarding interaction really cranks up the end product.

But given considerations like that... touch is where its at and once you go touch, you never go back. :)

Getting Developers and Designers to play nice... and MIX

2010-01-06T11:45:00.000-08:00

For those of you that don't know MIX is the most important Microsoft related conference of the year. Also MIX has decided to have an open call this year for speakers... and the Public gets to vote... in an effort to get my sessions to the top of the list I'm emailing everyone in my contact list to ask your help in voting for my sessions... :)

Here are the steps:

1. Click http://visitmix.com/opencallvote/Entry?entryId=BREAKI077

2. Click ‘add to ballot’

3. Click ‘Submit Your Ballot’

If you have more time start here:

1. http://tinyurl.com/ye9uzwz

and then add all 3 sessions and vote them

Please and Thank you. and feel free to get all your friends to vote too…

For those of you that want more information here are the abstracts... normally you just send them to the people organizing a show but this year they are making everyone vote... :( or maybe this is a good thing... I guess it depends on if I get selected... ;)

Here are the 3 topics:

Title: Breaking Down Walls – The Story of Getting designers and developers working together in an Agency Environment

Abstract: Breaking Down Walls is about the wall between designers and developers in the typical design shop. Getting everyone to cross over, communicate and build better UX is where we are going and where many of the best Interactive Design firms are already. When designers and developers learn to communicate, and work together they really start to be able to make the best use of the tools they have from Adobe to Expression to Visual Studio, all these tools can be used in an open collaborative environment like never before. Learn to make magic here or at least learn how it has been done at Wirestone and other agencies that have done it successfully.

Title: Multi Dos and Don’t touches –Multi Touch Development from the trenches

Abstract: David talks about his experience in the retail space with real world multi-touch applications from touch kiosks to Surface and Silverlight. David will talk about the customer experience and how user centered design and multi-touch work in the retail world with ‘live’ customers as well as the perspective of designers, developers, IA and others regarding multi-touch. From stories about developers touching too much and about good ideas gone amuck David gets it all out on the table.

Title: Hacking Silverlight 4

Abstract: From MVVM for Tard’s to hosting Silverlight in WPF and getting around silly security sandbox’s, this session is about pushing the limits of Silverlight and making things easier to do. With a ‘It shouldn’t be that hard’ attitude to development some of the best work in Silverlight can sometimes be a bit of a hack and this session will talk about some of the most useful hacks. From using external hosts, the DOM bridge and even flash; Silverlight can do just about anything given half a chance or a few hacks.

again that link is http://tinyurl.com/ye9uzwz please vote for me :)

Asynchronous Image Loading in Silverlight

2010-01-04T22:47:00.000-08:00

So one task that was bugging me today was doing image loading asynchronously so as to not drag the app down. Now there are some 'xaml' ways of doing this in wpf and supposedly in SL but alas I have not seem it work well. I'm working on a larger class that does this better but here is the basics of how I got it to work in C# code... to start with lets take a look at the following code:

WebClient client = new WebClient();
client.OpenReadCompleted += new OpenReadCompletedEventHandler(wc_OpenReadCompleted);

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

client.OpenReadAsync(new Uri(ImagePath, UriKind.RelativeOrAbsolute), ImagePath);

this code lived in the constructor of the class I made. Basically its a user control that replaces the image tag so I can use it in Xaml or programatically etc. in this case I needed to use it programmatically to generate this image 'effect' that I was working on so I passed it into the constructor. the key to the code above is it creates a web client, then checks the url and finally calls the async method that loads the image.

the next bit of code is the event handler:

void wc_OpenReadCompleted(object sender, OpenReadCompletedEventArgs e)
{
try
{
BitmapImage ImageToLoad = new BitmapImage();
ImageToLoad.SetSource(e.Result as Stream);
TargetImage.Source = ImageToLoad;
}
catch (Exception)
{ }
}

this code is simple enough. Basically the BitmapImage is created and we load the result as a stream into it and then use that to set the source on an image. At least for me this seemed to work well. I'll probably add a few other features namely some reference counting so when I load 1000 of these it doesn't try to grab them all at once...

Silverlight Hosting in WPF

2009-12-30T01:21:00.000-08:00

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. http://silverlightviewport.codeplex.com/

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="http://silverlight.net/"
Source="http://silverlight.net/clientBin/showcasenav/ShowcaseNav.xap"
ViewportSize="550,550"
RenderFps="40"
x:Name="slViewport">
<slvp:SilverlightViewportElement.Effect>
<DropShadowEffect BlurRadius="50" />
</slvp:SilverlightViewportElement.Effect>
<slvp:SilverlightViewportElement.LayoutTransform>
<RotateTransform Angle="10" />
</slvp:SilverlightViewportElement.LayoutTransform>
</slvp:SilverlightViewportElement>

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

2009-12-30T00:58:00.000-08:00

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... > : )

DISCLAMIER: I AM NOT RESPONSIBLE FOR THE USE OF THIS TECHNOLOGY IN FACT YOU SHOULD STOP READING NOW BEFORE YOU HURT YOUR SELF OR OTHERS...

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...

DISCLAMER 2: STOP READING HERE AND DON'T DO THIS STUFF.

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:

<HTA:APPLICATION id="oVDProcess"
applicationName="Virtual Desktop - Lite"
singleinstance="yes"
caption="no"
contextmenu="no"
innerborder="no"
scroll="no"
showintaskbar="no"
version="1.0.032"
SELECTION="no"
windowState="normal"
icon="img\im_gray.ico"
/ >

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 );
instantReport();
} 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.close();
oNewFile = null;
alert( "Save Success!" );
window.close();
} 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... :)

Hacking the Silverlight Xap file

2009-12-07T15:51:00.000-08:00

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:

http://www.sharpgis.net/post/2009/04/21/REALLY-small-unzip-utility-for-Silverlight.aspx

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.

Making an Integrator

2009-11-26T00:06:00.000-08:00

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) http://www.amazon.com/Presentation-Zen-Simple-Design-Delivery/dp/0321525655/ref=sr_1_1?ie=UTF8&s=books&qid=1259022426&sr=8-1

• A Whole New Mind by Daniel Pink http://www.amazon.com/Whole-New-Mind-Right-Brainers-Future/dp/1594481717/ref=sr_1_1?ie=UTF8&s=books&qid=1259022506&sr=1-1

• Foundation Expression Blend 3 with Silverlight By Victor Gaudioso (http://www.amazon.com/Foundation-Expression-Blend-Silverlight-Foundations/dp/1430219505/ref=sr_1_1?ie=UTF8&s=books&qid=1259021904&sr=8-1 )

• Neuro Web Design – What makes them click? by Weinschenk http://www.amazon.com/Neuro-Web-Design-Makes-Click/dp/0321603605/ref=sr_1_1?ie=UTF8&s=books&qid=1259022564&sr=1-1

• Information Architecture by Wodtike and Govella http://www.amazon.com/Information-Architecture-Blueprints-Web-2nd/dp/0321600800/ref=sr_1_2?ie=UTF8&s=books&qid=1259022633&sr=1-2

• MVVM for tards (http://tard.codeplex.com/ )

• Foundation Silverlight 3 Animation by Jeff Paries http://www.amazon.com/Foundation-Silverlight-Animation-Jeff-Paries/dp/143022407X/ref=sr_1_1?ie=UTF8&s=books&qid=1259022673&sr=1-1

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 http://www.amazon.com/Foundation-Silverlight-Animation-Jeff-Paries/dp/143022407X/ref=sr_1_1?ie=UTF8&s=books&qid=1259022673&sr=1-1

• Foundation Expression Blend 3 with Silverlight By Victor Gaudioso (http://www.amazon.com/Foundation-Expression-Blend-Silverlight-Foundations/dp/1430219505/ref=sr_1_1?ie=UTF8&s=books&qid=1259021904&sr=8-1 )

• MVVM for tards (http://tard.codeplex.com/ )
• A Whole New Mind by Daniel Pink http://www.amazon.com/Whole-New-Mind-Right-Brainers-Future/dp/1594481717/ref=sr_1_1?ie=UTF8&s=books&qid=1259022506&sr=1-1

• Neuro Web Design – What makes them click? by Weinschenk http://www.amazon.com/Neuro-Web-Design-Makes-Click/dp/0321603605/ref=sr_1_1?ie=UTF8&s=books&qid=1259022564&sr=1-1

• Information Architecture by Wodtike and Govella http://www.amazon.com/Information-Architecture-Blueprints-Web-2nd/dp/0321600800/ref=sr_1_2?ie=UTF8&s=books&qid=1259022633&sr=1-2

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…

Silverlight and Dual Screen Monitors...

2009-11-24T11:16:00.000-08:00

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:

http://msdn.microsoft.com/en-us/library/ms536495(VS.85).aspx

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

caption=no
contextmenu=no
indderborder=no
border=none
windowstate=normal
scroll=no
showintaskbar=no

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

window.moveTo(0,0);
window.resizeTo(x,y);

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

see black ecma magic saves the day.

Developers on Better Design, User Experience and Why It Matters

2009-10-22T14:10:00.000-07:00

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.

http://www.pdcbof.com/post/220173613/bof-session-developers-on-better-design-user

Finally a Simple MVVM in Silverlight

2009-10-17T01:05:00.000-07:00

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; }
set
{
if (MyModel.SomeValue != value)
{
MyModel.SomeValue = value;
InvokePropertyChanged("SomeValue");
}
}
}
}

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:

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

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...

http://simple.codeplex.com/

stay tuned for maybe commanding for tards...

Silverlight Hack of the Week - Auto Zoom

2009-10-16T14:56:00.000-07:00

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.

AutoZoom
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]"/>

http://msdn.microsoft.com/en-us/library/dd833074(VS.95).aspx

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]"/>

http://msdn.microsoft.com/en-us/library/dd833068(VS.95).aspx

http://msdn.microsoft.com/en-us/library/system.windows.interop.content.zoomed(VS.95).aspx

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

Building a Dial Control

2009-09-24T08:48:00.000-07:00

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.

Blend/Catalyst Smack Down?

2009-09-21T20:46:00.000-07:00

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

http://www.seattled2ig.org/?p=257

The Gu a Silveright firestarter

2009-09-17T09:15:00.000-07:00

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:

http://www.msdnevents.com/firestarter/online/index.html

Don't Forget about Silverlight Week

2009-09-12T06:34:00.001-07:00

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:

Monday:
.NET Developer Association User Group Meeting - Featuring Jesse Liberty
http://www.dotnetda.com/Events/EventNewsletter.aspx?EventDate=9/14/2009

Tuesday
Silverlight Geek Dinner
http://adamkinney.com/Blog/silverlight-geek-dinner-sep-15th-seattleredmondbellevue

Wed
Interact Seattle - Featuring Tim Hueur
http://www.InteractSeattle.org/

Thur
Silverlight 3 Firestarter Event
http://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032422412&Culture=en-US

64bit Surface Hack

2009-09-09T11:59:00.001-07:00

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.

http://www.theruntime.com/blogs/brianpeek/archive/2009/03/10/install-the-surface-sdk-on-windows-7-andor-x64.aspx

Custom Control Development: Simple code guidelines

2009-09-08T09:37:00.000-07:00

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

2009-09-07T19:20:00.000-07:00

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

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

2009-08-26T09:39:00.000-07:00

Just to follow up on the geek speak MSDN thing from last week on composite application developement and a bit on best almost practices. Here is the MSDN blog post:

http://blogs.msdn.com/geekspeak/archive/2009/08/18/next-geekspeak-august-19-composite-application-development-with-david-kelley.aspx

and links to some of the things that we talked about.

www.HackingSilverlight.net
http://compositewpf.codeplex.com/
http://simon.codeplex.com/
http://wpf.codeplex.com/
http://hackingsilverlight.codeplex.com/
http://crossfader.codeplex.com/
http://www.sparklingclient.com/prism-silverlight/
http://msdn.microsoft.com/en-us/magazine/dd943055.aspx
http://blog.galasoft.ch/archive/2009/06/16/mvvm-light-toolkit-silverlight-edition-posted.aspx

and for fun… (more a point that it should be about solving the problem and not the implementation of a design pattern for its own sake)

http://www.drwpf.com/blog/Home/tabid/36/EntryID/27/Default.aspx