Applying Dynamics CRM 2011 styles to a Silverlight application

In this post we will discuss how we can apply CRM styles to different Silverlight controls like button and datagrid.

First we will have a look how to apply styles in Silverlight application.

For styling a Silverlight application we cannot use CSS which is mostly used for styling web applications. Silverlight offers two styling method implicit styling and explicit styling.

In Implicit styling you can specify the style as given below:-

<Style TargetType="Button">

    <Setter Property="Background" Value="Green"/>

    <Setter Property="Foreground" Value="Blue"/>

    <Setter Property="FontSize" Value="11"/>                          

</Style>

Style attribute is not specified with the control when using the implicit style

<Button  x:Name="GreenButton" Content="Green Button"/> 

In Explicit styling the style is specified as :-

<Style x:Key="ButtonStyle" TargetType="Button">

    <Setter Property="Background" Value="Green"/>

         <Setter Property="Foreground" Value="Blue"/>

    <Setter Property="FontSize" Value="11"/>                          

</Style>

To implement explicit styling the style attribute is specified

<Button x:Name=" GreenButton" Content="Green Button" Style="{StaticResource ButtonStyle}"/>

The implicit styling can be overwritten by specifying explicit style in the control.

In this post we will see how we can define explicit styles.

Create a folder that will contain xaml pages used for designing. Each page having explicit style defined for different controls.

Create a page CRM2011_ButtonStyle.xaml and specify the button style as specified below :

<ResourceDictionary

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

  <Style x:Key="CRM2011_ButtonStyle" 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" Value="#FF666666" />

    <Setter Property="Height" Value="22" />

    <Setter Property="Width" Value="84" />

    <Setter Property="Template">

      <Setter.Value>

        <ControlTemplate TargetType="Button">

          <Grid>

            <VisualStateManager.VisualStateGroups>

              <VisualStateGroup x:Name="CommonStates">

                <VisualState x:Name="Normal"/>

                <VisualState x:Name="MouseOver">

                  <Storyboard>

                    <ColorAnimation Duration="0" To="#FF336699" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="Background"/>

                    <ColorAnimation Duration="0" To="#FFE2F1F9" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>

                    <ColorAnimation Duration="0" To="#FFC4E5F6" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>

                    <ColorAnimation Duration="0" To="#FF98D1EF" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>

                    <ColorAnimation Duration="0" To="#FF6CB4DB" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>

                  </Storyboard>

                </VisualState>

                <VisualState x:Name="Pressed">

                  <Storyboard>

                    <ColorAnimation Duration="0" To="#FF000000" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="Background"/>

                    <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualElement"/>

                    <ColorAnimation Duration="0" To="#FFE2F1F9" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>

                    <ColorAnimation Duration="0" To="#FFC4E5F6" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>

                    <ColorAnimation Duration="0" To="#FF98D1EF" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>

                    <ColorAnimation Duration="0" To="#FF6CB4DB" Storyboard.TargetProperty="(Rectangle.Fill).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"/>

                  </Storyboard>

                </VisualState>

                <VisualState x:Name="Disabled">

                  <Storyboard>

                    <DoubleAnimation Duration="0" To=".45" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledVisualElement"/>

                  </Storyboard>

                </VisualState>

              </VisualStateGroup>

              <VisualStateGroup x:Name="FocusStates">

                <VisualState x:Name="Focused"/>

                <VisualState x:Name="Unfocused"/>

              </VisualStateGroup>

            </VisualStateManager.VisualStateGroups>

            <Border x:Name="Background" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="#FFD4D0C8">

              <Grid Background="{TemplateBinding Background}" Margin="1">

                <Border x:Name="BackgroundAnimation" Background="#FF448DCA"/>

                <Rectangle x:Name="BackgroundGradient">

                  <Rectangle.Fill>

                    <LinearGradientBrush StartPoint=".5,0" EndPoint=".5,1">

                      <GradientStop Color="#FFF2F2F2" Offset="0"/>

                      <GradientStop Color="#FFECECEC" Offset=".5"/>

                      <GradientStop Color="#FFDDDDDD" Offset=".5"/>

                      <GradientStop Color="#FFD3D3D3" Offset="1"/>

                    </LinearGradientBrush>

                  </Rectangle.Fill>

                </Rectangle>

                <Border BorderBrush="#FFFFFFFF" BorderThickness="0,1,0,0" />

              </Grid>

            </Border>

            <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>

            <Rectangle x:Name="DisabledVisualElement" Fill="#FFFFFFFF" IsHitTestVisible="false" Opacity="0"/>

            <Rectangle x:Name="FocusVisualElement" IsHitTestVisible="false" Margin="1" Opacity="0" Stroke="#FF666666" StrokeThickness="1"/>

          </Grid>

        </ControlTemplate>

      </Setter.Value>

    </Setter>

  </Style>

  <!-- Resource dictionary entries should be defined here. -->

</ResourceDictionary>

Notice that the style is mentioned within a ResourceDictionary. Silverlight styles are implemented using a mechanism called ResourceDictionaries. ResourceDictionaries can be merged, so we can define styles in several places and merge them into a single dictionary. Unfortunately this is necessary for applying several style definitions to the same control.
Merging Resource Dictionary

<ResourceDictionary

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <ResourceDictionary.MergedDictionaries>

      <ResourceDictionary Source="CRM2011_ButtonStyle.xaml"/>

        <ResourceDictionary Source="CRM2011_DataGridStyle.xaml"/>

        <ResourceDictionary Source="CRM2011_ScrollBarStyle.xaml"/>

        <ResourceDictionary Source="CRM2011_DataGridColumnHeaderStyle.xaml"/>

        <ResourceDictionary Source="CRM2011_DataGridCellStyle.xaml"/>

        <ResourceDictionary Source="CRM2011_DataGridRowStyle.xaml"/>        

    </ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

You can find a Silverlight application with CRM style Datagrid at http://www.devvblog.com/?p=58