Nukeation Machine Teaser by =nukeation on deviantART

With reuxables done, we are now gearing up to finish and launch our next product for the new world of UX. Keep watching for more info. The only hint I can give right now is "WPF, WPF, and more WPF" and "Visual Studio" and "Blend". Okay, enough. I'll shut up now. :)

.NET | Aesthetics | Blend | Geek Stuff | reuxables | WPF

Comments [5]  |  Trackback

"I wish I would have learned earlier in my career how important the UX is -- when you are briefing the boss, they need to see a good looking UI, or you won't get your next funding cycle."

Geek Stuff | reuxables | WPF

Comments [3]  |  Trackback

This code lets you create a simple button that uses images.

Simple ControlTemplate (put this in your Window, Page, or Application's <Resources /> section).

  <ControlTemplate x:Key="ImageButton" TargetType="{x:Type Button}">
   <ControlTemplate.Resources>
    <Storyboard x:Key="MouseOver">
     <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="(UIElement.Opacity)">
      <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="1"/>
     </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Key="MouseOut">
     <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="(UIElement.Opacity)">
      <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0.7"/>
     </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Key="PressedOn">
     <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="(UIElement.Opacity)">
      <SplineDoubleKeyFrame KeyTime="00:00:00.0500000" Value="0.3"/>
     </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Key="PressedOff">
     <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="(UIElement.Opacity)">
      <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0.7"/>
     </DoubleAnimationUsingKeyFrames>
    </Storyboard>
   </ControlTemplate.Resources>
   <ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto" Opacity="0.7" x:Name="contentPresenter" Cursor="Hand">
   </ContentPresenter>
   <ControlTemplate.Triggers>
    <Trigger Property="IsMouseOver" SourceName="contentPresenter" Value="True">
     <Trigger.EnterActions>
      <BeginStoryboard Storyboard="{StaticResource MouseOver}"/>
     </Trigger.EnterActions>
     <Trigger.ExitActions>
      <BeginStoryboard x:Name="MouseOut_BeginStoryboard" Storyboard="{StaticResource MouseOut}"/>
     </Trigger.ExitActions>
    </Trigger>
    <Trigger Property="IsPressed"  Value="True">
     <Trigger.EnterActions>
      <BeginStoryboard x:Name="PressedOn_BeginStoryboard" Storyboard="{StaticResource PressedOn}"/>
     </Trigger.EnterActions>
     <Trigger.ExitActions>
      <BeginStoryboard x:Name="PressedOff_BeginStoryboard" Storyboard="{StaticResource PressedOff}"/>
     </Trigger.ExitActions>
    </Trigger>
    <Trigger Property="IsEnabled" Value="False">
     <Setter Property="Opacity" TargetName="contentPresenter" Value="0.2"/>
    </Trigger>
   </ControlTemplate.Triggers>
  </ControlTemplate>

Or if you want to make it look ever cooler (though, a slightly more resource hungry), try the animated flavor!

Animated ControlTemplate

  <ControlTemplate x:Key="ImageButton" TargetType="{x:Type Button}">
   <ControlTemplate.Resources>
    <Storyboard x:Key="MouseOver">
     <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="(UIElement.Opacity)">
      <SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="1"/>
     </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Key="MouseOut">
     <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="(UIElement.Opacity)">
      <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0.7"/>
     </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Key="PressedOn">
     <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="(UIElement.Opacity)">
      <SplineDoubleKeyFrame KeyTime="00:00:00.0500000" Value="0.3"/>
     </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Key="PressedOff">
     <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="(UIElement.Opacity)">
      <SplineDoubleKeyFrame KeyTime="00:00:00.1000000" Value="0.7"/>
     </DoubleAnimationUsingKeyFrames>
    </Storyboard>
   </ControlTemplate.Resources>
   <ContentPresenter HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto" Opacity="0.7" x:Name="contentPresenter" Cursor="Hand">
   </ContentPresenter>
   <ControlTemplate.Triggers>
    <Trigger Property="IsMouseOver" SourceName="contentPresenter" Value="True">
     <Trigger.EnterActions>
      <BeginStoryboard Storyboard="{StaticResource MouseOver}"/>
     </Trigger.EnterActions>
     <Trigger.ExitActions>
      <BeginStoryboard x:Name="MouseOut_BeginStoryboard" Storyboard="{StaticResource MouseOut}"/>
     </Trigger.ExitActions>
    </Trigger>
    <Trigger Property="IsPressed"  Value="True">
     <Trigger.EnterActions>
      <BeginStoryboard x:Name="PressedOn_BeginStoryboard" Storyboard="{StaticResource PressedOn}"/>
     </Trigger.EnterActions>
     <Trigger.ExitActions>
      <BeginStoryboard x:Name="PressedOff_BeginStoryboard" Storyboard="{StaticResource PressedOff}"/>
     </Trigger.ExitActions>
    </Trigger>
    <Trigger Property="IsEnabled" Value="False">
     <Setter Property="Opacity" TargetName="contentPresenter" Value="0.2"/>
    </Trigger>
   </ControlTemplate.Triggers>
  </ControlTemplate>

Usage

1 <Button Template="{DynamicResource ImageButton}" Height="48">
2     <Image Width="Auto" Height="Auto" Source="images\ok.png" />
3 </Button>

Enjoy!

Code | Downloads | WPF

Comments [5]  |  Trackback

For more than a year (actually several if you include research) we have been working on Visual Studio tool Codename NukeBall - a Dynamic Rapid UI Development tool. Essentially, it creates parts (or whole) of UI in your Windows Forms projects with a single click.

Over the past year, the core (NxC) of NukeBall evovled from a simple automation tool to an actual code adapter. We added support for creating your own UI chunks - called WADS (Widely Adaptable Dynamic Scraps) - and added complete support for 3rd party controls. The main power of NukeBall lies in seamlessly converting UI code from one .NET language to another - and some other things we are not yet ready to talk about. ;)

Without further ado, I leave you with a live demo of what Codename: NukeBall can do.

Please note that this video shows an internal build. The actual product UI and features will be much more enhanced.

Email me at dax [at] nukeation [dot] com if you're interested in beta testing NukeBall.

More information about will be published soon on this blog.

.NET | Downloads | Geek Stuff | NukeBall | reuxables | WPF

Comments [7]  |  Trackback

Even after reaching many mainstream projects, Windows Presentation Foundation (or WPF), is still a long way from completely succeeding Windows Forms as the main form of user interface.

Switching to a completely different method of creating applications is difficult for almost everyone. Even after these years of being available to the public, proper documentation on WPF is still hard to find. Another factor in the adoption delay (or in some cases, refusal) is that the word "UX" (User Experience) is often distorted. The real power of WPF is often buried under the false image of UX.

The following are some of the common myths and the corresponding reality about WPF and UX.

UX is just a fancy word for skinning

WinAMP was one of the earliest applications to champion skinning. Soon after many people created software that skinned your application to look more "cooler", and some that even skinned your entire OS! In many circles, skinning was not considered to be a serious thing. Of course, part of it was the whole Designer vs. Developer thing.

User Experience is much more than how your application looks! UX is just as much about how your application behaves, and how your users interact with it. UX is about lessening the amount of work the end-user has to do (including thinking) to finish a task.

Kai Krause, a pioneer of UX, described UI/UX as: "An interface is about hiding complexity from the user, It's about guiding a process, without cognitive understanding of what goes on beneath. Interface design is the art of enveloping the observer in an enticing, "try this" exploration with ever-new elements and designs as the tools to triumph in new territories."

WPF is only about making your apps look better, or WPF is only about creating UI with tags like ASP.NET

This is only partially correct. While WPF does allow you to customize application interface to the deepest levels, and allows you to create UI using markup, the entire scope of WPF is much larger. For a long time, Windows Forms (and its predecessors) were built on top of the foundation laid out in the era of Windows 1.0 and 3.1. Over the last decade, many of the most basic concepts of UI (mostly the controls) became obsolete or non-productive. Some were updated and some were transitioned out, but most of the common things remain. A good chunk of that (Button, Checkbox, Textbox, List, and so on) is still here because it remains useful.

There have always been ideas for new UI and UX. But more often than not, it has been maddeningly impossible to actually create those as the UI technology had been too strict to allow deep customization and creating them from scratch required superb knowledge of C++ (which is too expensive for most common projects). To customize something as simple as a button you had very few choices. You could build a UserControl. But those weren't always an efficient solution, and often too resource hungry. You could create from scratch or customize with inheritance (or in the case of VB6 and other such old technologies, go subclassing till your nose starts bleeding). But that was too time consuming, limiting, and expensive in every way.

This is where WPF comes in. WPF provides a markup based method of creating UI. It is time saving, flexible, and easy. It takes the best of the web and the best of the desktop and rolls it into a single package. WPF allows you to easily customize just about any control using ControlTemplates (structural customization) and Styles (cosmetic customization) that let you do almost anything to the control without messing with the inherent functionality. A hWnd-less (among other things) model lessens many of the resource requirements that previous frameworks had.

