Telerik Chart Legend in Metro Style

In my previous post you saw how to style the Telerik chart item in Metro Style. However you saw that the Legend was not at all matching the Metro Style. So let’s Style the ChartLegend.

Add a ChartLegend like this,

<telerikCharting:ChartLegend HorizontalAlignment="Left" VerticalAlignment="Top"/>

(Remember to delete this extra ChartLegend once you finish style as this is just to ease the creation of the style.)

Once added right click on the ChartLegend and select the Edit Template->Edit a copy option. Once the template for the ChartLegend opens up you will see the basic elements of style used in the slice. 

The border for the CharLegend has a gradient fill. Change it to a solid fill to match the metro UI.

Apply this Style to you chart Legend.

Code:

SeriesMapping pieSeries = new SeriesMapping();
pieSeries.SeriesDefinition = new PieSeriesDefinition();
pieChart.DefaultView.ChartLegend.LegendItemStyle = App.Current.Resources["ChartLegendItemStyle"] as Style;

On applying the style your Legend will partially get the Metro look.

I am saying partially because if you have noticed the Legend Item, it is still having a non-metro look.

Lets style this Legend Item as well. Follow the same procedure and open up the template for a ChartLegendItem. You will notice that the glossy look is because of the gradient fill in the PART_SelectedState path. Just remove this gradient fill or replace it with a solid fill.

Apply the ChartLegendItem style,

pieChart.DefaultView.ChartLegend.LegendItemStyle=App.Current.Resources["ChartLegendItemStyle"] as Style;

After all this our chart will be metro ready

Here is the complete code,

Code:

 <!--Legend Style-->
        <SolidColorBrush x:Key="LegendForeground" Color="#FF000000"/>
        <LinearGradientBrush x:Key="LegendBackground" EndPoint="1.96000003814697,0.5" StartPoint="-0.959999978542328,0.5">
            <GradientStop Color="#FFB5B5B5"/>
            <GradientStop Color="#FFF0F0F0" Offset="0.5"/>
        </LinearGradientBrush>
        <SolidColorBrush x:Key="LegendBorderBrush" Color="#FF848484"/>
        <Thickness x:Key="LegendBorderThickness">1</Thickness>
        <telerik:TextToVisibilityConverter x:Key="textToVisibilityConverter"/>
        <Style x:Key="ChartLegendStyle" TargetType="telerik:ChartLegend">
            <Setter Property="Foreground" Value="{StaticResource LegendForeground}"/>
            <Setter Property="Background" Value="{StaticResource LegendBackground}"/>
            <Setter Property="Padding" Value="10,10,10,5"/>
            <Setter Property="Margin" Value="0"/>
            <Setter Property="BorderBrush" Value="{StaticResource LegendBorderBrush}"/>
            <Setter Property="BorderThickness" Value="{StaticResource LegendBorderThickness}"/>

            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="telerik:ChartLegend">
                        <Border Background="#FF1B1B1B" BorderThickness="0">
                            <VisualStateManager.VisualStateGroups>
                             <VisualStateGroup x:Name="CommonStates">
                              <VisualState x:Name="Normal"/>
                              <VisualState x:Name="Disabled"/>
                             </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Grid Margin="5">
                          <Grid.RowDefinitions>
                           <RowDefinition Height="Auto"/>
                           <RowDefinition Height="*"/>
                          </Grid.RowDefinitions>
                          <ContentControl ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Foreground="White" FontFamily="Segoe UI" />
                          <ItemsPresenter Grid.Row="1"/>
                         </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <telerik:RadWrapPanel Orientation="{Binding ItemsPanelOrientation}"/>
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="HeaderTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <Grid>
                            <TextBlock FontSize="12" HorizontalAlignment="Left" Height="Auto" Padding="0,0,0,2" TextWrapping="Wrap" Text="{Binding}"  Width="Auto"/>
                        </Grid>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
     <LinearGradientBrush x:Key="LegendItemMarkerMask" EndPoint="0.5,1" StartPoint="0.5,0">
      <GradientStop Color="#D8FFFFFF" Offset="0.009"/>
      <GradientStop Color="#66FFFFFF" Offset="1"/>
      <GradientStop Color="Transparent" Offset="0.43"/>
      <GradientStop Color="#7FFFFFFF" Offset="0.42"/>
     </LinearGradientBrush>
        <!--End-->
        <!--Legend Item Style-->
        <SolidColorBrush x:Key="LegendItemMarkerMaskOpacityMask" Color="#FF000000"/>
     <SolidColorBrush x:Key="LegendItemMarkerMaskStroke" Color="White"/>
     <System:Double x:Key="LegendItemMarkerMaskStrokeThickness">1</System:Double>
     <SolidColorBrush x:Key="LegendItemMarkerMask2" Color="Transparent"/>
        <Style x:Key="ChartLegendItemStyle" TargetType="telerik:ChartLegendItem">
            <Setter Property="Foreground" Value="#FFFFFFFF"/>
            <Setter Property="Padding" Value="5,0,5,0"/>
            <Setter Property="Margin" Value="0,3,0,2"/>
            
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="telerik:ChartLegendItem">
                        <Grid x:Name="PART_MainContainer" Background="{TemplateBinding Background}" HorizontalAlignment="Stretch" VerticalAlignment="Top">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition/>
                            </Grid.ColumnDefinitions>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="HoverStates">
                                    <VisualState x:Name="Normal">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0.00:00:00.15" To="1.0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_MainContainer"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Hovered">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0.00:00:00.15" To="1.0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_MainContainer"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Hidden">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0.00:00:00.15" To="0.15" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_MainContainer"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="SelectionStates">
                                    <VisualState x:Name="Unselected"/>
                                    <VisualState x:Name="Selected">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Duration="0.00:00:00.05" Storyboard.TargetProperty="Stroke" Storyboard.TargetName="PART_LegendItemMarker">
                                                <DiscreteObjectKeyFrame KeyTime="0.00:00:00.0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <SolidColorBrush Color="#B2000000"/>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Duration="0.00:00:00.05" Storyboard.TargetProperty="StrokeThickness" Storyboard.TargetName="PART_LegendItemMarker">
                                                <DiscreteObjectKeyFrame KeyTime="0.00:00:00.0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <System:Double>2</System:Double>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>

                            <Path x:Name="PART_LegendItemMarker" 
         Height="10" 
        Style="{TemplateBinding ItemStyle}" Stretch="Fill" 
        StrokeThickness="{TemplateBinding MarkerStrokeThickness}" Width="10"
         HorizontalAlignment="Center" VerticalAlignment="Center">
                                <Path.Data>
                                    <PathGeometry x:Name="PART_ItemMarkerGeometry" />
                                </Path.Data>
                            </Path>

                            <Path x:Name="PART_SelectedState" Height="10" 
        OpacityMask="{StaticResource LegendItemMarkerMaskOpacityMask}" Stretch="Fill" 
        StrokeThickness="{StaticResource LegendItemMarkerMaskStrokeThickness}" Width="10" 
        HorizontalAlignment="Center" VerticalAlignment="Center">
                                <Path.Data>
                                    <PathGeometry x:Name="PART_ItemMarkerMaskGeometry" />
                                </Path.Data>
                            </Path>

                            <TextBlock x:Name="PART_TextBlock" Grid.Column="1" Padding="{TemplateBinding Padding}" Text="{TemplateBinding Label}" Foreground="{TemplateBinding Foreground}" VerticalAlignment="Center" FontFamily="Segoe UI"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <!--End-->

Telerik Chart Item in Metro Style

Recently all the sites and apps have started following the Metro UI. Even I like it as it looks elegant and simple. So I thought of giving my old Telerik chart application a metro theme. However, as the site says, I did not had the Telerik.Windows.Themes.Metro.dll, I could not add the theme just by writing one line of code.  So I thought of creating it on my own.  At first it looked tough for me to rip down the super glossy, rich and otherwise super cool UI of Telerik Charts into Solid fills and non glossy UI to match the Metro standards. Not because it was difficult but it was hard for me to disturb the richness of the Telerik charts :) Phew! This is how I finally did it...

All you have to do is delete the gloss in the charts. This is usually done by adding an extra basic UI element with a partially transparent gradient fill. For eg. If you take the Pie chart...this is the extra circle that gives the gloss effect. 

You may not be able to able to remove this layer by styling the entire Pie chart. For this you will have to style a single Pie Element or Slice. You may search in the Assets panel of your expression Blend for a Pie slice or may add this

<telerikCharting:Pie HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="100"/>

Once added right click on the Pie and select the Edit Template->Edit a copy option. Once the template for the Pie opens up you will see the basic elements of style used in the slice. You will find that there is an ellipse on top of the “PART_DefiningGeometry”. This ellipse must be having the transparent gradient. Remove this ellipse or collapse this ellipse. 

Now apply this style to your SeriesDefinition...your metro UI will be applied.

To apply the style from code behind use this

Code:

SeriesMapping pieSeries = new SeriesMapping();
pieSeries.SeriesDefinition = new PieSeriesDefinition();
pieSeries.SeriesDefinition.ItemStyle = App.Current.Resources["PieStyle1"] as Style;

Here is what the end product will look like. I have added few bright colours in the PalleteBrushes collection to match the dark background. 

Here is the complete code to this style,

Code:

<RadialGradientBrush x:Key="PieMaskBrush" GradientOrigin="0.5,0.5">
      <GradientStop Color="#33FFFFFF" Offset="0.88"/>
      <GradientStop Color="#00FFFFFF" Offset="0.65"/>
      <GradientStop Offset="0.89"/>
     </RadialGradientBrush>
     <Style x:Key="PieStyle1" TargetType="telerik:Pie">
      <Setter Property="Template">
       <Setter.Value>
        <ControlTemplate TargetType="telerik:Pie">
         <Canvas x:Name="PART_MainContainer">
          <Canvas.RenderTransform>
           <TransformGroup>
            <ScaleTransform x:Name="PART_AnimationTransform" ScaleY="0" ScaleX="0"/>
            <TranslateTransform x:Name="PART_ExplodeTransform"/>
           </TransformGroup>
          </Canvas.RenderTransform>
          <VisualStateManager.VisualStateGroups>
           <VisualStateGroup x:Name="HoverStates">
            <VisualState x:Name="Normal">
             <Storyboard>
              <DoubleAnimation Duration="0.00:00:00.15" To="1.0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_MainContainer"/>
             </Storyboard>
            </VisualState>
            <VisualState x:Name="Hovered">
             <Storyboard>
              <DoubleAnimation Duration="0.00:00:00.15" To="1.0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_MainContainer"/>
             </Storyboard>
            </VisualState>
            <VisualState x:Name="Hidden">
             <Storyboard>
              <DoubleAnimation Duration="0.00:00:00.15" To="0.15" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_MainContainer"/>
             </Storyboard>
            </VisualState>
           </VisualStateGroup>
           <VisualStateGroup x:Name="SelectionStates">
            <VisualState x:Name="Unselected">
             <Storyboard>
              <DoubleAnimation Duration="0.00:00:00.2" To="0" Storyboard.TargetProperty="X" Storyboard.TargetName="PART_ExplodeTransform"/>
              <DoubleAnimation Duration="0.00:00:00.2" To="0" Storyboard.TargetProperty="Y" Storyboard.TargetName="PART_ExplodeTransform"/>
             </Storyboard>
            </VisualState>
            <VisualState x:Name="Selected">
             <Storyboard>
              <DoubleAnimation Duration="0.00:00:00.2" Storyboard.TargetProperty="X" Storyboard.TargetName="PART_ExplodeTransform"/>
              <DoubleAnimation Duration="0.00:00:00.2" Storyboard.TargetProperty="Y" Storyboard.TargetName="PART_ExplodeTransform"/>
             </Storyboard>
            </VisualState>
           </VisualStateGroup>
          </VisualStateManager.VisualStateGroups>
          <Ellipse Clip="{TemplateBinding FigurePath}" Height="{TemplateBinding ItemActualHeight}" Style="{TemplateBinding ItemStyle}" StrokeThickness="0" Width="{TemplateBinding ItemActualWidth}"/>
          <Path x:Name="PART_DefiningGeometry" Data="{TemplateBinding FigurePath2}" Fill="Transparent" Style="{TemplateBinding ItemStyle}" Stroke="{x:Null}"/>
          <Ellipse Clip="{TemplateBinding FigurePath3}" Fill="{StaticResource PieMaskBrush}" Height="{TemplateBinding ItemActualHeight}" Width="{TemplateBinding ItemActualWidth}" Visibility="Collapsed"/>
         </Canvas>
        </ControlTemplate>
       </Setter.Value>
      </Setter>
     </Style>

The only thing that is not metro is the LegendItem. It is not giving the entire chart a metro look. Let's style the Legend as well :) You can check my nextpost to see how to style the Legends. Keep watching this space for more!!

Preloader in Silverlight (Part III) : Bottle filling up animation

Many a times we come across a situation where we need to create an attractive preloader which resembles filling up of a bottle. For eg. If you have a site for some beverage company, it makes complete sense to create its preloader in the form of a bottle filling up to the top. This will be equally creative and will keep the users attention while your service is busy doing the usual data pick up tasks.

Creating a bottle filling up animation is quite simple. All you have to do it show the user that something is going up the bottle. Though you may choose several ways to show this, I choose the simplest way of changing the color of the liquid (path) inside the bottle from transparent to yellow.

