Pixel-In-Gene Blog

The Common Patterns of React

Wed, 06 Sep 2017 00:00:00 +0000

The React framework has been used by a wide variety of teams and several folks have written about their own experiences using React. This post compiles a list of the various design patterns that have been observed while building React Components.

React itself allows you to shape the Component Tree the way you want, but certain recurring patterns have made this an easier and more manageable task. The overarching principles are around:

Separation of concerns between components
Uni-directional data flow
Crisp communication via callbacks.

Effective MobX Patterns (Part 3)

Sat, 29 Oct 2016 00:00:00 +0000

The previous two parts (Part 1, Part 2) focused on the fundamental building blocks of MobX. With those blocks in hand we can now start solving some real-world scenarios through the lens of MobX. This post is going to be a series of examples that applies the concepts we have seen so far.

Of course, this is not an exhaustive list but should give you a taste of the kind of mental-shift you have to make to apply the MobX lens. All of the examples have been created without the @decorator syntax. This allows you to try this out inside Chrome Console, Node REPL or in an IDE like WebStorm that supports scratch files.

Effective MobX Patterns (Part 2)

Wed, 19 Oct 2016 00:00:00 +0000

In the previous part we looked at how you can setup a MobX state tree and make it observable. With that in place, the next step is to start reacting to changes. Frankly this is where the fun begins!

Effective MobX patterns (Part 1)

Mon, 17 Oct 2016 00:00:00 +0000

MobX provides a simple and powerful approach to managing client side state. It uses a technique called Transparent Functional Reactive Programming (TFRP) wherein it automatically computes a derived value if any of the dependent values change. This is done by setting up a dependency graph that tracks the value changes.

MobX causes a shift in mindset (for the better) and changes your mental model around managing client side state.

After having used it for more than 6+ months on multiple React projects, I find certain patterns of usage recurring very frequently. This series of posts is a compilation of various techniques I’ve been using to manage client state with MobX.

Unit Testing on any UI Project

Wed, 03 Aug 2016 00:00:00 +0000

Unit Testing is one of those aspects of a UI project that is often ignored. Not because nobody wants to do it, just that the cost of setup and maintenance can be taxing for a small team. Even on a large team, it can be ignored during those looming deadlines. Testing takes far greater discipline and rigor to do it right and to keep doing it right.

This post is not a panacea for Unit Testing but rather distilling the process of Unit Testing to a few key areas. Also, note that we are just focusing on Unit Testing and not on other kinds of testing like Integration (aka end-to-end), Acceptance, Stress/Chaos testing, etc. I’ll also limit myself to Web UI but the ideas are applicable to other UI platforms.

Patterns of Higher-Order-Components (HOC) in React

Wed, 13 Jul 2016 00:00:00 +0000

Higher Order Components (HOC) are a direct translation of Higher Order Functions from functional languages. A HOC extends the state / behavior of the inner component in a composable way, so you can add many more extensions without the knowledge of the inner component.

React is particularly suited to support this with minimum friction. The tag structure of JSX also helps in visualizing this in text.

In this blog post, we’ll take a look at many of the use-cases for HOCs. They are all from real projects so you are assured of its practicality!

Consuming Browserify bundles with Webpack

Mon, 11 Jul 2016 00:00:00 +0000

If you are only using Browserify or only Webpack in your project, you don’t have to worry about consuming external bundles. Either of them will take care of it for you. However if you are in a situation like mine where you have legacy code in the application, bundled by Browserify and newer shiny code bundled with Webpack, then this post is all for you!

In Short: We will consume the Browserify-bundled code as externals within Webpack.

Building Courses for Tuts+

Tue, 31 May 2016 08:53:06 -0400

Over the past few months I’ve spent a lot of time building video courses. It’s actually quite a long process given my client commitments but the end results are rewarding.

Communication Strategies in AngularJS 1.x

Mon, 17 Aug 2015 00:00:00 +0000

As the application scales in size, controlling communication between components requires enough thought to ensure there isn’t too much or too little of it. In this post we will look at the various ways of communicating in AngularJS 1.x. Some of these techniques may still apply in the Angular 2 world (eg: Events), however the actual mechanics will be different.

Using Angular as a Template expander

Mon, 30 Mar 2015 00:00:00 +0000

Now we all know AngularJS is an awesome framework to build large Single Page Applications. At the core of angular is a little thing called the HTML Compiler. It takes text as input (most likely from your templates) and transforms it into DOM elements. In the process it also does a bunch of things like:

Directive detection
Expression interpolation
Template expansion
Setting up data-bindings, etc.

Let me drive your attention to one area: Template Expansion. I was curious to know if AngularJS could be used purely as a template expander. Something akin to Handlebars or Underscore templates. Is it possible? Can we take that aspect of Angular and use it independently?

Takeaways From NgConf 2015

Sat, 07 Mar 2015 00:00:00 +0000

On March 5th and 6th I attended ng-conf 2015, which was held in Salt Lake City, Utah. It was great to meet several people building Angular apps as well as speaking first hand to the people behind Angular and TypeScript. On the technical front, I found a few resounding themes throughout the conference:

QuickLens - A Year in the making

Sun, 01 Mar 2015 00:00:00 +0000

If you see my Archive page, you will notice a complete void for 2014, a year where I did not post at all. So what happened? Well, besides taking those much needed sleep-breaks, I was busy building QuickLens: a Mac App that provides a set of tools to explore User Interfaces.

The app was mostly built on the Nights and Weekends plan.

RubyMotion Features QuickLens

Thu, 05 Feb 2015 00:00:00 +0000

It’s no secret that QuickLens is built using RubyMotion.

More Writing on NetTuts+

Sun, 12 May 2013 00:00:00 +0000

Alright, this blog has been quiet for a few months. But that doesn’t mean that I have stopped writing.

My Key Takeaways from SMACSS

Sun, 23 Dec 2012 00:00:00 +0000

A seemingly simple language yet a tangled mess of complexity. If you are picturing a giant CSS file from your website, you are on the right track. Yes, CSS can start out as a really simple language to learn but can be hard to master. The CSS chaos starts slowly and seems innocuous at first. Overtime as you accumulate features and more variations on your website, you see the CSS explode and you are soon fighting with the spaghetti monster.

Common Idioms in JavaScript development

Sun, 07 Oct 2012 00:00:00 +0000

These are some of the common idioms I find myself using again and again. I am going to keep this as a live document and will update as I discover more useful idioms.

A simple organization scheme for handling routes in ExpressJS apps

Thu, 14 Jun 2012 00:00:00 +0000

The ExpressJS framework is one of the simpler yet very powerful web frameworks for NodeJS. It provides a simple way to expose GET / POST endpoints on your web application, which then serves the appropriate response. Getting started with ExpressJS is easy and the Guides on the ExpressJS website are very well written to make you effective in short order.

Quick sketching using SketchBook Pro + Wacom Intuos 4

Sun, 06 May 2012 00:00:00 +0000

Its been a while since I posted anything on this blog. Thought I’ll break the calm with a quick post about my recent sketch.

Animating Pie Slices using a custom CALayer

Tue, 21 Feb 2012 00:00:00 +0000

It’s going to be a rather long post, so if you want to jump around, here are your way points:

Simple helper method for async testing with Jasmine and RequireJS

Wed, 14 Dec 2011 00:00:00 +0000

Unit testing in Javascript, especially with RequireJS can be a bit of challenge. Jasmine, which is our unit testing framework does not have any out of the box support for RequireJS. I have seen a few ways of integrating RequireJS but that requires hacking the SpecRunner.html file, the main test harness that executes all jasmine tests. That wasn’t really an option for us as we were using a ruby gem called jasmine to auto generate this html file from our spec files. There is however an experimental gem created by Brendan Jerwin that provides RequireJS integration. We did consider that option before ruling it out for lack of official support. After a bit of flailing around, we finally hit upon a little nugget in the core jasmine framework that seemed to provide a solution.

