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

Drag and Drop Listbox

Glad to announce that “Drag and Drop Listbox” for Dynamics CRM 2011 was successfully placed at Dynamics Marketplace.

Give it a whirl.http://dynamics.pinpoint.microsoft.com/en-IN/applications/drag-and-drop-listbox-12884936087

CRM 2011 – Get Optionset labels in Silverlight 4 using SOAP endpoints

 

Recently, I need to fetch the optionset values of one of the custom entities named as ‘Candidate’. It has one a custom attribute like job type. The job type is having values like Permanent, Temporary, Part time, on contract. I developed a Silverlight 4  data grid control to show the all candidates with some search criteria. By design, using OData service reference you can’t fetch the metadata of CRM entity. So here only get the related values of the optionset like 1 for Permanent, 2 for Temporary and so on. So, if you would like to show the label you have to choose the SOAP endpoint service reference.

Now, to start with SOAP endpoint development I referred a very useful link of MSDN. I am sharing the same here,

http://msdn.microsoft.com/en-us/library/gg594452.aspx 

With the help of this link you can setup the required service reference and the utility classes to use messages or methods of CRM SDK.

Below is the code snippet which I have used to fetch the labels using SOAP endpoints in my candidates.xaml.cs file. You can use the same code by just passing the entity and attribute names. I hope this will be helpful. 

   1: /// <summary>

   2: /// Get options set labels for specified entity's optionset type attribute

   3: /// </summary>

   4: /// <param name="entityName"></param>

   5: /// <param name="attributeName"></param>

   6: private void GetOptionSetLabels(string entityName, string attributeName)

   7: {

   8:     OrganizationRequest request = new OrganizationRequest();

   9:     request.RequestName = "RetrieveAttribute";

  10:     request["EntityLogicalName"] = entityName;

  11:     request["LogicalName"] = attributeName;

  12:     request["MetadataId"] = Guid.Empty;

  13:     request["RetrieveAsIfPublished"] = true;

  14:  

  15:     IOrganizationService service = SilverlightUtility.GetSoapService();

  16:     service.BeginExecute(request, new AsyncCallback(OnGetOptionSetLabelsComplete), service);

  17: }

  18:  

  19:  

  20:  

  21: /// <summary>

  22: /// Retrieve the resutls

  23: /// </summary>

  24: /// <param name="result"></param>

  25: private void OnGetOptionSetLabelsComplete(IAsyncResult result)

  26: {

  27:     //Get the original query back from the result.

  28:     OrganizationResponse response = ((IOrganizationService)result.AsyncState).EndExecute(result);

  29:  

  30:     if (response != null && response.Results.Count > 0)

  31:     {

  32:  

  33:         //Get the actual optionset meta data

  34:         OptionSetMetadata optionSetMetadata = ((EnumAttributeMetadata)(response.Results[0].Value)).OptionSet; 

  35:  

  36:         //Set the metadata object in required field

  37:         Common.JobTypeOptionSetMetadata = optionSetMetadata;

  38:     }

  39: }