If you've ever had an experience with pre-.NET 3.0 frameworks where you thought that you wanted a very small, simple customization in an existing control but there was no simple way to do it, you should know that you will not have that experience with WPF. Practically anything is doable.

(End of Part 1. Part 2 to be posted shortly.)

.NET | Aesthetics | Articles | Blend | WPF

Comments [1]  |  Trackback

WPF Transition Framework or WTF, is a simple (and FREE) set of controls (well, control for now) that help you add slick animated transitions to your WPF apps without having to resort to creating timelines or messing with code.

It's as simple as this:

This is the beta release and only 4 (of 10+) transitions are supported: BlurIn, BlurOut, FadeIn, and FadeOut. Check out our wishlist to see what we hope to add to it (including bitmap based animated effects!).

WTF let's you easily control the quality/performance ratio by using the QUALITY property. If you want to stop animations for a moment, then you just turn on HoldTransitions (bool) and it will deactivate all transitions.

Download WTF and check out the sample application!

WTF works with Microsoft Expression Blend 1.0 or later, and Visual Studio 2008 Beta 1 or later.

.NET | Aesthetics | Code | Downloads | Geek Stuff | Microsoft | reuxables | WPF

Comments [7]  |  Trackback

If you've been one of the rare long followers of my blog you might occassionally ask yourself what happend to NukeBall, and all those other WPF apps and tools I've been talking about.

Well, we went over a lot of changes as Microsoft put WPF, Blend, and ORCAS into shape. Finally, we're ready to talk more about it.

We're bring all those things under one roof called REUXABLES (that's pronounced "reusables"). Click this link to find out more. We're going to reveal more over the next few weeks what other stuff we have in production under the reuxables line.

.NET | Blend | NukeBall | Windows Vista | WPF | reuxables

Comments [4]  |  Trackback

I was recently ranting about WPF and Silverlight. Andy expanded and clarified his thoughts on his blog, where he also mentions:

| My fear, though, is that the industry will try to make XAML yet-another utility language

That brings up a point I will be raising with some people at Microsoft. I think XAML can be made more powerful in a few key aspects. I'm not talking about making Andy's fears real. Far from it. I want XAML to take over as much of visual side of things so that developers have to do even less for the UI and concentrate on their code.

One of these is the Triggers architecture. I think it should be expanded out of the Template zone. Right now only ControlTemplates and Styles use Triggers. If you introduce higher level property and event triggers in XAML objects, a lot of visual programming is possible.

Let's take an example of a simple textbox. Our goal is to make the textbox red when a negative value is entered. You can easily inherit the textbox, add two bits of code and voila. It's done. But that's with procedural code. If you have more powerful triggers, a designer can go in, select a control and add the trigger for this like you would a IsMouseOver = True trigger. It would make things easier. A lot.

This was just a simple and stupid example. But a lot of interactivity can be added with this. And lots of functionality can be added by the designer - mostly functionality relating to the UX that he or she would have to depend upon a developer for.

.NET 4.0 will be great. I can't wait.

WPF

Comments [7]  |  Trackback

My new article is featured on front page of the newly relaunched angryCoder.com.

But like developers, designers also have healthy egos measured in tons. Stick a single developer in a team of designers and he or she will be chewed to death in a matter of minutes. Black shirts hide bloodstains easily - why do you think designers wear only black?

Read the entire article at angryCoder.com

Articles | Geek Stuff | Philosophy | WPF

Comments [11]  |  Trackback

A round up of happenings around revolUXions:

Like Andy blogged, we had taken a break. We were both sick. But we're back in action. We just recorded Episode #4 - Animations, scheduled for release on Monday, 5th March 2007.

While we haven't mentioned this in the episode, I'd like to say that it important to understand how these animations work in WPF. The animation model for WPF/E is the same as WPF. And animations you create in Blend can easily be ported into WPF/E projects.

We are postponing our WPF/E episode, as we're waiting for certain tools for WPF/E to be released by Microsoft. However, don't be disappointed. We have some major stuff to cover regarding WPF/E that you will not find anywhere else. Trust me. :)

revolUXions | WPF | WPFE

Comments [0]  |  Trackback

Microsoft has released Beta 2 of Expression Blend.

New features include direct creation of controls by dragging styles onto the design surface, inner exception details (much needed!!), and improved value editors for things such as BitmapEffects, ListItems, TabItems, etc.

Check it out at http://www.microsoft.com/expression/

Blend | Downloads | WPF

Comments [5]  |  Trackback

After a lot of planning, recording mishaps (a perfect take lost due to my idiotically forgetting to press the RECORD button), tweaking, lots of coffee, Andy's vein's popping with an OD of sugar, some more tweaking, and some masterful digital artwork and editing, the revolUXion is finally released to manufacturing.

Keep watching this space, Andy's blog, and/or http://ux.nukeation.com for the public release on February 1, 2007.

Now, we've been very cheeky about revolUXions, but now here's the whole story:

WPF is out. But we're lacking good resources that tell you HOW some of the deep features work, or how to get started to experiment (do note, for developers there are some resources, but designers are mostly in the dark). Everyone is talking potential but no one is talking real concepts. Even some "great literature" on WPF out there is too hello-worldly. I'm sorry to say many a good developer are taking weird routes to doing things in WPF.

Bottomline: we need information on how to implement WPF into new projects. How to add a designer to your team, or work remotely with one. How to create a new level of interactivity that no doubt looks good but also makes your application and the end-user's task much more efficient.

There are full time designers working in Flash, Web, or other media who have the potential to build some great things in WPF, but it's too new for them and risky. I won't say I want Flash'rs to leave Flash. This is not a Microsoft propaganda machine, for the record. If you're looking for some decent new technology and TONS of earning opportunities, then WPF, Expression and WPF/E can give you that.

Developers are about to find out that their familiar world of Windows Forms is about to turn different. Yes, it's an eventuality we have to face: WPF is going to replace Windows Forms in the near future. It is the evolution of Windows Forms, and a revolution for User Experience.

Join us this Thursday (1st Feb), and we'll do our best to give you a wide spectrum of topics without wasting too much of your time, and maybe even help you get an idea or two for how WPF can help you do your job easier.

revolUXions | WPF

Comments [3]  |  Trackback

This thing started catching attention before it was even announced.

It's hot and it's coming soon.

The ultimate WPF resource. The only hint I can give you so far is - it's powered by Pwop.

.NET | Aesthetics | Geek Stuff | Graphics | WPF | WPFE | revolUXions

Comments [4]  |  Trackback

I'm still finding that many people are still not trying WPF. Many don't know where to start. So to help people adopt WPF, Andy Eick and I are creating some cool "learning material".

Instead of assuming we know what you - "Joe Developer" or "Joe Designer" - want to know more about in WPF, we'll just ask you.

What do you want to learn about in WPF? Does databinding interest you? Or maybe custom controls? Or scalable layouts? Or the declarative XAML?

Post a comment and leave your thoughts. We will make sure we do our best to satisfy your questions in our "learning material". Really. Free training material tailored to your needs - what more could you ask for?!

Keep reading Andy's blog and mine for updates.

.NET | Code | Geek Stuff | Microsoft | Windows Vista | WPF | WPFE

Comments [0]  |  Trackback

From left to right:

Ravi Venkatesan, Chairman of Microsoft India; Tarun Gulati, MD of Microsoft India; Steve Ballmer, CEO of Microsoft Corp.; Dax Pandhi (Me), CEO of Nukeation Studios.

This week has been amazing! I don't do much public speaking but the guys at Microsoft got me to be a speaker at IndiMIX'06. The central focus of the event was Expression and Live. Designer and developer. Cricket and Bollywood.

The event (my first big event) was fantastic. It started with a keynote from Steve Ballmer. Following that the application MatchCast, a high-end cricket statistic and analysis application, was showcased by Anil Kumble. Nukeation was the UX consultant on the application.

There was more stuff after that (from 1100 to 1300) but I missed it for two reasons. First, as the winner of Microsoft Blogstar, I had to go backstage and meet Steve himself!

>> This blog has been interrupted to announce that you are reading the blog of a Blogstar. We now return to the regularly scheduled post. <<

I got my photo taken with him, but they haven't sent it to me yet. :/ And secondly, after Steve left, my team had to prepare for our session.

The Designer Session Team

This was my first real, big speaking event and I was nervous as hell at first. The main reason I was able to give a good presentation was because of three incredibly cool people - Leon Brown, Pandurang Nayak, and Deepak Gulati. Our session was 75 minutes and covered the three Expression products. We also launched www.1expression.net (more on that later) and the WebRockstars contest at http://www.webrockstars.in/

I couldn't have asked for a better team! These guys are amazing. Thanks so much, guys! We spent two days in a conference room in Microsoft Mumbai preparing for our stuff. It was a first-of-it's-kind experience for me. Of course, the traditional "pizza while debugging" was a familiar entity.