Using jQuery.Deferred() and RequireJS to Lazy Load Google Maps API

Tue, 18 Oct 2011 00:00:00 +0000

In the world of jQuery or for that matter, any JavaScript library, callbacks are the norm for programming asynchronous tasks. When you have several operations dependent on the completion of some other operation, it is best to handle them as a callback. At a later point when your dependent task completes, all of the registered callbacks will be triggered.

Tips for Speeding Up Octopress Site Generation

Thu, 29 Sep 2011 00:00:00 +0000

As I blogged about earlier, Octopress is a great framework for writing blog posts and packs in all the features for writing a code-centric blogs. Of course, it goes without saying that the blog also looks awesome as if designed by a true designer. Some of the nicer things about writing posts is that there are rake tasks that do most of the grunt work:

Switching to the Octopress Blogging Engine

Mon, 12 Sep 2011 00:00:00 +0000

I have been using Wordpress for few years now and have been very happy with its features. In the past year, I have tried several times to change the theme on my blog and also semantify my posts by using Markdown as my de facto style. Of course, none of it happened and I was still using a combination of HTML and Rich Text Editor for formatting my posts.The more I delayed, the more I realized that there were a lot more reasons to NOT like Wordpress:

Be careful declaring properties in CoffeeScript

Thu, 25 Aug 2011 00:00:00 +0000

In JavaScript, if you set a property on the prototype, it is like a static property that is shared by all instances of the Function. This is common knowledge in JavaScript and quite visible in the code. However if you are writing all your code in CoffeeScript, this fact gets hidden away by the way you declare properties.

Progressive reveal animations in SVG using a

Thu, 11 Aug 2011 00:00:00 +0000

In the previous post on “Building a tree diagram in D3.js” we saw how the D3.js library could be used to render tree diagrams. If you haven’t read that post yet, I would encourage reading it as we will be expanding on it in this post.

Building a tree diagram in D3.js

Wed, 20 Jul 2011 00:00:00 +0000

In the past few weeks, I have spent some time evaluating some visualization frameworks in Javascript. The most prominents ones include: Javascript InfoVis Tookit, D3 and Protovis. Each of them is feature rich and provides a varieties of configurable layouts. In particular I was impressed with D3 as it gives a nice balance of features and flexibility and allowed me to build just the visualizations I wanted. In this post, I want to take a quick dive into using D3 for building a tree diagram.

Complex filtering in isotope.js

Sun, 10 Jul 2011 00:00:00 +0000

Of late, I have been building some Html/Javascript apps and exploring a bunch of javascript libraries, including the usual suspects (jQuery, jQuery UI, jQuery template, underscore, etc). The more interesting ones are visualization libraries like d3, isotope, highcharts. In this post, I will focus on a specific scenario in the isotope.js library.

Blinking UI with a CaretBrush

Thu, 26 May 2011 00:00:00 +0000

A few days back while I was busy designing some UI for a Silverlight app, I accidentally hit upon this fun hack.

Its Consulting time!

Sat, 19 Mar 2011 00:00:00 +0000

After having worked full-time for several years in the Corporate world, I have decided to make a career change and jump on to Consulting. I have joined my friends at
, where I’ll be working in the Financial district of New York, building solutions using Microsoft .Net, C\#, WPF, Silverlight, Html5 + JavaScript and others.

Building a CoverFlow visualization using Quartz Composer

Sat, 12 Mar 2011 00:00:00 +0000

I have been playing around with Quartz Composer (included as part of the Developer tools installation on Mac OSX) for almost a year. It’s a great tool for creating screen savers, music visualizations and also for quick prototyping of some visual concepts. I personally find the patch-based approach to solving problems quite refreshing and offers a different perspective to looking at complex problems. It is very much like programming but with functional blocks (called patches) rather than real code.

Tokenizing control – convert text to tokens

Thu, 28 Oct 2010 00:00:00 +0000

In this post I want to talk about some interesting ideas regarding a control called TokenizingControl? What is that you may ask, so lets start with the basics. A Tokenizing control takes in some text, delimited by some character and converts that text to a token, a token that is represented by some UI element other than the original text. For example, if you have text like “John Doe;” (note the ; acting as delimiter), then the tokenizing control will convert it to some UI Element like a Button, say.

A DoubleBorderDecorator to simplify rounded-border decorations

Mon, 25 Oct 2010 00:00:00 +0000

The designers in my team use a lot of nested double-Border elements to achieve a nice rounded border-effect around containers. In XAML this looks like so:

 1<Border Background="#FF414141"
 2        Padding="3"
 3        Width="300"
 4        Height="200"
 5        CornerRadius="8">
 6    <Border Padding="3"
 7            CornerRadius="8">
 8        <Border.Background>
 9            <LinearGradientBrush EndPoint="0.5,1"
10                                 StartPoint="0.5,0">
11                <GradientStop Color="#FF910000"
12                              Offset="1" />
13                <GradientStop Color="#FFAF5959" />
14            </LinearGradientBrush>
15        </Border.Background>
16    </Border>
17</Border>
18

Simple TriggerAction for docking using GridSplitters

Sat, 07 Aug 2010 00:00:00 +0000

GridSplitters work great if you want to provide a split view between two views. By dragging the GridSplitter you can adjust the space allocated to each view. As one view grows in size, the other reduces by the same size. For most cases, this is exactly what is required. In my case, this wasn’t enough. In addition to adjusting the splitter, I also wanted a way to quickly collapse one view and allocate all the space to the other view (a.k.a. Docking). The views were arranged horizontally like so:

The SpiderWebControl for Silverlight

Fri, 23 Apr 2010 00:00:00 +0000

Quick tip about changing SketchFlow’s startup page name (Silverlight)

Mon, 01 Feb 2010 00:00:00 +0000

When working in SketchFlow for SilverLight 3, the default file name of the test page is called TestPage.html. If this is not what you want, you can easily change it in the main SketchFlow project’s .csproj file. If you open up the <project-name\>.csproj file, at around line 27, you should see a tag called <TestPageFileName>. Change this to the filename you want. In my case I wanted index.html since I was hosting the prototypes on the intranet and wanted a simple url like

http://sketch/

Chapter Excerpt in CODE magazine

Wed, 27 Jan 2010 00:00:00 +0000

I received a mail from my publisher stating that one of the chapters from my book: WPF Control Development Unleashed, has been published as an article in the CODE magazine. Go have a look.

PyBinding now hosted on CodePlex

Mon, 11 Jan 2010 00:00:00 +0000

Almost a year back, I posted about an interesting project I was involved in, called PyBinding. PyBinding gives you an easy way to write IronPython snippets inside Xaml Bindings and completely do away with value converters.

Sketching, painting and Figure drawing

Sun, 10 Jan 2010 00:00:00 +0000

On my recent vacation trip to India, I had some time to get back to my old hobby of sketching and painting. A hobby that I discontinued back in 2009. In fact I missed it so much that the feel of getting back to pencil and paper was great. Photoshop and Illustrator can definitely help you make some great illustrations but nothing can substitute the pure joy of using simple materials for drawing.

Bug fix in the sample on Virtualization in WPF Control Development Unleashed

Fri, 20 Nov 2009 00:00:00 +0000

I recently received a mail from Marshall Price, one of the readers of my book WPF Control Development Unleashed, pointing at a bug in the sample from Chapter 8 (Virtualization). He had made some changes to the sample code in order to delete items from the StaggeredPanel. This caused a crash in the virtualized panel.

WPF Control development Unleashed, now in F#

Thu, 05 Nov 2009 00:00:00 +0000

Wondering what would it look like if you built WPF controls using F# ? If yes, head over to Matt’s blog where he has translated almost all of the examples in my book WPF Control Development Unleashed to F# ! He is even starting a CodePlex project to host the source code.

Kudos to Matt for starting the effort.

A panel that scrolls about a half-circle

Sun, 04 Oct 2009 00:00:00 +0000

