Customizing Lync Controls

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:

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"

/>

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.

Comments

• Anonymous
  January 14, 2011
  Hi Scott, As I searched the whole msdn and lync resources, I've found no solution to develop a client side application for Lync Server 2010 without having to run Lync 2010 on client computer. I know all the customization and extensibility it does provide to developers but the same controls of Lync 2010 and REQUIREMENT of Lync 2010 existence on client computer really bother me and my clients. If I'm going to have the same UI and functionality (even with customization) then I would use Lync 2010 directly with its rich features and won't develop any. Isn't there really any way to develop a client app connecting to Lync server by itself without Lync 2010? Thanks for your answer.

• Anonymous
  January 18, 2011
  Hi Mohsen, Thanks for your question.  As you have surmised, the Lync SDK requires the presence of Lync 2010 on the client computer.  I appreciate that this bothers you and your clients, but those are the platform requirements.  It may not make sense for your scenarios, but there are scenarios where this does make sense.  If you send me an email, I'd be very interested to learn more about your specific scenarios and how you are using the platform, as well as how you would like to use it.  I can then share this information with our program managers who make the decisions about future features in the Lync SDK. Thanks, Scott

• Anonymous
  January 19, 2011
  Hi, i have a problem, i need to share my desktop for many users, but the source property in ShareDesktopButton only accept one user, can somebody help me? thanks a lot

• Anonymous
  January 20, 2011
  Hi Omar, We don't currently support multiple sources.  But there some options available to you. Consider setting the Source property of your ShareDesktopButton to a Distribution Group.  Also, you will find that the custom groups which appear on your Contact List have the ability to share with many users. Hope this helps, Scott

• Anonymous
  February 19, 2011
  Hi Scott, i want to develop a Lync client add-in similar to the outlook addin projects provided by VS 2010. is there a possibility of doing this? best Regards.

• Anonymous
  February 21, 2011
  Hello Ali, Depending on what type of add-in you want to build, there may be some support for this in the Lync Client SDK.  Specifically, the Lync Client conversation window supports the capability of displaying an embedded browser window.  In this window, it is possible to host a Silverlight application which can make use of the contextual conversation data channel to exchange application data between the conversation participants.  The window can be launched programatically by a conversation initiator, and presents developers with a great deal of flexibility for customizing the conversation experience.  The SDK ships with numerous samples which demonstrate this capability. Does this answer your question? -Scott

• Anonymous
  September 21, 2011
  Hi scott, we are researching a lot of ways of videoconference on web, the sdk lync allows the videoconference on web?, in another question, what is comming to lync in mobile devices(RIM,Android, WP7,Iphone)? Grettings Great work with lync

• Anonymous
  September 21, 2011
  Hi Bicho4191, The Lync SDK controls only include those feature areas that I outlined in my earlier blog post "What are Lync Controls?"; and video conferencing is not one of those feature areas.  As far as your question about what features might be upcoming, I'm afraid that I am not in a position to comment about this subject.  I hope you understand.  Thanks for your interest in the Lync SDK! -Scott