Adventures with PivotViewer Part 8: Filter pane tooltips

Adding tooltips to the left side filter pane not surprisingly requires the use of a customized PivotViewer control:
You should be familiar with the following line of code to get the CollectionViewerView from earlier blog posts and samples.
CollectionViewerView cvv =
If you are not familiar with this then I would recommend taking the time to work through the other posts in this series and build up you portfolio of PivotViewer customization skills.

Locating the UI Elements and attaching ToolTips
Tooltips can be set on controls in code behind using the ToolTipService. Normally you might use the ToolTip attached property of the ToolTipService class and the ToolTip control in your XAML.
The flow of the code goes something like this:

  • Locate the “PART_FacetPane” in the tree. This is a CustomAccordian control.
  • Locate the CustomAccordianItem‘s ( == facets)
  • … under each item is a FacetCategory control to find the facet category name.
  • … use the TooltipService to set custom tooltips on the CustomAccordianItem‘s
FilterPaneView FPV = (FilterPaneView)PivotViewer.CollectionView.FindName(“PART_FilterPane”();
CustomAccordion FacetPane = (CustomAccordion)FPV.FindName(“PART_FacetPane”);
StackPanel itemsHost = (StackPanel)FacetPane.GetItemsHost();
for (int nitem = 0; nitem < itemsHost.Children.Count; nitem++)
CustomAccordionItem item = (CustomAccordionItem)itemsHost.Children[nitem];
// tooltip for facet category header
string facetName = ((FacetCategory)item.Content).Name;
case “AppCount”:tooltip = “Count of applications in the Marketplace”;
case “Ranking”:tooltip = “Overall ranking in the Marketplace”;

ToolTipService.SetToolTip(item, “Facet:\n”+ tooltip);

If you take a look at this set of pivot collections, visualizing the WP7 Marketplace, you will see facet tooltips are implemented:
If you want to try out the code there are a few things to watch out for. You will not be able to set the tooltips before the collection event CollectionLoadingCompleted has completed and exited. If you wrap your tooltip code in a function then you can call it from this event using the control’s dispatcher:
You will need some internal Microsoft Pivot references and usings too. Depending upon the extent of your other customizations you will need these:
using System.Windows.Pivot;
using Microsoft.Pivot.Internal.Controls;
using Microsoft.Pivot.Internal.Model;
using Microsoft.Pivot.Internal.ViewModels;
using Microsoft.Pivot.Internal.Views;
Further things to do


This article is just a brief tutorial that includes the key features of using the tooltip service control in code to attach custom tooltips to visual elements of the Silverlight PivotViewer control. It targets the developer who has already started customizing the Silverlight PivotViewer control beyond the public API. Any comments or request for future topics are welcome.

9 responses to “Adventures with PivotViewer Part 8: Filter pane tooltips

  1. Pingback: Tweets that mention Adventures with PivotViewer Part 8: Filter pane tooltips | Xpert360 Ltd Development Blog --

  2. Thanks for these articles.
    nice resource of tips to move the learning process along..

  3. Pingback: Adventures with PivotViewer – Part 1 | Xpert360 Ltd Development Blog

  4. Great stuff as usual. Is there a release date for Xpert Visualise?

  5. This is simply one of the most amazing series of articles that I have seen on the PivotViewer control. Simply incredible. Where is the “Donate” button? I’m ready with an open wallet.

  6. Pingback: Adventures with PivotViewer Part 9: Multi-Layered Trading Cards | Xpert360 Ltd Development Blog

  7. Pingback: Xpert360 PivotViewer Blog Article Index | Xpert360 Ltd Development Blog

  8. Hi,
    I want to handle the events of the facet click…
    Can u please provide the inputs for it as soon as possible.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s