Sharepoint 2013 Silverlight Webpart

This post is about how to integrate a Silverlight Webpart in SharePoint 2013 and use the Sharepoint Client Object Model, to show SharePoint Data.

The goal is to create a Silverlight Webpart that queries data to QuickLaunch Navigation and shows the result in a two levels TreeView Control.

I started creating a SharePoint 2013 Silverlight Webpart Project in Visual Studio 2012 (named SilverlightSample).

It automatically created a SilverlightWebpart (SilverlightSampleWebPart).

Then I starded with MainPage.xaml, where I inserted a TreeView Control, and created the templates to render data.

<UserControl
    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"
    xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
    xmlns:Client="clr-namespace:Microsoft.SharePoint.Client;assembly=Microsoft.SharePoint.Client.Silverlight"
    x:Class="SilverlightSampleWebPart.MainPage"
    mc:Ignorable="d"
    d:DesignHeight="200" d:DesignWidth="120">
    <UserControl.Resources>

        <sdk:HierarchicalDataTemplate x:Key="ChildrenTemplate"
                                         ItemsSource="{Binding Path=Children}">
            <TextBlock Text="{Binding Path=Title}" />
        </sdk:HierarchicalDataTemplate>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="White" Height="200" Width="120">
        <sdk:TreeView Grid.Row="2"  Name="treeView"
                      ItemTemplate="{StaticResource ChildrenTemplate}"
                      >
        </sdk:TreeView>
    </Grid>
</UserControl>

 

Next I edited MainPage.xaml.cs file, to put the logic to get Data.

I created a class SiteNodes, where the first node is set to Web Title, and the Children nodes are the first level navigation nodes.

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 SilverlightSampleWebPart
{
    public partial class MainPage : UserControl
    {
        private ClientContext context;
        private NavigationNodeCollection nav;
        SiteNodes site;

        public class SiteNodes
        {
            public string Title { get; set; }
            public List<SiteChildren> Children { get; set; }

        }

        public class SiteChildren
        {
            public string Title { get; set; }
        }

        public MainPage()
        {
            InitializeComponent();
            context = new ClientContext(ApplicationContext.Current.Url);
            context.Load(context.Web);
            nav = context.Web.Navigation.QuickLaunch;
            context.Load(nav);

            context.ExecuteQueryAsync(new ClientRequestSucceededEventHandler(OnRequestSucceeded), null);
        }

        private void OnRequestSucceeded(Object sender, ClientRequestSucceededEventArgs args)
        {
            // This is not called on the UI thread.
            Dispatcher.BeginInvoke(BindData);
        }

        private void BindData()
        {
             List<SiteNodes> siteColl = new List<SiteNodes>();
             site = new SiteNodes { Title = context.Web.Title };
             site.Children = new List<SiteChildren>();
             foreach (NavigationNode nn in nav)
             {
                 BindChilds(nn);
             }
             siteColl.Add(site);
             treeView.ItemsSource = siteColl;
        }

        private void BindChilds(NavigationNode nn)
        {
            SiteChildren sn = new SiteChildren{ Title = nn.Title };
            site.Children.Add(sn);

        }

        private void treeView_SelectedItemChanged(object sender, RoutedPropertyChangedEventArgs<object> e)
        {

        }

    }
}
 

After that I deployed my solution and add my new SilverlightWebpart to my page:

Silverlight

Advertisements

Tags: , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: