The past couple days I’ve been working on a data visualization application. In doing so, I quickly mocked up unfolding a box. This is super simple XAML all done in Blend. Don’t forget to check out the XAML and see the demo:
Working with perspective 3D in Expression Blend 3
In my last post about perspective 3d I showed a quick sample application on how to take an image, bind it to a slider and control the RotationY on the PlaneProjection object. It’s easy enough to hand code one image, but now I want to design an interface. So, I downloaded the newest version of Expression Blend 3. First, the new interface is awesome, and I’m stoked about the direction Blend is going. Anyway, after poking around, here’s how to access the Projection properties in Blend:
1Locate the Transforms panel in the Properties Panel and select the Show advanced properties button at the bottom. |
|
2This opens up the Projection section. Here you can manually adjust the values and the object on the Artboard will update. |
|
3Or, if you want to fine tune the projection click and drag the circle icon on the left. You’ll notice the icon turns blue when selected. I found this feature a little difficult to use; however it could be that this isn’t suppose to be used on a laptop touch pad. |
|
4This is the resulting object on the Artboard with the corresponding Projection properties. |
|
Simple Perspective 3D in Silverlight 3
Perspective 3D comes to Silverlight! Below is a simple example on how to add Perspective 3d to your project. First, this is what the resulting application is going to look like, then we’ll dive into the code:
Download the code | See the example in action
XAML
There are two new features of note in this example. First, and foremost, the projection 3d tag to the Image:
Secondly, is element binding. The below XAML shows a Slider with the Value property bound to the PlaneProjections’s RotationY value. Notice the mode is TwoWay, meaning values updated by either the Slider or the RotationY value. In addition to the Slider binding, the Text property of the TextBlock is bound to the Slider Value.
and binding the value of the Slider to the value of the RotationY:
C#
There is no code required to run this. All the magic happens with the element binding.
MIX09 – Day 1
What a great first day at Mix. After talking with so many people over e-mail and Twitter, it’s wonderful to finally put a name with a face. Unfortunately, or fortunately, I haven’t hit the black jack tables, but that could only be a matter of time.
Here’s what my session schedule is looking like for Wednesday:
9:00am – Keynote
11:30am – 12:45pm – either What’s New in Microsoft Silverlight 3 T14F Lando 4204 or Going Inside Microsoft Silverlight: Exploring the Core CLR T71M San Polo 3401
2:15pm – 3:30pm – Building Amazing Business Centric Applications with Microsoft Silverlight 3 T40F Lando 4204
4:00pm – 5:00pm – Principles of Microsoft Silverlight Animation T12F | Lando 4201 By: Jeff Paries
Finally, here are a couple pictures from MIX. The first picture is of all the swag in the welcome kit and the second is a billboard of Bette Milder. I had to take it because it is a testament to the art of airbrushing. Do you really think her legs look that good?
*The first pictures is by aforonda.
Technorati Tags: MIX09
Mar
18
NO
comments
Silverlight 3 Beta 1 available
This certainly can’t be a mistake, but it appears that the Silverlight 3 Beta 1 bits are available for download. Check out Ars Technica for the links: http://arstechnica.com/microsoft/news/2009/03/silverlight-3-related-bits-start-to-arrive-early.ars.
I’m looking forward to this mornings Keynote when all the features are announced.
More to come…
Visibility pattern in Silverlight
The Visibility pattern is way of overriding the base Visibility of a control and adding a custom animation. There are a couple ways of hiding a control on screen 1.) setting the Opacity to 0 or 2.) setting the Visibility of the object to Collapsed. Depending on the situation, the latter is probably a preferred way of hiding an object because once collapsed, the space for that control is freed up.
A common problem I’ve run into when toggling the Visibility of an UserControl, is it “jumps” states. Meaning there’s no transition between Visible and Collapsed. The “jump” makes sense, because it’s like an on/off switch. The problem is, I want a smooth transition between states, and the way to accomplish this is by implementing the below Visibility pattern on your UserControl.
Before getting into the code, I must point out, implementing this pattern does not greatly effect the developer/designer workflow. As designer can open Expression Blend, create/tweak the hide and show animations and he/she doesn’t have to touch the code.
XAML
In UserControl’s XAML, add two Storyboards, one for hiding the control and one for showing it. The below Storyboards only animation Opacity; however you could also add animations for the ScaleX and ScaleY (doing this achieves the opening and closing windows effects in Vista).
C#
The below code blocks do the following:
- Register the hide and show animations to HideStoryboard and ShowStoryboard respectively,
- Overrides the base visibility,
- Adds an event VisibilityChanged – This event fires after the animation is complete. This importance of this event can not be overstated. If your hide/show animations are long, you will want to listen to this event before doing anything else.
- Finally, the ShowStoryboard setter has logic to register and unregister the Completed event.
MVVM notes and references
The paste couple week I’ve had two blog post that I just can’t finish. One is fully detailing my light weight 3d framework, and the second one is a post that compiles a list of MVVM resources and learning’s. A colleague of mine at Schematic, Herberth Madrigal, put together a list of what he’s learned and shared it with the our Microsoft group. Herberth’s notes are really well done, and he since he doesn’t have a blog, and I’ve been trying to finish a MVVM post, I asked and he graciously allowed me to post his notes here. Thanks Herberth.
Herberth’s notes:
I’ve tried to get a better knowledge of the MVVM (UI design) pattern during the past days. Here are some notes that I’ve found and I want to share with you.
1. MVVM, a WPF UI Design Pattern: Channel 9 has this video where they explain things like: why do we use MVVM? and what is MVVM? An a very simple explanation of How to implement it.
http://channel9.msdn.com/shows/Continuum/MVVM/
2. AFAIK, this pattern is easier to implement in WPF than in SL2. This is because WPF has more available tools such as triggers or routed commands. For this reason, you might see many implementations of libraries and helpers in order to implement this model in SL So, there are some libraries and ideas of how to work around this issue in Silverlight.
ViewModel Pattern in Silverlight using Behaviors: This guy uses a ‘behaviors‘ in order to keep communicate the XAML and the ViewModel.
http://www.nikhilk.net/Silverlight-ViewModel-Pattern.aspx. This guy has an article with a more detailed explanation about behaviors just in case you need it.
ICommand for Silverlight with Attached Behaviors: This buddy uses ICommand (an interface added into SL2 release). If you haven’t understood this pattern yet, then the sample in this article is must see.
Something that it’s kinda good about this implementation is that this guy uses two files from the library: Microsoft patterns & practices, Composite Application Guidance for Windows Presentation Foundation and Silverlight. This library is hosted in codeplex at http://www.codeplex.com/CompositeWPF/. BTW This is the most simple sample that I’ve seen of how to implement MVVM, look at the code behind of the Page.xml, and you’ll see the magic of this pattern.
MVVM pattern in Silverlight using SLEextensions: This guy uses a library called SLExtensions. This library has many others services other than the p&p (patterns and practices).
http://blog.developers.ba/post/2009/02/15/MVVM-pattern-in-Silverlight-using-SLEextensions.aspx
You can see http://www.codeplex.com/SLExtensions for more info about SLExtensions.
3. Code Snippets: This pattern uses extensively bindings and dependency properties. It may be useful to be able to write more quickly binding code or dependency property code. So, one guy has created lot code snippets for dependency properties, routed command and routed events for Vb and C#. You can get them from http://drwpf.com/blog/Home/tabid/36/EntryId/22/Default.aspx BTW, this snippets are for WPF, however it’s kinda easy to modify and make them SL compatible where possible.
Generic XAML loading control
There have been many times I’ve needed a simple/generic loading control for Silverlight. After a few frustrating google searches resulting in nothing, I decided it was time to create my own. Normally I love creating controls, but, in my mind, a loading control is something that I don’t want to devote much time to. It’s usually a control that just says “Loading…” with the honest intent to come back and make something cool. As projects go, time is against our side and the Loading control gets the shaft.
So, below is the control and how it was created. If nothing else, this will be the starting point for you to run with. Enjoy!
This is what the control looks like in Expression Blend:
To download the XAML, click this link. (The XAML is too lengthy to paste in the post).
Finally, to make the animation run, you’ll need to modify the code behind to look similar to this code block:
Click the below image to see it working.
The State of Silverlight 2 books
The past couple weeks I’ve seen a number of people asking for Silverlight book recommendations. Although I haven’t read all the below books; I’ve put together a comprehensive list of what’s available to you right now. If for any reason I have missed a Silverlight 2 book, please let me know and I’ll gladly update the list.
 |
