Skip to main content

The Integrator’s View for Displaying Search Results

Author: Richard Griffin
Blog: http://blogs.conchango.com/richardgriffin

Expression Newsletter, subscribe now to get yours.

Now that we have covered how the system recognizes a user and their starting point into the experience, we can take a look at the core part of the application, visual search.

In general, when we search for content using a common search engines on the Internet, we interact via a box, and you will hear the term “search in a box.” One of the innovative experiences that we wanted to explore was to remove the box and provide visual clues and objects that allow the user to “search outside the box”. Now this task is not an easy one, mainly due to the text-based content that is returned. To alleviate this problem, we ensured the content presented to the user was not only text-based but also contained other forms of rich media such as images and video. There is also the opportunity to retrieve people and documents such as Microsoft Word and PowerPoint.

To initiate a search, the user first selects a company listed in their active accounts panel, which by now is undocked. The selected company is then dragged from the active accounts onto the Scatter View Control. The data template for company is selected automatically based on the data type of the control being dragged into the Scatter View. Once the user drops the search item, the application starts processing the search query by communicating to the FAST Server and retrieves a result set that gets mapped and wrapped into data objects supported by the UI. The results are then presented to the user.

The metaphor associated with the result set we call the search ring, where inside the ring we have different areas or lozenges that help group the different types of content being returned from the search term.


(click image to zoom)

The control itself is a composite control, in that it’s made up of a number of different controls to create the rich experience. The search ring is a user control that acts as a container to group the lozenges together; it’s also done like this so that we can take advantage of strongly typed data templates that will allow for the right data template and its content to be rendered based on its data type.

Contained within the search ring is a control that you can get from Kevin Moore’s Bag-o-Tricks, which includes a graph control. When data-bound to the correct data structure, the control will provide you with a visual representation similar to the one illustrated above.

The center node in this case is the search term and the outer nodes contain the lozenges. These UI elements can be mirrored by using Data Templates, which wrap up the corresponding user control’s center node and result set lozenges.

Let’s continue digging into the lozenges, as you may have already noticed the lozenge is a generic container that supports multiple different data types that we can pass to it. The content inside the lozenge then changes based on the data type that it needs to present to the user.

Contained in the Result set control are the defined data templates for the different data types that we need to support. These include people, media, news, documents, and company data templates. Rather importantly, each data template is strongly typed. Each of the data templates are automatically used when the UI needs to display a particular type. But, what is this actually providing? Well, it means that the lozenge can be passed a particular known data type, and WPF magic will select the right data template, which will project the UI elements contained within the template onto the UI.


(click image to zoom)

The illustration above is a view of the Result set user control in Blend. The user control itself is rather straightforward as its main purpose it purely to provide a container where our different supported data types can live.

There are a couple of different ways of viewing the data templates used by a control, you can either use the resources tab and expand the user control to see the resources of the control, or you can change how you view the resources, so that when you select a UI element you will only see the resources used by that element. It’s well worth the trouble of working out how to change the view of the resource in your project. Below is an illustration of the resources contained in the Result set control.

The user control has a number of different data templates that map directly on to the different data types supported by the control. These data templates are then used by the carousel list box so that we can provide a different visual representation of the collections of data simply by providing the strongly typed data templates.

To edit the data templates, you can select the button on the right side of the text. Below are illustrations of the data templates used by the carousel list box.

Person data template

Media data template

The carousel list box illustrated in the Result set user control is a custom-built carousel that is based on a list box so that we can take advantage of the functional richness the control provides. The carousel is data-bound in the XAML using a standard data-binding technique in use throughout the application.

The carousel control uses gestures and contacts that allow the users to interact witusing standard gestural patterns. The carousel control also provides the ability for the user to drag out content that they are interested in and would like to interact with at a more detailed level. For example, the user can drag out a Word document and the application will provide a textual document that the user can read. This is also the case with other information contained in the lozenges: video that the user would like to view can be dragged from the carousel outside the search ring, where the content can be viewed with standard video playing controls, as the control is placed on to the same Scatter View as the search ring and domino tags. This provides the user with the ability to shrink or grow the video content playing and the other standard Scatter View interactions provided by the control.

Once again, data templates are the main force in allowing these interactions and experiences to happen. However this time around, there is an additional part to the puzzle, and this comes in the form of the data template selector. Each of the UI elements that can be dragged and dropped onto the Scatter View control have a data template; as mentioned earlier, there are specific data templates for what we could describe as an expanded view of the items contained within the lozenges. For example, there is a data template used inside the lozenge for the video content; there is also a corresponding data template that is used when the user drags and drops the selected video content from outside the lozenge onto the Scatter View. There are two different data templates, as the designer wanted to provide some extra controls in order to enable users to pause the video or seek in the video by selecting a new position using the progress bar.

In a rather similar way that the strongly data templates work, here there is some extra work that needs to be done. First, there is the data template selector that needs to be built, which is done by subclassing the data template selector class and overriding its Select Template method. Second, for each data type that is supported, a property needs to be defined in the class; these data templates are defined in the XAML. Third, in the method which is being overridden, we need to check the type that is being passed in and then associate the data type with the data template that is required and return this. The final stage is to wire up the data template selectors in the XAML with the associated control.

So that is the mechanics of how we can leverage the power of the data templates, the illustrations below are the data templates of the expanded view of those we previously illustrated, the person and media data templates.


(click image to zoom)

The person data template used by the scatter view


(click image to zoom)

The media data template used by the scatter view

The Integrator’s Role

So, what does this have to do with Workflow and what is the impact on the designer and developer workflow?

The integrator’s role here is very important, as he or she needs to have a good understanding of the data required to create a functional UI and also a deep understanding of which controls and functionality provided in WPF can help achieve the required design. What we have seen, and what I hope to have made you, the reader, think about in this article, is that usage of data templates is a key part in building great-looking applications easily. For example, take the data templates that we have looked at here: by either using strongly typed data templates or using the data template selector mechanism, integrators can build functionally usable interactions that are data-bound to the data objects in your application. By providing different data templates for the same data objects, you can quickly create completely customized views of the same data with minimal amounts of effort.

Implementing an MVVM-style pattern in your application helps you build an application with clearer levels of separation between the view and the view model, which helps to provide a good basis for workflow based on the separation of theview and view model. As an integrator you will need to know about both the view and view model.

In the next article we will investigate the feedback loops that were built into the application to ensure two-way communications between the user and the application running on the Surface.