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

I was over at Ryan Stewart's AIR blog on ZDNet, reading his post Vista sells! More WPF apps coming?. I was reading a comment that Jason Etheridge (a Unix developer) wrote.

It's entirely possible that Microsoft's Silverlight will overtake Flash more quickly than most would think possible. Flash may have over 90% deployment of its player into browsers, but all Microsoft has to do is deliver Silverlight as part of a regular IE update... and suddenly it's almost everywhere. The more compelling argument for Silverlight is the ability to write browser-side apps in languages familiar to developers (C#, Ruby, Python), using Visual Studio's IDE. That's a much, much better story than using an effectively proprietary language like Actionscript (even if it's a variant of Javascript). How long before Microsoft release a platform like AIR that can run CLR apps on the Mac? Mono already allows .NET apps to run under Linux.

He goes on to write:

A platform can only survive if developers are willing to write code for it; with Flash now, there's not really a viable alternative.

Read the entire post and Ryan's response.

Jason's comments do ring true to my ears. A simple Windows Update can make Flash's market penetration seem not that grand. Microsoft already has an existing developer base that Adobe can't match (at least at the moment).

Here's the trump card (or rather, ONE of the trump cards) as I see it. We all know enterprises hate changing technologies. Mostly because a lot of code needs to be overhauled or rewritten from scratch. With Silverlight 1.1 (and going forward) you can virtually pull out your business objects from your existing SQL + ASP.net setup (or even a MySQL + Python whatever) and hook it up with a new simple middle layer to Silverlight. You get to reuse existing code - which saves a LOT of money and time, AND you get to leverage the full potential of RIA. While Flex does tote some nice compatibility features, but somehow I don't think it would match this.

Flex, etc. has become a much more respectable programming language than what ActionScript used to be. But it would have trouble competing with something like C# or VB. Many Flash/Flex/AIR people have been talking about the merging of the desktop and the web, but IMHO I think that some things are better left on the desktop or the web where they belong. The net is not really all that stable as it needs to be for such heavy things. In the future, sure, it could happen, but not yet. Moving things to the web for the sake of moving things to the web is just wrong. In fact, while it was an excellent technology showcase, I didn't particularly approve of the web-based media editor shown at MIX'07. I refer you to my previous rant.

Right now things may look unclear as to where the tide goes or turns, but I have a feeling in the next year or so, we will see some major changes in the RIA space.

In closing, I'd like to provide some insight into the whole WPF adoption thing that Ryan was asking about.

So now that we know people are actually buying Vista, what’s going to be the story for Windows Presentation Foundation? I’ve seen a lot of internet chatter about there being a lack of good WPF apps out there because of a lack of an installed user base. That actually runs contrary to what I’ve heard from shops like IdentityMine and Cynergy who have seen strong demand for WPF applications. I get the sense that most of these are on the business side and less on the consumer side however.

WPF presents a major change from the familiar Windows Forms that developers are so used to. See my Myths post about some of the (percieved or otherwise) obstacles in adoption. But if you look at the amount of excellent 3rd party stuff coming out from Developer Express, Infragistics, Telerik, and even Nukeation, there is a massive demand for WPF. In fact, about 80% of the work at Nukeation for the past year or so has been WPF rather than web-based stuff. Of course, it takes TIME to develop good applications. Expect to see many good applications that use WPF very soon. Some, like RIPT, are already out in beta. I myself have worked on a medical application, a large store chain management app, extremely large enterprise data management and visualization app, and various other applications. Most of these are to be released internally in corporations or select circles - but they shouldn't be discounted from the WPF adoption block.

Before I go, I'd like to ask why we're not seeing AIR and Flex and all that showing up everywhere - especially since they have 90%+ market penetration. ;)

Comments [11]  |  Trackback

Wow. It's been 3 months since I blogged!! Needless to say I was busy.

But before I get into that, just hop on over to www.nAesthetic.com - I just updated the blog design. Let me know what you think! The new blog shows (in the browser only) new art/photos posted to my deviantArt account as well.

At Nukeation we have been working hard on two products that will see a public release before the end of the year. One is for Windows Forms (long term followers of this blog may know what it is) and one is for WPF. Expect news soon.

I have also entered into an unholy alliance with my fellow Microsoft MVP Andrew Eick (of revolUXions fame) and Liam Cassidy (of BBC infamy) on a project that will change or ruin the world. We're hoping for the latter, but most probably end up with the former. Obviously, it involves drinking a lot and writing a ton of .NET 3.5 code.

I've also been writing some stuff regarding WPF which I shall soon publish. I have to wait until some of the software it talks of is released. On a recent trip to Microsoft Bangalore, I met with Pandurang Nayak and India's new UX Evangelist Supreet Singh. These guys planning great stuff for the local UX community - do keep a lookout for some great events like the recent Expression Around the Clock (which I missed at the last minute due to an emergency!). On that same trip I was familiarized with some of the new stuff Microsoft has on the horizon. It just blew me away.

I can't wait for the next-gen stuff to come out!!!

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

From: http://www.apple.com/macosx/techspecs/

Purely Idiotic Stuff

Comments [3]  |  Trackback