Over the past two years we’ve seen some incredible applications built on WPF and Silverlight. But application style doesn’t happen on its own, and many of the questions I’m asked these days are centered around application styling and custom controls.
As our fiscal year comes to an end, and with Silverlight 3 and WPF 4 are rapidly approaching, I thought it’d be a great time to put together a few short videos on skinning and custom controls. I hope these two ~20 minute videos help demystify a topic that’s really not as elusive as it seems.
Skins for WPF and Silverlight (20:15)
Creating ‘Lookless’ Controls for WPF and Silverlight (14:26)
-
By now you’ve hopefully seen SketchFlow and how it can help you conceptualize your projects before turning them into reality. If not, I highly recommend you check out the Mix ‘09 session Sketch Flow: From Concept to Production.
One of the tasks common to prototyping and actual development is planning navigation between pages (or screens). Luckily, Blend make this as easy as right-clicking on any button and choosing Navigate To – <Screen Name>. When you do this, Blend builds links into the application flow so that the SketchFlow player and the live application understand how the user can get around. These links show up in blue and look something like this:
You’ll notice in the image above that both the Start page and Winary page can get to any other page in the application. That’s because both the Start page and the Winery page have a set of buttons that look like this:
In fact it’s very common to want some piece of navigation shared across all the pages in an application. For example a navigation bar on the left side of a page or across the top is very common on websites and in SharePoint. In Blend 3 we can support the same concept by converting a group of controls into a ‘Composition Screen’. That composition can then be shared across all pages, and the navigation it provides comes along as well. In the application flow, it ends up looking something like this:
But you might notice that things have become a bit messy and we have blue lines and green lines that seem to go to the same places. That’s because Blend is showing the new composition lines in green and the old manually defined navigation links still remain in blue. Luckily, with the composition in place the manual links are extraneous and can be removed. This is done by right-clicking the line and choosing Remove Connection. The Sketchflow player and navigation system are smart enough to realize the composition still provides navigation routes, even if the manual links are gone. So the player still works just like it did before:
With the extra links removed, here’s one possible cleaned up flow for this application:
Of course it doesn’t hurt to leave the original links defined, and it may even be desirable to have them there to clarify intent. For example, just because the user can navigate directly from login to an empty shopping cart doesn’t necessarily mean we expect them to do it often.
Finally, I’ll close with a cool new feature I noticed in one of the latest builds: It’s now possible to dim out navigation lines and / or composition lines for the screens you’re not currently viewing. Pretty cool.
It only been since 2006 that we seriously started to drive WPF adoption, and Silverlight 2 hit the web just a scant 11 months ago. Still, in such short time ISVs have created some amazing things with these platforms.
Unfortunately, though the platforms themselves have seen some serious adoption, inclusion of design in the software development lifecycle still has a long way to go.
The good news is that methodologies and best practices are starting to emerge and I look forward to some great articles on the subject over the coming months. I’ve personally had the opportunity to present on this topic with one of our User Experience Evangelists, Sara Summers, and we cover something every ISV can add to their methodology: Sketching.
Sketching isn’t hard and anyone can do it (though I’ll freely admit I was uneasy at first drawing my little stick figures next to what felt like Sara’s “creative art”). But the point of a sketch isn’t how well it’s drawn; it’s how well the sketch captures a moment or an experience for a user in an application.
Sketches are informal. They’re lightweight, and they can be thrown away. Sketches can be used throughout the development process and, when used correctly, can significantly reduce the need to revisit code that’s already complete. People need to see and ‘feel’ an application before they can accept its design, but unfortunately it’s costly and time consuming to build interactive user interfaces that will just be thrown away. That’s why we so often end up with ‘bugs’ or feature requests involving design after an iteration goes to QA.
Sketches help people see the vision of an application and interactive sketches help the user ‘feel’ how it will work. These alone solve many of the problems that exist in application design today, but there’s still the costly issue of building interactive UI that can’t be reused. Luckily, with Expression Blend 3, tools are on the way to help with reuse.
On her blog Sara talks about Why Static Wireframing is Dead or, to put it another way, why static sketches shouldn’t be “good enough”. She also does a great job introducing SketchFlow with Non-Destructive Iterative Design and Fast and Easy Interactivity. Finally, if you haven’t yet seen SketchFlow in action, the Mix ’09 session SketchFlow: From Concept to Production is definitely worth a watch.
WPF and Silverlight have been out for a while now, and the number of controls available for these platforms is surprising. Consider this rather comprehensive list of Silverlight controls by Tim Heuer with at least 17 vendors and over 160 controls. Or this list of around 30 tools and libraries for WPF.
If you need to quickly check out and try out many of the available controls, Mike Taulty’s Control Browser is here to help. It shows all the built-in controls for both platforms as well as the controls included in the toolkit and many of the 3rd-party libraries available. It’s a great little click-once app, so head over to Mike’s Blog to read about it or click here to install.
Several of you joined us last October for the pilot XAMLfest in Houston Texas. The tour has grown up quite a bit since then, and we’re now starting to cover Silverlight 3 and Blend 3. Even better, we’re taking the tour online so you don’t have to leave the office to attend or get a refresher.
So what is XAMLfest?
Are you excited about WPF but concerned about the learning curve? Have you seen Silverlight but don’t know where to get started? Or are you curious about how tools like Expression Blend help designers and developers deliver great user experiences together? If so, join us at XAMLfest!
XAMLfest Online is a five day event delivered through a combination of live sessions and recorded training. The recorded training can be viewed at any time, but each segment should be watched before you participate in a related live session. The table below should help illustrate how each session relates to another:
Sessions are geared to both designer and developer audiences and attendees can participate in both tracks. Live sessions start 6/1 and recorded content is available starting 5/25. For more information and to register, please visit xamlfestonline.com. These sessions are open to the public as well, so feel free to pass this invitation on.
Please note: Participants must currently register for each session individually. We realize this is not convenient for those that plan to attend every session and we're working with msdev.com on a better solution. Thank you for taking the time to register.
I’ll be presenting Blend Tips and Tricks for application designers in a few venues over the next two months. The first session is tomorrow night at the D2Sig user group here in Houston.
As usual, I’m ‘borrowing’ from other excellent resources created by excellent people within Microsoft to do this presentation. I’d like to give those authors credit and give folks an option to view the wealth of other resources I couldn’t fit into my talk. So here they are!
Arturo’s Design Assets & Recordings
ux.artu.tv/?p=121
The Future of Expression Blend (Mix 2009)
sessions.visitmix.com/MIX09/C04F
Sara Summer’s Blog
uxarray.com
There are several challenges that need to be solved when building social applications. The ability for users to invite friends and share data amongst themselves is one example. If you want to add support for loosely-connected portable devices, synchronization and conflict resolution add significant complexity on top of an already difficult problem.
The Live Framework is a set of libraries and services for building connected applications that can reach millions of users. Live Mesh is a set of services for synchronizing user and application data between multiple devices and multiple people. I’ve recently posted a short screencast that illustrates using these technologies to make building ‘Always-Available Social Applications’ much easier. You can view the 10 minute screencast on Channel 9.
Note: This is an abbreviated version of the content I presented at Houston TechFest.
It’s a rare occasion that I get out of bed before 10 AM on a Saturday. Even less common is that I’m doing it to present. But the good news is I’m really looking forward to my sessions tomorrow at Houston TechFest. I hope to meet cool people that have interesting questions. Though maybe a few less questions in my Azure and Mesh session (which keeps coming in at one hour no matter how many times I practice it). I hope people don’t mind sticking around a little afterward for questions.
At any rate, here are the links to my two sessions and to the sample files that accompany them. I hope to see you there!
Session: Business Logic and Data Separation in WPF
Sample: BusinessUISep.zip
Session: Mesh and Azure for the Real World
Samples: MeshSamples.zip
SharePoint interest is growing with leaps and bounds, but there are still many scenarios that make more sense to leave in rich client applications. The question I've been asked a lot lately is how to bring these two worlds closer together.
Say, for example, you've got a web page that displays some basic information about a customer. How can you create a hyperlink that launches a smart client and takes you to that same customer inside the application? The solution is probably easier than you suspect, and in this post I'll walk through the steps.
The method we'll use to transfer context between the web site and our application is a simple file. I refer to these files 'Launch Files' and the real trick is getting windows to open our application when it sees them instead of prompting the user to save to disk.
You may not realize it but you've probably seen this before. Outlook does this with V-Card, V-Calendar and ics files. It's the same mechanism that allows you to subscribe to a SharePoint calendar in Outlook with a single click. (In truth it's 2 clicks in Vista because UAC asks the user if it's OK to send data to the app. But that's a topic for another day.)
The Launch File
The first thing you need to do is determine the structure for your launch file. I recommend XML because it's easy to generate and the format can grow with your application over time. You can place any data you want in this file, but keep in mind that it serves as context between your web site and your smart client.
In most cases you'll probably want to generate this file procedurally using query string parameters. This allows easy integration with the rest of your site, and a launch URL might look something like this:
http://www.mywebsite.com/AppLauncher.aspx?AppType=FirstApp&CustomerNumber=5
AppLauncher.aspx could look at the AppType parameter to determine which XML schema and file extension to use. The remaining parameters (CustomerNumber in this example) could be used to determine which data to include in the generated file.
File Extensions and Associations
Once you've determined the file format you need to settle on a unique file extension. It doesn't really matter what the extension is, it just has to be unique. This is no different than files intended for the local disk.
With the extension in mind, next you need to modify your application installer to include the new file type. The file type association registry keys are where you instruct Windows to launch your application whenever it sees a link for your file. Here's an example screenshot from a setup project in Visual Studio:
![clip_image002[4]](http://blogs.msdn.com/blogfiles/jbienz/WindowsLiveWriter/HowtoLaunchaSmartClientfromtheWebWithCon_90C1/clip_image0024_thumb.jpg)
BrowserFlags 0x8 or 0x9 indicates that a particular app should open in its own window when its associated file is clicked (as opposed to opening within IE).
EditFlags indicates what explorer should do with a particular file type and/or defines what class it is. 0x10000 turns off the "Confirm open after download" box in IE. If this flag is set, the file will be automatically downloaded to the browsers temporary folder and its 'open' verb will be executed.
For more details, read the File Types article on MSDN.
Existing Application Instances
The next thing you want to consider is what to do if the application is already running. By default, the registry settings above will simply start another instance of your application. Instead, you probably want to notify an existing instance. That's why in the screenshots below you will see the 'open' verb is associated with a DDE command (ddeexec). If the application is not already running, Windows starts it before the DDE command is sent.
![clip_image004[4]](http://blogs.msdn.com/blogfiles/jbienz/WindowsLiveWriter/HowtoLaunchaSmartClientfromtheWebWithCon_90C1/clip_image0044_thumb.jpg)
![clip_image006[4]](http://blogs.msdn.com/blogfiles/jbienz/WindowsLiveWriter/HowtoLaunchaSmartClientfromtheWebWithCon_90C1/clip_image0064_thumb.jpg)
![clip_image008[4]](http://blogs.msdn.com/blogfiles/jbienz/WindowsLiveWriter/HowtoLaunchaSmartClientfromtheWebWithCon_90C1/clip_image0084_thumb.jpg)
In this example, Windows will send the DDE command [Import("<FilePath>")]. The Application and Topic names are flexible, but you'll want to filter on them later.
Unfortunately, .Net doesn't have built-in support for handling DDE messages and DDE can seem a bit complex. I wrote a managed wrapper class for dealing with this some time ago and you can get it here:
Net DDE. I'm including this for sample purposes only and it doesn't come with any kind of warranty. :)
Here's an example of how to use DDE Client. The application entry point looks something like this:
// Create DDE client
dde = new DDEClient();
// Filter on app name
dde.AppName = "Cartographer";
// Start listening for DDE messages
dde.Execute += new DDEExecuteHandler(dde_Execute);
// Run application as normal
Application.Run(new MainUI());
}
And the DDE message handler looks something like this:
private static void dde_Execute(DDEClient sender, DDECommand[] commands)
{
// We only pay attention to the first command
DDECommand command = commands[0];
// The only command we support is Import.
if (command.Name != "Import") return;
// Get the launch file path
string launchFilePath = command.Params;
// TODO: Open the launch file and do something
...
}
I hope this helps, and happy coding.
I recently had the honor of participate in Incubation Week out in Silicon Valley. Leading up to the event we realized that at least two out of our six participants wanted to integrate Virtual Earth and Silverlight. I searched for guidance online but only turned up a few browser interop samples. I didn't find any really good managed wrappers for Virtual Earth until I started digging around internally. Then I found VIEWS.
VIEWS was originally created by Adam Eversole in Microsoft Research and it was an internal-only project when I found it. But with Adams assistance I was able to refine it, polish it and get it ready for public consumption in about 8 days; just in time for Incubation Week.
Today I'm happy to announce that VIEWS is live on CodePlex. You can download the binaries and the source, but to get acquainted quickly simply head on over to Channel 9 for a video introduction.
I finally turned a demo I do frequently for my ISVs into a MSDN Screencast:
http://channel9.msdn.com/posts/jbienz/Silverlight-Image-Search-with-LINQ-to-XML/
Check it out. This was based on Scott Guthrie's Digg sample.
Transitionals has finally been released to the public!
I know it's been some time since I last posted on Transitionals but it turns out it took longer to get approval for the project through legal than I had anticipated. I suppose I should have anticipated it, being that the code came from a Microsoft project that was previously available only in binary form. But that's all behind us now and people can start downloading, testing and even using the bits in their own products.
It seemed to take forever in my mind, but the truth is it only took around two months. And it still amazes me that I joined Microsoft only two and a half years ago and yet I've been able to bring this code to the community. Times are changing, and I'm excited to be here right now.
Without further adieu, let me present to you Transitionals:
http://www.codeplex.com/transitionals
I mentioned in my last post that Nick worked for a while at NASA. Well, last Thursday I had the opportunity to take a special private tour with Nick and Frank Hughes who also worked at NASA for over 20 years.
I'm too young to have my own memories of Apollo 13, but I was awed and inspired by the Hollywood retelling of it. Here's an original picture of Eugene F. Kranz, flight director, at his console in the Gemini era. Kranz was also one of the flight directors for Apollo 13 and was played by Ed Harris in the movie.
And here's me:
Any guess where I'm sitting? No, that isn't a reconstruction or something created after the fact. That's the actual room and the actual equipment used for the Apollo 13 flight!
I stood close enough to a flag that's been to the moon to touch it (I didn't dare) and I walked right up to a massive five story high vacuum chamber that's used to test parachutes in extremely thin atmospheres.
And finally, I got to stand at the front of a new control center. One that's actually in use today for the International Space Station. Here's a shot of it from the viewing room. This is the off shift while all the astronauts are sleeping and I got to be in the room toward the front near the flag.
It was a special afternoon that I won't forget. Thanks Nick and Frank for the memorable opportunity.
At the 2008 product launch I had a chance to meet an interesting individual by the name of Nick Davis. Nick and I chatted at great length about XNA and game development in general. Turns out we share a lot of interests and we even kicked around the idea of starting an game developer users group here in Houston.
Nick has experience building games and doing simulation. In fact he worked at id software for a while and spent several years at NASA too. He's got a wealth of knowledge to share on the trade and the tools, and me? Well, I've got access to the XNA product team and a Microsoft office to host us. :)
We start planning our first session tomorrow, but already many of the pieces are coming together. My MS buddy Chris Koenig helped me figure out how to book the space and put me in touch with the the XNA team. The XNA team has committed some swag and offered to be in touch for questions. Nick has found us a couple of potential sponsors (what's a users group without pizza?) and he's even gained the interest of a few local universities.
So I'd like to present on my blog, the first public posting of our users group site:
Houston Gaming and Media Users Group (http://www.hgmug.org)
Stay tuned for the first meeting invite.
The Transitionals project is up! Or at least it's created. You can try to visit it at CodePlex/Transitionals but the project isn't published yet so I don't know what you'll see. We don't plan to publish it until we get the source code in there. We've got until 3/21 before they automatically deprovision the project. That should be enough time, but it's sure making me antsy waiting for access to the source.
