Other articles in the PivotViewer V2 Series:
- Part 1: Intro
- Part 2: Creating a Project
- Part 3: Receiving oData
Getting Started
The first step to using PivotViewer is creating new Silverlight 5 project. Open Visual Studio and click File –> New –> Project. Select the Silverlight Application project from under the Visual C# –> Silverlight node:
When the New Silverlight Application dialog appears, select the following options, as well as choosing a name that suits you. I like to make the change highlighted:
Setting Up an MVVM Framework
While we can move forward without the overhead of an MVVM framework, part of what makes PivotViewer 2.0 so exciting is how easy it is to integrate with ViewModels. Right click on the PivotViewerSeries.Silverlight project and select Add Library Package Reference. Click Online on the left and type MVVM Light in the search box in the upper right corner. Then click Install on the MvvmLight package:
At this point, some magic happens. Once it is finished you can close the Add Library Package Reference window. There are really only two bits of magic here that you need to know about.
App.xaml Locator Resource
The first bit of magic is to know that the NuGet package changed your App.xaml to look something like this:
<Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="PivotViewerSeries.Silverlight.App"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:vm="clr-namespace:PivotViewerSeries.Silverlight.ViewModel"
mc:Ignorable="d">
<Application.Resources>
<vm:ViewModelLocator x:Key="Locator"
d:IsDataSource="True" />
</Application.Resources>
</Application>
ViewModelLocator.cs
The second bit of magic is that a ViewModelLocator.cs file gets created in the newly created ViewModel folder. This Locator object gets created when the application loads up and will be used by our Silverlight controls to load our ViewModels. For each ViewModel, we will be adding a property pointing to it.
Connecting MainPage.xaml To MainViewModel.cs
If you open MainPage.xaml and add the bolded DataContext to the UserControl, you have finished setting up our MainPage to use MainViewModel. Simple huh?
<UserControl x:Class="PivotViewerSeries.Silverlight.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400"
DataContext="{Binding Main, Source={StaticResource Locator}}">
<Grid x:Name="LayoutRoot" Background="White">
</Grid>
</UserControl>
Adding Our PivotViewer Control
The last step to creating a PivotViewer project is to add the pivot viewer. First we need to add a reference to the Pivot assembly. Right click on your PivotViewerSeries.Silverlight project and select Add Reference and select the System.Windows.Controls.Pivot assembly:
Add the following to the XAML namespaces in MainPage.xaml:
xmlns:pivot="clr-namespace:System.Windows.Controls.Pivot;assembly=System.Windows.Controls.Pivot"
And finally, inside the LayoutRoot Grid control, add the PivotViewer control:
<pivot:PivotViewer>
</pivot:PivotViewer>
Now, If you run your application, you should see an empty PivotViewer:
Conclusion
You should now have a Silverlight Project complete with MVVM framework and working PivotViewer. Attached is a ZIP file containing a copy of my project up to this point.
Up next, Part 3: Receiving oData
Subscribe