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

Make a Rating star style button

Every site has a rating section and to make such star shaped buttons is not an easy task.First because its difficult to make the star shape and second its difficult to manage the checked and unchecked states separately. So, to make your task simpler I have made a simple star style rating button.
To manage its states easily I have used toggle button instead of a button.
Checked state:

Here is the code for this button

<style targettype="ToggleButton" x:key="ToggleButtonRate"> <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> <vsm:VisualStateManager.VisualStateGroups> <vsm:VisualStateGroup x:Name="CommonStates"> <vsm:VisualState x:Name="Normal"> <Storyboard/> </vsm:VisualState> <vsm:VisualState x:Name="Pressed"> <storyboard> <coloranimationusingkeyframes BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="path" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)"> <splinecolorkeyframe KeyTime="00:00:00" Value="#FFE8DD5D"/> </ColorAnimationUsingKeyFrames> <coloranimationusingkeyframes BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="path" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)"> <splinecolorkeyframe KeyTime="00:00:00" Value="#FFE8DD5D"/> </ColorAnimationUsingKeyFrames> <coloranimationusingkeyframes BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="path" Storyboard.TargetProperty="(Shape.Stroke).(GradientBrush.GradientStops)[1].(GradientStop.Color)"> <splinecolorkeyframe KeyTime="00:00:00" Value="#FFE8DD5D"/> </ColorAnimationUsingKeyFrames> <coloranimationusingkeyframes BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="path" Storyboard.TargetProperty="(Shape.Stroke).(GradientBrush.GradientStops)[0].(GradientStop.Color)"> <splinecolorkeyframe KeyTime="00:00:00" Value="#FFE8DD5D"/> </ColorAnimationUsingKeyFrames> </Storyboard> </vsm:VisualState> <vsm:VisualState x:Name="Disabled"> <Storyboard/> </vsm:VisualState> </vsm:VisualStateGroup> <vsm:VisualStateGroup x:Name="CheckStates"> <vsm:VisualState x:Name="Checked"> <storyboard> <coloranimationusingkeyframes BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="path" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)"> <splinecolorkeyframe KeyTime="00:00:00" Value="#FFE8DD5D"/> </ColorAnimationUsingKeyFrames> <coloranimationusingkeyframes BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="path" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)"> <splinecolorkeyframe KeyTime="00:00:00" Value="#FFE0DA97"/> </ColorAnimationUsingKeyFrames> <coloranimationusingkeyframes BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="path" Storyboard.TargetProperty="(Shape.Stroke).(GradientBrush.GradientStops)[0].(GradientStop.Color)"> <splinecolorkeyframe KeyTime="00:00:00" Value="#FFE0DA94"/> </ColorAnimationUsingKeyFrames> <coloranimationusingkeyframes BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="path" Storyboard.TargetProperty="(Shape.Stroke).(GradientBrush.GradientStops)[1].(GradientStop.Color)"> <splinecolorkeyframe KeyTime="00:00:00" Value="#FFE6DC6E"/> </ColorAnimationUsingKeyFrames> </Storyboard> </vsm:VisualState> <vsm:VisualState x:Name="Unchecked"> <storyboard> <coloranimationusingkeyframes BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="path" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)"> <splinecolorkeyframe KeyTime="00:00:00" Value="#FFE5E5E5"/> </ColorAnimationUsingKeyFrames> <doubleanimationusingkeyframes BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="path" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Offset)"> <splinedoublekeyframe KeyTime="00:00:00" Value="0.991"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </vsm:VisualState> </vsm:VisualStateGroup> <vsm:VisualStateGroup x:Name="FocusStates"> <vsm:VisualState x:Name="Focused"> <Storyboard/> </vsm:VisualState> <vsm:VisualState x:Name="Unfocused"/> </vsm:VisualStateGroup> </vsm:VisualStateManager.VisualStateGroups> <path Margin="3.417,1.167,4.583,1.833" Stretch="Fill" Data="M10.517154,-0.0011976534 L7.3893209,6.1399088 L-0.5438872,6.3009214 L5.8782334,9.6042414 L2.1005144,15.548288 L10.562605,12.083895 L18.373556,15.503559 L15.426895,9.944314 L22.122427,6.3009214 L13.776666,6.2836428 z" x:Name="path"> <Path.Stroke> <lineargradientbrush EndPoint="0.5,1" StartPoint="0.5,0"> <gradientstop Color="#FFE5E5E5"/> <gradientstop Color="#FFE5E5E5" Offset="1"/> </LinearGradientBrush> </Path.Stroke> <Path.Fill> <lineargradientbrush EndPoint="0.5,1" StartPoint="0.5,0"> <gradientstop Color="#FFE5E5E5"/> <gradientstop Color="#FFE5E5E5" Offset="1"/> </LinearGradientBrush> </Path.Fill> </Path> </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!!!!