Category Archives: Pivot

Silverlight 5 RC – Getting started with PivotViewer

[Updated 06-SEP-2011 – NEW SAMPLES]

Lovely jubbly! Silverlight 5 RC is here

Documentation

Do download the offline help CHM or use the matching online MSDN documentation which is now available – MSDN PivotViewer class

Next step: I need some sort of “Hello world” PivotViewer application, please…

Hello New World!

Look in the “PivotViewer class” help at the bottom, and/or download my sample. I have uploaded this very basic sample for DOWNLOAD as some people seem to be experiencing problems. If this simple sample doesn’t work then likely there is something wrong with your environment. My environment is W7 64-bit Ultimate, VS2010 Sp1, Sl5 Beta (not uninstalled; I know, bad boy, but I was in a rush 😉 and then Sl5 RC. Also quad-core 8GB memory, here is very simple stress test SAMPLE too, feel free to modify it. This simple works when not served from a web server.

It isn’t pretty but that is not the point. If you are having problems then get back to check out why. Happy PivotViewing! I’ll post some better samples in the next few days.

Hello world from SL5 RC PivotViewer!

Hello world from SL5 RC PivotViewer!

Hello OLD World!

Here is a sample mixing some legacy CXML collections from Xpert360 with some Silverlight 5 RC PivotViewer and some styling for you to play with. Again feel free to modify.

DOWNLOAD SOURCECODE

And some screen shots…

PivotViewer sample Silverlight 5 RC CXML style

PivotViewer sample Silverlight 5 RC CXML style

PivotViewer sample Silverlight 5 RC CXML style

PivotViewer sample Silverlight 5 RC CXML style

PivotViewer Shorts Part 5: Invert Facet Category Selections

Silverlight PivotViewer Invert Facet Category Selections

Silverlight PivotViewer Invert Facet Category Selections

Introduction
By default the Silverlight PivotViewer control does not support inversion of a facet category’s selections, even though internally the control has the functionality.
Some people have expressed a wish to improve the UX with a custom button to implement ‘invert selection‘.
This short post shows how to locate the UI elements for the facet manager and the view model in order to access this feature.
Locating the UI Elements

The flow of the code goes something like this:

  • Locate the “PART_Container” in the tree. This is a Grid control.
  • Locate the CollectionViewerView control.
  • Locate the CollectionViewContainer control.
  • Locate the CollectionViewerViewModel control.
Grid partContainer = (Grid)this.GetTemplateChild("PART_Container");
CollectionViewerView cvv =
    ((CollectionViewerView)(partContainer).Children[0]);
Grid container = cvv.Content as Grid;
Grid viewerGrid = container.Children[1] as Grid;
CollectionViewContainer cvc =
    (CollectionViewContainer)viewerGrid.Children[0];
CollectionViewerViewModel cvvm =
    (CollectionViewerViewModel)ViewBehaviors.GetViewModel(cvv);

The FacetManager contains a method to invert a facet category’s selection:

cvvm.FacetManager.InvertSelectionInCategory(cvc.SortCategory);
FAQ
The easiest way of accessing this feature is with a custom button though no doubt a keyboard shortcut could be conjured up.
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
Conclusion
This article is a brief guide to locating some visual elements of the Silverlight PivotViewer control in order to access the internal functionality that inverts the selections of a facet category. It targets the developer who has already started customizing the Silverlight PivotViewer control beyond the public API and alter the UX.
Any comments or request for future topics are welcome.

PivotViewer Shorts Part 4: Restyle the ZoomSlider child controls

Introduction
By default the SL4 PivotViewer control displays a custom control for controling the zoom-level of the tile views. A few people have expressed a wish to totally reskin the control and this is a step along that path that hints at the technique needed to dig deeper into the PivotViewer visual tree.
 
This short post shows how to locate the UI element for the control bar, the ZoomSlider, all its visual elements and then alter their background.
 
PivotViewer ZoomSlider Re-Styling

PivotViewer ZoomSlider Re-Styling

 

Locating the UI Elements

The flow of the code goes something like this:

  • Locate the “PART_Container” in the tree. This is a Grid control.
  • Or… go direct to the “PART_ControlBar” element.
  • Locate the ControlBarView to access the child controls.
  • Build a list of child controls using VisualTreeHelper.
// Locate UI Elements
    ControlBarView ControlBar = (ControlBarView)this.GetTemplateChild(“PART_ControlBar”);
    Grid ctrlBarContent = (Grid)ControlBar.Content;
    DockPanel ctrlBarDockPanel = (DockPanel)ctrlBarContent.Children[2];
    ContentControl ZoomSlider = (ContentControl)ctrlBarDockPanel.Children[2];
    ContentControl cc1 = (ContentControl)ZoomSlider.Content;
//

// Build a list of the child controls
    var ctrls = GetChildsRecursive(cc1);
//

// Pick out controls and re-style as you wish 
    foreach (UIElement ctrl in ctrls)
    {
        string s = ctrl.GetType().ToString();
        switch (s)
        {
            case “System.Windows.Controls.Button”:
            Button b = (Button)ctrl;
            b.Background = new SolidColorBrush(Colors.Orange);
            break;
        case “Microsoft.Pivot.Internal.Controls.ClickDragSlider”:
            ClickDragSlider cds3 = (ClickDragSlider)ctrl;
            cds3.Background = new SolidColorBrush(Colors.Green);
            break;
        default:
            break;
        }
    }
;

// Helper function for child controls
IEnumerable<DependencyObject> GetChildsRecursive(DependencyObject root)
{
    List<DependencyObject> elts = new List<DependencyObject>();
    elts.Add(root);
    for (int i = 0; i < VisualTreeHelper.GetChildrenCount(root); i++)
        elts.AddRange(GetChildsRecursive(VisualTreeHelper.GetChild(root, i)));
    return elts;
}
+
FAQ
If you want to try out the code there are a few things to watch out for.
+
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
Conclusion
This article is a brief guide to locating some visual elements of the Silverlight PivotViewer control in order to customize the styling of the ZoomSlider 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.
 

PivotViewer Shorts Part 2: Hide View and SortBy Buttons

Introduction
By default the Silverlight PivotViewer control displays two view selection buttons and a sortby dropdown list of facet names.
Some people have expressed a wish to hide these usually because they want to replace them and control the UX with custom elements.
 
This short post shows how to locate the UI element for the control bar and the child elements in order to alter their visibility.
 
Locating the UI Elements

The flow of the code goes something like this:

  • Locate the “PART_Container” in the tree. This is a Grid control.
  • Locate the CollectionViewerView control.
  • Locate the ControlBarView control.
  • Locate the DockPanel containing the buttons.
// Locate UI Elements
Grid partContainer = (Grid)this.GetTemplateChild(“PART_Container”);
CollectionViewerView CVV = (CollectionViewerView)(partContainer).Children[0]);
Grid container = CVV.Content as Grid;
//
// For exposing the top control bar (title,views,sortby,slider)
ControlBarView ControlBar = ((UIElement)container.Children[2]) as ControlBarView;
DockPanel barDockPanel = (((Grid)ControlBar.Content).Children[2]) as DockPanel;
//
// Hide the controls
barDockPanel.Children[0].Visibility = Visibility.Collapsed; // sortby list
barDockPanel.Children[1].Visibility = Visibility.Collapsed; // view buttons
+
FAQ
If you want to try out the code there are a few things to watch out for. You will probably want to hide the controls when the collection event CollectionLoadingCompleted fires.
+
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
Conclusion
This article is a brief guide to locating some visual elements of the Silverlight PivotViewer control in order to hide the view buttons and sortby facet list. It targets the developer who has already started customizing the Silverlight PivotViewer control beyond the public API and alter the UX.
 
