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:

Light up your Silverlight skills with the all-new Global Silverlight Firestarter!

Silverlight – Forums – PivotViewer Control

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\PivotViewerSampleXapCode.zip


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()
{
base.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
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 background
StreamResourceInfo sr = Application.GetResourceStream(new Uri("PivotViewerSample;component/Resources/bgrd.jpg", UriKind.Relative));
BitmapImage bmp = new BitmapImage();
bmp.SetSource(sr.Stream);
container.Background = new ImageBrush() { ImageSource = bmp };
sr.Stream.Close();


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