Our session went excellently. It opened up with Leon (who was our session host) and cricket player Murali Kartik (a name Leon still probably can't pronounce - man, he got a lot of torture from me about that - and lots of other stuff!), followed by a walkthrough of Expression Web by Pandurang.

Pandu explains the session to Murali Kartik

I followed that with a brief intro of Expression Graphic Designer and Expression Interactive Designer. After that Deepak and I did a Developer-Designer workflow integration demo. He made a strict "developer looking" application (aka, functional but crappy looking) in Visual Studio 2005 with "Orcas" tools. I opened the solution in ExprID and enhanced it with styles and animations. We got a really great response from the audience. Deepak and I immediately developed this chemistry which allowed us to create a funny little style of working together on-stage. And I think the people really loved it.

We ended our session with three important things: an announcement that great things will be revealed about Expression in the first week of December; the launch of www.1expression.net; and a Q&A session. My fun moment there was representing my fellow designers worldwide - the most audible form of that was during the closing when someone asked "What are the debugging capabilities of Expression Interactive?". Deepak, Leon, and Pandu gave good, real answers. I, of course, said "Designers don't debug". :)

Mandira Bedi, TV personality and the host of the live webcast

I again missed the next session (Developer) as I was asked to be interviewed on the live webcast (75k viewers - made my knees shake!) by Mandira Bedi. I was able to catch Bob Muglia's closing remarks and Q&A. After the event, Leon and I also did a short interview for CNBC.

Bob Muglia answers a question. The four guys in the background are Deepak Gulati, Janakiram MSV, Kevin D'Souza, and Rohit Kapoor.

Praveen Srivatsa, Microsoft Regional Director for Bangalore, takes software construction seriously

Over the past 5 days, I got to meet some really great people - Microsfties, MVPs, RDs, simple civilianss, business execs, Cricket stars, movie stars, and who can forget Steve Ballmer! I also got to learn so many cool things that I can't tell without violating a dozen NDAs. That's the price you pay for being close to Microsoft.

All I can say is: hang on - the ride has just begun!

PS. Leon, yes, still MEKNB.

.NET | Code | Downloads | Graphics | Microsoft | My Insignificant Life | Photography | Web | Windows Vista | WPF | WPFE

Comments [28]  |  Trackback