Data-Driven Services with Silverlight 2 by John Papa – O’Reilly (Amazon)
This is possibly my favorite Silverlight book. John solely focuses on the data aspect of Silverlight, and let’s be honest, data is what mainly pays the bills. Combining learning’s from this book are the foundations for implementing a solid MVVM architecture. |
 |
Silverlight 2 Unleashed by Laurent Bugnion – Sams (Amazon)
Laurent’s book is a comprehensive, full color, deep dive into Silverlight 2. It’s geared towards readers who aren’t too familiar with Silverlight and XAML. |
 |
Pro Silverlight 2 in C# 2008 (Windows.Net) by Matthew McDonald – APress (Amazon)
The reviews have been outstanding for Matthew’s book. It appears this has book has set the bar for Silverlight books. This is the next book on my list to read. |
 |
Foundation Silverlight 2 Animation by Jeff Paries – Friends of Ed (Amazon)
Much like John Papa’s book, Jeff’s book is focused on a single topic and really shines. He’s convinced me to move away from using the Grid and TranslateTransforms for animations. But seriously, if you’re looking to put polish on you application with the use of animations, or want to start learning the building blocks of motion, this is the book for you. |
 |
Introducing Microsoation or even ft Silverlight 2.0, 2nd Edition by Laurence Moroney – Microsoft Press (Amazon) |
 |
