Deploy Silverlight Web Part in SharePoint 2010

Let see how to use Silverlight web part in SharePoint.

Please install Silverlight sdk if its not installed before you proceed.

First create an Empty SharePoint Project in visual studio.

Add new Project in this solution. Select "Silverlight Application" from the project templates and uncheck the "Host the Silverlight application in a new Web site".

Open the "MainPage.xaml" file and drag a data grid on to this. Set Autogenerate columns property of the grid to false

Create the columns you want to show in the grid like below:

<sdk:DataGridTextColumn  Binding="{Binding ID}" Header="ID"></sdk:DataGridTextColumn>
                        <sdk:DataGridTextColumn  Binding="{Binding Title}"

Header="Title"></sdk:DataGridTextColumn>


Open the code file of MainPage and create a class. This class will be used to set

columns in the grid.

 public class ListDataItems
        {
            public int ID { get; set; }
            public string Title { get; set; }
}

On the grid i have used "{Binding ID}" and "{Binding Title}" for the columns.

The columns of grid you will specify, that should also be in the proprery of the class as specifed in above class.


Next create a Observable collection of the above class as below:

 ObservableCollection<ListDataItems> _items ,namespace is

using System.Collections.ObjectModel;

Create ListItemCollection instance like ListItemCollection _genericList

create a method to get list items from list using Silvelight client context.private

void GetItems()
        {
            var clientContext = ClientContext.Current;
            var oList = clientContext.Web.Lists.GetByTitle("LookupList");
            var camlQuery = CamlQuery.CreateAllItemsQuery();
            _genericList = oList.GetItems(camlQuery); ;
         
            clientContext.Load(_genericList);
         
            clientContext.ExecuteQueryAsync(Pass, fail);
        }

public void Pass(object sender, ClientRequestSucceededEventArgs args)
        {


            Dispatcher.BeginInvoke(() => loaddata());


        }


 public void fail(object sender, ClientRequestFailedEventArgs args)
        {
//caught exception here if any occurs

        }

 void loaddata()
        {

            foreach (var Listitem in _genericList)
            {

                _items.Add(new ListDataItems()
                {
                    ID = Convert.ToInt32(Listitem["ID"]),
                    Title = Convert.ToString(Listitem["Title"]),
                 
                 
                });
            }
        }

Call Method on page load

 public MainPage()
        {
            InitializeComponent();
            _items = new ObservableCollection<ListDataItems>();


            yourgridid.ItemsSource = _items;

                     
            GetItems();

        }

No with all the above code you data grid containing list data is ready. Silverlight

creates a xap file that contains all your userinterface and code into one file afetr

successfulling building the project. Next step is to deploy this Silverlight

component(.xap) to SharePoint.

In the empty SharePoint project created earliar, add new item, select Module from the

templates give a name e.g.ListViewSilverlight.

Right click on the newly created module, select properties, select Project Output

Reference, click on the browse button, on the left hand side from the Members select

your Silverlight project, on the right hand side selcet Deployment Type as Element

File and click ok.

In the elements.xml file specify where you want to deploy this file in SharePoint

 <Module Name="ListViewSilverlight" Url="Style Library">
 
    <File Path="ListViewSilverlight\ListViewSilverlightWebPart.xap"

Url="SilverLightModule/ListViewSilverlightWebPart.xap"  Type="GhostableInLibrary"/>
  </Module>

Now build and deploy the Project.

Create any web part page. Select Silverlight web part from the available web parts

speciy the path of your .xap file from style library and click ok.

You will see the grid containig list data is appreared on the screen.