A good family friend and the editor of Rediff.com (India's biggest portal) wrote an article about me and Nukeation.com is now temporarily out of service due to the Slashdot Effect.

If you're interested in knowing about my boring history, you can read the article at http://shrinkster.com/jmo or http://www.rediff.com/getahead/2006/nov/01outsource.htm. The story is also on the front page at rediff.com.

Articles | Geek Stuff | Microsoft | My Insignificant Life | Philosophy | Purely Idiotic Stuff | WPF

Comments [2]  |  Trackback

If you don't already know, MIX'06 is coming to India in the form of IndiMIX'06 (http://www.indimix06.com). The keynote will be given by Steve Ballmer.

I've been given the honor of being on the same stage as Steve B. I'm going to be doing a piece on .NET Framework 3.0 - essentially about Windows Presentation Foundation and the Designer / Developer work process. I'll be co-presenting the demo with some really cool people.

IndiMIX'06 will be held at the National Center for Performing Arts (NCPA), Nariman Point, Mumbai. It's a free public event and you can register for it at the official website. If you're not able to come to Mumbai, or if the event is sold out you can watch the live webcast. Register for either at the official site.

My presentation will be from 2:00pm to 3:15pm (local time, +5:30GMT).

For more info, visit http://www.indimix06.com

.NET | Aesthetics | Avalon | Code | Geek Stuff | Graphics | Microsoft | My Insignificant Life | Web | Windows Vista | WPF

Comments [7]  |  Trackback

Working with a designer for your application is a concept many developers find a bit new. A lot of developers we have been working with have struggled with different methods for working with us to design their app in WPF. So we wrote this little guide that explains one of the most efficient and effective methods of working with a designer or design studio to skin your WPF app.

Anyone can use this simple method. It allows the designer to work separately from the developer(s) in Microsoft Expression Interactive Designer or any other XAML editor. The developers work in Visual Studio (using "ORCAS" / "Cider") or ExprID and create forms as usual. The application would look just like any other Windows application. When the designer is finished with the styles, he or she gives the devs the file, they reference it in the project, compile, and voila!

You can read about the process, including source code, in detail in this file below:

PDF File (452K)

NOTE: This document is a draft version. Ignore any lingual or conceptual errors. The code, however, is error free.

.NET | Articles | Code | WPF

Comments [4]  |  Trackback

Aero Glass
Just about everyone making (or thinking of making) an application for Windows Vista wants to try out the cool new Aero User Experience. Software such as Windows Media Player, Windows Calendar, and the Windows Sidebar really show off the Aero glass look.

While overusing the glass bit is a certain possibility (and a probability), using it judiciously can seriously help spice up your app. A few things to keep in mind when using Aero Glass:

• Avoid a full glass window. This creates performance as well as usability issues.
• Use full glass windows only for non-resizable, non-maximizing windows.
• The glass portions of the window should always allow the entire window to be dragged.
• When designing the window, keep in mind what it will look like in a pre-Vista OS – i.e., without glass. Always have a non-Glass look ready to fall back on if Aero is disabled or if the app is run on an older Windows.

This exercise will require a good GPU (128MB AGP recommended).

Thanks to Adam Nathan for the original code!

The Code

Create a new code file and add the following code:

In your Window.xaml file, make the DocumentRoot object's Background to NULL then just insert the following code (marked in bold) in the codebehind file:

You will get the following result:



If you replace the thickness(-1) with thickness(5,70,5,42) you get something like this:



You can download the full code below. It requires Windows Vista RC1 or later, .NET Framework 3.0 (RC1), and Microsoft Expression Interactive Designer September CTP.

AeroGlassExample.zip (14.43 KB)

Aesthetics | Articles | Code | Windows Vista | WPF

Comments [2]  |  Trackback

Vista keeps getting better! Sure, there are still many bugs and improvements to be done, but this is a very stable work, and we're doing all our WPF experiments in Vista now.

Setup still managed to erase my Windows XP from the bootloader, and had to do the same thing as with the previous CTP. But other than the experience has been very good.

There are some neat new graphics - especially the Aero cursors now on by default!

I also noticed that the performance of WPF applications is much better on this build. There is a small glitch with ExprID and Vista, tho. Unless I disabled Desktop Composition, the menus dont show or rather don't draw.

I highly recommend trying out this build!

Windows Vista | WPF

Comments [0]  |  Trackback

June is going to be big for me. More than a few notable events are just around the corner.

The first being the renaming of my blog from Digital Exile to nAesthetic. I’m going to focus more on aesthetic than clowning around on my blog. A strong purpose in life (blogging life). You, in the RSS aggregator, hop on over to www.naesthetic.com (or the old www.nukeation.net). The blog looks hotter than ever!

The second will be the revamp of Nukeation Studios site for our 8th anniversary. The new site is expected to go live on the 9th of June.

The third, which is kind of unfortunate, is my 23rd birthday on June 17th. I find solace in the fact that while I may grow old, I refuse to grow up. And inversely, as a child prodigy, I have more than two decades of programming experience now. Ah, 128BASIC on the Sinclair ZX Spectrum+ in 1987. Those were the (crappy) days.

The fourth, and perhaps most important, will be the release of NukeBall – the first in a series of products we will be releasing! As soon as NukeBall is out the door, we can focus on the WinFX tools we have been prototyping!

Focusing on client projects and NukeBall has taken up most of my time. Now with NukeBall out of the door soon, and the new nukemeister Parvez joining the gang, I will finally have some time to resume my old blog projects.

First of all I will resume the Exploring WPF series of screencasts. Carl Franklin has given me some tips on how to make it better. Secondly, some of the free dev tools like Mapee and NukeControls and all that. I also need to give a major update to Nukeation Labs’ website. I have so much content just lying around.

As the name suggests, I will be focusing a LOT on aesthetics. The new UX revolution is gonna make aesthetics a LOT more important that they have ever been.

Art | My Insignificant Life | WPF | Aesthetics

Comments [9]  |  Trackback

My article has finally been published on MSDN. Thanks to the nice people at MS for letting me write this!

.NET | Articles | Graphics | Microsoft | Windows Vista | WPF

Comments [7]  |  Trackback

No, no - not those Flashers! I mean Macromedia Flash users.

I know many a Flashers have been annoyed (and some downright pissed) at me. One of them actually started yelling at me on Skype. I had to block him!

In any case, yes, I totally acknowledge that I am biased towards Microsoft. If not for them, I'd be a 20-something schmuck with two degrees in computing but still prefering to work at a burger joint. On top of that, I'm a Microsoft Partner (well, technically my company is, but I own my company, so shaddup!) so I've sworn my loyalty to them. But even all that aside, Microsoft provides feature-rich tools that no other competing products can stand up against.

But I think I need to re-address some things I wrote in my "Future of..." post. I wrote about the "three waves" that could potentially crush Flash. While part of me still thinks it to be totally possible, I have come to re-assess some things. Partially, this is because of a couple of discussions I had with a couple of Microsofties (I've stopped naming names. I usually get them in trouble. Sorry about last time, "Mr. X").

The more I dive deeper into WPF, the more I realize it is NOT intended to compete with Flash. Maybe it will compete with Flex. Though, I haven't seen that much adoption of Flex-based apps yet. Maybe Adobe will whip it into shape.

Seriously. If you're one of those people calling Sparkle the "Flash Killer", then I think you oughta give it a shot. It's not really "comfortable" for animation and web purposes as Flash is. And I definetely miss the in-timeline scripting facility Flash provides. You can do that in EID/WPF, but its not as simple.

I would also like to add to my previous post's tirade, that WPF/E is but a small part of WPF which is but a part (well, 1/3 at least) of WinFX. And WinFX - WPF in particular (I can imagine Michele Leroux Bustamante rolling her eyes again) - is going to be what will set Windows apart from Linux and MAC and all.

I don't imagine more than 10% of the industry actively using or trying out WPF at the moment. Y'know, for REAL projects. I'd be more than happy to be proved wrong, of course. But only after using WPF for a real project or two (and I'm not talking simple demo apps, I mean something substantial) will people REALLY appreciate WPF. It sounds good in theory, but it is even better in reality!

Btw, if you haven't noticed, this post does not revolve around a specific point. I'm just ranting. Thank you.

But if you REALLY need me to make some points...

• Flash has an enourmous market cornered that Microsoft does not have a good chance of acquiring.
• Microsoft is smart enough to realize that and is not, in fact, competing with Flash.
• WPF/E is more of a competitor for Macromedia Flex.
• WPF/E will run Flex into the ground. Or Flex will only exist like JSP does with ASP.
• Sparkle DOES NOT have enough flexibility and features required to replace Flash (which was never the point, of course).
• WPF/E is but a part of WPF which is but a part of WinFx. Developers and designers who choose to work under the Microsoft flag best focus on WPF. That's where the gold is.
• WPF will have a bigger impact on "Joe Computer User" than WCF and WWF. Which is totally unrelated to the current topic, but I have to get that in whenever I can for all the years I've spent being labelled "inferior" by developers who consider graphics in the computer world to be sub-standard to code.

Alright, Flashers. Go sleep in peace now. You are no longer under threat.

.NET | Avalon | Microsoft | WPF | WPFE

Comments [2]  |  Trackback

I found some nice information on Mike Henderson's blog about the WPF/E features revealed at MIX06 - worth reading.

Avalon | WPF | WPFE

Comments [1]  |  Trackback

I just read Andrew Lucking's blog post about my first video on EID, and it kinda inspired me to give my perspective on Flash vs EID.

Let's recount the basic stuff:

What's EID and WPF potential over Flash? Well, can't say much about WPF/E until I actually use it, but taking WPF as a basic example, here are my thoughts:

NOTE: For the purpose of this post, EID and WPF (or at least the features) are the same. If it is in one, its in the other.

• It all comes back to the timeline. In Flash Timeline is God. In EID, Timeline is just another aspect of an object, and there are more than one timelines and each can be ran parallel to other timelines - even of the same object!! In other words, with Flash we're looking at "time" from a normal layman's perspective; with WPF, it's like looking at "time" from Einstein's perspective.
• In Flash, you have to stop the timeline in order to have a static frame, which makes creating a multi-section Flash website quite difficult. It's not difficult per-se, but difficult when you consider the trigger-only-timelines that EID presents. That would make this much easier.
• Creating 3D content in Flash has always been terribly difficult. Shockwave does add 3D support, but its more like VRML on steroids. If you don't know about VRML, it was a 3D web standard pushed in the late 90s. It was terrible!! With inherent and DirectX support for 3D with shaders and crap is actually fantastic! That alone will land a good blow to Flash.
• There's good DOCUMENT support in WPF. This gives you a document-data presentation component that Flash just can't do! This is one of the chief reasons why the Adobe people are gung-ho on integrating PDF and SWF.
• EID comes from a "component and controls, animate it all" point-of-view, while Flash is "all animation, some component... animate components? uhh, ok, you can try...". The WRAP PANEL and other such controls can seriously kick Flash's ass.

You might say: "Whoa! Hold on. WPF/E does not have all this! It's very puny and limited!"

If you're a Flash or non-Microsoft-stuff user, I'll let you go. If you're a Microsoft-user and you said that give yourself a big kick. Without going into the intricacies of numerology, we all know that this is just version 1. All we have to do is wait 2 more versions. Let me explain:

So I've said all the nice things about WPF and put down Flash. Well, that's not the whole story. WPF is severely limited in many ways that Flash isn't. The user base being not the least of it, of course. Right now, WPF is more close to Macromedia FLEX than Flash.

Branden Hall writes in his post titled "The Flash Killer Cometh":

Well, I can't say I disagree with the first part. For the "mythical Interactive Developer" (I might have to adopt that as my title) comment, well, I disagree there.

Mythical Interactive Developers are not, in fact, mythical. I am one myself, and in the last 7 years have trained 4 such people (10 years and 16 people if you want to count VRML in this). We (ahem) are rare, but not nonexistent. And more shall rise. The gates of Oblivion have opened!! Uhh... sorry, wrong topic.

Anyways, let me get back to my point.

If you are not a Microsofter or are very new to the Microsoft world - the REAL Microsoft World that only devs see - you don't know the power of number 3. As I said, again ignoring numerology, that this WPF 1.0. Microsoft ALWAYS strikes gold with Version 3.

Windows 3(.1) was the most popular in the first generation. Windows 98SE was WAY better than 95 or 98. Windows ME was a fluke, so let's forget that. In the third generation we had Windows 2000 and then XP, now we have Vista which will undoubtedly hit the mark.

Visual Studio 6.0 (#3 of II generation) was way better than anything else. Visual Studio 2005 (#3 of the III generation) is already doing great things!

So step back a bit. Look from a larger perspective. Microsoft is only laying the foundation. Bill Buxton said:

There is a new revolution coming. It will come in THREE waves. Here's my prediction for it:

• First Big Wave: We shift from WinForms to a more Web+Vector like platform. We learn the ropes for the upcoming waves. The Mythical Interactive Developer is born and many Flashers flock to the Microsoft banner - mostly because working with WPF will pay a LOT more than Flash does. Microsoft silently keeps working on the final stuff.
• Second Bigger Wave: After a year or more of having WPF out there, Microsoft will have perfect grasp on what's needed, what the public wants, what the designers+developers need. A 2.0 release gives you more power. More people flock under the Microsoft flag. More users keep adopting this technology - even just as runtime. Microsoft silently keeps working on the final stuff.
• Tsunami: The work is done. Microsoft has the perfect blend ready. Flash is either killed or is kept limping behind.

Branden Hall also writes:

I recommend reading the posts in this category in old-to-new order. But let explain in short:

Microsoft is right. WPF is not being primed (solely) as a Flash-killer. It will definetely be a Mac-killer tho. But my point is this: If you think WPF is only for making things pretty you are WAAAAAAAY off.

WPF is about getting the presentation layer of a software done quickly and flexibly. Things that required superior subclassing skills and knowledge can be done by an amateur now. The declarative model makes things much easier. WPF will be a boon for developers. It will solve a LOT of problems.

For record let me make it clear:

Windows Presentation Foundation or Expression Interactive Designer will not make anything extra-graphical or extra-interactive unless designer/developer goes to some lengths to actually make it so! When you DON'T skin a control, it will look just like a normal Windows control does. WPF will solve problems such as creating composite controls, creating resolution-independent applications, allowing better and economical usage of graphics hardware and vector to lower CPU usage that GDI+ does not, and more. This is not an animation package (yet).

No. WinFX/WPF/EID is the next generation of development platform. Of course, it won't take long for it become what ASP.net is for the web. But it will be like ASP.net in many ways. WPF/E will co-exist with Flash, just as ASP.net does with PHP and JSP. Of course, it goes without saying that ASP.net is better than PHP or JSP, and so will be WPF/e (eventually).

With that, and the sun shining in my face at 7:20 in the morning, I bid thee good night.

.NET | Art | Avalon | Geek Stuff | Graphics | Microsoft | Windows Vista | WPF | WPFE

Comments [4]  |  Trackback

"The Human UX" or "The Human User Experience" is an article I wrote back in mid/late-2005 for MSDN. During the release of Visual Studio 2005, the article got delayed indefinetely. In retrospect, I think this was for the better. Some of my comments will hit harder now that people are using WPF and EID. Some of the references such as the Windows Vista UX Guide have been updated as well.

A couple of weeks ago, I got an email from Brad McCabe (Content Strategist for the Visual Basic website, as well Program Manager among other things) giving me the go-ahead to update the article (it was written in August 2005 - lots of things became outdated). I got an email from Brad today confirming that the article will soon be published!

For a BIG Microsoft fan (and why not, 60% of my life depends on MS!) there couldn't be a greater honor.

The Human UX serves as an interim-design-guideline - bridging the gap between designing for Windows Forms and designing for Windows Presentation Foundation. It focuses more on theory than on actual code so everything will apply to both technologies. Essentially, this article has "usability" at its heart. I hope for it to be a prelude to an article on WPF Design Do's and Don'ts.

The article was originally thought to be a VB article, then expanded to include C# as well. But my inability to cope with too much C# made it difficult to write it that nicely. And what about the guys who do C++ and J#? So at the end I made it platform-agnostic (to borrow a term from Ted Neward's site). Whether you do .NET or Java, GDI+ or WPF, VB or C#, Dogs or Cats, Batman or Superman, Doom or Half-Li... uhh, you get the idea - this will be good reading for you.

.NET | Articles | Windows Vista | WPF

Comments [3]  |  Trackback

I've been wanting to write some articles/tutorials on Windows Presentation Foundation and Microsoft Expression Interactive Designer for a long time, but just can't find the time. I was inspired by Carl Franklin's dnrTV, and I thought why not make them into short 15 minute videos? So here we are with my first attempt at a visual presentation.

In the first part of this series, we will see how easy it is to control timelines and animate controls. We will also see how easy it is to create custom templates for existing controls.

Click the image above to launch the video.

Length / Size: 00:11:59 / 6.74MB

NOTE: Due to technical problems - presumably an issue with Expression Interactive Designer - context menus are not visible in this recording. You can find links to the screenshots of these menus below.

Links: Edit Template Menu | TemplateBinding Menu | Full Source Code*

* Requires March CTP of Microsoft Expression Interactive Designer

Feedback is appreciated. :)

WPF

Comments [0]  |  Trackback

IMO, in my recent experiences, a large number of people still think of a skinned app as something like Windows Media Player, WinAMP, PowerDVD, the OEM apps that come with digital cameras, Bryce or even PwopCatcher. Skinning CAN be like that, and no doubt MANY people will want that (and need it too). However, skinning can also (and in a more widely needed as well as realistic pov) mean enhancing the existing structures of your WPF application controls.

In certain situations "skinning around the control" rather than "skinning the control" also helps. And if you allow me a moment to be painstakingly irritating, with WPF's super flexible design model, skinning is too narrow a term to really describe what can be done. But back to skinning around the control, let me clarify what I mean by building upon an example I (will) present in The Human UX:

Say we have a button that triggers a purge of a nuclear reactor (if you don't know yet, this is a hypothetical situation). From a typical skinning point of view (STC - Skinnin the control) we might have an urge to paint the control red, put a biohazard or radioactive symbol on it, and add those yellow-black warning stripes around it. Now that's all nice and good, but just PAINTING the control is not really helpful aside from making an idiot go "ooooooh, what does THIS button do?".

Let's build a USABILITY ENHANCEMENT on top of this. For a seriously dangerous function trigger like this button, a good accident deterrent is needed. Let's use a reversed version of the "Your computer will restart in 15 seconds" dialog. We make the button nicely big (say 100px wide and 50px tall). When idle, it says "Purge Reactor" and has an exclamation on either side. When clicked, the text says "Confirm?" and the button starts to pulsate its color. A small 95px wide, center-aligned, progressbar appears ON the button, and instead of the exclamation icon, a countdown is shown - which is also reflected in the "emptying" progressbar. If the action is not confirmed within 15 seconds, then it is automaticaly cancelled. To be safe from accidental double-clicks, the countdown starts 3 seconds AFTER the first click.

On cancellation, the button fades back to the normal "idle" mode.

Now this is something I just dreamt up right now. With proper planning and some usability experts (<cough> Nukeation </cough>) these types of "little things" can seriously enhance the usability of any application.

What we just did here was NOT your typical skinning. We actually edited the base template of an existing button, added various timelines to respond to different events, and added sub-controls hosted on its surface. This kind of work was not possible (at least in terms of practicality and ease) unless you knew some heavy C++. We are messing with new "sub-controls" and timelines rather than just slapping on sweet graphics, so this isn't really skinning. While the official terms for this are (as far as I know) "Editing a control template". I call it Avalonizing or Avalonization, of WPFing (pronounced "wip'fing").

But enough of terminology. My main point here is that we now have an affordable, easy to implement, and flexible model for doing such things. And this power should not be wasted on just skinning an application, but rather to create superior usability enhancements to your apps.

Coming soon

Next Part: Using various contains like Grid, Canvas, and Flow to seamlessly present both controls and textual content in a single form.

Tutorial: Simple Template Editing for the Button and Progressbar.

Geek Stuff | Graphics | Windows Vista | WPF

Comments [2]  |  Trackback

In my previous post I showed some XAML code. I would like to point out that some of the code there looked a bit overcomplicated, but that was on purpose - since the code was taken from my app which require it to be that way for several reasons. Here's some alternate code:

Which replaces:

This is nice. Creating UI in a markup language makes it SO much flexible for modifying existing stuff. It would give you hives in WinForms!

WPF

Comments [0]  |  Trackback

I mentioned in my post about PixelSpread that a LOT of code was replaced by using the simple features of WPF. Here's how it was done. This example illustrates the concept, but with different controls.

On our blank XAML Scene file we have a Grid object and a Slider. The grid is called grdMain and the slider is ingeniusly named Slider. To make this realistically work, we need the Grid to be in some sort of container to mask the view, but that's beyond the scope of this example. The slider's VALUE will provide the zoom factor. 0 being nothing and 10 (1000%) being the highest. Here's code:

The code is pretty straight forward. We have databound the Grid.RenderTranform.ScaleTransform.ScaleX (and Y) properties to the Slider's VALUE property. You can also use RotateTransform or other transforms as well.

To find out more about the ScaleTransform object, see this link in the WinFX Documentation. For other transforms and the Transform object itself, see this link.

The documentation notes that the RenderTransform object does only TEMPORARY transforms. That is, it does not regenerate layout size, etc. But you can simply use such binding to other "tangible" objects for storage.

WPF

Comments [1]  |  Trackback

Making a prototype UI for PixelSpread, I started implementing the Zoom feature (it zooms the entire page/spread). I wrote two lines of code manipulating the Transform of the container and binding it to a slider, and replaced over 120 lines of Windows Forms related code! No more handling resize events or anything! This just WORKS.

I wish I could post the code. But this is a commercial application. Still, WPF ROCKS! I might post a similar sample just to show off this feature. Seriously, WPF solves SOOOOOOOOO many UI customization problems!

.NET | WPF

Comments [4]  |  Trackback

Now that Windows Presentation Foundation is much more stable, and all it's tools are appearing in usable condition, I've started moving some of our projects to WPF.

The first of which is PixelSpread.

PixelSpread is a more-or-less ANTI-ORGANIZER. Don't let the name fool you though, it has superb auto-organization facilities. PixelSpread is made especially for designers (web and graphic). Photographers have recently gotten tools that let them organize their photos on a digital light table and work like they do in the physical world. Now that's all nice and good, but a much more simple (yet complex) solution is required for graphics designers who have literally thousands of small images (icons, graphical widgets, etc.). The thing is, designers often work with pieces of a single image. For example, take a button for example - it is (in web design especially) comprised of three different images: left side, right side, and the middle that can be stretched as wide as need be. You have to be painfully specific to organize these images so that you can see them in order in your image viewer or Windows Explorer. And organizing multiple such things is a pain. Trust me. I manage over 651k+ such images.

So, in comes PixelSpread. NOTE: This screenshot is from the WinForms .NET 2.0 prototype. This has 60% less features.

So, PixelSpread lets designers randomly drop images to keep here in a "spread". You can have more than one spread and share a single image across multiple spreads - like the new Virtual Folders in Vista. You can store a more than one format for each image. You can instantly copy from PixelSpread to your favorite web design or graphic design software.

PixelSpread maintains 32-bit transparency and supports Vector objects as well. You can zoom in/out an entire spread. Featuring state-of-the-art image compression (storage only), the PixelSpread data storage layer compressed a 291MB Corel PhotoPaint (CPT) file to 10.3MB, and a 325MB PhotoShop (PSD) file to 19MB.

With the move to WPF, the UI is more more flexible and customizable. The memory footprint is smaller, and the application is now seriously much more fun to use! Even with the move to WPF, PixelSpread still uses the Nukeation XCOPY™ Engine written entirely in Visual Basic 8.0 and sporting a custom back-end.

For more information about PixelSpread, subscribe to the RSS feed at http://labs.nukeation.net or see the PixelSpread page there.

PixelSpread is intended for a Q3 2006 release. There will be a free "Express" version of it as well. Expect a beta in the coming months.

.NET | Graphics | WPF

Comments [4]  |  Trackback

http://labs.nukeation.net is now active. Do note, this is a pretty bare bones version. I will beef it up over the next couple of weeks. I have about a dozen downloads to add - as soon as I get time to debug them

Many new projects we are making for our retail division (for developers and graphics designers) are now shown on Nukeation Labs.

.NET | Downloads | Geek Stuff | Graphics | NukeBall | WPF

Comments [5]  |  Trackback

In an effort to better educate myself, I went blog-hopping to find some serious info about using WPF. Well, I couldn't find any in the 32 blogs I sifted. Everybody's still into animating the color of an ellipse or rotating a spline! I thought of picking up one of those book on WPF based on the old code, but thought better of it. Microsoft changed a lot of stuff in the past few revisions. The best way to learn, imho, is to get all the info you can and then make something yourself.

So, this weekend, I'm gonna spend my 6-hours of peace like I did last week. This time, I'm not experimenting. I've done 20 people's share of experimenting. I'm now a self-proclaimed expert on WPF (who had over 90 errors in his latest WPF app). While I will let the people who read this decide how smart I am (about WPF, off-topic smartness ratings - especially negative ones - will be ignored), I do intend to write a small application - with a companion walkthrough narrative - that shows how to REALLY use the animation capabilities of WPF to animate and reanimated controls to adjust according to the data, when switching between Views, and so on.

Hopefully, and work permitting, I will be able to complete it over the weekend itself.

WPF

Comments [1]  |  Trackback

This is a tentative list of WPF related examples I will be making soon. If anyone wants to see anything else, please drop me a line and I'll do my best to write about it.

1. Browser apps with WPF
2. Walkthrough: Themeing your application
3. Real-world applications with WPF 3D
4. Working with Brushes
5. Bitmap Effects
6. Serious and practical uses of the animation model (aka Abusing the Timeline)
7. Using audio and video in WPF applications
8. EID 101

WPF

Comments [2]  |  Trackback

I've had plans for a long time to create a special bridge website where me and the boys (and girl) at Nukeation Studios get to show off code, tools, and other cool stuff to our peers (and give it away for free). I started doing that on a miniscule level on this blog, but I'm not your traditional blogger. I can't keep my normal slapstick out of this blog, nor do I have time to manage two blogs (and frankly, I don't think anyone would read my slapstick-only blog anymore).

Eventually, the idea of Nukeation Labs (did you know Nukeation Studios was known as Nukeation Labs before it was legally made into a business entity?) became a bit more. Nukeation will be soon be making a new full fledged dive into Professional Tools development. We will be focusing on two audiences: graphics designers and software developers. With our new tools being planned for WinFX, both these will overlap at some point.

So, my goals (yes, I'll be managing the site singlehandedly at the moment) with Nukeation Labs are:

• Provide technical insight into tools and other projects we are doing
• Provide free source code samples for .NET, Web developement, and Windows Presentation Foundation (and WPF/E whenever that gets here)
• Provide free (and commercial) tools for software and graphics professionals
• Publicly discuss alpha projects that often never see the light of day, but might make for fun discussions.
• And more ... once I find someone to start managing the site. :)

Nukeation Labs will be available in a couple of weeks as soon as I move this blog to a new server. Nukeation Labs will be available at http://labs.nukeation.net/ - that is, once I move this on to a new server.

.NET | Geek Stuff | Graphics | NukeBall | WPF

Comments [7]  |  Trackback

Microsoft, as far as I can tell, does not support Additive and Subtractive blend modes in Avalon. One performance hungry way to do this (Additive only) is to make your object 3D and then apply a EMMISSIVE shader to it. Works better if its a bitmap.

Nathan Dunlap told me he was able to simulate bled modes with the help of DirectX Filters. I think if it can be made into a simple reusable model, it would be perfect. Will experiment on it after February 10th.

WPF

Comments [0]  |  Trackback

Carrying on with the control editing theme for the moment, there are two essential ways a control can be customized. Like with ASP.net 2.0, you get an option "Edit Template" for many webcontrols. Likewise, EID gives you that option too. You can either a) edit the template - the actual vectors used to build the control, b) create a copy of the template to edit, or c) create a new template from scratch. With the buttons in FXBesh and FXCresh, I went with C. With the Expander and ProgressBar, I went with B.

Comparing to Flash or 3D Studio MAX on any other animation package out there, there is a big difference in hierarchy:

In Flash its Scene > Timeline > Layers/Objects with keyframes, with SCENE being the root of it all, and _ROOT being the root of the scenes.

In EID/WPF its different - and more dynamic - Scene > Objects. Notice that I did not put Timeline in this hierarchy - well, that's because timelines exist as resources which are attached to events. A timeline has one or more triggers which are attached to one or more objects' events. So you end up reusing a timeline for multiple events. And you can also specify in the trigger whether you want the timeline to start, stop, pause, etc. in a particular event.

And you can "animate" just about anything - ie, properties, values, shapes, etc. So each thing has its own part in the timeline.

Unlike Flash, you don't have to manage groups, layers, etc manually. They come in their own hierarchy.

Here is another app FXDorn - a 3D performance test. There are various triggers bound to different things. The 3D world contains a 3D object with the Play icon as it's shader material. The shader type is emissive therefore uses ADDITIVE blend mode. There are modifications to the default lighting.

Downloads | WPF

Comments [0]  |  Trackback

FXCresh is my next app made with EID. This time, we have Ball buttons based on the BallButton template, a customized gradient progressbar, and a custom-themed Expander control.

Downloads | WPF

Comments [0]  |  Trackback

