Tag Archives: cxml

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 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.
 

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\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 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();
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!

Adventures with PivotViewer – Part 2 Themes and Integrated DataGrid

So we carried on with PivotViewer and created a sample Silverlight App to show what can be done.  The app has three themes that can be applied and two existing collections(Wikipedia Technology and Yoga) to showcase them.  The Desert Island theme has a transparent filter pane so the background skin shows through (the opacity can be tweaked!)

Oh, and we added a gridview of the data … heres the link

Here are some screenshots …

Adventures with PivotViewer – Part 1

We like the combination of Silverlight 4 with the PivotViewer control. We are putting them to good use now against real data. We published a SQLBits 7 Agenda collection last month for fun. But was it really? Well, no. The branding and styling missed the mark and though the tiles had a reasonable design they had to be pre-generated. Not bad for a half day’s work but we moved on…

We need PivotViewer to be better integrated into Silverlight, no wait, we need Silverlight and our application integrated into PivotViewer. Interesting thought?

So we toiled, extended, styled and skinned. Some themes for business, some for holiday snaps and some fun themes for the holidays. I personally like ‘Spooky’ with the bats and silhouettes and the ‘Desert Island’ looks ready for my next holiday snaps. Lots better but not 100% control of the UI.

Then we toiled, extended and integrated because somehow the grid and histogram views needed some help. People feel comfortable with a data grid and some data looks better in charts, of course it does. Data Visualization sure needs many views after all!

Here are some sample screenshots to kick start this blog series…

Tropical Theme

Below are the rest of the themes we put together…

This slideshow requires JavaScript.

SQLBits 7 Silverlight Session Picker

We are really looking forward to SQLBits this year, so we decided to take a couple of hours and put together a sample collection to show off pivot view and provide a little help with narrowing down exactly which sessions you want to attend next week. We’ve added some lovely photos of the presenters and other useful information on each tile view, when you deep zoom in…

Until we get the silverlight application completed, here are the zipped collection files and link to the Microsoft Live Labs demo viewer. Install the demo viewer first and then point the address to the location of the unzipped collection .cxml file or you can use a direct link to the server version of the cxml

Full online Silverlight Application version is available! As with all silverlight apps, works fine on most browsers and OS.

Here are a few screen shots for you

This slideshow requires JavaScript.

If you haven’t already booked to come to SQLBits 7 then hurry as places are going fast. We’ll see you there!