WPF: ItemsControl Drag Drop Behavior


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

Read the rest of this entry »

Posted in WPF. Tags: . 11 Comments »

SketchFlow: Exciting new design tool


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.

sketchflow

Read the rest of this entry »

WPF Body Behavior


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.

Read the rest of this entry »

Posted in WPF. Tags: . Leave a Comment »

JQuery Charts


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.

Read the rest of this entry »

WPF: Drag Drop Adorner


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.

DragAdorner

Read the rest of this entry »

Posted in WPF. 8 Comments »

WPF: Control Templating


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.

SliderTemplate

Read the rest of this entry »

Posted in WPF. 2 Comments »

Tip/Tricks: Glimmer Tool for JQuery


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.

Posted in JQuery. Tags: . 2 Comments »