Now, we are going to create a very simple Silverlight LOB (Line-Of-Business) RIA that retrieves data, displays a grid with a list of projects, and allows the users to navigate through the data. Then, we are going to integrate this Silverlight UI in SharePoint.
1. Create a new Visual C# project using the Silverlight | Silverlight Application template. Use
SilverlightProjects
as the project's name.2. Deactivate the Host the Silverlight application in a new Web site checkbox in the New Silverlight Application dialog box. We want the Silverlight application to run in a simple HTML web page. As you have installed Silverlight 4 Tools, the dialog box will offer you a combo box with the possibility to choose the desired Silverlight version. Select Silverlight 4 as we want to take advantage of the new features offered by this version.
3. Add a new XML file to the project,
Projects.xml
. The following lines define properties and values for fiveproject
instances. This way, we have some data in XML format for our simple LOB application.<?xml version="1.0" encoding="utf-8" ?> <projects> <project projectId="0"> <title>Creating a Silverlight 4 UI</title> <estimatedDaysLeft>4</estimatedDaysLeft> <status>Delayed</status> <assignedTo>Jon Share</assignedTo> <numberOfTasks>5</numberOfTasks> </project> <project projectId="1"> <title>Creating a Complex Silverlight LOB RIA</title> <estimatedDaysLeft>5</estimatedDaysLeft> <status>Delayed</status> <assignedTo>James Point</assignedTo> <numberOfTasks>35</numberOfTasks> </project> <project projectId="2"> <title>Creating a New SharePoint Site</title> <estimatedDaysLeft>3</estimatedDaysLeft> <status>Delayed</status> <assignedTo>Vanessa Dotcom</assignedTo> <numberOfTasks>8</numberOfTasks> </project> <project projectId="3"> <title>Installing a New SharePoint 2010 Server</title> <estimatedDaysLeft>3</estimatedDaysLeft> <status>Delayed</status> <assignedTo>Michael Desktop</assignedTo> <numberOfTasks>25</numberOfTasks> </project> <project projectId="4"> <title>Testing the New Silverlight LOB RIA</title> <estimatedDaysLeft>4</estimatedDaysLeft> <status>Delayed</status> <assignedTo>Jon Share</assignedTo> <numberOfTasks>35</numberOfTasks> </project> </projects>
4. Add a new class to the project called
Project
in a new class file,Project.cs
. The following lines define the new class, with six properties. This way, you will be able to create instances of this class to hold the values defined in the previously created XML file.public class Project { public int ProjectId { get; set; } public string Title { get; set; } public int EstimatedDaysLeft { get; set; } public string Status { get; set; } public string AssignedTo { get; set; } public int NumberOfTasks { get; set; } }
5. Open
MainPage.xaml
, define a new width and height for theGrid
as800
and600
, add the following controls located in the Toolbox under All Silverlight Controls, and align them as shown in the screenshot. Remember that Visual Studio 2010 allows us to drag-and-drop controls from the toolbox to the SilverlightUserControl
in the design view and it will automatically generate the XAML code.6. Apply data binding to the font size for the
DataGrid
control,dataGridProjects
. In order to do so, selectdataGridProjects
, activate the Properties panel, display them in alphabetical order, right-click on the FontSize property, and select Apply Data Binding in the context menu that appears. Then, selectElementName
in Source,sliGridFontSize
, and thenValue
in Path. This way, when the user moves the slider, the font size for the data grid will change. The code that defines the data binding is as follows:FontSize="{Binding ElementName=sliGridFontSize, Path=Value}"
7. The complete XAML markup code for
MainPage.xaml
will be similar to the following lines:<UserControl x:Class="SilverlightProjects.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:DesignWidth="800" d:DesignHeight="600" xmlns:data= "clr-namespace:System.Windows.Controls; assembly=System.Windows.Controls.Data" xmlns:dataInput= "clr-namespace:System.Windows.Controls; assembly=System.Windows.Controls.Data.Input"> <Grid x:Name="LayoutRoot" Background="White"> <data:DataGrid AutoGenerateColumns="True" Height="491" HorizontalAlignment="Left" Margin="12,56,0,0" Name="dataGridProjects" VerticalAlignment="Top" Width="776" FontSize="{ Binding ElementName=sliGridFontSize, Path=Value}" /> <dataInput:Label Height="38" HorizontalAlignment="Left" Margin="12,12,0,0" Name="label1" VerticalAlignment="Top" Width="376" FontWeight="Bold" FontSize="24" Content="Projects" /> <Slider Height="35" HorizontalAlignment="Left" Margin="158,553,0,0" Name="sliGridFontSize" VerticalAlignment="Top" Width="630" Value="11" Maximum="72" Minimum="11" /> <dataInput:Label Content="Font size" FontSize="20" FontWeight="Bold" Height="35" HorizontalAlignment="Left" Margin="12,553,0,0" Name="label2" VerticalAlignment="Top" Width="140" /> </Grid> </UserControl>
8. Now, it is necessary to add code to retrieve data from the XML file and assign a value to the
ItemsSource
property of theDataGrid
control. First, you have to add a reference toSystem.Xml.Linq.dll
. Then, you can add the newInitializeGrid
method and call it from the class constructor as shown in the following lines forMainPage.xaml.cs.
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; // Added using System.Xml.Linq; namespace SilverlightProjects { Silverlight LOB RIAcreatingpublic partial class MainPage : UserControl { private void InitializeGrid() { XDocument docProjects = XDocument.Load("Projects.xml"); var projectsData = from el in docProjects.Descendants("project") select new Project { ProjectId = Convert.ToInt32(el.Attribute("projectId").Value), Title = Convert.ToString(el.Element("title").Value), EstimatedDaysLeft = Convert.ToInt32(el.Element("estimatedDaysLeft").Value), Status = Convert.ToString(el.Element("status").Value), AssignedTo = Convert.ToString(el.Element("assignedTo").Value), NumberOfTasks = Convert.ToInt32(el.Element("numberOfTasks").Value) }; dataGridProjects.ItemsSource = projectsData; } public MainPage() { InitializeComponent(); InitializeGrid(); } } }
9. Build and run the solution. The default web browser will appear showing a grid with headers and the five rows defined in the previously added XML file, as shown in the following screenshot:
It is a very simple Silverlight LOB RIA displaying a data grid with rows that are read from the XML file included in the project, Projects.xml
.
First, we added the XML file with the definitions for the five projects. Then, we added a class with the necessary properties to hold the values defined in this XML file.
The InitializeGrid
method loads the projects from the Projects.xml
XML file (embedded and compressed in the .xap
file).
XDocument docProjects = XDocument.Load("Projects.xml");
Then, it uses a LINQ to XML query to create instances of the Project
class and assign values to their properties. Finally, it assigns this query to the ItemsSource
property of the DataGrid:
dataGridProjects.ItemsSource = projectsData;
Note
C# 3.0 (Visual C# 2008) introduced LINQ and it is very useful for processing queries for many different data sources. The features of LINQ and its usage in real-life scenarios are described in depth in LINQ Quickly (A Practical Guide to Programming Language Integrated Query with C#) by N. Satheesh Kumar from Packt Publishing.
We can click on one of the headers and the grid will sort the data in ascending order. Then, we can click again to sort the data into descending order.
When we drag the slider located at the bottom, the font size for the grid will change, as shown in the following screenshot:
As previously explained, we can also take advantage of the themes included in Silverlight's Toolkit to offer the user a more exciting UI. Follow these steps to apply a theme to the main UserControl
for the Silverlight UI:
1. Select Start | All Programs | Microsoft Silverlight 4 Toolkit | Binaries and Windows will open the folder that contains the Silverlight Toolkit binaries. By default, they are located at
C:\Program Files (x86)\Microsoft SDKs\Silverlight\v4.0\Toolkit\Apr10\Bin
in 64-bit Windows versions. Its parent folder contains theThemes
sub-folder,C:\Program Files (x86)\Microsoft SDKs\Silverlight\v4.0\Toolkit\Apr10\Themes
. In 32-bit Windows versions, the default folders areC:\Program Files\Microsoft SDKs\Silverlight\v4.0\Toolkit\Apr10\Bin
andC:\Program Files\Microsoft SDKs\Silverlight\v4.0\Toolkit\Apr10\Themes
.2. Add a reference to
System.Windows.Controls.Theming.Toolkit.dll
. Remember that it is located in the aforementionedBin
sub-folder.3. Add a reference to the DLL for the desired theme in the
Themes
sub-folder. For example, if you want to apply theShinyBlue
theme, addSystem.Windows.Controls.Theming.ShinyBlue
, located in the aforementionedThemes
sub-folder.4. Add the following line to include the namespace that defines the theme in the
UserControl
defined inMainPage.xaml:
xmlns:shinyBlue= "clr-namespace:System.Windows.Controls.Theming; assembly=System.Windows.Controls.Theming.ShinyBlue"
5. Add the following line before the definition of the main
Grid, LayoutRoot:
<shinyBlue:ShinyBlueTheme>
6. Add the following line after the definition of the main
Grid, LayoutRoot:
</shinyBlue:ShinyBlueTheme>
This way, the ShinyBlue
theme will be applied to the main Grid, LayoutRoot
and all its child controls. It wasn't necessary to make great changes to offer a more attractive rich user experience. Let's see the revised look in the following screenshot:
When we build a Silverlight project, Visual Studio or Expression Blend creates many folders with a lot of sub-folders and files.
In this case, we want to add the simple Silverlight RIA to a page in SharePoint 2010. Thus, we are interested in the SilverlightProjects.xap
file. This is a compressed file, that is, a ZIP file with a .xap
extension, and it contains all the necessary files for the Silverlight application.
You can find this file in the Debug
or the Release
sub-folder, according to your active solution configuration. For example, if the project is located in a SilverlightProjects
folder, the relative path for the release SilverlightProjects.xap
file would usually be ...\SilverlightProjects\Bin\Release
. If you want to be sure about the location of the generated .xap
file, you can follow these steps after building the project:
1. Activate the Solution Explorer.
2. Click on the Show All Files button, the second button located at the top of the Solution Explorer palette. Now, expand the
Bin
folder and then theDebug
orRelease
sub-folder, according to your active solution configuration, as shown in the following screenshot:3. Right-click on the
SilverlightProjects.xap
file and, and select Properties in the context menu that appears or press F4. The Properties palette will appear and you will be able to see the value for its Full Path property. This way, you can get the exact path for this file, as shown in the next screenshot. You will need it later to integrate it with SharePoint.