Over a million developers have joined DZone.

Silverlight Glass Button

·

Martin Grayson wrote an amazing tutorial about how to create a WPF glass button using blendin his blog. He explained each and everything in very details with thestep-by-step instruction. (You can find Tutorial.doc in the sample fileof his post.)  I’ve been thinking to create the similiar one forSilverlight since I was using Silverlight 1.1 Alpha (a.k.a Silverlight2 Alpha). Due to some limitation of Silverlight 1.1, it’s not so easyto create it at that time. After that, I’ve been very busy with my joband couldn’t manage to port it to Silverlight.

[img_assist|nid=5888|title=|desc=|link=none|align=none|width=182|height=125]

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

[img_assist|nid=5890|title=|desc=|link=none|align=none|width=640|height=476]

Custom ContentTemplate of Glass Button

[img_assist|nid=5891|title=|desc=|link=none|align=none|width=189|height=42]

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

[img_assist|nid=5893|title=|desc=|link=none|align=none|width=188|height=44]

Martin is using Trigger.EnterActions and Trigger.ExitActions ofControlTemplate.Triggers to apply the Mouse Over Style but as Imentioned before, Silverlight doesn’t support those kind of triggers sothat 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

[img_assist|nid=5894|title=|desc=|link=none|align=none|width=184|height=44]

<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 willlook at those states when I have some more time. You can also send meif you manage to create those missing states too.

Topics:

Published at DZone with permission of Michael Sync. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}