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

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

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

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 [9]  |  Trackback

In the thick of things, I have about 4 to 8 different applications running on both my monitors and quickly opening various folders and launching applications or command lines is a pain. Using Start | Run has a peculiar problem - you can't enter too many things - the history is limited. And I hate running Start | Run everytime, its too inefficient.

So, today, while working, I quickly cobbled together a quick solution  QuickNuke. I linked to one of the MM keys on the keyboard. It sits in the systray, and does not load automatically on startup. Hit the launch key and you get this window. It's explorer powered. Drag any shortcut (or an item while holding ALT) into this window and it will make a shortcut!

Double-click the shotcut, and you're done. Hit escape to hide the window.

This is very crude at the moment, but I will whip it up into shape soon.

This application is released under the IDGAC (I-dont-give-a-crap) license, so feel free to download it from http://shrinkster.com/gbk. Suggestions and feedback are welcome.

Downloads | Geek Stuff

Comments [2]  |  Trackback

The first big milestone for Nukeation Studios' retail effort.

NukeBall Express Edition Beta 1 is now finally available for the public. While not feature complete, NukeBall's powerful NukeWads feature is fully functional in this release.

Y'know what? I can't talk more. I'm just too damned excited. Just head on over to www.nukeball.com and check it out yourself!

Oh, we would really appreciate any feedback you can provide! Just drop us a line at beta [at] nukeation [dot] com.

.NET | Downloads | Geek Stuff | NukeBall | Toys

Comments [0]  |  Trackback

Here's a first look at NukeControls. This is just a small piece of the whole thing - only 3 controls.

nPanel - a special "header" control
nProgress - a super cool Vista-style progressbar for .NET 2.0 with animation!
nNavigator - bi-directional navigation control

All these controls have 6 or more themes, and some like the nPanel, can be customized.

Click the image above to download a ZIP (175kb) with a VB.NET 2005 project. If you don't have VB.NET 2005, you can just run the EXE in the BIN folder.

This is an alpha build only. Expect a public beta in the coming week or two. If you run this in the IDE, do note that only a handful of events and properties have been exposed for this demo. Some themes will not function as well.

Comments are appreciated. We are also looking for people to beta test the controls suite. Beta testers get a free copy of this product! Contact us at beta [at] nukeation [dot] com.

.NET | Downloads | Graphics | Toys | Windows Vista

Comments [0]  |  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 [2]  |  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 [2]  |  Trackback

Since Beta 1, I've been trying out the cool custom control features of Visual Studio 2005. And along the way, I've made some controls for in-house applications and some other projects. Now, you know me - I'm graphical to the core. These are super sweet looking eye-candy controls, and with solid functionality (as far as I know!).

Take a look at some of the controls:

Nukeation Navigator was inspired by VISTA and Microsoft's corporate site design. It has back-next navigation in a single control with 6 different themes ("Aero Glass", "Pure Liquid", "Jungle", "Nuke" [of course], "Lava", and "Rainbow").

Nukeation Progressbar is a chunk from the upcoming software NukeBall. We use this heavily for simple progress display. Very cool looking.

Nukeation Panel is a subclassed version of the standard Panel control. But this one has a gradient background, dropshadow, and a TITLE and DESCRIPTION property - ideal for wizards or dialog headers! Supports custom colors, 6 in-built color schemes, or OS-theme.

nProgress is old (from 1.1), but was ported to 2.0 and had some new functionality added to it. This is a fixed-size progress control with some seriously cool graphics! The "downloader" of PwopCatcher created by Carl Franklin uses this very progress bar.

I'm trying to fix some problems in nRange a range meter that shows 3 different ranges (ex: blue 5-10, green 8-23). If that is done, I'll pack it in.

Uhh... pack it in to what? Well, NukeControls! A freeware pack of cool aforementioned controls for .NET 2.0!

These controls will be released under the "I don't give a damn what you do with it, but some credit would be appreciated" license. More on this later.

.NET | Downloads | Geek Stuff | Graphics

Comments [1]  |  Trackback

As you may or may not know, the .NET Rocks crew is hitting the road on the VS 2005 Roadtrip and doing a show almost everyday. I was in charge of the graphics and all, and as usual, went overboard with the branding while Carl and I were brainstorming. While the eccentric graphics won't show up anywhere near the show or the RV, I'm leaking the best one here for your pleasure. This shows the secret plan that Carl Franklin, a seemingly innocent person in the developer community, is really undertaking. After all, they did say that VS2005 is all about VB.

Thanks in advance for the hate mail that Mac, Linux, and C# fans will be sending me.

Select resolution: 1024x768  |  1280x1024  |  1600x1200

PS. The thumbnail does not show all the 'good stuff'.

Downloads | Graphics | Purely Idiotic Stuff

Comments [0]  |  Trackback

This is a cool tool for Web Developers from Microsoft! Couple this with IE7's tabs and you have yourself an extra arsenal.

Overview (from the link above)

Downloads | Geek Stuff | Graphics | Toys

Comments [0]  |