Silverlight Glass Button
Martin Grayson wrote an amazing tutorial about how to create a WPF glass button using blend in his blog. He 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). Due to some limitation of Silverlight 1.1, it’s not so easy to create it at that time. After that, I’ve been very busy with my job and couldn’t manage to port it to Silverlight.

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.
- SoureCode Download: SilverlightGlassButton.zip (1.07 MB)
- Demo :Silverlight Glass Button Demo

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.
<Style x:Key="GlassButton" TargetType="Button"> <Setter Property="Background" Value="#FF1F3B53"/> <Setter Property="Foreground" Value="#FF000000"/> <Setter Property="Padding" Value="3"/> <Setter Property="BorderThickness" Value="1"/> <Setter Property="BorderBrush"> <Setter.Value> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="#FFA3AEB9" Offset="0"/> <GradientStop Color="#FF8399A9" Offset="0.375"/> <GradientStop Color="#FF718597" Offset="0.375"/> <GradientStop Color="#FF617584" Offset="1"/> </LinearGradientBrush> </Setter.Value> </Setter> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="Button"> <Grid> <Border BorderBrush="#FFFFFFFF" BorderThickness="1,1,1,1" CornerRadius="4,4,4,4"> <Border x:Name="border" Background="#7F000000" BorderBrush="#FF000000" BorderThickness="1,1,1,1" CornerRadius="4,4,4,4"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="0.507*"/> <RowDefinition Height="0.493*"/> </Grid.RowDefinitions> <Border Opacity="0" HorizontalAlignment="Stretch" x:Name="glow" Width="Auto" Grid.RowSpan="2" CornerRadius="4,4,4,4"> <Border.Background> <RadialGradientBrush> <RadialGradientBrush.RelativeTransform> <TransformGroup> <ScaleTransform ScaleX="1.702" ScaleY="2.243"/> <SkewTransform AngleX="0" AngleY="0"/> <RotateTransform Angle="0"/> <TranslateTransform X="-0.368" Y="-0.152"/> </TransformGroup> </RadialGradientBrush.RelativeTransform> <GradientStop Color="#B28DBDFF" Offset="0"/> <GradientStop Color="#008DBDFF" Offset="1"/> </RadialGradientBrush> </Border.Background> </Border> <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" Grid.RowSpan="2"/> <Border HorizontalAlignment="Stretch" Margin="0,0,0,0" x:Name="shine" Width="Auto" CornerRadius="4,4,0,0"> <Border.Background> <LinearGradientBrush EndPoint="0.494,0.889" StartPoint="0.494,0.028"> <GradientStop Color="#99FFFFFF" Offset="0"/> <GradientStop Color="#33FFFFFF" Offset="1"/> </LinearGradientBrush> </Border.Background> </Border> </Grid> </Border> </Border> </Grid> </ControlTemplate> </Setter.Value> </Setter> </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.
<vsm:VisualState x:Name="MouseOver"> <Storyboard> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="glow" Storyboard.TargetProperty="(UIElement.Opacity)"> <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="1"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </vsm:VisualState>
Visual State Manager – Pressed State
<vsm:VisualState x:Name="Pressed"> <Storyboard> <ColorAnimationUsingKeyFrames Storyboard.TargetName="border" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"> <SplineColorKeyFrame KeyTime="0" Value="#CC000000"/> </ColorAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames Storyboard.TargetName="shine" Storyboard.TargetProperty="Opacity"> <SplineDoubleKeyFrame KeyTime="0" Value="0.4"/> </DoubleAnimationUsingKeyFrames> <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="glow" Storyboard.TargetProperty="(UIElement.Visibility)"> <DiscreteObjectKeyFrame KeyTime="00:00:00"> <DiscreteObjectKeyFrame.Value> <Visibility>Collapsed</Visibility> </DiscreteObjectKeyFrame.Value> </DiscreteObjectKeyFrame> </ObjectAnimationUsingKeyFrames> </Storyboard> </vsm:VisualState>
Note: I haven’t implemented the FocusStates and Disabled state. I will look at those states when I have some more time. You can also send me if you manage to create those missing states too. :)
Enjoy! Silverlighters!!!
November 10th, 2008 at 12:24 am
Nice work. I will inform our user about your “Silverlight Glass Buttons”
November 10th, 2008 at 12:45 am
[...] Michael Sync gives us a great Silverlight Glass Button [...]
November 10th, 2008 at 1:48 am
Awesome!
Are there any specific terms of use?
November 10th, 2008 at 2:24 am
>>Are there any specific terms of use?
Nope.
The original WPF version is from Martin Grayson. According to his blog, there is no license attached for that WPF version.
My ported version is under Cc license. That means you can use any way you like as long as you give me the credit (e.g a link or etc)
November 10th, 2008 at 9:36 pm
[...] von Michael Sync [...]
November 11th, 2008 at 3:00 pm
[...] one for today from Shawn, he discusses having updated his ADO.NET Data Services example to SL2. Silverlight Glass Button A big thanks to Michael Sync … it’s about time someone ported that great button over to [...]
November 11th, 2008 at 11:39 pm
[...] Lange habe ich nichts mehr von Micheal Sync veröffentlicht, aber dieses Mal konnte ich nicht anders. Dieser Punkt gefällt mir sehr gut, es ist ein Entrag zum Thema “Custom Controls” hier handelt es sich um einen “Glass Button”. [...]
November 12th, 2008 at 3:55 am
[...] here to read the original post and download the source code. « Silverlight MediaElement Playing [...]
November 14th, 2008 at 5:32 am
het..michael ma,
i don’t like it :D
ppl may confused is it a button which is clickable or not :P
November 14th, 2008 at 9:58 pm
I’m not sure why you think those buttons are not clickable. Have you checked the demo? The behavior of that button is exactly the same as Vista Taskbar button. :)
November 17th, 2008 at 10:15 am
[...] I think you should be able to create some cool styles like Silverlight Glass Button after you finish reading this [...]
January 22nd, 2009 at 3:38 am
[...] caption and the background of the button will be a simple glass button. With thanks to Michael (http://michaelsync.net/2008/11/08/silverlight-glass-button) for providing the code of his glass [...]
July 18th, 2009 at 6:24 pm
Hi Michael,
Just wanted to thank you for this marvelous template. You can see it at work in a little demo I created of image transition animations. You can see it at http://www.agile-soft.com/Silverlight.aspx, and you can download the source as well!
Thanks a bunch!
Helen