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 Text Block

Now a days everybody is bored with age old white contemporary text block!!!Lets make something good!
Here is the TextBlock with a button

This Text block has a button at its end though! I will be posting the code for that button in my next post.
Here is the code:

<Style x:Key="BookmarkTxt" TargetType="TextBox">
           <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="Background" Value="#FFFFFFFF"/>
            <Setter Property="Foreground" Value="#FF000000"/>
            <Setter Property="Padding" Value="2"/>
            <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="TextBox">
                        <Grid x:Name="RootElement">
                            <vsm:VisualStateManager.VisualStateGroups>
                                <vsm:VisualStateGroup x:Name="CommonStates">
                                    <vsm:VisualState x:Name="Normal"/>
                                    <vsm:VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetName="MouseOverBorder" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)">
                                                <SplineColorKeyFrame KeyTime="0" Value="#FF000000"/>
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity">
                                                <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
                                            </DoubleAnimationUsingKeyFrames>
                                            <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)">
                                                <SplineColorKeyFrame KeyTime="00:00:00" Value="#FF333333"/>
                                            </ColorAnimationUsingKeyFrames>
                                            <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)">
                                                <SplineColorKeyFrame KeyTime="00:00:00" Value="#FF45494D"/>
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name="ReadOnly">
                                        <Storyboard>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="ReadOnlyVisualElement" Storyboard.TargetProperty="Opacity">
                                                <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
                                            </DoubleAnimationUsingKeyFrames>
                                            <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)">
                                                <SplineColorKeyFrame KeyTime="00:00:00" Value="#FF45494D"/>
                                            </ColorAnimationUsingKeyFrames>
                                            <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)">
                                                <SplineColorKeyFrame KeyTime="00:00:00" Value="#FF262626"/>
                                            </ColorAnimationUsingKeyFrames>
                                            <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="ReadOnlyVisualElement" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)">
                                                <SplineColorKeyFrame KeyTime="00:00:00" Value="#00333333"/>
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </vsm:VisualState>
                                </vsm:VisualStateGroup>
                                <vsm:VisualStateGroup x:Name="FocusStates">
                                    <vsm:VisualState x:Name="Focused">
                                        <Storyboard>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity">
                                                <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name="Unfocused">
                                        <Storyboard>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity">
                                                <SplineDoubleKeyFrame KeyTime="0" Value="0"/>
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </vsm:VisualState>
                                </vsm:VisualStateGroup>
                            </vsm:VisualStateManager.VisualStateGroups>
                            <Border x:Name="Border" Opacity="1" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="4,4,4,4" Background="#FF242424" BorderBrush="#FF45494D">
                                <Grid>
                                    <Border x:Name="ReadOnlyVisualElement" Opacity="0" Background="#72F7F7F7" CornerRadius="4,4,4,4"/>
                                    <Border x:Name="MouseOverBorder" BorderBrush="Transparent" BorderThickness="1">
                                        <ScrollViewer x:Name="ContentElement" BorderThickness="0" IsTabStop="False" Padding="{TemplateBinding Padding}" BorderBrush="#FF525252"/>
                                    </Border>
                                </Grid>
                            </Border>
                            <Border x:Name="DisabledVisualElement" IsHitTestVisible="False" Opacity="0" Background="#A5F7F7F7" BorderBrush="#A5F7F7F7" BorderThickness="{TemplateBinding BorderThickness}"/>
                            <Border Margin="1" x:Name="FocusVisualElement" IsHitTestVisible="False" Opacity="0" BorderThickness="{TemplateBinding BorderThickness}"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        

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>