Any comments or request for future topics are welcome.
 

PivotViewer Shorts Part 1: Hide Filter Pane Search Box

Introduction
By default the Silverlight PivotViewer control automatically adds a search facet and displays a search box at the top of the filter pane. Some people have expressed a wish to modify the UX and remove this to prevent users performing free text search for some collections.
 
This short post shows how to locate the UI element for the search facet and then alter its visibility.
 
Locating the UI Elements

The flow of the code goes something like this:

  • Locate the “PART_Container” in the tree. This is a Grid control.
  • Locate the CollectionViewerView control.
  • Locate the FilterPaneView to access the child controls.
// Locate UI Elements
Grid partContainer = (Grid)this.GetTemplateChild(“PART_Container”);
CollectionViewerView CVV = (CollectionViewerView)(partContainer).Children[0]);
FilterPaneView FPV = (FilterPaneView)CVV.FindName(“PART_FilterPane”);
//
// For exposing the grid containing the search facet UI elements
ContentControl searchFacetGrid = (ContentControl)FPV.FindName(“m_searchFacetGrid”);
//
// Hide search facet
searchFacetGrid.Visibility = Visibility.Collapsed;
+
FAQ
You will need some internal Microsoft Pivot references and using’s 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
Conclusion
This article is a brief guide to locating some visual elements of the Silverlight PivotViewer control in order to hide the automatically generated search facet. 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.
 