I finally have my weekly 6 hours of peace. I will get back to work soon nuff, but I need to sink my teeth properly in EI/Sparkle. I thought it might be cool if I kept my blog open and kept scribbling as I went through the app. So this is gonna be a real log-style thing. <PicardVoice>Captain's log, stardate 24871.4.</PicardVoice>

I decided earlier (after dissecting the samples that come with EI) that the only way to get going with this deceptively small-sized package was to get my hands dirty. So I have a few applications planned:

FXAurek - customized styles on common controls. This is ByFar (or ByRef) gonna be the most used thing in Avalon, methinks. Skinning WinForms can often be like skinning a dragon (or do you scale a dragon? I don't know. I gave up dragonmeat after watching DragonHeart). Here, with a few simple lines of code, you can quickly create an app-wide skin - much like what Yahoo! has done with their Messenger. So that's the first project. Let's see how it goes.

Pro: The Worspace Zoom is fantastic! The flexibility is greatly helpful when you're working on 1600x1200 or higher.

[Going to code now]

Con: The tools (especially the "create" tools) don't switch back to the Pointer tool - quite annoying.

Pro: As I make the template (no code writen yet - all GUI!!) for the skin, I am finding the instant binding (see image below)...

... to be quite helpful. You just select the property, you get a menu, select TemplateBinding > [property-to-bind] and the object (a rectangle shape object in this case) gets its property value (height) from the control's property. Zero code still. Well, handwritten anyways. As far as I have seen, this kind of binding is available on all properties which can accept binding of any sort.

I have now created the metallic button with th Silver XP style colors (suggestion for Microsoft: Allow selection of SystemColors in the gradients et al.) and all that's left is create the animations for OnHover OnLeave and a ContentPresenter where the text will be shown.

[Back to coding...uhh, designing]

Okay, now I have two timelines that animate the gradient of the rectangle, and I've added the event-analogs of timelines - "triggers" - to each timeline (ie, MouseEnter and MouseLeave). Eventually we will need MouseDown and MouseUp too.

fxbesh_1.zip (6.54 KB) - I botched up in he gradient animation. I moved the GradientStops. I should've changed their colors!! You can see the stuff I've made so far by running this EXE in the zip. You will need the JanCTP of WinFX Runtime installed. It's about 16MB and can be found here.

Another suggestion for MS: Middle-click/mouse-scroll zoom/pan functionality is BADLY needed.

Con: <DataVoice>Captain, sensors show an anomaly.</DataVoice> A warning to all you Visual Studio devs trying your hand at EID: The "Library" (toolbox-analog) DOES NOT SUPPORT DRAGGING, nor does it create a control if you select it and click on the design surface. You have to draw manually.

Pro: Wanna see how scary a design workspace can be? Check out my personalized workspace in EID here. This is where the flexibility of EID's UI shines! Auto-collapse, auto-sizing. Wonderful. Just plain wonderful!!

I'm having a bit of trouble adding a ContentPresenter. It keeps wiping out the Rectangle I made. I've added the code manually. In hindsight, I think this was because there was no container control. Recommendation: Add a Grid or Canvas or something to the base of the ControlTemplate and put graphics and sub-controls on that. That should solve this problem.

Now I'm gonna bind the content presenter ... which in code looks like this:

<ContentPresenter Content="{TemplateBinding Content}"  />

Even in code, this is a quick and easy job!

Con: EID does not have IntelliSense and code coloring/formatting - YET. It does have basic coloring when you enter Code mode for VB or C#.

Beta-thing: Even when you make a VB project, the project icon has a green # on it. Guess MS still hasn't gotten all the icons decided yet. :P

Btw, in EID, when you highlight text anywhere, even the highlight is a gradient, rounded-corner rectangle! Is this sweet or what?!

Okay, going back to position the ContentPresenter.

[15 minutes later] ContentPresenter is now done. All properties are bound. Works like a charm. I changed the gradient to a more better looking one. The animation looks MUCH better now. It's still a bit chunky, but good enough for this exercise.

While making the skin for our second button, a ControlTemplate by the supercool name of "ButtonControlTemplate1" was created. It is part of the "Form"'s resources. So now, if you add a new button and select ButtonControlTemplate1 as it's template, voila - it will inherit that template. In the zip below you will find one more button in the app and it uses that template as well. The full XAML code and EID project is included. Click here to download it. Btw, I remembered I already had a project called FXAurek, so this one is now FXBesh.

Next: Messing with a List control - custom styles, custom formatting, and other cool stuff.

<WorfVoice>Q'pla!</WorfVoice>

WARNING: The code and downloads presented in this blog post are released under IDGAD License (I-Don't-Give-A-Damn). Feel free to use it anywhere you want.

Downloads | WPF

Comments [6]  |  Trackback

For the past few days, I have been battling a mega-crisis on my main production PC. I still don't know the cause, but at the end, my beautiful 80GB SATA harddrive will be sent for replacement by Seagate. I bought a new 200GB one, transferred all the data without problem (for a change) and am now reinstalling everything to get back to work-ready status.

While I was off staring at a blank blue chkdsk screen for 12 hours in a row, two companies on which my livelihood depends on - Microsoft and Corel - pulled a fast one on me. Microsoft released Expression Interactive Designer (EID or MEID or "Sparkle"). If you don't know, Sparkle will be the heart of WPF based applications.

First of all, I must congratulate Microsoft for pulling off one hell of a job on this app! It seriously kicks Flash's ass. And its 6.8MB if you can believe it. Yup. Amazing!! The completely non-Microsoft-like UI (Black!!!) looks so sweet! The different work panels are a cross between Flash and Visual Studio - very cool.

I have a lot of work pending due to the hardware problems and all, but I will surely post a bigger review (from a dev and designer pov) over the weekend.

Corel Graphics Suite X3 (v13) is downloading as I write this. I blindly bought the upgrade, of course. PhotoPaint is a million times better than Photoshop. At least for me. I create all my websites in it. I can't wait to see what they've put in this release!! Again, more on that this weekend.

Lastly, this blog seems too confining to share snippets of code and .net (and xaml) stuff I want to give away freely. Some of my cohorts at Nukeation agree. So we're starting up (or rather, RE-starting) NUKEATION LABS. It will be 100% free, 100% managed, and on a seperate domain, of course. I'm almost finished with Nukeation Mapee 1.0, nukeControls 1.0, and more. All will be put up for public download very soon. The site will be up by the end of the week. The url is yet to be decided.

Geek Stuff | Graphics | My Insignificant Life | WPF

Comments [4]  |  Trackback

If you wonder how can WPF make for cool web apps? Here's a basic look. Check out www.macromedia.com/software/flex - FLEX (currently 1.5) gives (currently only Java) developers a Flash based front-end coupled with XML to create visually rich web apps.

For working exampes check out this page with samples.

Now, put the power of .NET and ASP.net 2.0 behind WPF/E and you have some amazing tools! Mix in some AJAX and you're golden!

FLEX 2.0 (in Alpha at the moment) will support .NET - tho not sure about 2.0, Flash 8.5, and ActionScript 3.0. It will be a powerful tool. But I doubt it can hold a handle to WPF.

.NET | WPF | WPFE

Comments [9]  |  Trackback

I may have mentioned (more than once) that Devs are NOT giving attention to WPF. Well, turns out I was not talking to a large enough number of devs to get a proper statistic.

I finally got to talk to devs who are seriously focused on WPF and are just as excited as I am.

Of course, that does not negate the fact the majority of devs out there don't really care that much. But that again is not their fault. What the designer (Manuel, was it?) said in the Sparkle preview on Channel9, you have to clear your mind of the preconceptions of 3D and timelines and all.

Geek Stuff | My Insignificant Life | WPF

Comments [0]  |  Trackback

It is entirely possible to get lost at the Microsoft site. If you know how to find information, you can see how truly immense the site is. It could surely use a better navigation system, because often some great resources are hidden from plain sight and just might miss the mark.

I accidentally stumbled on this page that I had visited long ago. It's the Microsoft Design Resource site. At first glance you can see how the design is atypical of Microsofts normal trends (barring the 30th anniversary, Research, and Innovation presentations in the Corporate site).

This site is an excellent read and has some really nice, chic even, designs. The PEOPLE section is very interesting to people who are interested in design.

Here's an example of a cool thing - the "Office of the Future" design that won Microsoft an IDEA (Industrial Design Excellence Award).

This is a UI targeted at a very wide (and curved) prototype computer Microsoft has made. It's like have three monitors, but without the breaks in between.

How developers will embrace WPF and the new vector design methods is yet to be seen. If the reactions I've seen so far are a sign of the future, I think it might take some time. While developers love the cold logic of code, computers are merging more and more into human life, and as such will need to be approached with a psychological view as well. Right now, only few software companies (most of which are giants) do such research and apply it to their products.

The role of the designer in the software industry will be a very powerful catalyst for the entire industry and how we work. The factors of psychology in relation to human-computer interaction (psychophysics I believe applies here) are very important as I've started to learn in the last few months. I only had shallow knowledge of such, but after reading a few essays and the book Emotional Design by Dr. Don Norman (www.jnd.org) I started developing a much deeper interest. My personal ideas and views conflict a bit with Dr. Norman's, but I have come to greatly appreciate his insight.

Usability might seem like a trivial thing - especially when worrying about the code you still have to write - but it is far more important than it seems. When dealing with a non-technical (or even technical) software product - a good aesthetic+psycholical influence can help you increase sales, make the product more usable, FUN, and increase productivity at the same time.

My thoughts will be continued in "The Human UX" and some other posts. I had hoped to have it published on MSDN sooner, but I will post a preview copy here as the MSDN schedule seems a bit delayed.

Art | Geek Stuff | Graphics | Microsoft | Windows Vista | WPF

Comments [0]  |  Trackback

After 6 months and 10 days of slaving over 23 designs (will post the process here later) Nukeation.com has finally been updated. This is version 19 (if you count the officially published versions) based on the layout codenamed "REGENERATE".

HanselMinutes, dnrTV and the other new shows are not yet in the portfolio. They will be added as soon as the sites go live.

Please feel free to visit www.nukeation.com and check out our new services including: Blog Design, WinFX/WPF consulting, Multimedia Services, and more. We've also added a PROCESS page where we show you how projects are done and what it is like working with us.

Feel free to mail (or comment here) any comments, questions, suggestions, or critisizms.

.NET | Avalon | My Insignificant Life | Windows Vista | WPF | WPFE

Comments [3]  |  Trackback

I saw a wonderful quote on Nathan Dunlap's blog:

Here is a great quote from Bill Buxton:

"My sense is that Microsoft is in transition from an engineering-led company to...a design-led company," he said. "There are more designers at Microsoft on any single team as there were, not too long ago, in the entire company. It's a wonderful change."

http://news.zdnet.com/2100-3513_22-6001234.html

I for one couldn't be happier. It's the design revolution!! The streets will be colored in Window.Resource and often ignored lowly designers will make the face of the software industry. Go pixel pushers!

.NET | Graphics | WPF | Microsoft

Comments [0]  |  Trackback

WARNING: We're dealing with unsupported, pre-release software and a half-assed attempt to force an installation that was explicitly denied. Don't try this on your production PC! Attempt at your own risk!

I downloaded the 1GB Windows SDK from http://msdn.microsoft.com/winfx/ with the December CTP for WinFX. I wanted to try out the new Visual Designer for XAML/Avalon codenamed "CIDER".

Anyways, I install the DecCTP runtime for WinFX. Then run the setup for SDK and it fails on me saying the Runtime version mismatches with the SDK. It is clearly not the case, since I uninstalled and reinstalled the latest runtime 3 times.

The installation went smoothly in Windows Vista and on XP SP2 on my Tablet. So I kinda manually ran the SDK installer manually. Here's what I did in case someone else has the same problem.

1. Install the Dec CTP WinFX runtime
2. Run the following installations in this specific order: (this is the SDK DVD image you can run virtually or burn to a disc)

i. msh_setup-i386.msi
ii. WinSDK-x86.msi
iii. dbg_x86.msi
(optionally also run dexplore.msi but often not required)

3. Run the VS Extensions with CIDER.

This should install everything ok. The main installer program is kinda messed up but this works a-ok. I have Cider running nicely now. I do get some errors now and then, but I think that's because its a beta/CTP.

I will start posting sourcecode of the two XAML samples I'm making - FXAurek and FXBesh.

.NET | Windows Vista | WPF

Comments [0]  |  Trackback

As technologies converge and new frontiers are born, so are new roles. WPF (fka Avalon) is creating a new role for the designer in world of software development. Previously, the closest a designer would get to programming was if he or she was a Flash artist (or "Flasher").

The couple of weeks ago, I was helping a buddy of mine learn Flash (remotely via MSN!). Now, this guy is a pure designer. You give him a piece of paper and a pencil, or maybe even tablet and Photoshop, and he's the best. Now he finds himself in a new environment that requires him to script. No GUI tasks in that. And if you have done Flash you know its pure coding that makes it work. Not to make fun of him, but he found having to write stuff like...

stop();

on(rollOver){gotoAndPlay("Over");}

on(rollOut){gotoAndPlay("Out");}

... difficult. He almost gave up Flash because of it! He's now getting better at it of course.

Let's go over to the other side. A client of mine likes to dabble with Flash now and then. We were talking and he told me how dull and unproductive the Flash IDE (imho, it's hardly a DE, let alone IDE) was. He was asking me if it was worth it to upgrade to Flash 8. I doubt any "true" programmer (or !=0 programmer ) would be comfortable in a IDE that has only 600x200 pixels worth of coding area.

If you're familiar with the fantasy genre (no I don't play D&D) there are mages and there are warriors. Warriors fight with their senses and the "physical" world. Mages work with the abstract and create wonderous as well as horrible things. Warriors = logic, and Mages = abstract or intuitive. And thus, software developers are like warriors, while designers are like mages.