This post is inspired by an interesting idea sent by Bo Stilling, one of the readers of my book. It combines the ideas discussed in Chapter 4 “Custom Panels” and Chapter 7 “IScrollInfo” to create a panel that lays out the items about a half-circle. When you scroll the panel, the items move about a half-circle. I thought that was interesting because generally when you scroll, the items always move vertically up/down. This panel creates a distortion that makes the items move about a circle, as in the following figure:

“WPF Control Development Unleashed” has been published

Sat, 19 Sep 2009 00:00:00 +0000

The book is finally out. Go get your copy and start building some advanced controls ! Happy WPF Control programming! Amazon link

Creating a 3D logo from an image using Cinema 4D

Sat, 12 Sep 2009 00:00:00 +0000

I have always enjoyed 3D modeling. The kind of tools you use and kind of thinking that is required is so different than my everyday job of writing code. That shift in mindset is quite challenging and also exciting. In fact, the only reason I keep coming back to 3D modeling is for this aspect: the shift in thinking! Of all the 3D modeling tools I’ve used so far, I like Cinema 4D (C4D), for its ease of use and the speed with which I can bring my ideas to life. Once past the initial learning curve, it is really refreshing and relaxing.

Source code for “WPF Control Development Unleashed”

Wed, 02 Sep 2009 00:00:00 +0000

The website for my upcoming book is finally online, which also means the Source code is available for download ! Without further ado, here is the link to the website:

Source code of Simple 3D Engine, now part of FluidKit

Wed, 29 Jul 2009 00:00:00 +0000

After much prodding from friends and readers of this blog, I have decided to release the source of the little 3D engine I wrote a long time back (here and here).

A SilverLight TreeMap control

Sat, 20 Jun 2009 00:00:00 +0000

Treemaps are space-filling visualizations of hierarchical data. Each node in the Treemap is represented as a rectangle, whose size depends on some attribute of the data. For example, if I am representing the high-volume trades in a day, I could have a Treemap that shows different sized rectangles based on the volume of each trade. Larger rectangles will represent the large trades and smaller rectangles, the not so large trades. The most popular of the treemap implementations use a squarified treemap algorithm that produces more squarish rectangles, resulting in better aspect ratios.

Using Attached Properties for view transitions, the ViewManager

Wed, 15 Apr 2009 00:00:00 +0000

Attached Properties is a wonderful feature of WPF and I find myself using it in a variety of scenarios. The most recent one has to do with view-management and transitions. The app that I was building has many visual parts that can be swapped out and replaced with something else. Each part is actually a UserControl, also called the view. To make things interesting, the actual swap happens with a transition, using the TransitionPresenter from the FluidKit library.

A Design Pattern for communication between UI and ViewModel

Thu, 09 Apr 2009 00:00:00 +0000

In the app that I am working on right now, there is a particular design pattern that I am using to communicate back and forth with the server side data. The app itself is structured into three distinct pieces:

A Service Model (SM), which is essentially a web-service with a bunch of data-contracts
A View Model (VM) which talks to the SM on a background thread and notifies the UI whenever an operation completes. The VM also stores a reference to the Dispatcher, which is used to communicate with the UI
…and finally the UI – the WPF powerhouse

Setting up XDebug on NetBeans 6.5 PHP IDE

Sun, 22 Mar 2009 00:00:00 +0000

Recently I was doing a bit of PHP development for my blog and playing around with the WordPress APIs. After spending some time deciding on the IDE to use, I hit upon NetBeans 6.5, which I think is an awesome tool for PHP development. It has fantastic auto-completion, syntax-highlighting, code-folding and refactoring support unlike no other PHP IDE. It also has nice debugger support (XDebug) but setting it up can be a pain!

Quick update on the WPF Control Development Unleashed book

Wed, 18 Mar 2009 00:00:00 +0000

As many of you know my co-author Kevin Hoffman and I have been quite busy finishing up a book on WPF control development. We have few more chapters to finish and then we will be content ready for tech review. The first half of the book is already done and we are going through the tech review as I write. The tech review phase will add a lot of polish to the book and make it an enjoyable read. I am glad to have a master-writer like Kevin working with me, who is doing the part of “making it enjoyable” !

I have started tweeting

Thu, 05 Mar 2009 00:00:00 +0000

I have finally jumped on to Twitter and making sounds (tweets) on @pavanpodila. So follow me and I’ll follow you :-)

Animating graphs in WPF using Clipping masks

Thu, 26 Feb 2009 00:00:00 +0000

Over the past couple of weeks I have been working on an application that displays a variety of graphs. One of the standard features we have is the load animation for a graph when the user sees it for the first time. For a line graph, this would mean that the graph animates from the left to right and draws itself out.

A fun After Effects CS4 composition

Sat, 24 Jan 2009 00:00:00 +0000

Last night I was playing around with After Effects CS4 and made this video just for fun. Its nothing fancy, just some 3D shake and some particle effects. Unfortunately I did not save my project so I cannot post the *.aep file. I do have the rendered video, which you can see below. In the future, I will post the project file as well.

Making dashed lines in Photoshop

Fri, 23 Jan 2009 00:00:00 +0000

This is just a quick post on how to make dashed lines in Photoshop. I am sure many of the designers who are reading this would find it useful. Photoshop by default does not give you any direct way to draw dashed lines. However it has the very powerful brush engine that can do the trick.

A tip for referencing Assets in your WPF application

Mon, 05 Jan 2009 00:00:00 +0000

Organizing and referencing assets (images, fonts, xaml) has always been an interesting topic of discussion. There is still no proper guidance and is wide open for experimentation.

Huge limitation of a MarkupExtension

Tue, 30 Dec 2008 00:00:00 +0000

MarkupExtensions are a Xaml-only way of providing extensions to the markup. It allows you to encapsulate procedural logic and provide value to attributes (DependencyProperties) inside of a Xaml document. To create a custom MarkupExtension you derive from the MarkupExtension class and override the ProvideValue() method. This method is called automatically by the framework when it needs the value for the DependencyProperty. Note that it is a one-time only call.

The PyBinding MarkupExtension: use Python statements for Data Binding

Wed, 24 Dec 2008 00:00:00 +0000

Many of us have felt the need to have custom expressions inside of Bindings. The need has ranged from applying mathematical operators to calling methods on bound objects. For simple needs you can probably create a custom IValueConverter or a IMultiValueConverter that can do the job, but when you want to use arbitrary expressions, something more elaborate is needed.

IronPython is the new IValueConverter, IMultiValueConverter

Tue, 11 Nov 2008 00:00:00 +0000

Applying simple mathematical operations inside WPF DataBindings has always been a non-trivial task. By default the {Binding} or MultiBinding syntax does not allow the use of arbitrary expressions inside the Path. They are restricted to the dot-syntax of referencing properties on an object, possibly with a chain of references, something like Person.Phones[0].Phone.Number. Simple expressions like Person.Age + 1 are disallowed.

The new TransitionPresenter in FluidKit

Wed, 05 Nov 2008 00:00:00 +0000

Over the past couple of days I had a chance to update the TranstionContainer control in FluidKit. There are a bunch of refactorings and some new features:

A technique to find an ItemsPanel with simulated hit-testing

Mon, 20 Oct 2008 00:00:00 +0000

I am sure many of you have had a need to dig into an ItemsControl to find the ItemsPanel.

If you are taking a top-down approach, which is more involved, you would have to rely on the VisualTreeHelper to drill down and then find the Panel instance you need. A bottom-up approach is more easier if you have a reference to a UI Container inside the ItemsControl. You could do ItemsControl.GetItemsOwner() and pass in a reference to your UI container to get back a reference to the ItemsControl. A slightly different way would be to walk up the parent chain manually and get at the ItemsControl.

Multi selection in a CoverFlow view

Tue, 14 Oct 2008 00:00:00 +0000

CoverFlow by default is an single selection model. The item that is in the center is always the selected item and as you keep navigating from left to right, the selected item changes. To introduce a multi-selection mode into a seemingly single selection model, will require some fundamental changes.

Generic.xaml must have a build action of Page

