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 [0]  |  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 [0]  |  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 [1]  |  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 [2]  |  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 [0]  |  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 [3]  |  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 [1]  |  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 [4]  |  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 [2]  |  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 [2]  |  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 [1]  |  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 [1]  |  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