The Lync controls were designed to mimic the look and feel of the Lync desktop client interface. This feature makes it very easy to integrate Lync functionality into your website or application with very little additional work. However, there are times when the exact interface presented by Lync does not match the requirements of your application. In these scenarios, you will want to customize the appearance of the controls. Luckily, this capability is also built-in, and it is quite easy to do.

There are 3 primary methods by which you can perform customization:

1. Content Controls: The "start modality" buttons will display the default icon for their respective feature if no content is specified. However, you can provide an arbitrary framework element as the child of one of these controls to modify this behavior.

2. Restyling: Many aspects of the controls styling can be customized simply by changing the corresponding properties on the control. For example, you can change the background color or border thickness by simply specifying a new value.

3. Retemplating: This is the most extreme form of customization, in which you completely replace the user interface of the control with a new template of your choosing. This process is best performed using Microsoft Expression Blend, which facilitates extraction of the existing template to use as a starting point.

We will show simple examples for the first 2 of these techniques in this blog post, and cover advanced retemplating topics in the next post.

Customizing a content control

There are a variety of controls in the Lync SDK which end with the word “Button”:

  • StartVideoCallButton
  • ScheduleMeetingButton
  • StartAudioCallButton
  • SendEmailButton
  • SendFileButton
  • ShareDesktopButton

The naming of these controls is a bit confusing.  The classes themselves don’t actually extend from the Button class.  Instead, the template of each of these controls contains a Button.  And as you may already know, a Button is a ContentControl class.  Elements of this type support a single piece of content which defines their template.  The content you provide can be as simple as a text string, or as complex as a grid containing a rich layout of numerous elements. 

By default, if you do not define any content for these controls, they will render a toolbar-sized icon which matches the corresponding UI element is the Lync client. This is accomplished internally by defining a Binding.TargetNullValue for the Content property of the button.  But you can easily override the default content by specifying any non-null value for the content.  When you do, the UI of the button will be replaced with the framework element of your choosing. 

In some cases, the UI is rendered with a special SplitButton control which shows a drop-down menu on the right side, and a button on the left.  In these situations, the content you provide will be used to define the template of the left-hand-side of the control only.  The drop-down menu functionality will be preserved. 

Here is a simple example of how to customize the display of a StartAudioCallButton using this technique:

<!-- Plain call button -->

<controls:StartAudioCallButton

    Source="sip:schuddle@microsoft.com"/>

 

<!-- Call button custom content -->

<controls:StartAudioCallButton

    x:Name="callButton"

    Source="sip:schuddle@microsoft.com">

    <StackPanel Orientation="Horizontal">

        <TextBlock Text="Call "/>

        <TextBlock Text="{Binding ElementName=callButton,Path=DisplayName}"/>

    </StackPanel>

</controls:StartAudioCallButton>

As you can see, the first button control is defined with no content.  But the second button defines a StackPanel element with 2 nested TextBlocks as the content of the button class.  When you run this code, the net effect looks something like this:

image

Restyling a Lync Control

Another really easy way to customize the content of a Lync control is by applying a custom style.  There are many common properties which you can control that are template bound, and do not require any complex configuration to use.  The complete list of properties which support restyling can be found in the SDK documentation, under the topic Properties That Support Restyling.  For a simple example of what you can do with some of these properties, consider the XAML for these two ContactCard controls:

<!-- Plain contact card -->

<controls:ContactCard Margin="10"

    Source="schuddle@microsoft.com" />

 

<!— Contact card with styles applied -->

<controls:ContactCard Margin="10"

    Source="schuddle@microsoft.com"

    Background="LightSteelBlue"

    BorderBrush="DarkBlue"

    BorderThickness="5"

    FontFamily="Century Schoolbook"

    FontWeight="Bold"

/>

clip_image002[4]

As you can see from these examples, there are many aspects of the control appearance which can be modified without the need for any complex coding at all.

 

In the next post, we will explore more radical methods for altering the appearance of Lync controls, which permit us to dramatically change their user interface and behavior.