First we need an empty bottle. You may get a png empty bottle image for this. I have created a path for this. It is easily created in Expression Design. You may check out my last post to see how we can create complex paths. My path will look like this,

Once my bottle was ready i created one more path in the shape of the bottle till the neck which had a Z-Index lesser than the bottle. This path will act as my liquid inside.

To create a liquid rising effect I filled the path with a LinearGradientBrush, with one gradient stop completely transparent and other gradient stop with a golden yellow color. I just changed the gradient stops gradually which gave the liquid rising effect.

The whole animation was as simple as changing the color stops. J

All you need to create an animation is just imagination. You may download the application from here

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 Toggle Button

The ToggleButton is a Silverlight control which allows the user to change its state. It is the base class for CheckBox and RadioButton controls but it can also be used as a standalone control.

Unchecked state:

Checked State:

 

Make this button yours here..

<Style x:Key="ToggleButtonStyle2" TargetType="ToggleButton">    <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="ToggleButton">       <Grid>        <VisualStateManager.VisualStateGroups>         <VisualStateGroup x:Name="CommonStates">          <VisualState x:Name="Normal"/>          <VisualState x:Name="MouseOver"/>          <VisualState x:Name="Pressed"/>          <VisualState x:Name="Disabled">           <Storyboard>            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity">             <SplineDoubleKeyFrame KeyTime="0" Value=".55"/>            </DoubleAnimationUsingKeyFrames>           </Storyboard>          </VisualState>         </VisualStateGroup>         <VisualStateGroup x:Name="CheckStates">          <VisualState x:Name="Checked">           <Storyboard>            <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="Background" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)">             <EasingColorKeyFrame KeyTime="00:00:00" Value="#FFF4F9FC"/>            </ColorAnimationUsingKeyFrames>            <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="Background" Storyboard.TargetProperty="(Border.BorderBrush).(GradientBrush.GradientStops)[0].(GradientStop.Color)">             <EasingColorKeyFrame KeyTime="00:00:00" Value="#FFF4F9FC"/>            </ColorAnimationUsingKeyFrames>            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="Background" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[2].(GradientStop.Offset)">             <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0.459"/>            </DoubleAnimationUsingKeyFrames>            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="Background" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Offset)">             <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0.888"/>            </DoubleAnimationUsingKeyFrames>            <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="Background" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">             <EasingColorKeyFrame KeyTime="00:00:00" Value="#FFB4DCE5"/>            </ColorAnimationUsingKeyFrames>            <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="Background" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[2].(GradientStop.Color)">             <EasingColorKeyFrame KeyTime="00:00:00" Value="#FFEEF6F8"/>            </ColorAnimationUsingKeyFrames>           </Storyboard>          </VisualState>          <VisualState x:Name="Unchecked"/>         </VisualStateGroup>         <VisualStateGroup x:Name="FocusStates">          <VisualState x:Name="Focused">           <Storyboard>            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity">             <SplineDoubleKeyFrame KeyTime="0" Value="1"/>            </DoubleAnimationUsingKeyFrames>           </Storyboard>          </VisualState>          <VisualState x:Name="Unfocused"/>         </VisualStateGroup>        </VisualStateManager.VisualStateGroups>        <Border x:Name="Background" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3">         <Border.BorderBrush>          <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">           <GradientStop Color="#FFFCFEFD" Offset="0"/>           <GradientStop Color="#FFE1EFEB" Offset="1"/>          </LinearGradientBrush>         </Border.BorderBrush>         <Border.Background>          <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">           <GradientStop Color="#FFD2DBD9" Offset="0"/>           <GradientStop Color="#FFC2E0E2" Offset="0.909"/>           <GradientStop Color="#FFE0EFED" Offset="0.087"/>           <GradientStop Color="#FFE1EFEB" Offset="0.988"/>          </LinearGradientBrush>         </Border.Background>         <Grid Margin="1"/>        </Border>        <ContentPresenter x:Name="contentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>        <Rectangle x:Name="DisabledVisualElement" Fill="#FFFFFFFF" RadiusX="3" RadiusY="3" IsHitTestVisible="false" Opacity="0"/>        <Rectangle x:Name="FocusVisualElement" Stroke="{x:Null}" StrokeThickness="1" RadiusX="2" RadiusY="2" Margin="1" IsHitTestVisible="false" Opacity="0"/>       </Grid>      </ControlTemplate>     </Setter.Value>    </Setter>   </Style><br /> <br /> 

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!!!!