PivotViewer Shorts Part 3: Hide Collection path

Introduction
By default the SL4 PivotViewer control displays the path to the collection CXML file whilst it is being loaded. Many people have expressed a wish to hide the path.
 
This short post shows how to locate the UI element for the collection title and then alter its visibility.
 
Locating the UI Elements

The flow of the code goes something like this:

  • Locate the “PART_Container” in the tree. This is a Grid control.
  • Locate the CollectionViewerView control.
  • Locate the ControlBarView to access the child controls.
// Locate UI Elements
Grid partContainer = (Grid)this.GetTemplateChild(“PART_Container”);
CollectionViewerView CVV = (CollectionViewerView)(partContainer).Children[0]);
Grid container = CVV.Content as Grid;
//
// For exposing the top control bar (title,views,sortby,slider)
ControlBarView ControlBar = ((UIElement)container.Children[2]) as ControlBarView;
//
// Hide collection name
((Grid)ControlBar.Content).Children[1].Visibility = Visibility.Collapsed;
+
FAQ
If you want to try out the code there are a few things to watch out for. You will probably want to make the title visible again when the collection event CollectionLoadingCompleted fires.
+
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
Conclusion
This article is a brief guide to locating some visual elements of the Silverlight PivotViewer control in order to hide the CXML path during collection loading. 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.
 

Xpert360 PivotViewer Blog Article Index

[Last updated: 2011-06-22]
Introduction
This post is intended to be a landing place to bring together links to our growing collection of PivotViewer articles in one place. We will update this article to reflect new blog posts and other useful links.
If you are not familiar with overriding the Silverlight PivotViewer control’s OnApplyTemplate() method then I recommend taking the time to work through the posts in the ‘Adventures with PivotViewer’ series and build up your portfolio of customization skills.
These articles are based on the version of the control shipped separately from the Silverlight 4 SDK. We will update and extend articles with information relevant to Silverlight 5 SDK as they become available. If you are already customizing your PivotViewer experience then dive right in:
Adventures with PivotViewer
PivotViewer Shorts
PivotViewer Miscellaneous
Examples on the Internet
Further things to do and resources
Conclusion
This article is an anchor page to our blog articles concerning the Silverlight PivotViewer control. There are a range of articles topics and technical levels. Some target the developer who is ready to start customizing the Silverlight PivotViewer control beyond the documented public API, whilst others show examples of what can be achieved.
Any comments or request for future topics are welcome.