Wed, 08 Oct 2008 00:00:00 +0000

I was in a code review session and was getting a constant problem with the default (generic) theme for a control. The file generic.xaml was correctly located in the /Themes folder and the Assembly attribute ThemeInfo was also set. But still the control was notshowing up !

No WebBrowser on a transparent Window

Mon, 06 Oct 2008 00:00:00 +0000

One of my blog readers, Haider Malik, raised a question about not being able to see a WebBrowser control inside a transparent GlassWindow. My original thoughts were about some Airspace issues or something to do with Interop. Interestingly it looks like embedding a WebBrowser or any ActiveX object inside a transparent Window is just not supported in the current version of WPF. Thanks Haider for letting me know!

A Carousel component in jQuery

Wed, 01 Oct 2008 00:00:00 +0000

Sometime back I had done a landing web page for some of the internal projects at my company. The page was supposed to be pure Html with Css and Javascript. jQuery was an obvious choice for me as I had already used it successfully in my earlier projects. We decided to show the projects in a carousel view, something like so:

I am now an MVP!

Wed, 01 Oct 2008 00:00:00 +0000

I got the news today morning that I have been awarded the Microsoft Most Valuable Professional for Client Application Development. Thank you Microsoft!

Demo video of Flash CS4 features

Fri, 26 Sep 2008 00:00:00 +0000

Lee Brimelow does a nice job describing some of the exciting new features of the Flash CS4 IDE. He has published a video on his popular GotoAndLearn website.

FluidKit with Outlook 2007 and Dynamics CRM

Wed, 24 Sep 2008 00:00:00 +0000

It’s always good to hear about people using FluidKit in their projects.

Today morning I got a mail from David Rousset about a project he had done, that used FluidKit’s TransitionContainer. He has published an article on the MSDN-France website describing the project in more details.

Quick tip to get a striped background

Tue, 23 Sep 2008 00:00:00 +0000

If you are looking to apply a striped background to any of your elements, you don’t need to rely on a PNG tile. Instead you can do it all in Xaml, using a LinearGradientBrush.

Visual Enhancements to the Virtualized CoverFlow

Mon, 22 Sep 2008 00:00:00 +0000

Over the past couple of days (or is it weeks ;)), I have played with tons of tweaks and customizations for the virtualized CoverFlow. I think I finally have a winner from my project’s perspective. Although I can’t share that version, I’ll show you one that is a few days old. It is quite close to the final result, except for the visual polish.

Lawson Smart Client using ElementFlow ?

Mon, 08 Sep 2008 00:00:00 +0000

That’s what one of my friends suggested. Well, the source is out there on CodePlex. With some tweaks to the Camera angle, Models and animations, it is quite possible to make ElementFlow look like the following: Have a look at the Video, around the 4:00 mark.

Virtualized CoverFlow with dynamic Add/Remove

Tue, 02 Sep 2008 00:00:00 +0000

The previous post showed how the CoverFlow view was virtualized and had a video that demonstrated scrolling of 10,000 items. A few more enhancements have been added to improve the overall experience. Some of these include: Lot of customizations for animations, camera settings, behavior for newly added items Improvements for speed scrolling Improved 3D performance with VisualBrush caching, animation speed and memory utilization The video shows you all of these in action with items added and removed randomly.

CoverFlow with UI Virtualization

Fri, 29 Aug 2008 00:00:00 +0000

The CoverFlow view of iTunes was a big inspiration for me when I started out experimenting with the ElementFlow control. Initially it was used to visualize only a small collection of items (in tens) and this worked perfectly fine. Recently at my company we decided to adopt the CoverFlow view to visualize a much larger collection (in hundreds and thousands). This caused serious problems in terms of memory and performance. Clearly ElementFlow could not keep up with such a large collection. After much debate the decision was to virtualize CoverFlow. In other words, implement UI Virtualization for the CoverFlow view.

Techniques for UI Auditing on WPF apps

Wed, 27 Aug 2008 00:00:00 +0000

User Interface auditing is a fundamental requirement when you want to do usability testing and analysis. The auditing process captures user data about how the mouse and keyboard are used. We will stick to Mouse and Keyboard since they are the predominant input devices. Of course you can also involve the Stylus and touch-based gestures, if your apps use it.

Details of my upcoming Book

Sat, 02 Aug 2008 00:00:00 +0000

I finally received the mail from SAMS with the ISBN for my book. So I guess things are getting official !, which also means I can give out a few more details about the book. Let’s start with the title.

Red-Green-Blue shift shader

Fri, 01 Aug 2008 00:00:00 +0000

This is just a weird shader effect I came up with while I was testing something else. The idea is to distort the image by using the component values (R, G, B). The distortion is achieved by shifting the texture co-ordinate with the values stored in the R, G or B component. Once we have the shifted TEXCOORD, we use that to sample the color value. This becomes the output value for that co-ordinate. You can get some weird, psychedelic effects with a combination of parameters.

[FluidKit Update] Fixed bugs, added stuff

Tue, 29 Jul 2008 00:00:00 +0000

This is just a short post on some of the changes that have been checked in. There were couple of people who provided suggestions/tips/feedback on the controls. I have incorporated most of them and will continue to improve in the next release. Thanks to Ricky Ralston, Marlon Grech, Jeremiah Morill, Ben from iTagSoftware. Additions New Pixel Shaders added: WarpEffect and a DynamicShaderEffect (experimental) Bug Fixes TransitionContainer crashes when a second transition is invoked while a previous one is playing CubeTransition crashes when TransitionContainer is used more than once in a Window.

Don’t forget to pass the Input brush to the Shader

Mon, 28 Jul 2008 00:00:00 +0000

When writing ShaderEffects for WPF, it is always tempting to first test the shader with images. Testing with images instinctively seems easy but there are some caveats to remember. When the ShaderEffect is applied to an Image, the texture information is directly pushed to the sampler register s0. So there is no need to setup a DependencyProperty of type Brush using ShaderEffect.RegisterPixelShaderSamplerProperty(). You would do this with the following code:

WarpEffect source code posted on FluidKit

Tue, 22 Jul 2008 00:00:00 +0000

In my previous post I described a pixel shader technique for distorting images and 2D textures. The source for this effect is now available on the FluidKit project. If there is enough interest I can do a quick tutorial on how the effect was created.

Warp Effect using pure Pixel Shaders

Mon, 21 Jul 2008 00:00:00 +0000

I am totally blown away by the possibilities of Pixel Shaders and already finding a great variety of uses for it. To get started on Pixel Shaders I would recommend stopping by Greg Schecter’s blog and reading his series of articles on this subject. It was definitely a starting point for me.

File encodings matter when writing Pixel Shaders

Fri, 18 Jul 2008 00:00:00 +0000

HLSL is the defacto language that you will be using when writing Pixel Shaders for WPF. But before you can use it, you will have to compile the HLSL to pixel shader byte code. The DirectX SDK ships with the FXC compiler that can do this job for you. However this compiler is very sensitive about the file encoding that is used for your HLSL code.

Working on a Book !

Wed, 16 Jul 2008 00:00:00 +0000

Hello everyone!

Over the past couple of weeks I have been really really busy. In addition to my day job I have taken up an interesting side project: Writing a Book. Given my history and background you can take a pretty good guess at the topic of the book. There is some wonderful content in there and I am sure it will be very useful to many of the readers of this blog. It’s about this great technology with a three letter acronym ;-) The chapters are geared towards intermediate and advanced users of the technology, although beginners will also find it pretty useful. I will have more details to share in the coming weeks. If you have been a regular reader, you have already seen a preview of the book content in the form of blog posts, code samples, videos, etc. Of course that is only a tip of the iceberg.

Use the SWFLoader for loading Flash swf into Flex

Fri, 20 Jun 2008 00:00:00 +0000

It was a welcome change to do a little bit of Flash/Flex programming after a heavy dose of WPF ;-).

Mesh Morphing in WPF

Mon, 09 Jun 2008 00:00:00 +0000

