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

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

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 [27]  |  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 [5]  |  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

If you have a Flash control that needs to be "activated" - especially on a fully Flash site - you know how problematic and anti-productive it can be. Here's a workaround:

This code will "activate" all OBJECT tags in your page. Use with care. The irritant in IE may not fun, but the security concern is valid.

Microsoft | Code | Web

Comments [3]  |  Trackback