And as we know the both don't get along too well.

This is a topic in which I'm quite well-versed. For you see, not to brag, but I'm one of the rare Warrior Mages. I've been programming since the age of 3 or 4. I've been designing/drawing since 3 or 4 - maybe earlier. There are others like Nathan Dunlap (www.designerslove.net) who used to be a designer only and is now getting quite good with .NET thanks to XAML and WPF.

I don't know if WPF (and /E) will be able to kill Flash or not, but it will certainly require all of us to learn how to better work with Designers. I suppose people who work in web development teams have a headstart on this.

As it will soon be announced on the official site, this month Nukeation passed the figure of 78 billion (that's 78,000,000,000+) pixels published. That is the count of pixels in the images we have used in projects. And it gives me great pride to say that more than 12 billion of those have been for software-based graphics. A few million from that figure belongs exclusively to Borg.

Software with great graphics are really more successful (provided they have actual functionality too). If you haven't tried XAML and WPF yet, go do it now. If you're a developer, start learning how to work with a designer. If you're a designer, start learning about logic.

In the game industry (which has the most active designer-developer interactions) there is a liason role - a person who knows about programming logic and design tactics. They help bridge the gap and help both parties work nicely with each other.

Unfortunately, this will not be probable or possible in the normal software development community, I think. Not at the budgets we (the "average" devs) work with - in terms of both time and money. Maybe Microsoft can afford it, but I think more than 90% of the industry would not be able to.

So the best thing for everyone is if they learned the "physics" of the other's work. If nothing else, just learn the limits of the technologies involved and what's possible and what's not. It migth save everyone a lot of time.

If you have any designer/developer stories, I'd love to hear 'em!

Happy cod(esign)ing.

Geek Stuff | Graphics | Philosophy | WPF

Comments [0]  |  Trackback

Nukeation Studios is now offering full XAML and Windows Presentation Foundation (WPF) based design services. We will also provide appropriate updates and revisions as the runtime and framework changes.

For a limited time, we are providing free 2 hours of consulting with our WPF and Design experts on how you can make your projects in a WPF based front end.

For details, please contact info [ at ] nukeation [ dot ] com.

More information will be posted on www.nukeation.com in coming weeks.

.NET | WPF | WPFE

Comments [5]  |  Trackback

WPF or WPF/E are too weird and have too many hard syllables. Has anyone found a nickname yet? Or a better way to pronounce them? I suggest "Whippfee" for WPF/E. Makes it sound like an R2 astromech. WPF/E will need a better name if Microsoft wants to target it at the standard "everyone" market.

Avalon was a real good name. Everyone took to it quite nicely. If they're worried about trademarks, they wouldn't have a trademark issue if they just make it "Microsoft Avalon(tm)". Like Flash (which is actually "Macromedia Flash"), people will call it just Avalon.

While I don't usually critisize Microsoft, I think they've got this whole naming thing backwards. Me, I would've called it WPF inside the company. Then when released, it should take on the "codename" they usually give. "Codename WPF" sounds better than just WPF, and Microsoft Avalon sounds much better than Microsoft Windows Presentation Foundation.

Sigh. That "official" name has more syllables than the entire works of Shakespear (even the ones that the monkeys wrote). If anyone finds a better name for WPF and WCF, please drop me a line. I'd very much appreciate it.

Geek Stuff | Windows Vista | WPF | WPFE

Comments [1]  |  Trackback

A subtle, yet extremely important aspect of software branding will now finally be fulfilled with WFP. The Windows Presentation Foundation will allow you to create a "sub-theme" with application-level (or maybe even Form/Window level) scope.

"Sparkle" will allow you to modify themes and apply them locally to your app or form, as you can see in this screenshot. It will also be easy to create compound controls (think ASP.net UserControls on steroids). Visual subclassing has always been a pain - and Sparkle is the painkiller.

Companies like mine (Nukeation) will no doubt release theme packs for XAML based UIs.

Recently I was working on creating this custom drawn ListView effect (like the Vista ListView selection box) and I had to write about 70 lines of code (and rewrite it again and again by trial and error) and spent about 3 hours just to get it rigth. It's needlessly complex. Well, not needlessly, but you know what I mean. I for one can't wait for Sparkle.

I was told I was babbling "Xaaaaaml.... Spaaarkle .... Avalooooon" in my sleep last night. Occupational hazard.

Windows Vista | WPF

Comments [1]  |  Trackback

I'm still too excited and my imagination is running overtime with the possibilties. I am just not able to put it into words ... not yet. I need time to heal.

But I will say this: UX - User Experience - is gonna be the new freakin' thing everyone wants to get their hands into. I am quite confident Microsoft WFP/E (or Windows Presentation Foundation Everywhere) will replace Macromedia Flash in quite a large percentage (like ASP.net did PHP), and Flashers (not the lewd kind, but the people who make stuff in Flash) should start learning about XAML and WFP if they want to earn better. Flashers don't earn as much as programmers. This is where that gap can be closed.

I know, I'm inviting competition. UX is the very core of Nukeation Studios. That's how I made it. That's what I'm passionate about. We are already providing consulting services for those who want to get a head start. We did the same for ASP.net 2.0, and Windows Forms 1.0 before the days of .NET 1.0's rise. My team and I are quite confident that we will be enriching many a applications with WPF very soon. If you'd like to know more, just drop us a line at wfp [ at ] nukeation [ dot ] com.

For a limited time we are ready to provide up to 2 hours of free consulting about WFP and how to plan it in for your upcoming software or the next version of that software.

We will also be announcing new WFP services in the Developer Services portion of our website.

And lastly, better UX means more work, and more work means I need fresh blood.

Jobs @ NUKEATION

For WFP development we need people with basic knowledge of XAML, Flash, 3D Design, 2D Vector Design. Any single talent out of these (with a willingness to learn more), and an intense amount of creativity & imagination is what we're looking for. Take a look at our portfolio. If you think you can match our work, we would be glad to have you on board.

3 paid internships with the same specification are also available. Drop us a line at hr [ at ] nukeation [ dot ] com

.NET | Avalon | Graphics | WPF | WPFE

Comments [4]  |  Trackback

Microsoft's Expression product line seems very impressive. When you take into consideration the cross-platform (WPF/E) power and the extreme flexibility of WPF/XAML, and not to mention the solid power of programmability (something Flash lacks in boatloads) WPF/E will most probably revamp the Internet itself!

If you don't know anything about all this, think power of the world's best programming language, mixed with futuristic Final Fantasy like software interfaces. The future is finally here. Where do I want to go today? I wanna go to the place where they store the bits of Sparkle in Microsoft!

If you've worked in Flash and if you've worked in .NET, you just KNOW that the possibilities are mind-boggling. I have half a mind to create a time machine and go to the release date!!

WPF/E supports portable devices, Mac OS X, and possibly Linux as well! This is one of those few (if not the only one) things Microsoft made that is cross-browser compatible to such extremes. Check out Sparkle's features.

Windows Vista will finally be that massive graphical step in a visually better computing world. Not to mention all the other stuff - but I'm a graphic guy so I don't see nothin' else! :-P

Also, check out the ATLAS page. I'm gonna get my hands dirty with all this this weekend!

I'm still shaking from excitement over Expression. I better stop trying to write my thoughts about it before I go completely nuts!

EXPRESSION ROCKS!!!

.NET | Avalon | Geek Stuff | Graphics | Windows Vista | WPF | WPFE

Comments [0]  |  Trackback