** updated this post for Blend 3 RC release
In my previous post, I talked about adding Drag and Drop functionality into controls that implement ItemsControl via a Decorator pattern. In that DragDrop Decorator, I have created a Drag Adorner to create a visual effect of the actual item you are dragging. In this post I have added a new functionality where you can see an Insert Adorner that shows you the position you are attempting to add the item to. Since a picture tells a thousand words….
At the Mix 09 conference held this year, one of the very exciting new products I reckon is SketchFlow, whic is going to be part of the upcoming Expression Blend 3. It’s a new design tool that will allow rapid prototyping of UI sketches and wireframes. This new tool will help facilitate communications between designer, developer and business stakeholders. Traditionally, designers use paper, powerpoint, word or visio as a medium for the UI design, and these mediums do not scale well at all. Changes and comments are hard to track, not to mention time consuming and increasingly cumbersome after many iterations of design.
Recently after looking at the Remix 09 videos that was held in Sydney, I learned about heaps of interesting new features in Silverlight 3. One of these is Behaviors. Behaviors are self-contained, reusable snippets of code that implements certain functionality, and can be attached to UI elements. Think of it as plug-in. It’s been created by the Expression Blend team, and lives in the Microsoft.Expression.Interactivity namespace. There are some nice samples available from the Expression Gallery, some of them are really cool. I took a particular interest in the BodyBehavior, which morphs a UI element into a physics-aware entity. It becomes a solid entity and can interact with other entities via collisions, bouncing and gravity, etc.
I recently came across an very nice plugin for JQuery to create graphs and charts. Like many other JQuery plugins, it’s very easy to learn and takes no time at all to get up and running. This plugin is call jqPlot. If you need charting capabilities, jqPlot is definitely worth taking a look at. jqPlot has internally a plugin system as well, which allows you to specify different kinds of ‘renderers’ to create different kinds of charts. This framework is really cool, as it provides many useful renderers out of the box like bar charts, pie charts, and line charts. I’ve done up a very simple webpage with some data on blogging statistics, and you can spin up different kinds of charts using the buttons.
In my previous post, I created a Decorator for Dragging and Dropping between ItemsControls. The one thing it was lacking is visual feedback. There’s a way to provide that visual feedback and it’s by using Adorners. In short, adorners are bound to a UIElement, and it sits on an AdornerLayer of that bound element. The AdornerLayer has a Z-index that sit on top of your adorned element and renders independently, perfect for providing visual cues/feedback for state changes like dragging, resize, rotation, etc. I basically worked off my previous example and added this feature into my code.
One of the truly best things in WPF is the ability to change the look of any control, and still keeping its original functionality. In my previous blog post, I talked about how create Data Templates. This post, we are going to explore the world of Control Templating. Most WPF controls derive from Control class, and there’s a property called Template. This property allows us to set a whole new template and that will override the default look of the control. Typically we use a ControlTemplate to do this. In this post, we will look at how to re-template a Slider.
If you’re new to JQuery and want to learn or already know enough, but lazy to write JQuery code by hand, have a look at Microsoft’s Glimmer Lab. Glimmer is a free tool you can download and there are wizards you can use to spit out Html, Css and JQuery code in a .js file for you. Some cool things you can at the moment are DropDown Menus and Tooltips.
Just follow the wizard and you get your cool effects in a flash! This is Version 1.0 and I’m looking forward to see more cool things to be made available for developers. Simply awesome.
Drag and Drop functionality in WPF is pretty similar to how you do it in Winforms, using DataObject, DragEffects, etc in the System.Windows namespace. In Winforms, there’s a DoDragDrop method in the Control class, but in WPF, it’s been extracted out into a DragDrop static helper class. Writing drag and drop code can be quite repetitive and boring, and can be abstracted out to handle most scenarios. In this post, I have done so using the Decorator pattern.
Many moons ago, I blogged about the Command System in WPF. Today I’m going to talk about a Factory Class that will create commands for you, taking in delegate functions as parameters. How this helps is reduce the amount of code you have to write, because the Command Factory takes care of that for you.
I’m an avid fan of games, and excitement comes to gaming the form of a motion controller for the Xbox 360 called Project Natal that allows to you to play games without the need of a controller. It’s very impressive, and it adds a whole new dimension to interaction and usability. Wow…watch the promo video and be impressed!