Morphing of 3D meshes can be very cool to play with. I am sure many of you must have seen this in action in movies / tv or even CAD like programs. Its a technique where a set of vertices that describe a 3D mesh change their positions over a period of time into a new surface. In the figure below you can see a Plane mesh morphing into a Sphere. The interesting thing to note here is that only the vertices are changing their positions while keeping the TriangleIndices and TextureCoordinates the same. In some cases you may also want to change the Normals if you have specific lighting requirements. Otherwise you are in good shape just manipulating mesh positions.

A Carousel View for ElementFlow

Wed, 04 Jun 2008 00:00:00 +0000

The Carousel view has become a pretty popular visualization for a list of items. It consists of a set of items arranged circularly with the selected item brought to the front, just the like the figure below:

Announcing the next revision of ElementFlow

Sat, 31 May 2008 00:00:00 +0000

Over the past couple of days I finally got a chance to get back to ElementFlow and give it some overhaul. I have done some integral changes to the core parts of the control so now its leaner and more powerful. There are also a few client-facing changes. Thanks to all the users of FluidKit who sent me feedback via CodePlex + emails + blog. I also want to give a shout out to Jeremiah Morrill for giving me ideas about new features through his blog post !

Video of the simple 3D engine in WPF

Sat, 31 May 2008 00:00:00 +0000

In my previous post I mentioned about a really simple 3D engine that can be used for experimenting with lines, polygons and shapes in the 3D space. Here is a short video that shows what you can do with it. The video demonstrates: Drawing lines in 3D (note the XYZ axis) Drawing arbitrary polygons (different surfaces: Cone, Sphere, Torus, Cylinder, Cube) Rotating camera (using mouse) Adjusting focal length (using bottom Slider).

A scaled down 3D engine in WPF

Thu, 29 May 2008 00:00:00 +0000

Over the last few days I have been exploring some interesting ideas in my current project. One of the requirements was to visualize some data in 3D. Of course you would say: “that should be easy: WPF has Viewport3D”. And certainly you are right. In fact that was my initial reaction too. When I got down to building some of the visualizations I soon realized some inherent deficiencies: I cannot draw lines, simple shapes and in general cannot build wireframes.

Slides + Demos from NYC .Net User Group talk

Fri, 16 May 2008 00:00:00 +0000

Yesterday, May 15th I gave a talk at the New York City’s .Net User Group. As you can expect my talk was around WPF and in fact very similar to the one I gave at the NJ .Net UG. Since I did not change much in my presentation, let me point to my earlier blog post where you can download the slides and demos. Jump to earlier post

.Net 3.5 SP1 Beta breaks ElementFlow

Thu, 15 May 2008 00:00:00 +0000

Installing .Net 3.5 SP1 Beta is not recommended if you are using the current version of ElementFlow. When you add items at runtime, the corresponding 3D planes don’t show up. However when I check the Children collection, the models do exist. Looks like there are some issues adding GeometryModel3D to Model3DGroup at runtime. Surprisingly there are no exceptions thrown when I add the elements. I see the following exception only on closing the application.

TransitionContainer added to FluidKit

Tue, 06 May 2008 00:00:00 +0000

TransitionContainer was a control I created sometime back to enable rich transitions between views. The transitions themselves are pluggable and can be changed dynamically. You can see this in action in the video below.

CLinq for visualizing streaming data

Thu, 17 Apr 2008 00:00:00 +0000

My colleague Kevin Hoffman has been working on an interesting project called CLinq or Continuous Linq. It is open-source and hosted on Codeplex. In Kevin’s own words

Off to a vacation, returning on May 5th

Thu, 17 Apr 2008 00:00:00 +0000

Hello folks, I am going on a vacation from tomorrow and will be returning on May 5th. So I guess there would be some silence on this blog, but I’ll try to catch up on emails if I get a good connection. Once I get back I plan to release a new set of Controls for FluidKit. You may have already seen some these from my earlier blog posts [hint]. All that and more when I come back.

Notes from the talk at NJ .Net UG

Fri, 11 Apr 2008 00:00:00 +0000

I had a fun time yesterday presenting WPF to the NJ .Net User Group. The audience was a mix of people who had WPF experience, beginners, Interaction Designers and some of them coming from very different backgrounds like Linux administrator, VB6 programmer! It was great chatting with some of them after the talk.

Presenting at the NJ .Net User Group

Sat, 05 Apr 2008 00:00:00 +0000

I am going to give a talk on WPF at the NJ .Net Users Group on April 10th. If you are around that area do come along for an evening of WPF. My talk will be around Visual Trees, ElementFlow, FluidKit, UI patterns and other interesting tidbits.

Automatic form layouts with the TreeView

Wed, 02 Apr 2008 00:00:00 +0000

Over the past couple of days I have been working on an application that automatically generates a Form layout from an XML file. The XML file represents a form with a bunch of parameters. The form can also contain parameter groups, which can encapsulate a set of parameters. Effectively the XML structure is something like this:

My first shot at Wordpress themes

Sun, 30 Mar 2008 00:00:00 +0000

I am sure I am not the only one who would say that Wordpress is a great blogging (+ CMS) platform. There is a vibrant community developing all kinds of stuff with Plugins, Themes and what not! As a fun exercise I decided to create a Wordpress theme for learning more about the platform.

First community contribution to FluidKit

Sun, 16 Mar 2008 00:00:00 +0000

I am pretty happy to see the great community interest in the FluidKit project. Even happier is the fact that we have our first contribution from Boris Tschirner (I guess from Germany). Boris is a designer who contributed two classes that draw some nifty shapes, namely the CogWheelShape and the PolygonShape. These classes have some interesting DependencyProperties which can be used for creating neat looking figures.

ElementFlow added to FluidKit

Fri, 14 Mar 2008 00:00:00 +0000

I am glad to announce that the ElementFlow control has been added to the FluidKit library. This has been a popular request for quite some time now. If you are unfamiliar with ElementFlow please have a look at these posts: ( Part 1, Part 2 ).

My talk at NYC .Net UG is rescheduled to May 15th

Tue, 04 Mar 2008 00:00:00 +0000

Just got an email from Andrew (who runs the NYC .Net UG) that my talk has to be rescheduled due to some overlap. Instead of March 20th my talk has been moved to May 15th 2008. Here is the updated link: http://www.nycdotnetdev.com/EventDetail.aspx?f=list&event=5/15/2008 It does give me sometime to improve the content of my talk !

Introducing FluidKit - A WPF Library of Controls, Helpers and the likes...

Sun, 02 Mar 2008 00:00:00 +0000

Over the past couple of months I have developed a bunch of custom controls and utility classes, which people have found useful. However all of these were released independently, had differing namespaces and lacked a common point of download. Well, not anymore !

Talking at the NYC .Net Users Group

Fri, 29 Feb 2008 00:00:00 +0000

On March 20th 2008, I will be giving a WPF related talk at the New York’s .Net Users Group. The session is titled “WPF Beyond the Basics: Playing tricks with the Visual Tree”. If you are around that area do come along. For more information go to this link: http://www.nycdotnetdev.com/EventMain.aspx?type=N A map of the directions is below: Hope to see you there !

Super Fast alternating row colors in a ListBox

Fri, 08 Feb 2008 00:00:00 +0000

One of the applications we are building required a ListBox control that displayed a bunch of contacts. We also wanted to make the rows in the ListBox have alternating row colors, just like the figure below:

Standardizing the development of custom controls

Tue, 05 Feb 2008 00:00:00 +0000

Over the past couple of months I got many opportunities to develop a variety of custom controls for WPF. Some of them are as basic as a Numeric TextBox and some are as complex as ElementFlow. It is interesting how many times the same set of patterns repeat themselves again and again. In this post I want to share a few ideas related to standardization of custom control development. I believe that such a thinking process could simplify creation of new custom controls.

Playing with Wordpress, PHP, Photoshop, CSS, XHTML

Tue, 29 Jan 2008 00:00:00 +0000

