Adventures with PivotViewer Part 5: Pimp my PivotViewer

If you are not partial to a little code-behind then I would leave now as there is no blendability whatsoever to be found here that is for another day…

And if you are here then you should be interested in these two items so I will give them a plug:

So let’s pimp the control…

Skinning is used to good effect to brand the PivotViewer control and integrate it into this GameMarx website An Xbox Live Indie Game search pivot.

If you want to follow along then you need to locate the PivotViewerSample code that shipped with the control. By default it is here for the August 2010 release:

C:\Program Files (x86)\Microsoft SDKs\Silverlight\v4.0\PivotViewer\Aug10\Source\

To achieve a similar effect to the GameMarx website you need to set the background to black and hide the Filter Panel and the Info Panel:

using System.Windows.Controls;
using System.Windows.Pivot;
using Microsoft.Pivot.Internal.Views;

namespace PivotViewerSample
/// <summary>
/// Override of PivotViewer
/// </summary>
public class CustomPivotViewer : PivotViewer

public override void OnApplyTemplate()

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;

// Background
container.Background = new SolidColorBrush(Colors.Black);

// Filter Panel
// Hide it
viewerGrid.Children[2].Visibility = System.Windows.Visibility.Collapsed;
// Reuse the space occupied by the grid column
viewerGrid.ColumnDefinitions[0].Width = GridLength.Auto;

// Info Panel
// Hide grid column that contains it
viewerGrid.ColumnDefinitions[2].Width = new GridLength(0);


C# Sample: CustomPivotViewer

If you prefer not to use your own filter UI controls then don’t hide the Filter Panel, ditto the Info Panel, but you all probably want the background changed at some point.

Let us now see the effect of a LinearGradientBrush:
PivotViewer background LinearGradientBrush

// PivotViewer background
GradientStopCollection gsc = new GradientStopCollection {
new GradientStop { Color = Colors.Orange, Offset = 0.0 },
new GradientStop { Color = Colors.Yellow, Offset = 0.5 },
new GradientStop { Color = Colors.Green, Offset = 1.0 }
container.Background = new RadialGradientBrush(gsc) {
Center = new Point(1.0, 1.0),
GradientOrigin = new Point(1.0, 1.0),
RadiusX = 1.0,
RadiusY = 1.0

C# Sample: LinearGradientBrush

And finally, but not least, for this blog post an ImageBrush:

PivotViewer Desert Island Theme

PivotViewer Desert Island Theme

// PivotViewer background
StreamResourceInfo sr = Application.GetResourceStream(new Uri("PivotViewerSample;component/Resources/bgrd.jpg", UriKind.Relative));
BitmapImage bmp = new BitmapImage();
container.Background = new ImageBrush() { ImageSource = bmp };

C# Sample: ImageBrush

There are other brushes, not least, the VideoBrush but it can start to be a bit overwhelming. Now let us see some cool PivotViewer applications out there!

About these ads

16 responses to “Adventures with PivotViewer Part 5: Pimp my PivotViewer

  1. What would be REALLY handy is a listing of the parts for this control. If you could stick, in a table, how to get references to the different pieces of the control,..that’s would be pretty slick.

    Good article though.

  2. Pingback: Adventures with PivotViewer Part 8: Filter pane tooltips | Xpert360 Ltd Development Blog

  3. Is there way to hide the load url that shows when the client is getting the data from the server?

    • Yes, this code will do that in a custom PivotViewer wrapper:

      // Locate UI Elements
      Grid partContainer = (Grid)this.GetTemplateChild(“PART_Container”);
      CollectionViewerView cvv = ((CollectionViewerView)(partContainer).Children[0]);
      Grid container = cvv.Content as Grid;
      Grid viewerGrid = container.Children[0] as Grid;

      // For exposing the slider
      ControlBar = ((UIElement)container.Children[2]) as ControlBarView;

      // Hide collection name
      ((Grid)ControlBar.Content).Children[1].Visibility = Visibility.Collapsed;

      Make sure the PivotViewer control has finished loading.

  4. Hi,
    I want to Remove from top: Remove graph view and sort feature.
    Thanks & Regards
    Azhar Saiyed

    • // Test to hide view buttons
      CollectionViewerView cvv = ((CollectionViewerView)((Grid)this.GetTemplateChild(“PART_Container”)).Children[0]);
      Grid container = cvv.Content as Grid;
      ControlBarView ctrlBar = container.Children[2] as ControlBarView;
      Grid barcontent = (Grid)ctrlBar.Content;
      DockPanel bar_dockpanel = barcontent.Children[2] as DockPanel;
      bar_dockpanel.Children[1].Visibility = Visibility.Collapsed;

      • Great job!!! Do you know how we can increase the size of the information panel on the right? Or make the text wrap in the information panel?
        Thanks much appreciated!

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

  6. Pingback: Adventures with PivotViewer – Part 1 | 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.

  9. Is there a away to add this to the Excel Plug-in so I can select the color of the background from there and not hard code it. I might want a different background per collection and don’t want to have 10 different Silverlight viewer apps. sitting around. I’m also horrid and coding and try to stay away from it.

  10. In Silverlight 5 I see it needs “using Microsoft.Internal.Pivot.Views;”, not “using Microsoft.Pivot.Internal.Views;”. Also it’s “System.Windows.Controls.Pivot”, not “System.Windows.Pivot”

  11. also, in SL5 it is
    CollectionViewerView cvv = CollectionViewerView)partContainer.Children[2];
    instead of
    CollectionViewerView cvv = ((CollectionViewerView)(partContainer).Children[0]);

  12. Regarding Adam’s question above about wrapping text in the details panel (btw, wonder why Pivot doesn’t have command to show/hide it programmatically), the details field always seems to show in wrap mode (nice) and pivot property objects seem to have an option to wrap them (which is missing though from CXML files, so you have to set it yourself for the facets you want)

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s