Silverlight 2 in Action by Chad Campbell and John Stockton – Manning (Amazon)
Silverlight 2 in Action has a LOT of reviews: |
 |
Professional Silverlight 2 for ASP.NET Developers (Wrox Programmer to Programmer) by Jonathan Swift, Salvador Alvarez Patuel, Chris Barker, and Dan Wahlin – Wrox (Amazon) |
 |
Silverlight 2 Bible by Brad Dayley and Lisa DaNae Dayley – Wiley (Amazon)
Wiley has extended their Bible series to the Silverlight space. I have not read this book; there are mixed reviews on Amazon. Based on the reviews it sounds like this book is good for beginners to Silverlight. |
 |
Silverlight 2 Recipes: A Problem-Solution Approach (Expert’s Voice in .Net) by Jit Ghosh and Rob Cameron – APress (Amazon)
I have not read this book, but based on developing my own Silverlight Cookbook, I imagine this book is geared toward people who need to solve specific problems. Probably tasked based and can easily be used as a reference. |
 |
Accelerated Silverlight 2 by Jeff Scanlon – APress (Amazon) |
 |
Essential Silverlight 2 Up-to-Date by Christian Wenz – O’Reilly (Amazon) |
 |
Hacking Silverlight 2 by David Kelley – Manning (Amazon) |
 |
Beginning Silverlight 2: From Novice to Professional by Robert Lair (Amazon)
I haven’t read Robert’s book, but it looks this book is receiving favorable reviews. Here is an excerpt of a review from Amazon:
|
 |
Hello! Silverlight 2 by Bill Reiss and Dave Campbell – Manning
I don’t think this book is out yet. However, it must be listed because Dave Campbell has done such a great job with Silverlight Cream, and this book has the best looking cover. |
Auto trace in Expression Design
Yesterday when I was working on the preloaders, I wanted to use a XAML Silverlight logo. I couldn’t find one, so ended up venting on Twitter about it. Justin Angel gave me a great, and obvious, idea…use the Auto trace feature in Expression Design.
If you’re a Expression Design n00b like i am, Auto Trace can be found by selecting Object > Image > Auto Trace Image. Make sure you select an image on the Artboard before navigating to that menu option, otherwise you’ll find the Auto Trace option is disabled.
After you select the Auto Trace Image menu option, an options menu appears. Expression Design limits you to 128 colors, which I find limiting. The below settings are maxed out.
Below are a couple logos before and after the images were run through the Auto Trace. You’ll notice the more complex the logo the greater the degradation. Overall it’s not bad, but certainly there is room to grow.