The switch to my new blog @ Pixel-in-Gene has given me lot of flexibility to experiment with ideas. I have been spending a little more time playing with toys like Wordpress (theme and plugin development), PHP (the backbone of Wordpress), Photoshop (uber design tool) and of course CSS and XHTML. I was a Web developer in the past, so getting back to these technologies has been refreshing.

How to do Sort / Filter / Group in your custom control

Mon, 28 Jan 2008 00:00:00 +0000

In one of my recent experiments, I was required to add sortingability to a custom control. The control itself displays a bunch of items just like the SlideDeckPanel. Additionally for each item Add / Remove the control also sorts the items automatically. Before I describe how I did it, let me talk a little bit about the control, just to set the context.

“the WPF Way" is here!

Mon, 21 Jan 2008 00:00:00 +0000

Hello All, I have moved my earlier blog “the WPF Way…” to this site. If you have subscribed to it earlier, please update your feed. You can find the feed URL at the top of this page. Thanks!

Community input on Write - Speak - Collaborate

Wed, 09 Jan 2008 00:00:00 +0000

Over the past couple of months I have received fairly good response and feedback to some of the posts that I have made. I have also received some criticism that I don’t share enough code.

Degrafa goes live

Mon, 07 Jan 2008 00:00:00 +0000

Although WPF development is my full-time activity, I also spend a considerable amount of time with Adobe Flex. Over the past couple of weeks I have been involved in an exciting Open Source project called Degrafa. Degrafa is a Declarative Graphics Framework for Flex that simplifies access to the Flash/Flex graphics API. People familiar with Flex know that creating simple shapes, paths requires Actionscript programming and cannot be done directly in MXML. This becomes very cumbersome especially when creating programmatic skins for Flex.

Smooth animations, at the Window level

Thu, 03 Jan 2008 00:00:00 +0000

If you have ever tried animating the Width / Height of a Window control, you would notice some jerkiness during the animation. This happens because the Window control is not really living entirely in the WPF sandbox. It is part WPF and part Native. To achieve a really smooth animation, you have GOT TO BE inside the WPF sandbox. But how do I do it?

Controlling Z-Index of children in Custom controls

Sat, 15 Dec 2007 00:00:00 +0000

In WPF, the standard way to control Z-Index (programmatically) is to use Panel.SetZIndex(). However that works well only if you plan to use a list of children inside a Panel. What if you want to get the Z-Index functionality in your own custom controls ?

WPF In Finance Contest [Promo Post]

Mon, 10 Dec 2007 00:00:00 +0000

Got some great ideas? Want to do it in WPF and also earn some big bucks? A “YES” means you should check out Lab49’s WPF Innovation Contest.

Improved DragDropManager - Source code

Mon, 19 Nov 2007 00:00:00 +0000

The DragDropManger has been a very handy class for me in couple of my projects. Since my last post I made some changes to the interfaces (IDragSourceAdvisor, IDropTargetAdvisor) and also to DragDropManager. There are no major changes except for a few method additions in the interfaces. These methods make it even more flexible.

SlideDeckPanel - panel that does Card Deck layout

Tue, 06 Nov 2007 00:00:00 +0000

In one of my recent explorations in a project I had to implement a panel layout that displayed its items as cards that have been fanned out right->left.

File organization tip for Custom Control authors

Wed, 10 Oct 2007 00:00:00 +0000

Custom controls can be fun to develop. Depending on the complexity of the control it would be a good practice to break it down into manageable pieces. While developing ElementFlow, I discovered such a technique which you may also find useful.

TransitionContainer: Easy transitions between views

Thu, 30 Aug 2007 00:00:00 +0000

Transitions, which is another word for animating between views, is a great way of keeping the user engaged as he interacts with your application. Most applications would contain a wide variety of views, where each view aids in interacting with a specific functionality of the application. When switching to a different view, a gradual animated change is far superior than an instant switch. It gives a context to the user telling him where he was earlier and where he is going to next.

The iPhone (-like) interface in WPF

Mon, 27 Aug 2007 00:00:00 +0000

Sometime back I had worked on an internal Instant Messaging client for our company. We were looking for some inspiration for our client interface and at about the same time the iPhone****was introduced. After a lot of thought (which was like “few minutes”), we decided to mimic the iPhone interface for our client.

ElementFlow is now a Panel !!!

Thu, 23 Aug 2007 00:00:00 +0000

The ElementFlow control was something I was working on a while back and I even posted about it here. The control originally derived from a FrameworkElement and had its own properties for enabling binding to a data-source, namely ElementsSource and ElementTemplate. These properties behave similar to the ItemsSource and ItemTemplate of ItemsControl.

ItemSkimmingPanel - a panel that does more than just layout

Fri, 17 Aug 2007 00:00:00 +0000

Recently Apple released their next version of iLife, which has some cool enhancements to iPhoto and iMovie. One specific enhancement called “skimming” was interesting from my project’s perspective. The idea is that when you scrub your mouse over an album, it skims through all the photos in that album. The same interaction applies when you scrub your mouse over a movie clip: it skims through all of its frames.

Creating WPF based addins with System.AddIn

Fri, 03 Aug 2007 00:00:00 +0000

With Framework 3.5 we have a new namespace called System.AddIn which is useful for creating AddIn based application architectures. For an introduction to this namespace and its usage refer to:

Making the Scrollbar work (with DragDropManager)

Mon, 02 Jul 2007 00:00:00 +0000

This post is a corollary to a set of posts I did on the DragDropManager component.

BalloonDecorator source code

Tue, 26 Jun 2007 00:00:00 +0000

Sometime back I had posted about a simple Decorator that draws Balloon Text, similar to the speech balloons you see in comic strips. I called it the BalloonDecorator. At the time of the post I found some minor bugs and delayed posting the source. Although I fixed the bugs I was a little lazy to upload the source. Thanks to few of my readers for nagging me :) I finally got around to do just that.

Nice article on extending WPF animation classes - MSDN

Thu, 14 Jun 2007 00:00:00 +0000

Charles Petzold has published an interesting article on creating custom animation classes. Read it here. Sometime back I had used these concepts in making the GenieAnimation. It would have saved me some time if Charles had published this article earlier :)

The ElementFlow custom control - can do CoverFlow too!

Tue, 05 Jun 2007 00:00:00 +0000

I am sure many of you have heard and even interacted with the CoverFlow view of iTunes. In the WPF world we have the good folks from Thirteen23, who have created an app called Harmony that shows off the use of CoverFlow. They make good use of the Viewport3D to pull the desired effect.

Structuring a WPF User Interface

Tue, 29 May 2007 00:00:00 +0000

When creating a typical user interface, say a Window, Page or UserControl, we start with the top-level container and nest other containers or controls inside it. This is a good approach for a first attempt. But just like we refactor our code to make it more maintainable, we should also be refactoring the User Interface by applying similar principles. Such a refactoring leads to a more maintainable view. Also since we are only refactoring, the final view looks the same but the internal construction is different. In this blog post I’ll present some such refactorings in the context of the WPF User Interface. Note that the concepts I present here are already popular when developing with Adobe Flex.

XamlXporter - Formatting numbers for German Locale

Thu, 10 May 2007 00:00:00 +0000

Alexander Ullrich from Germany has been kind enough to share a patch of the XamlXporter library (Exporter.Core), which fixes the formatting of the floating point numbers for German locale. If you are facing such an issue you can download the patch here. Thanks Alex!

Custom Window Control - GlassWindow - Source Code

Tue, 10 Apr 2007 00:00:00 +0000

Sometime back I had posted about the Custom Window Control but was a little lazy in putting up the source code as it was part of a bigger library. I have finally taken it out, changed the namespaces and removed some dependencies. Feel free to use the code as you wish. If you add any extra cool stuff, I would love to hear back :) The zip contains the GlassWindow control with the Vista and the MacOSX window templates.

Reusing decorative panels with ContentControl + ControlTemplate

