In our last post, we introduced the Lync Controls SDK, and demonstrated how easy it is to create a simple application using these controls to show a contact card. Now, we will explore the search functionality provided by this SDK, and use it to build another simple application.

Begin by creating and opening a Visual Studio project using one of the Lync templates which were installed by the SDK installer. Refer to the previous Hello, Lync post for details on how to get started with a new project. Note: In the sample code snippets shown below, we will use the XML namespace “controls” to refer to the Microsoft.Lync.Controls assembly which you must reference at the top of each XAML source file.

Introducing the search controls

The easiest way to add search functionality to your application is by using the ContactSearch control. This control adds a search input box and a search result list as a single unit, arranged vertically just as they are in the Lync user interface. However, you can also add these components separately to your application, and retain control over the layout of the individual components. To add search features to your application search features in this manner, you must use a pair of interrelated controls: ContactSearchInputBox and ContactSearchResultList.

The ContactSearchInputBox control provides a user interface for entering search criteria and executing a search. It provides both name and keyword search features, and is designed to mimic the user interface of Microsoft Lync. The ContactSearchResultList control provides a user interface for displaying the results of your search, as well as metadata about the status of the search operation.

To use these controls, you must first add them to your application. You can place these controls separately anywhere on the window. We will place the results on top in this example:

    <Grid>

        <Grid.RowDefinitions>

            <RowDefinition Height="*"/>

            <RowDefinition Height="Auto"/>

        </Grid.RowDefinitions>

        <controls:ContactSearchResultList Grid.Row="0"/>

        <controls:ContactSearchInputBox Grid.Row="1"/>

    </Grid>

Binding the search controls to each other

We’re not done yet! The above code sample will not work as expected. The reason for this is that the ContactSearchResultList control is not connected to the ContactSearchInputBox control which performs the search operation.

In order to make them work together, we will need to add a little bit more code. The ContactSearchInputBox control has a dependency property called Results which contains the output of the search operation. It also supports a dependency property called SearchState which provides feedback on the status of the search operation. To make the ContactSearchResultList control display this output, we must bind the two controls together. The full code looks something like this:

    <Grid>

        <Grid.RowDefinitions>

            <RowDefinition Height="*"/>

            <RowDefinition Height="Auto"/>

        </Grid.RowDefinitions>

        <controls:ContactSearchResultList Grid.Row="0"

           ItemsSource="{Binding Results, ElementName=searchInput, Mode=OneWay}"

           ResultsState="{Binding SearchState, ElementName=searchInput, Mode=OneWay}"

           />

        <controls:ContactSearchInputBox Grid.Row="1" x:Name="searchInput"/>

    </Grid>

If you run the code now, you will see a familiar interface which provides a rich set of search features to your application.

 

In our next post, we will explore how to customize the display of search results by retemplating a control.