Friday, January 16, 2009

SILVERLIGHT GLASS BUTTON

I explained each and everything in very details with the step-by-step instruction. (You can find Tutorial.doc in the sample file of his post.) I’ve been thinking to create the similiar one for Silverlight since I was using Silverlight 1.1 Alpha (a.k.a Silverlight 2 Alpha).

Today, I got some time to check his code again and managed to port it to Silverlight. It was very simple. The only difference between the original WPF style and the one that I ported is that I’m using Visual State Manager instead of ControlTemplate.Triggers in this sample. The reason is that Silverlight doesn’t support all kind of WPF triggers (including ControlTemplate.Triggers) except EventTrigger. So, I decided to use VSM in my sample. I hope you find it useful.

Custom ContentTemplate of Glass Button

The following code is the Glassy Button Style. If you like to know the detail, I would recommend you to read Martin’s tutorial.


  1. <Style x:Key="GlassButton" TargetType="Button">
  2. <Setter Property="Background" Value="#FF1F3B53"/>
  3. <Setter Property="Foreground" Value="#FF000000"/>
  4. <Setter Property="Padding" Value="3"/>
  5. <Setter Property="BorderThickness" Value="1"/>
  6. <Setter Property="BorderBrush">
  7. <Setter.Value>
  8. <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
  9. <GradientStop Color="#FFA3AEB9" Offset="0"/>
  10. <GradientStop Color="#FF8399A9" Offset="0.375"/>
  11. <GradientStop Color="#FF718597" Offset="0.375"/>
  12. <GradientStop Color="#FF617584" Offset="1"/>
  13. LinearGradientBrush>
  14. Setter.Value>
  15. Setter>
  16. <Setter Property="Template">
  17. <Setter.Value>
  18. <ControlTemplate TargetType="Button">
  19. <Grid>
  20. <Border BorderBrush="#FFFFFFFF" BorderThickness="1,1,1,1" CornerRadius="4,4,4,4">
  21. <Border x:Name="border" Background="#7F000000" BorderBrush="#FF000000" BorderThickness="1,1,1,1" CornerRadius="4,4,4,4">
  22. <Grid>
  23. <Grid.RowDefinitions>
  24. <RowDefinition Height="0.507*"/>
  25. <RowDefinition Height="0.493*"/>
  26. Grid.RowDefinitions>
  27. <Border Opacity="0" HorizontalAlignment="Stretch" x:Name="glow" Width="Auto" Grid.RowSpan="2" CornerRadius="4,4,4,4">
  28. <Border.Background>
  29. <RadialGradientBrush>
  30. <RadialGradientBrush.RelativeTransform>
  31. <TransformGroup>
  32. <ScaleTransform ScaleX="1.702" ScaleY="2.243"/>
  33. <SkewTransform AngleX="0" AngleY="0"/>
  34. <RotateTransform Angle="0"/>
  35. <TranslateTransform X="-0.368" Y="-0.152"/>
  36. TransformGroup>
  37. RadialGradientBrush.RelativeTransform>
  38. <GradientStop Color="#B28DBDFF" Offset="0"/>
  39. <GradientStop Color="#008DBDFF" Offset="1"/>
  40. RadialGradientBrush>
  41. Border.Background>
  42. Border>
  43. <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" Grid.RowSpan="2"/>
  44. <Border HorizontalAlignment="Stretch" Margin="0,0,0,0" x:Name="shine" Width="Auto" CornerRadius="4,4,0,0">
  45. <Border.Background>
  46. <LinearGradientBrush EndPoint="0.494,0.889" StartPoint="0.494,0.028">
  47. <GradientStop Color="#99FFFFFF" Offset="0"/>
  48. <GradientStop Color="#33FFFFFF" Offset="1"/>
  49. LinearGradientBrush>
  50. Border.Background>
  51. Border>
  52. Grid>
  53. Border>
  54. Border>

  56. Grid>
  57. ControlTemplate>
  58. Setter.Value>
  59. Setter>
  60. Style>

Visual State Manager - MouseOver State

Martin is using Trigger.EnterActions and Trigger.ExitActions of ControlTemplate.Triggers to apply the Mouse Over Style but as I mentioned before, Silverlight doesn’t support those kind of triggers so that Visual State Manager is the best choice to change the style.

You will see the following in “MouseOver” state of VSM.


  1. <vsm:VisualState x:Name="MouseOver">
  2. <Storyboard>
  3. <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="glow" Storyboard.TargetProperty="(UIElement.Opacity)">
  4. <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="1"/>
  5. DoubleAnimationUsingKeyFrames>
  6. Storyboard>
  7. vsm:VisualState>

Visual State Manager - Pressed State


  1. <vsm:VisualState x:Name="Pressed">

  3. <Storyboard>
  4. <ColorAnimationUsingKeyFrames Storyboard.TargetName="border" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)">
  5. <SplineColorKeyFrame KeyTime="0" Value="#CC000000"/>
  6. ColorAnimationUsingKeyFrames>
  7. <DoubleAnimationUsingKeyFrames Storyboard.TargetName="shine" Storyboard.TargetProperty="Opacity">
  8. <SplineDoubleKeyFrame KeyTime="0" Value="0.4"/>
  9. DoubleAnimationUsingKeyFrames>
  10. <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="glow"
  11. Storyboard.TargetProperty="(UIElement.Visibility)">
  12. <DiscreteObjectKeyFrame KeyTime="00:00:00">
  13. <DiscreteObjectKeyFrame.Value>
  14. <Visibility>CollapsedVisibility>
  15. DiscreteObjectKeyFrame.Value>
  16. DiscreteObjectKeyFrame>
  17. ObjectAnimationUsingKeyFrames>
  18. Storyboard>
  19. vsm:VisualState>
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)