Create Glow effect in Silverlight

It every designer's requirement to have three basic effects,
1. Drop shadow effect.
2. Glow effect.
3. Blur effect.
but Silverlight 3 doesn't have glow effect directly. But the good news is that we can create it indirectly!!!
Lets see how it can be done:
1. Create a normal button or any component and style it as you want.
2. Add Drop shadow effect ot it.
3. Set the depth of the shadow to 0.
Thats it!!! Your glow effect is ready!

To achieve this you just need to do a small adjustment in your blend,

Styling a button

The most common control that is used and which looks difficult yet easy to style is the button control. To style a button all you need to see is the direction of light when you press it. By direction of light, I mean, how and where the shadow should fall in order to give the user a feel of it being pressed. After all styling is all about observation and giving the user feeling of real time effects.

So here we zoom......

the button control which I have styled now has a glassy look and turns green on hover. You may change the colors according to your need by just changing the color code. It looks like this..

In normal state

on mouse over

<style x:Key="GlassBtn" 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> <vsm:VisualStateManager.VisualStateGroups> <vsm:VisualStateGroup x:Name="CommonStates"> <vsm:VisualState x:Name="Normal"/> <vsm:VisualState x:Name="MouseOver"> <storyboard> <doubleanimationusingkeyframes BeginTime="00:00:00" Storyboard.TargetName="glow" Storyboard.TargetProperty="(UIElement.Opacity)" Duration="00:00:00.0010000"> <splinedoublekeyframe KeyTime="00:00:00" Value="1"/> </DoubleAnimationUsingKeyFrames> <coloranimationusingkeyframes BeginTime="00:00:00" Storyboard.TargetName="glow" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Duration="00:00:00.0010000"> <splinecolorkeyframe KeyTime="00:00:00" Value="#008CAF33"/> </ColorAnimationUsingKeyFrames> <doubleanimationusingkeyframes BeginTime="00:00:00" Storyboard.TargetName="glow" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[0].(GradientStop.Offset)" Duration="00:00:00.0010000"> <splinedoublekeyframe KeyTime="00:00:00" Value="0"/> </DoubleAnimationUsingKeyFrames> <coloranimationusingkeyframes BeginTime="00:00:00" Storyboard.TargetName="glow" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Duration="00:00:00.0010000"> <splinecolorkeyframe KeyTime="00:00:00" Value="#FFA9CA54"/> </ColorAnimationUsingKeyFrames> <doubleanimationusingkeyframes BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="glow" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Offset)"> <splinedoublekeyframe KeyTime="00:00:00" Value="1"/> </DoubleAnimationUsingKeyFrames> <doubleanimationusingkeyframes BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="shine" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[0].(GradientStop.Offset)"> <splinedoublekeyframe KeyTime="00:00:00" Value="0.004"/> </DoubleAnimationUsingKeyFrames> <coloranimationusingkeyframes BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="shine" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)"> <splinecolorkeyframe KeyTime="00:00:00" Value="#FF45494D"/> </ColorAnimationUsingKeyFrames> <coloranimationusingkeyframes BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="shine" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)"> <splinecolorkeyframe KeyTime="00:00:00" Value="#998F8F8F"/> </ColorAnimationUsingKeyFrames> <doubleanimationusingkeyframes BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="shine" Storyboard.TargetProperty="(UIElement.Opacity)"> <splinedoublekeyframe KeyTime="00:00:00" Value="0.5"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </vsm:VisualState> <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> <vsm:VisualState x:Name="Disabled"> <storyboard> <coloranimationusingkeyframes BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="border" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"> <splinecolorkeyframe KeyTime="00:00:00" Value="#B2787878"/> </ColorAnimationUsingKeyFrames> <doubleanimationusingkeyframes BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="glow" Storyboard.TargetProperty="(UIElement.Opacity)"> <splinedoublekeyframe KeyTime="00:00:00" Value="1"/> </DoubleAnimationUsingKeyFrames> <coloranimationusingkeyframes BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="glow" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)"> <splinecolorkeyframe KeyTime="00:00:00" Value="#B26A6A6A"/> </ColorAnimationUsingKeyFrames> <coloranimationusingkeyframes BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="glow" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)"> <splinecolorkeyframe KeyTime="00:00:00" Value="#33595959"/> </ColorAnimationUsingKeyFrames> </Storyboard> </vsm:VisualState> </vsm:VisualStateGroup> <vsm:VisualStateGroup x:Name="FocusStates"> <vsm:VisualState x:Name="Focused"> <storyboard> <doubleanimationusingkeyframes BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="glow" Storyboard.TargetProperty="(UIElement.Opacity)"> <splinedoublekeyframe KeyTime="00:00:00" Value="1"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </vsm:VisualState> <vsm:VisualState x:Name="Unfocused"/> </vsm:VisualStateGroup> </vsm:VisualStateManager.VisualStateGroups> <border BorderBrush="#7F45494D" 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> <contentpresenter HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" Grid.RowSpan="2"/> <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="#FF8CAF33" Offset="0"/> <gradientstop Color="#008DBDFF" Offset="1"/> </RadialGradientBrush> </Border.Background> </Border> <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="#9945494D" Offset="0"/> <gradientstop Color="#333D4042" Offset="1"/> </LinearGradientBrush> </Border.Background> </Border> </Grid> </Border> </Border> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style>

Styling silverlight controls

As a silverlight developer cum designer, I have observed that most of the time is spent on styling a control. Maybe because that we want to extract the best of silverlight and make the most beautiful and attractive components. Styling not only requires expertise and creativity but it requires lots of patience too, as mostly it never comes out to be perfect in the first go!Check out this space for all the styled controls!!!!