Thu, 05 Apr 2007 00:00:00 +0000

Of late I found a new use for ContentControl, which is to use it as a decorator (note the small-case ’d’). Lets take an example to illustrate this idea. Imagine you want to use a panel decoration like the one below:

Mixing 2D and 3D

Fri, 30 Mar 2007 00:00:00 +0000

Greg Schecter from the WPF/DWM team has made an interesting post about overlaying 3D content over 2D elements. This is to transition between different states of the UI by using 3D effects.

Creating and consuming XAML icons from Expression Design

Thu, 15 Mar 2007 00:00:00 +0000

I really like the simplicity and ease of use in Expression Design. Vector editing never felt so enjoyable. I play the dual role of designer and developer for my projects – not always good, but works for now. Recently I had to create some simple icons in Design and use them in a WPF app. The workflow I adopted simplified the process and made it easier for me to use. I’ll outline the steps I adopted below.

The new Expression Blend RC

Wed, 14 Mar 2007 00:00:00 +0000

The Blend RC has just been released. As an eager child I got hold of it and checked if my projects were looking good inside it!

Creating an ObjectDataProvider using CLR properties

Thu, 15 Feb 2007 00:00:00 +0000

OK I agree that the title of this post doesn’t convey anything meaningful about the post ;) But the post itself is pretty useful, trust me.

I am sure most of you have heard and used the ObjectDataProvider (extensively). ObjectDataProvider (ODP) acts as a wrapper around your CLR object and helps in the data-binding. There are couple of ways of creating the ObjectDataProvider. Beatriz Costa did a great post on this topic, so I am not going over those details. Interestingly there is one more way of creating the ObjectDataProvider, which is just an extension of using the MethodName property.

Balloon Text - using Decorators

Sat, 10 Feb 2007 00:00:00 +0000

Recently I had to render some text inside a Balloon, similar to the balloons that you see in Comic Strips. They are also called Speech Balloons.

Attached events

Tue, 06 Feb 2007 00:00:00 +0000

We are all well aware of the Attached properties concept and have definitely used it a lot. But on a similar tone there is also the concept of Attached Events, which are useful in some particular cases.

Imagine you have a set of Buttons contained inside a WrapPanel.

1<WrapPanel Button.Click="CommonHandler">
2    <Button x:Name="btn1"
3                    Content="Click me"/>
4    <Button x:Name="btn2"
5                    Content="Click me"/>
6    <Button x:Name="btn3"
7                    Content="Click me"/>
8    <TextBlock x:Name="_statusText"/>
9</WrapPanel>

Grava for Educational content

Tue, 06 Feb 2007 00:00:00 +0000

Just saw this post on Rob Relyea’s blog about Grava, a new WPF based toolset for creating Educational content. The screenshots look exciting. It has an SDK and a bunch of other stuff. Should be a great tool to play with…and learn! Grava Website

Instantiating a custom object-tree in XAML

Sun, 04 Feb 2007 00:00:00 +0000

XAML, which is short for eXtensible Application Markup Language is a great tool for instantiating objects, not just WPF ones. Although I was aware of this feature for a long time, I never got around to using it exclusively. Recently in one of my projects I wanted to instantiate a simple Object tree, which has WorflowTypes.Workflow as the root type and a property called Screens that stores objects of type WorflowTypes.Screen. I had to create this structure at my application-startup and I was originally doing it by hand. Instead representing that structure in Xaml appeared to be far more convenient.

Baml Disassembler for Reflector

Tue, 23 Jan 2007 00:00:00 +0000

We all know how useful Reflector is! Now it has added a cool new ability to disassemble BAML files! …you know those compiled XAML files. I saw this post on UrbanPotato.net that tells you how to get it running on your machine.

Neon - The WPF Particle Engine

Wed, 17 Jan 2007 00:00:00 +0000

The WPF animation system is very powerful and at the same time also very easy to program. For most animations Storyboards should suffice but for some scenarios you may have to resort to using Frame-based animations. Ideally I would want to fit all animations into a Storyboard, in one form or the other. However that may not be feasible all the time. Take the case of particle effects like fire, snow, bubbles, smoke etc. Creating these effects is fun but not always easy to integrate into a real-world app.

XamlXporter 0.2 -- exports as Canvas and DrawingBrush

Thu, 11 Jan 2007 00:00:00 +0000

XamlXporter is a project I undertook (mostly as a pet project) to re-create what Michael Swanson did with his Illustrator Plugin. In other words, XamlXporter allows you to export your Illustrator artwork into WPF/XAML format. The exporter has been written entirely in C#, .Net 2.0 with a WinForms UI. It uses the Adobe Illustrator CS2 COM Type Library to talk to Illustrator. More information can be found on this earlier blog post.

WPF Multithreading with BackgroundWorker

Mon, 08 Jan 2007 00:00:00 +0000

UI libraries in general have always been single-threaded. This means that you can access the UI controls only from the thread that created it (thread-affinity). When running long-running operations you would typically use a background thread to do that job. However progress needs to be reported on the UI and the user needs to have a way to cancel the operation. Doing that from a background thread is not possible and hence you have to jump threads, ie. from the background-thread to the ui-thread.

Custom Animations, the GenieAnimation

Wed, 20 Dec 2006 00:00:00 +0000

Several weeks back I had posted a simulation of the Genie effect that you see in Mac OSX. Ofcourse it was created using the Windows Presentation Foundation ;) However the effect could only be used in that specific demo. There was no way for example to use it in my other projects, which were also desperately asking for some cool animations. Since then I went through a couple of iterations and made the Genie effect into a reusable animation. This was possible because the WPF animation system makes it pretty easy to create Custom animations. So what I have now is a class called GenieAnimation that can be used directly in XAML.

Drag & Drop with attached properties - Part 4

Fri, 08 Dec 2006 00:00:00 +0000

In Part 3 of this series I made some changes which allowed Drag and Drop across Windows and Applications. Although it works well, someone pointed out in the comments to that post, that the drag-point was always at (0,0) even though the user may have clicked somewhere inside the element (ie. not at the [0,0] position).

Drag & Drop with attached properties - Part 3

Wed, 06 Dec 2006 00:00:00 +0000

In my previous blog posts (Part 1, Part 2) on this topic, I have discussed how you can add drag-drop behavior to your application using attached properties. This greatly simplifies the event hook-up, keeps the XAML clean and literally gets rid of code-behind. However the previous version did not support the scenario where you are performing DragDrop across windows or across applications. This was pointed out in the comments to my earlier post (Part 2). Well now I am glad to say that even this scenario is supported.

Custom Window control, the GlassWindow

Thu, 30 Nov 2006 00:00:00 +0000

Creating custom controls have been greatly simplified in WPF. There are some good practices that people have followed and I have documented some of them here. Although most examples show how to create new UserControls or custom controls derived from existing controls like Button, creating custom Window control was something I wanted in my projects.

Drag & Drop with attached properties - Part 2

Mon, 20 Nov 2006 00:00:00 +0000

In my previous post on this topic, I gave a quick overview of how Drag and Drop can be accomplished using attached properties. To review, here are the key elements of the implementation:

Application.LoadComponent() from un-referenced assemblies

Fri, 17 Nov 2006 00:00:00 +0000

I recently asked a question in the WPF forums about loading xaml components from unreferenced assemblies, using Application.LoadComponent() API. This is a useful scenario especially if you are developing a plugin architecture for your application. Zhou Yong from the forums replied with a useful tidbit, which I will document in this blog post.

Drag & Drop with attached properties

Wed, 15 Nov 2006 00:00:00 +0000

I am a big fan of attached properties and I think it is one of the coolest innovations in WPF. Once you understand the basics of using and creating attached properties, lot of the common activities that typically require some code-behind can be pushed to a class that implements an attached property or a set of attached properties. A good example is the PanelLayoutAnimator from Dan Crevier’s blog.

Don't forget the AdornerDecorator

Wed, 01 Nov 2006 00:00:00 +0000

