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.

Microsoft Kinect gets more awesome = Windows SDK

[ UPDATED: 17-JUN-2011 19:20 GMT ]

Launch on Channel 9

Launch on Channel 9

The deadly autonomous office sentry

Autonomus Kinect Office Sentry

Autonomus Kinect Office Sentry

Programming voice recognition demo

Programming Voice Recognition

Programming Voice Recognition in Kinect SDK

Twitter is busy with the trending #Kinect topic.

Channel 9 Live Kinect Event

ch9 Tweet - Channel 9 Live Kinect Event

Ch9 Blogs: Join Us Tomorrow For A Special Channel 9 Live Kinect Event - follow the Twitter #Ch9Live hashtag and post questions live!

Confirmed: Watch the Kinect SDK Beta Launch Live!

Kinect For Windows SDK beta

Be part of the movement - Kinect For Windows SDK beta

Resources: Download the SDK Check out the Kinect Quick Starts and view the Kinect Project Gallery on Coding 4 Fun   

Michael Crump – The busy developer’s guide to the Kinect SDK Beta

Kinect is awesome. Yes it is about to become an essential business tool for remote workers and the boardroom too. “Minority Report” with optional glove as a fashion accessary. XBOX + Kinect = valid business expense!

Officially announced for Beta release on 16th May 2011 and finally expected today. With Windows 8, BUILD and the Skype acquisition it was no surprise that there has been a short delay.

As the story unfold we will update this post with all the news, resource links and more…

About

The Kinect for Windows SDK beta is a programming toolkit for application developers. It enables the academic and enthusiast communities easy access to the capabilities offered by the Microsoft Kinect device connected to computers running the Windows 7 operating system.The Kinect for Windows SDK beta includes drivers, rich APIs for raw sensor streams and human motion tracking, installation documents, and resource materials. It provides Kinect capabilities to developers who build applications with C++, C#, or Visual Basic by using Microsoft Visual Studio 2010.

This SDK includes the following features:
  • Raw sensor streams

    Access to raw data streams from the depth sensor, color camera sensor, and four-element microphone array enables developers to build upon the low-level streams that are generated by the Kinect sensor.

  • Skeletal tracking

    The capability to track the skeleton image of one or two people moving within the Kinect field of view make it easy to create gesture-driven applications.

  • Advanced audio capabilities

    Audio processing capabilities include sophisticated acoustic noise suppression and echo cancellation, beam formation to identify the current sound source, and integration with the Windows speech recognition API.

  • Sample code and documentation

    The SDK includes more than 100 pages of technical documentation. In addition to built-in help files, the documentation includes detailed walkthroughs for most samples provided with the SDK.

  • Easy installation

    The SDK installs quickly, requires no complex configuration, and the complete installer size is less than 100 MB. Developers can get up and running in just a few minutes with a standard standalone Kinect sensor unit (widely available at retail outlets).

This SDK is designed for non-commercial purposes only; a commercial version is expected to be available at a later date.

A Year is a Long Time in IT!

A year ago at E3 2010 XBOX 360 Kinect VideoKinect – Video Chat.

E3 2010 XBOX 360 VideoKinect

E3 2010 XBOX 360 Kinect VideoKinect - Video Chat

Waiting and waiting for the end of Spring 2011?

Kinect Windows SDK Beta

Kinect Windows SDK Beta - Almost time, get ready, take control!

June 16th 2011 – Is today the day? Yes it is!!!

Channel 9 Live - Kinnect Countdown!

Channel 9 Live - Kinnect Countdown!

Demos

Demos on Channel 9 Live:

  • Bunny hop – XBox and Windows Phone
  • Kinductor
  • Drone – Pitch, Roll, Yaw, Voice commands (Wooah!)
  • Fruit Salad
  • Unlock the Door
  • Cylon
  • Skeletal Viewer
Drone Flying Demo Kinect

Drone Flying Demo Kinect

Kinductor Demo - Channel 9 Live

Kinductor Demo - Channel 9 Live

Programming Skeletal Viewer Demo

Programming Skeletal Viewer Demo

Of course one of the first Kinect for Windows SDK Projects has to involve a Light Sabre! >>> Download code sample

Resources

Since the Fall of 2010 there have been some empty projects sitting on CopePlex so today we are looking for some updates here:

Speculation?

Where does Skype fit into all this too: Skype + Lync + Kinect + Win7 = ?

Did the Skype-on-TV force Microsoft’s hand in the acquisition with the upcoming competition to the new Kinect offering? Too early for this yet.

Other Links

