Mise en garde
Il s'agit bien de la version inclue avec Silverlight 5 RC, ce code n'est donc pas amené à être mis en production et peut être amené a ne plus fonctionner avec la version définitive.
Introduction
PivotViewer est un contrôle Silverlight très puissant qui permet de d'afficher un grand nombre d'item sur une page. La version 1.0 est basée sur une collection CXML et ne peut être remplis que par cette méthode. Le souci lorsqu'on travaille avec SharePoint est qu'il faut générer à la volée la collection. C'est le but d'un projet comme http://pivotviewersp.codeplex.com. La version 2.0 vient de sortir en RC avec Silverlight 5 RC. Une des grosses nouveautés est qu'on peut désormais se lié a une collection IEnumerable.
Le projet
On va d'abord créer un projet Silverlight 5
Comme on travaille avec SharePoint on ajoute les assemblies silverlight client :
Et le contrôle pivot viewer dans la barre d'outil.
La collection
On va créer une classe qu'on remplira par la suite :
namespace PV2forSharePoint
{
public
class
SPItemSource
{
public
string FileType { get; set; }
public
string Title { get; set; }
public
DateTime Created { get; set; }
public
string Author { get; set; }
public
DateTime Modified { get; set; }
public
int FileSize { get; set; }
}
}
Cette classe servira à faire le binding avec Silverlight.
On la remplie avec l'api cliente SharePoint Silverlight :
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.SharePoint.Client;
namespace PV2forSharePoint
{
public
partial
class
MainPage : UserControl
{
ClientContext ctx;
List lst;
ListItemCollection lc;
List<SPItemSource> lstIS;
public MainPage()
{
lstIS = new
List<SPItemSource>();
InitializeComponent();
ctx = new
ClientContext("http://srvmoss/docs");
ctx.Load(ctx.Site);
ctx.Load(ctx.Web);
lst=ctx.Web.Lists.GetByTitle("Documents");
ctx.Load(lst);
lc = lst.GetItems(CamlQuery.CreateAllItemsQuery());
ctx.Load(lc);
ClientRequestSucceededEventHandler crseh = new
ClientRequestSucceededEventHandler(lcLoad);
ctx.ExecuteQueryAsync(crseh,null);
}
private
void lcLoad(object sender, ClientRequestSucceededEventArgs crsea)
{
foreach (ListItem li in lc)
{
SPItemSource sis = new
SPItemSource();
try
{
sis.Title = li["Title"].ToString();
sis.FileType = li["File_x0020_Type"].ToString();
sis.Created = DateTime.Parse(li["Created"].ToString());
sis.Author = ((FieldUserValue) li["Author"]).LookupValue;
sis.Modified = DateTime.Parse(li["Modified"].ToString());
sis.FileSize = int.Parse(li["File_x0020_Size"].ToString());
}
catch (Exception ex)
{
continue;
}
lstIS.Add(sis);
}
this.Dispatcher.BeginInvoke(BindPV);
}
private
void BindPV()
{
this.pv4SP2.ItemsSource = lstIS;
}
}
}
Maintenant on a une liste d'IEnumerable qu'on va lier à notre contrôle.
Le contrôle PivotViewer
On ajoute le contrôle sur notre page et on le nomme pv4sp.
Le contrôle se base sur des propriétés de différents types pour afficher les refinements et les informations de l'item. On ajoute donc ces propriétés au contrôles :
<sdk:PivotViewer.PivotProperties>
<sdk:PivotViewerStringProperty Id="FileType" Options="CanFilter" DisplayName="Type de Fichier" Binding="{Binding FileType}" />
<sdk:PivotViewerStringProperty Id="Title" Options="CanFilter" DisplayName="Titre" Binding="{Binding Title}" />
<sdk:PivotViewerDateTimeProperty Id="Created" Options="CanFilter" DisplayName="Créé le" Binding="{Binding Created}" />
<sdk:PivotViewerStringProperty Id="Author" Options="CanFilter" DisplayName="Créé par" Binding="{Binding Author}" />
<sdk:PivotViewerDateTimeProperty Id="Modified" Options="CanFilter" DisplayName="Modifié le" Binding="{Binding Modified}" />
<sdk:PivotViewerNumericProperty Id="FileSize" Options="CanFilter" DisplayName="Taille" Binding="{Binding FileSize}" />
</sdk:PivotViewer.PivotProperties>
Si on lance l'application le contrôle apparait de la manière suivante :
Il nous reste donc à personnaliser les tile du contrôle avec la propriété itemtemplate :
<sdk:PivotViewer.ItemTemplates>
<sdk:PivotViewerItemTemplate>
<Border Width="200" Height="200" Background="DarkOrange">
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding Title}" FontSize="16" FontWeight="Bold" Foreground="White" />
<TextBlock Text="{Binding Author}" FontSize="16" Foreground="White" />
<TextBlock Text="{Binding FileType}" FontSize="16" Foreground="White" />
<TextBlock Text="{Binding Created}" FontSize="16" Foreground="White" />
<TextBlock Text="{Binding Modified}" FontSize="16" Foreground="White" />
</StackPanel>
</Border>
</sdk:PivotViewerItemTemplate>
</sdk:PivotViewer.ItemTemplates>
Le code complet de notre page Xaml est le suivant:
<UserControl xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" x:Class="PV2forSharePoint.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">
<Grid x:Name="LayoutRoot" Background="White">
<sdk:PivotViewer x:Name="pv4SP2">
<sdk:PivotViewer.PivotProperties>
<sdk:PivotViewerStringProperty Id="FileType" Options="CanFilter" DisplayName="Type de Fichier" Binding="{Binding FileType}" />
<sdk:PivotViewerStringProperty Id="Title" Options="CanFilter" DisplayName="Titre" Binding="{Binding Title}" />
<sdk:PivotViewerDateTimeProperty Id="Created" Options="CanFilter" DisplayName="Créé le" Binding="{Binding Created}" />
<sdk:PivotViewerStringProperty Id="Author" Options="CanFilter" DisplayName="Créé par" Binding="{Binding Author}" />
<sdk:PivotViewerDateTimeProperty Id="Modified" Options="CanFilter" DisplayName="Modifié le" Binding="{Binding Modified}" />
<sdk:PivotViewerNumericProperty Id="FileSize" Options="CanFilter" DisplayName="Taille" Binding="{Binding FileSize}" />
</sdk:PivotViewer.PivotProperties>
<!--Setting data-->
<sdk:PivotViewer.ItemTemplates>
<sdk:PivotViewerItemTemplate>
<Border Width="200" Height="200" Background="DarkOrange">
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding Title}" FontSize="16" FontWeight="Bold" Foreground="White" />
<TextBlock Text="{Binding Author}" FontSize="16" Foreground="White" />
<TextBlock Text="{Binding FileType}" FontSize="16" Foreground="White" />
<TextBlock Text="{Binding Created}" FontSize="16" Foreground="White" />
<TextBlock Text="{Binding Modified}" FontSize="16" Foreground="White" />
</StackPanel>
</Border>
</sdk:PivotViewerItemTemplate>
</sdk:PivotViewer.ItemTemplates>
</sdk:PivotViewer>
</Grid>
</UserControl>
Et voici le résultat final:
On retrouve nos propriétés dans la barre de refinement sur la gauche.
Lorsqu'on zoom sur un tile on voit la barre d'information avec les propriétés et on voit le résultat de l'itemtemplate :
Le contrôle PivotViewer ouvre beaucoup de possibilité dans l'interaction avec l'utilisateur. Cette version ajoute la facilité de programmation.
