WinFX - Learning the future.

The next generation Windows, a programmers view.

November 2004 - Posts

  • Playing with Gel Buttons

    Filed under: ,

    I was very pleased to get hold of the November CTP. At last I can play with Avalon without having to go without all the home comforts of my Windows XP installation.

    The first experiment I tried was creating the popular Gel style buttons with event triggers and animations. I found it quite pleasant to edit the Xaml samples using Notepad2 which has syntax highlighing for XML among its other useful features.

    I started with the SDK sample "Property Triggers with Multiple Conditions" and went on extending it from there.

    The sample contains a flowpanel with a style definition for Button. The style is made of a Rectangle with rounded corners, an Elipse and a ContentPresenter for displaying the button text. There is a property trigger set up on the IsFocused property that changes to button colour to a light blue and a combined property trigger on IsFocused and IsMouseOver that changes the elipse to Yellow.

    The flowpanel contains four buttons labeled One to Four

    I'm not terribly artistic, and have not really played with vector graphics much before so I used as a guide this article by Frank Hileman on creating Gel buttons in VG.Net and applied it to Xaml.

    I decided to keep the embedded ellipse as it makes a nice effect when the button is selected. To start with I changed the main button colour to Blue and then added a second rectangle to the Button style. The second rectangle has rounded corners to match the main button but is slightly smaller and has its position offset from the top left of the button. I set the Fill property of the second rectangle to a vertical gradient fading from Light Blue at the top to Transparent at the bottom.

    <Rectangle def:StyleID="HighLight" Height="20" Width="116" Grid.Left="2" Grid.Top="0.5"  RadiusX="15" RadiusY="15" > 


    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">


              <GradientStop Offset="0" Color="LightBlue" />

              <GradientStop Color="Transparent" Offset="1"/>