Jellybean, the Kinect Drivable Lounge Chair - Channel 9 Coding4Fun DIY

Kinect and Videoconferencing + Augmented Reality at MIT’s Media Lab.

Wikipedia Kinect page – the story of ‘Project Natal’

Conclusions

Program in C#, VB, F#, C++ for Silverlight, WPF. Open for invention!

No hint of Skype videoconferencing KInect application – yet…

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.
 

Windows Phone Developer Tools 7.1 (Beta) install

[Updated 25-May-2011]

Introduction
The beta of the ‘Mango’ Windows Phone Developer Tools 7.1 is ready for download here: vm_web2.exe (the installer). I thought it would appear here App Hub Downloads but apparently not so far [UPDATE: download page has been refreshed]. If you have not done so you will also want to register here App Hub.
 
Final release announced on all devices in the Fall 2011. Mango developer devices to ship on July 19th. We will track the progress in this blog article until the final release.
 
Download and Install
 
You will need to exit Visual Studio and Zune applications before the installation will proceed. The full download looks to be 491 MB. You will also need VS2010 SP1 just as for the Silverlight 5 Beta.
Mango - Windows Phone Developer Tools 7.1 (Beta)
Windows Phone Developer Tools 7.1 (Beta) Mango!

Some of the consumer features:

  • Smarter Apps & Live Tiles
  • Groups
  • Local Scout
  • App Connect
  • Internet Explorer 9
  • Threads
  • Multi-tasking
  • People-centric pictures
  • Quick Cards
  • Enhanced Hubs

    Mango - Internet Beyond the browser

    Mango - Internet Beyond the browser

 New API’s in Silverlight for Windows Phone OS 7.1 on MSDN Library – its big, very big!

New Visual Studio Project Templates

Go open up VS2010 ‘New Project’ and…

Silverlight for Windows Phone templates

Silverlight for Windows Phone templates

 Also XNA…

XNA templates

XNA templates

Emulator Language Support
 
Full list is here! Now that is a whole lot better than before.
 
As promised, lots more display languages show up in the settings of the emulator, plenty more regional setting and system locales, at last…
Mango Emulator Display Languages
Mango Emulator Display Languages

Plenty more…

Many more display languages in Mango
Many more display languages in Mango

And here is an example of a warm Dutch welcome to the settings page Mango style… 

Windows Phone Settings in Dutch NL
Windows Phone Settings in Dutch NL
 And if you so desire here is IE9 in the emulator running Bing search under the chinese zh-MO system setting…
WP7 Mango IE Bing Search in chinese zh-MO

WP7 Mango IE Bing Search in chinese zh-MO apparently

 
Feedback
Good things…
 
Gotchas…
 
Further things to do

We will update this blog article with news, bug details, resources links and feedback as it becomes available.

Conclusion
This article is a brief guide to download the ‘Mango’ Microsoft Windoes Phone Developer Tools 7.1 (Beta) released on 24th May 2011.
 
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.
 

Debugging Data Bindings in XAML with Silverlight 4

[Last updated: 2011-05-24]
Introduction
Yes, you read it correctly, Silverlight 4.
 
How can I do that?

Simply install the VS2010 SP1 and Silverlight 5 Beta and you get the unexpected bonus of the XAML Parser supporting debugging your data bindings for your Silverlight 4 projects. As SL5 sits nicely in VS2010 SP1 with SL4 it is worth installing the beta just for this feature.

Debugging XAML Binding in Silverlight 4

Debugging XAML Binding in Silverlight 4 - bonus!

I was at the @SLUGUK meeting 18th May 2011, and as Mike Taulty pointed out for other ‘features’, it is difficult to know whether such things as this were introduced by the service pack or the beta as nobody seems to have stopped to check in the rush to get the SL5 beta working :)

Checked against the NoDo Windows Phone 7 projects and it does not work, you can set a breakpoint but it cannot resolve the symbols. The new feature automatically creates the symbol names for you. I am optimistic that this feature will work with the Mango tooling to be released by end of May 2011 (that’s next week) [UPDATE: Mango beta no Xaml debugging for now].

No point in re-documenting the feature so:

Mike Taulty’s Blog: Silverlight 5 Beta Rough Notes – Debugging Data-Binding

Code Project: Debugging Data Bindings in XAML with SIlverlight 5 Beta

Further things to do and resources 
Conclusion
This article shows a nice side-effect encountered for Silverlight 5 projects after installing the Silverlight 5 Beta. Whether it is intended or here to stay we will have to wait and see but it has already proved to be a fantastic ROI.
 
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.