While testing my new Custom Window control (which I should be blogging about soon) I ran into an interesting problem. The custom window control derives from System.Windows.Window and has its own ControlTemplate defined in its generic.xaml file. Now I have an application that makes use of Drag ‘n’ Drop (DnD) and was previously using the regular Window control. When I replaced that with my custom window control, the app would just crash as soon I started dragging some elements. Note that the same DnD code would work with the regular Window control.

XmlnsDefinition for a cool namespace mapping

Mon, 30 Oct 2006 00:00:00 +0000

In XAML, when you want to reference a CLR type, you have to add a namespace mapping that maps the XML namespace to the CLR namespace, like so:

xmlns:local="clr-namespace:MyTestApp.Controls;assembly=TestApp.Controls"

Initial release of XamlXporter (0.1 alpha)

Thu, 26 Oct 2006 00:00:00 +0000

As promised I’ve uploaded the source and binaries of XamlXporter. XamlXporter is a script for exporting Illustrator artwork in WPF/XAML. It is written in C# 2.0 for easier maintainence.

Amazing live Physics simulation program

Tue, 17 Oct 2006 00:00:00 +0000

Its one of those lucky days when you find a program so cool and that you feel like having it yourself…or if you are developer like, develop it yourself ;) Have a look at this YouTube video (click picture) and you will know what I am talking about.

XAML Exporter for Illustrator using the CS2 COM Type Library

Fri, 13 Oct 2006 00:00:00 +0000

I guess the title for this blog post answers 90% of what I had to say ;)

Yes, I have spent the last few days working on using the scripting object model for Illustrator CS2 to export the artwork to WPF/XAML. The code is entirely in C# / .Net 2.0 and uses the Illustrator CS2 COM Type Library. Now you may be wondering why I did one more Illustrator-XAML exporter, when there is already one by Michael Swanson. Couple of reasons:

An improved water effect

Thu, 28 Sep 2006 00:00:00 +0000

Sometime back I posted a video of the Water ripple effect created using a 3D Mesh. In that I had only used a height-map to simulate the ripples which ofcourse wasn’t the most convincing Water effect. This time around I have improved it with the some refraction effects happening to the texture. Refraction is the phenomenon where the light rays get bent when they change the medium of propagation; for example a change from air to water. Due to refraction the objects in the new medium appear displaced from their original positions. The amount of displacement is dependent on the Refraction Index of the medium. Water has a refractive index of 1.33. With this improvement the Water effect looks much better and closer to reality!

Genie Effect, the WPF way

Mon, 25 Sep 2006 00:00:00 +0000

I have been contemplating for many days about creating the Genie effect that you see in Mac OSX, when you minimize a window. It kind of creates a suction effect like a cloth being sucked into a vacuum cleaner. If you have a Mac, you would know. Unfortunately I don’t have a Mac, well not yet! So what better can I do to fill the void…what about creating the Genie Effect in WPF?

Auto position a Viewport3D Camera for Full view

Fri, 22 Sep 2006 00:00:00 +0000

I have been spending a lot of time lately in developing 3D effects and some reusable controls for overlaying 3D effects on 2D controls (a subject of a forthcoming blog post). One of the core requirements is that the position of the PerspectiveCamera should be such that the 3D model is completely visible and has the same bounds as that of the Viewport3D. Now, what do I mean by that? A diagram should elucidate this concept.

Smooth 3D rotations with Quaternions

Tue, 19 Sep 2006 00:00:00 +0000

When we talk about 3D rotations in WPF, we immediately think of RotateTransform3D and AxisAngleRotation3D. Animating these rotations is then a matter of changing the Angle property using a DoubleAnimation. When we want to apply a series of rotations on 3D models with smooth transitions to different orientations, specifying the rotations using AxisAngleRotation3D may not give the best possible results. The transitions from one orientation to another may not be smooth or sometimes you may lose a Degree of Freedom (DoF), also called the Gimbal Lock effect.

3D models with simple 2D strokes -- awesome!

Sun, 17 Sep 2006 00:00:00 +0000

I loved watching this video demonstration of a Takeo Igarashi from the University of Tokyo. In the demo he demonstrates a tool that can be used for creating 3D models by simple 2D strokes. More than being an awesome video it is also a fun tool to spend hours just doodling and seeing those doodles turning into great looking 3D models. It is a very easy to use tool and I had to deliberately pull myself away from it to make this blog post ;)

A great tool for visualizing KeySplines

Fri, 15 Sep 2006 00:00:00 +0000

WPF provides a keyspline based animation for achieving very realistic effects. Creating an ease-in, ease-out effect is a matter of specifying the right keyspline values. I have always found it difficult to visualize these values and in an attempt to alleviate my pain and misery I have spent many days bugging Google to get me the results I want. At last I have found a tool that seems to work very well. Surprisingly the tool is SVG based, which is very similar in concept to XAML.

A Water ripple effect using a 3D Mesh

Tue, 12 Sep 2006 00:00:00 +0000

Particle effects like fire, fog, snow, ripples in water are very captivating. I love the way Max OSX uses these effects to create a great user experience. For example OSX has a nice ripple effect in the background when you add a Dashboard Widget. That effect has been my inspiration for creating something similar in WPF. Fortunately WPF makes it a lot simpler to create effects like that using the 3D API.

Screens and Transitions - a cool WPF app

Fri, 08 Sep 2006 00:00:00 +0000

I have been working on a cool new WPF application that is supposed to run on a big Plasma display. It is going to be a non-interactive application that shows some information in the form of screens. A screen is a term we are using to denote a visual representation of some information. Some examples of screens we have include a Statistics screen that shows some numbers in a tabular format, a Photo Album that neatly lays out some photos (say from the last night’s party) and does some cool slideshow effects, etc. Each screen will stay on the display for a certain time after which a transition-animation will be played to switch to a different screen. The application has a plugin architecture, which makes screens as well as transitions, pluggable. A developer could create his own nifty screen, package it into a DLL and drop it into a known location. The application would pick that up the next time it loads.

DataModel-View-ViewModel pattern

Sun, 27 Aug 2006 00:00:00 +0000

Dan Crevier has made some great posts on using the DataModel-View-ViewModel pattern, which is the defacto pattern for implementing WPF based applications. I believe that using this pattern will enable a better Designer-Developer workflow, which has been my focus for past few weeks.

A day of Information Visualization

Sat, 26 Aug 2006 00:00:00 +0000

After having read a part of the book “Beautiful Evidence” and after having received good feedback about the class, I finally I got to attend Edward Tufte’s course on Presenting Data and Information at the Manhattan Center, NY. It was a day long course starting at 10am and continuing till 4:30pm. I was joined by my co-worker and we went around 9:30am for registration. At the registration desk we were given four of Tufte’s books:

Recommended practices for WPF Custom Control developers

Sat, 26 Aug 2006 00:00:00 +0000

I have always found that there isn’t enough documentation about Custom Control development in WPF. Most of the information is segregated into articles, blog entries and posts on the WPF Forums. In order to save the trouble for other fellow WPF developers I intend to document all my findings at one place: this blog. To start with, there are some articles which are a must read for all control developers:

Slideshow visualization in WPF

Fri, 18 Aug 2006 00:00:00 +0000

Viewing photographs is always fun. What if there was a cool visualization to view them? Well with WPF, the what-if question should be replaced with when. So here is a little application that takes in a bunch of images and adds some nice slideshow effects. The images that I am using are from Michael Swanson’s blog. Have a look at the video for a sneak preview of the application. The video is a little choppy but the application runs much smoother.

Great tutorial on TextureCoordinates

Tue, 15 Aug 2006 00:00:00 +0000

I have been working on the 2D side of WPF for a long time now and its about time I added an extra dimension; 3D. I have worked with 3D before, just that I haven’t done anything substantial. Its time now for me to ramp up. One of the tricky concepts of 3D is to understand how to map textures to 3D geometry. This, according to me is a fundamental concept that needs to be understood very well.

$.Deferred to lazy load Google Maps API