Open Visual Studio 2010 from your Start menu.

Select File

Choose Silverlight from the list of templates and select Silverlight Application from the list of applications.

Enter a name for your project and click the OK button.

In the New Silverlight Application dialog (Figure 14-2), uncheck the "Host the Silverlight application in a new Web site" checkbox, ensure that Silverlight 4 is selected in the drop-down list, and click the OK button.

After the project loads, the MainPage.xaml file should automatically open. If it does not open, double-click the file in the Solution Explorer pane (Figure 14-3).

Right-click the References folder in the Solution Explorer pane and choose Add Reference.

Click the Browse button and navigate to the location of the Microsoft.SharePoint.Client.Silverlight.dll and Microsoft.SharePoint.Client.Silverlight.Runtime.dll files. (These files are located on your SharePoint server at C:Program FilesCommon FilesMicrosoft SharedWeb Server Extensions14TEMPLATELAYOUTSClientBin.)

Click the Open button to return to the Add Reference dialog.

Click the Add button to add the references to the project.

Drag the DataGrid control from the Toolbox pane and drop it on the white area of the MainPage.xaml designer surface. This adds the control to the page.

In the text editor, remove all attributes on the DataGrid tag except for the Name attribute. If you do not see the text editor, click the XAML tab as shown in Figure 14-3.

In the text editor, click the UserControl tag and, in the Properties pane, click the Events button.

Locate the Loaded event and double-click it to create an event handler in the MainPage.xaml.cs file. The MainPage.xaml.cs file should automatically open.

In the MainPage.xaml.cs file, add the following using statements to the top of the screen:

using Microsoft.SharePoint.Client;
using System.Collections;

Add the following private fields to the MainPage class just before the public MainPage() { line:

private List tasks;
private IEnumerable<ListItem> results;

In the UserControl_Loaded method, type the following code to request the MyTasks list from SharePoint:

ClientContext context = ClientContext.Current;
Web site = context.Web;

this.tasks = site.Lists.GetByTitle("MyTasks");
ListItemCollection items = tasks.GetItems(new CamlQuery());

var query = from t in items
  select t;

this.results = context.LoadQuery(query);
context.ExecuteQueryAsync(OnSuccess, OnFailure);

Add the following two methods before the UserControl_Loaded method:

void OnSuccess(object sender,
  ClientRequestSucceededEventArgs e) {
}

void OnFailure(object sender,
  ClientRequestFailedEventArgs e) {
}

In the OnSuccess method, type the following code to convert the list items to Task objects and bind it to the DataGrid control:

dataGrid1.Dispatcher.BeginInvoke(delegate() {
  var data = from t in this.results
        select new Task {
          Id = t.Id,
          Title = (string)t.FieldValues["Title"],
          Status = (string)t.FieldValues["Status"],
          Priority =
            (string)t.FieldValues["Priority"]
        };

dataGrid1.ItemsSource = data;
});

In the OnFailure method, type the following code to display any errors that occur during the call to SharePoint:

this.Dispatcher.BeginInvoke(delegate() {
  TextBlock textBlock = new TextBlock();
  textBlock.Text = e.Exception.ToString();
  this.Content = textBlock;
});

Add a new class to the project by right-clicking the project in Solution Explorer and choosing Add

Enter Task.cs as the name of the class file.

When the Task.cs file opens, update the Task class to include the properties as shown here:

public class Task {
  public int Id { get; set; }
  public string Title { get; set; }
  public string Status { get; set; }
  public string Priority { get; set; }
}

Compile the project by selecting Build

Check the Error List pane for any errors and fix them before continuing.

Click the Show All Files button in the Solution Explorer pane.

In the Solution Explorer pane, expand the Bin and Debug folders and select the XAP file.

Double-click the value of the Full Path property in the Properties pane to select it and press Ctrl+C to copy the path to the clipboard.

Navigate your browser to a document library in your SharePoint site.

Select Upload Document from the Documents tab on the ribbon.

In the Upload Document dialog that appears, click the Browse button.

Paste the file path from Step 28 and click Open.

Click the OK button to close the Upload Document dialog and upload the XAP file to SharePoint.

When the document library is updated with your file, right-click its name and choose Copy Hyperlink to copy the URL of your XAP file.

Navigate your browser to a web part page in your site.

Select Edit Page from the Site Actions menu.

Select Web Part from the Insert tab on the ribbon.

Choose Media and Content from the Categories list and select Silverlight Web Part from the Web Parts list (Figure 14-4).

Select the location to put the web part from the "Add Web Part to" drop-down list and click the Add button.

In the Silverlight Web Part dialog, paste the URL from step 34 and click the OK button (Figure 14-5).

Select Save & Close from the Page tab on the ribbon.

Verify that your Silverlight control displays data, as shown in Figure 14-10.

Figure 14.9. Figure 14-10

Open Visual Studio 2010 from your Start menu.

Select File

Choose Silverlight from the list of templates and select Silverlight Application from the list of applications.

Enter a name for your project and click the OK button.

In the New Silverlight Application dialog, uncheck the "Host the Silverlight application in a new Web site" checkbox, ensure that Silverlight 4 is selected in the drop-down list, and click the OK button.

When the project is loaded, the MainPage.xaml file should automatically open. If it does not open, double-click the file in the Solution Explorer pane.

Right-click the References folder in the Solution Explorer pane and choose Add Reference. The Add Reference dialog appears.

Click the Browse button and navigate to the location of the Microsoft.SharePoint.Client.Silverlight.dll and Microsoft.SharePoint.Client.Silverlight.Runtime.dll files.

Click the Open button to return to the Add Reference dialog.

Click the Add button to add the references to the project.

In MainPage.xaml, set the following property values on the UserControl tag:

With the UserControl selected, click the Events button in the Properties window and double-click the Loaded event.

In MainPage.xaml, set the following property values on the Grid tag:

In MainPage.xaml, add a DataGrid from the toolbox and configure the following properties:

With the DataGrid selected, click the Events button in the Properties window and double-click the SelectionChanged event.

In MainPage.xaml, add a Button from the toolbox and configure the following properties:

In MainPage.xaml, add a Button from the toolbox and configure the following properties:

In MainPage.xaml, add a Button from the toolbox and configure the following properties:

In MainPage.xaml, add a Button from the toolbox and configure the following properties:

Add event handlers for each of the buttons created in Steps 16–19 by selecting the button, clicking the Events button in the Properties pane, and double-clicking the Click event.

In MainPage.xaml, add a DataGrid from the toolbox and configure the following properties:

Inside the listsDataGrid tag, insert the following code:

<sdk:DataGrid.Columns>
  <sdk:DataGridTextColumn Binding="{Binding Title}" Header="Title" />
  <sdk:DataGridTextColumn Binding="{Binding BaseType}" Header="Base Type" />
  <sdk:DataGridTextColumn Binding="{Binding Description}"
    Header="Description" />
</sdk:DataGrid.Columns>

Inside the fieldsDataGrid tag, insert the following code:

<sdk:DataGrid.Columns>
  <sdk:DataGridTextColumn Binding="{Binding Title}" Header="Title" />
  <sdk:DataGridTextColumn Binding="{Binding Description}"
    Header="Description" />
  <sdk:DataGridTextColumn Binding="{Binding TypeDisplayName}"
    Header="TypeDisplayName" />
  <sdk:DataGridTextColumn Binding="{Binding TypeAsString}"
    Header="TypeAsString" />
</sdk:DataGrid.Columns>

Compare the layout of your MainPage.xaml file with the one shown in Figure 14-11 and make any necessary changes.

In MainPage.xaml.cs, add the following using statement at the top of the page:

using Microsoft.SharePoint.Client;

Add the following private fields inside the MainPage class:

private IEnumerable<List> listResults;
private IEnumerable<Field> fieldResults;

Add the following methods inside the MainPage class:

private void OnFailure(object sender, ClientRequestFailedEventArgs e) {
}

private void RefreshLists() {
}

private void OnListsSuccess(object sender, ClientRequestSucceededEventArgs e) {
}

private void OnListCreated(object sender, ClientRequestSucceededEventArgs e) {
}

private void OnListDeleted(object sender, ClientRequestSucceededEventArgs e) {
}

private void RefreshFields() {
}

private void OnFieldsSuccess(object sender,
  ClientRequestSucceededEventArgs e) {
}

private void OnFieldCreated(object sender, ClientRequestSucceededEventArgs e) {
}

private void OnFieldDeleted(object sender, ClientRequestSucceededEventArgs e) {
}

Figure 14.10. Figure 14-11

In the addFieldButton_Click method, insert the following code to add a field to the selected list in the listsDataGrid control:

ClientContext context = ClientContext.Current;

if (listsDataGrid.SelectedItem is List) {
  List list = (List)listsDataGrid.SelectedItem;

  Field field = list.Fields.AddFieldAsXml(@"<Field DisplayName='My New Field'
    Type='Note' />", true, AddFieldOptions.DefaultValue);

  FieldMultiLineText textField = context.CastTo<FieldMultiLineText>(field);
  textField.NumberOfLines = 6;
  textField.RichText = true;
  textField.Update();

  context.ExecuteQueryAsync(OnFieldCreated, OnFailure);
}

In the addListButton_Click method, insert the following code to add a new list to the site:

ClientContext context = ClientContext.Current;
Web site = context.Web;

ListCreationInformation info = new ListCreationInformation();
info.Title = "My New List";
info.Description = "List created using the Silverlight Client Object Model.";
info.TemplateType = (int)ListTemplateType.Tasks;

site.Lists.Add(info);

context.ExecuteQueryAsync(OnListCreated, OnFailure);

In the deleteFieldButton_Click method, insert the following code to delete the selected field in the fieldsDataGrid control:

ClientContext context = ClientContext.Current;

if (fieldsDataGrid.SelectedItem is Field) {
  Field field = (Field)fieldsDataGrid.SelectedItem;

  field.DeleteObject();

  context.ExecuteQueryAsync(OnFieldDeleted, OnFailure);
}

In the deleteListButton_Click method, insert the following code to delete the selected list in the listsDataGrid control:

ClientContext context = ClientContext.Current;

if (listsDataGrid.SelectedItem is List) {
  List list = (List)listsDataGrid.SelectedItem;
  list.DeleteObject();

  context.ExecuteQueryAsync(OnListDeleted, OnFailure);
}

In the listsDataGrid_SelectionChanged method, insert the following code to call the RefreshFields method when a list is selected in the listsDataGrid control:

RefreshFields();

In the OnFailure method, insert the following code to display any errors from the call to SharePoint:

this.Dispatcher.BeginInvoke(delegate() {
  MessageBox.Show(e.Message);
});

In the OnFieldCreated method, insert the following code to call the RefreshFields method:

fieldsDataGrid.Dispatcher.BeginInvoke(delegate() {
  RefreshFields();
});

In the OnFieldDeleted method, insert the following code to call the RefreshFields method:

fieldsDataGrid.Dispatcher.BeginInvoke(delegate() {
  RefreshFields();
});

In the OnFieldsSuccess method, insert the following code to bind the fields from SharePoint to the fieldsDataGrid control:

fieldsDataGrid.Dispatcher.BeginInvoke(delegate() {
  fieldsDataGrid.ItemsSource = fieldResults;
});

In the OnListCreated method, insert the following code to call the RefreshLists method:

listsDataGrid.Dispatcher.BeginInvoke(delegate() {
  RefreshLists();
});

In the OnListDeleted method, insert the following code to call the RefreshLists method:

listsDataGrid.Dispatcher.BeginInvoke(delegate() {
  RefreshLists();
});

In the OnListsSuccess method, insert the following code to bind the lists from SharePoint to the listsDataGrid control:

listsDataGrid.Dispatcher.BeginInvoke(delegate() {
  listsDataGrid.ItemsSource = listResults;
});

In the RefreshFields method, insert the following code to request the fields for the selected list in the listsDataGrid control:

fieldsDataGrid.ItemsSource = null;

if (listsDataGrid.SelectedItem is List) {
  List list = (List)listsDataGrid.SelectedItem;

  ClientContext context = ClientContext.Current;

var query = from f in list.Fields
        where !f.Hidden
        select f;

  this.fieldResults = context.LoadQuery(query);

  context.ExecuteQueryAsync(OnFieldsSuccess, OnFailure);
}

In the RefreshLists method, insert the following code to request the lists for the current site:

ClientContext context = ClientContext.Current;
Web site = context.Web;

var query = from l in site.Lists
      where !l.Hidden
      select l;

this.listResults = context.LoadQuery(query);

context.ExecuteQueryAsync(OnListsSuccess, OnFailure);

In the UserControl_Loaded method, insert the following code to call the RefreshLists method:

RefreshLists();

Compile the project by selecting Build XXX Build Solution from the menu bar.

Check the Error List pane for any errors and fix them before continuing.

Click the Show All Files button in the Solution Explorer pane.

In the Solution Explorer pane, expand the Bin and Debug folders and select the XAP file.

Double-click the value of the Full Path property in the Properties pane to select it and press Ctrl+C to copy the path to the clipboard.

Navigate your browser to a document library in your SharePoint site.

Select Upload Document from the Documents tab on the ribbon.

In the Upload Document dialog, click the Browse button.

Paste the file path from Step 47 and click Open.

Click the OK button to close the Upload Document dialog and upload the XAP file to SharePoint.

When the document library is updated with your file, right-click its name and choose Copy Hyperlink to copy the URL of your XAP file.

Navigate your browser to a web part page in your site.

Select Edit Page from the Site Actions menu to place the page in Edit mode.

Select Web Part from the Insert tab on the ribbon.

Choose Media and Content from the Categories list and select Silverlight Web Part from the Web Parts list.

Select the location to put the web part from the "Add Web Part to" drop-down list and click the Add button.

In the Silverlight Web Part dialog, paste the URL from Step 53 and click the OK button.

Configure the web part properties as follows:

Select Save & Close from the Page tab on the ribbon.

Refresh the page in your browser.

Wait until the upper DataGrid control is populated with the non-hidden lists in the site.

Select various lists from the upper DataGrid control and watch the non-hidden fields in the list populate the bottom DataGrid control.

Click the Add List button, and the new list "My New List" appears in the upper DataGrid control.

Select the "My New List" list in the upper DataGrid control and click the Add Field button.

Notice the new field "My New Field" in the bottom DataGrid control.

Select the "My New Field" field in the bottom DataGrid control and click the Delete Field button.

Notice the "My New Field" field disappear from the list.

Select the "My New List" list in the upper DataGrid control and click the Delete List button.

Notice the "My New List" list disappear from the site.

Open Visual Studio 2010 from your Start menu.

Select File

Choose Silverlight from the list of templates and select Silverlight Application from the list of applications.

Enter a name for your project and click the OK button.

In the New Silverlight Application dialog, uncheck the "Host the Silverlight application in a new Web site" checkbox, ensure that Silverlight 4 is selected in the drop-down list, and click the OK button.

When the project is loaded, the MainPage.xaml file should automatically open. If it does not open, double-click the file in the Solution Explorer pane.

Right-click the References folder in the Solution Explorer pane and choose Add Reference. The Add Reference dialog appears.

Click the Browse button and navigate to the location of the Microsoft.SharePoint.Client.Silverlight.dll and Microsoft.SharePoint.Client.Silverlight.Runtime.dll files.

Click the Open button to return to the Add Reference dialog.

Click the Add button to add the references to the project.

In MainPage.xaml, select the UserControl tag and set its width to 700, then click the Events button in the Properties window, and double-click the Loaded event.

Select the Grid control and click the Ellipsis button next to ColumnDefinitions in the Properties pane.

When the Collection Editor dialog appears, add three column definitions with the following widths:

Click the OK button to save the column definitions.

Add a StackPanel to the Grid control. In the text editor, remove any attributes on the newly added StackPanel tag.

Add a TreeView to the StackPanel control and set its Height to 270. In the text editor, remove any other attributes on the newly added TreeView tag.

Insert the following code just after the TreeView control:

<StackPanel Orientation="Horizontal" Margin="0,4,0,0">
  <TextBox Height="23" Name="nameTextBox" Width="160" />
  <Button Content="Add Folder" Height="23" Name="addFolderButton" Width="75"
    Margin="4,0,0,0" />
</StackPanel>

With the addFolderButton selected, click the Events button in the Properties window and double-click the Click event.

Add a GridSplitter to the Grid control and configure the following properties and remove any other properties:

Add a StackPanel to the Grid control and set its Grid.Column property to 2 and remove any other properties.

Inside the recently added StackPanel control, insert the following code:

<sdk:DataGrid Name="dataGrid1" AutoGenerateColumns="False" AllowDrop="True"
  Drop="dataGrid1_Drop" Height="270">
  <sdk:DataGrid.Columns>
    <sdk:DataGridTextColumn Header="Title" Binding="{Binding Title}" />
    <sdk:DataGridTextColumn Header="Name" Binding="{Binding Name}" />
  </sdk:DataGrid.Columns>
</sdk:DataGrid>
<StackPanel Orientation="Horizontal" Margin="0,4,0,0">
  <Button Content="Delete Folder" Height="23" Name="deleteFolderButton"
    Width="75" />
  <Button Content="Delete File" Height="23" Name="deleteFileButton"
    Width="75" Margin="4,0,0,0" />
</StackPanel>

Double-click each of the deleteFolderButton and deleteFileButton controls to add event handlers for their Click events.

Compare your MainPage control with Figure 14-13 and make any adjustments.

In the MainPage.xaml.cs file, add the following using statement at the top of the file:

using Microsoft.SharePoint.Client;

Figure 14.12. Figure 14-13

Add the following fields inside the MainPage class:

private TreeViewItem lastExpanded;
private TreeViewItem lastSelected;

Add the following methods inside the MainPage class:

private void AddFolderToTree(Folder folder, ItemCollection parentCollection) {
}

private void AddLoadingNode(TreeViewItem parent) {
}

private void OnFailure(object sender, ClientRequestFailedEventArgs e) {
}

private void OnFileSuccess(object sender, ClientRequestSucceededEventArgs e) {
}

private void OnFolderSuccess(object sender,
  ClientRequestSucceededEventArgs e) {
}

private void OnUploadedSuccess(object sender,
  ClientRequestSucceededEventArgs e) {
}

private void RefreshFiles(TreeViewItem item) {
}

private void item_Selected(object sender, RoutedEventArgs e) {
}

private void treeViewItem_Expanded(object sender, RoutedEventArgs e) {
}

private void dataGrid1_Drop(object sender, DragEventArgs e) {
}

Inside the addFolderButton_Click method, insert the following code to add a new subfolder to the selected folder:

ClientContext context = ClientContext.Current;

if (treeView1.SelectedItem != null) {
  TreeViewItem item = (TreeViewItem)treeView1.SelectedItem;
  Folder folder = (Folder)item.Tag;

  if (!string.IsNullOrEmpty(nameTextBox.Text)) {
    folder.Folders.Add(nameTextBox.Text);

    context.ExecuteQueryAsync(OnFolderSuccess, OnFailure);
  }
}

Inside the AddFolderToTree method, insert the following code to add folders to the TreeView control:

TreeViewItem item = new TreeViewItem();
item.Header = folder.Name;
item.Tag = folder;
item.Expanded += new RoutedEventHandler(treeViewItem_Expanded);
item.Selected += new RoutedEventHandler(item_Selected);

item.Dispatcher.BeginInvoke(delegate() {
  AddLoadingNode(item);

  lastExpanded.Items.Add(item);
});

In the AddLoadingNode method, insert the following code to add a dummy node to unexpanded folders so that the expand icon appears in case the folder has subfolders:

TreeViewItem loading = new TreeViewItem();
loading.Header = "Loading...";
parent.Items.Add(loading);

In the dataGrid1_Drop method, insert the following code to upload any files that are dropped on the DataGrid control to the selected folder:

ClientContext context = ClientContext.Current;

if (treeView1.SelectedItem != null) {
  TreeViewItem item = (TreeViewItem)treeView1.SelectedItem;
  Folder folder = (Folder)item.Tag;

  if (e.Data != null && e.Data.GetDataPresent(DataFormats.FileDrop)) {
    System.IO.FileInfo[] files = e.Data.GetData(DataFormats.FileDrop) as
System.IO.FileInfo[];

    if (files != null) {
      foreach (System.IO.FileInfo file in files) {
        using (System.IO.FileStream fs = file.OpenRead()) {
          byte[] b = new byte[fs.Length];
          fs.Read(b, 0, (int)fs.Length);
          fs.Close();

          FileCreationInformation info =
            new FileCreationInformation();
          info.Content = b;
          info.Overwrite = false;
          info.Url = file.Name;

          folder.Files.Add(info);
        }
      }

      context.ExecuteQueryAsync(OnUploadedSuccess, OnFailure);
    }
  }
}

In the deleteFileButton_Click method, insert the following code to delete the selected file in the DataGrid control:

ClientContext context = ClientContext.Current;

if (dataGrid1.SelectedItem is File) {
  File file = (File)dataGrid1.SelectedItem;

  file.DeleteObject();
  context.ExecuteQueryAsync(OnFolderSuccess, OnFailure);
}

In the deleteFolderButton_Click method, insert the following code to delete the selected folder in the TreeView control:

ClientContext context = ClientContext.Current;

if (treeView1.SelectedItem != null) {
  TreeViewItem item = (TreeViewItem)treeView1.SelectedItem;
  Folder folder = (Folder)item.Tag;

  folder.DeleteObject();
  context.ExecuteQueryAsync(OnFolderSuccess, OnFailure);
}

In the item_Selected method, insert the following code to call the RefreshFiles method when a folder is selected in the TreeView control:

TreeViewItem item = (TreeViewItem)sender;

RefreshFiles(item);

In the OnFailure method, insert the following code to display any error messages from the call to SharePoint:

this.Dispatcher.BeginInvoke(delegate() {
  MessageBox.Show(e.Message);
});

In the OnFileSuccess method, insert the following code to bind the list of files for the selected folder to the DataGrid control:

lastSelected.Dispatcher.BeginInvoke(delegate() {
  Folder folder = (Folder)lastSelected.Tag;

  dataGrid1.ItemsSource = folder.Files;
});

In the OnFolderSuccess method, insert the following code to add the subfolders for the expanded folder to the TreeView control:

lastExpanded.Dispatcher.BeginInvoke(delegate() {
  Folder folder = (Folder)lastExpanded.Tag;

  lastExpanded.Items.Clear();

  var results = from f in folder.Folders.ToArray()
         orderby f.Name
         select f;

  foreach (Folder child in results) {
    AddFolderToTree(child, lastExpanded.Items);
  }
});

In the OnUploadedSuccess method, insert the following code to refresh the files in the DataGrid control after a file has been uploaded to the folder:

treeView1.Dispatcher.BeginInvoke(delegate() {
  if (treeView1.SelectedItem != null) {
    RefreshFiles((TreeViewItem)treeView1.SelectedItem);
  }
});

In the RefreshFiles method, insert the following code to request the files in the selected folder from SharePoint:

ClientContext context = ClientContext.Current;

Folder folder = (Folder)item.Tag;

lastSelected = item;

dataGrid1.ItemsSource = null;

context.Load(folder.Files);
context.ExecuteQueryAsync(OnFileSuccess, OnFailure);

In the treeViewItem_Expanded method, insert the following code to request the subfolders for the expanded folder in the TreeView control:

TreeViewItem item = (TreeViewItem)sender;

if (item.Items.Count > 0 && (item.Items[0] as TreeViewItem).Tag == null) {
  ClientContext context = ClientContext.Current;

  Folder folder = (Folder)item.Tag;

  lastExpanded = item;

  context.Load(folder.Folders);
  context.ExecuteQueryAsync(OnFolderSuccess, OnFailure);
}

In the UserControl_Loaded method, insert the following code to add the root node to the TreeView control and request the subfolders of the site's root folder from SharePoint:

ClientContext context = ClientContext.Current;

TreeViewItem root = new TreeViewItem();
root.Header = "/";
root.Tag = context.Web.RootFolder;
root.Expanded += new RoutedEventHandler(treeViewItem_Expanded);
root.Selected += new RoutedEventHandler(item_Selected);

AddLoadingNode(root);

treeView1.Items.Add(root);

Compile the project by selecting Build

Check the Error List pane for any errors and fix them before continuing.

Click the Show All Files button in the Solution Explorer pane.

In the Solution Explorer pane, expand the Bin and Debug folders and select the XAP file.

Double-click the value of the Full Path property in the Properties pane to select it and press Ctrl+C to copy the path to the clipboard.

Navigate your browser to a document library in your SharePoint site.

Select Upload Document from the Documents tab on the ribbon.

In the Upload Document dialog, click the Browse button.

Paste the file path from Step 45 and click Open.

Click the OK button to close the Upload Document dialog and upload the XAP file to SharePoint.

When the document library is updated with your file, right-click its name and choose Copy Hyperlink to copy the URL of your XAP file.

Navigate your browser to a web part page in your site.

Select Edit Page from the Site Actions menu.

Select Web Part from the Insert tab on the ribbon.

Choose Forms from the Categories list and select HTML Form Web Part from the Web Parts list.

Edit the web part's properties and click the Source Editor button.

In the Text Editor dialog, insert the following code, replacing XAPFileUrl with the URL from Step 51 and SiteUrl with the absolute URL to the site:

<div id="SilverlightObjectDiv" style="display:block">
<object id="SilverlightObjectTag" data="data:application/x-silverlight-2,"
type="application/x-silverlight-2" style="display:block" height="400px"
width="600px" class="ms-dlgDisable">
<param name="source" value="XAPFileUrl"/>
<param name="background" value="white" />
<param name="initparams" value="MS.SP.url=SiteUrl" />
<param name="windowless" value="false" />

<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40624.0"
  style="text-decoration: none;">
<img src="http://go.microsoft.com/fwlink/?LinkId=108181"
  alt="Get Microsoft Silverlight" style="border-style: none"/>
</a>

</object>
<iframe id="_sl_historyFrame"
  style='visibility:hidden;height:0;width:0;border:0px;display:block'>
</iframe>
</div>

Select the location to put the web part from the "Add Web Part to" drop-down list and click the Add button.

In the Silverlight Web Part dialog, paste the URL from Step 51 and click the OK button.

Configure the web part properties as follows:

Select Save & Close from the Page tab on the ribbon.

Refresh the page in your browser.

Expand the folders in the TreeView control to show the subfolders loading dynamically.

Select some of the folders in the TreeView control and watch the files appear in the DataGrid control.

Select one of the folders in the TreeView control, enter the name for a folder in the textbox under the TreeView control, and click the Add Folder button.

Select the newly created folder.

Drag some files from your workstation and drop them on top of the DataGrid control.

Watch the DataGrid refresh with the addition of your files.

Select the root folder for a document library and repeat Step 67.

Open a new browser window and navigate to the document library from Step 69.

Notice that the files are in the document library.

Select each of the files you uploaded in the DataGrid control and click the Delete File button.

Watch the files disappear from the DataGrid control and from the document library.

Select the folder you created in Step 65 and click the Delete Folder button.

Open Visual Studio 2010 from your Start menu.

Select File

Choose Silverlight from the list of templates and select Silverlight Application from the list of applications.

Enter a name for your project and click the OK button.

In the New Silverlight Application dialog, uncheck the "Host the Silverlight application in a new Web site" checkbox, ensure that Silverlight 4 is selected in the drop-down list, and click the OK button.

When the project is loaded, the MainPage.xaml file should automatically open. If it does not open, double-click the file in the Solution Explorer pane.

Right-click the References folder in the Solution Explorer pane and choose Add Reference. The Add Reference dialog appears.

Click the Browse button and navigate to the location of the Microsoft.SharePoint.Client.Silverlight.dll and Microsoft.SharePoint.Client.Silverlight.Runtime.dll files.

Click the Open button to return to the Add Reference dialog.

Click the Add button to add the references to the project.

In MainPage.xaml, set the following property values on the UserControl tag:

With the UserControl selected, click the Events button in the Properties window and double-click the Loaded event.

In MainPage.xaml, set the following property values on the Grid tag:

Add a TreeView control to the Grid control and set the following properties:

Add another TreeView control to the Grid control and set the following properties:

Add a Label to the Grid control and set the following properties:

Add another Label to the Grid control and set the following properties:

Add a Button to the Grid control and set the following properties:

Add another Button to the Grid control and set the following properties:

Add another Button to the Grid control and set the following properties:

Add another Button to the Grid control and set the following properties:

Add another Label to the Grid control and set the following properties:

Add another Label to the Grid control and set the following properties:

Add a TextBox to the Grid control and set the following properties:

Add another TextBox to the Grid control and set the following properties:

Add a checkbox to the Grid control and set the following properties:

Double-click each of the buttons to generate event handlers for their Click events.

Compare your MainPage control with Figure 14-15 and make any necessary modifications.

Figure 14.14. Figure 14-15

In the MainPage.xaml.cs file, add the following using statement to the top of the page:

using Microsoft.SharePoint.Client;

Add the following field to the MainPage class:

private TreeViewItem lastExpanded;

Insert the following methods inside the MainPage class:

void AddLoadingNode(TreeViewItem parent) {
}

void AddNodeToTree(NavigationNode node, ItemCollection parentCollection) {
}

void OnFailure(object sender, ClientRequestFailedEventArgs e) {
}

void OnNodeSuccess(object sender, ClientRequestSucceededEventArgs e) {
}

void OnSuccess(object sender, ClientRequestSucceededEventArgs e) {
}

void treeViewItem_Expanded(object sender, RoutedEventArgs e) {
}

In the AddLoadingNode method, insert the following code to add a dummy node to the TreeView control so that the expand icon appears next to the node:

TreeViewItem loading = new TreeViewItem();
loading.Header = "Loading...";
parent.Items.Add(loading);

In the AddNodeToTree method, insert the following code to add a NavigateNode to the TreeView control and set the new node's tooltip to the value of the NavigateNode's Url property:

TreeViewItem item = new TreeViewItem();
item.Header = node.Title;
item.Tag = node;
ToolTipService.SetToolTip(item, "Url = " + node.Url);
item.Expanded += new RoutedEventHandler(treeViewItem_Expanded);

item.Dispatcher.BeginInvoke(delegate() {
  AddLoadingNode(item);

  parentCollection.Add(item);
});

In the addQuickLaunchButton_Click method, insert the following code to add a NavigationNode to the selected node in the TreeView control:

ClientContext context = ClientContext.Current;
Web site = context.Web;

if (!string.IsNullOrEmpty(titleTextBox.Text)) {
   NavigationNodeCollection nodes;

  if (quickLaunchTreeView.SelectedItem == null) {
    nodes = site.Navigation.QuickLaunch;
  } else {
    TreeViewItem item = (TreeViewItem)quickLaunchTreeView.SelectedItem;
    NavigationNode parentNode = (NavigationNode)item.Tag;
    nodes = parentNode.Children;
  }

  NavigationNodeCreationInformation info =
    new NavigationNodeCreationInformation();
  info.Title = titleTextBox.Text;
  info.Url = urlTextBox.Text;
  info.AsLastNode = true;
  if (isExternalLinkCheckBox.IsChecked.HasValue
&& isExternalLinkCheckBox.IsChecked.Value) {
    info.IsExternal = true;
  } else {
    info.IsExternal = false;
  }

  nodes.Add(info);

context.ExecuteQueryAsync(OnSuccess, OnFailure);
}

In the addTopNavButton_Click method, insert the following code to add a NavigationNode to the selected node in the TreeView control:

ClientContext context = ClientContext.Current;
Web site = context.Web;

if (!string.IsNullOrEmpty(titleTextBox.Text)) {
  NavigationNodeCollection nodes;

  if (topNavTreeView.SelectedItem == null) {
    nodes = site.Navigation.TopNavigationBar;
  } else {
    TreeViewItem item = (TreeViewItem)topNavTreeView.SelectedItem;
    NavigationNode parentNode = (NavigationNode)item.Tag;
    nodes = parentNode.Children;
  }

  NavigationNodeCreationInformation info =
    new NavigationNodeCreationInformation();
  info.Title = titleTextBox.Text;
  info.Url = urlTextBox.Text;
  info.AsLastNode = true;
  if (isExternalLinkCheckBox.IsChecked.HasValue
&& isExternalLinkCheckBox.IsChecked.Value) {
    info.IsExternal = true;
  } else {
    info.IsExternal = false;
  }

  nodes.Add(info);

  context.ExecuteQueryAsync(OnSuccess, OnFailure);
}

In the deleteQuickLaunchButton_Click method, insert the following code to delete the selected node and its children from the Quick Launch bar:

ClientContext context = ClientContext.Current;

if (quickLaunchTreeView.SelectedItem != null) {
  TreeViewItem item = (TreeViewItem)quickLaunchTreeView.SelectedItem;
  NavigationNode node = (NavigationNode)item.Tag;

  node.DeleteObject();

  context.ExecuteQueryAsync(OnSuccess, OnFailure);
}

In the deleteTopNavButton_Click method, insert the following code to delete the selected node and its children from the Top Navigation bar:

ClientContext context = ClientContext.Current;

if (topNavTreeView.SelectedItem != null) {
  TreeViewItem item = (TreeViewItem)topNavTreeView.SelectedItem;

NavigationNode node = (NavigationNode)item.Tag;

  node.DeleteObject();

  context.ExecuteQueryAsync(OnSuccess, OnFailure);
}

In the OnFailure method, insert the following code to display any error messages from the call to SharePoint:

this.Dispatcher.BeginInvoke(delegate() {
  MessageBox.Show(e.Message);
});

In the OnNodeSuccess method, insert the following code to populate the expanded node with its children:

lastExpanded.Dispatcher.BeginInvoke(delegate() {
  NavigationNode node = (NavigationNode)lastExpanded.Tag;

  lastExpanded.Items.Clear();

  foreach (NavigationNode child in node.Children) {
    AddNodeToTree(child, lastExpanded.Items);
  }
});

In the OnSuccess method, insert the following code to populate the TreeViews with the Quick Launch bar and Top Navigation bar NavigationNode objects:

ClientContext context = ClientContext.Current;
Web site = context.Web;

quickLaunchTreeView.Dispatcher.BeginInvoke(delegate() {
  quickLaunchTreeView.Items.Clear();

  foreach (NavigationNode node in site.Navigation.QuickLaunch) {
    AddNodeToTree(node, quickLaunchTreeView.Items);
  }
});

topNavTreeView.Dispatcher.BeginInvoke(delegate() {
  topNavTreeView.Items.Clear();

  foreach (NavigationNode node in site.Navigation.TopNavigationBar) {
    AddNodeToTree(node, topNavTreeView.Items);
  }
});

In the treeViewItem_Expanded method, insert the following code to request the children of the node that is expanded:

TreeViewItem item = (TreeViewItem)sender;

if (item.Items.Count > 0 && (item.Items[0] as TreeViewItem).Tag == null) {
  ClientContext context = ClientContext.Current;

  NavigationNode node = (NavigationNode)item.Tag;

lastExpanded = item;

  context.Load(node.Children);
  context.ExecuteQueryAsync(OnNodeSuccess, OnFailure);
}

In the UserControl_Loaded method, insert the following code to request the Quick Launch and Top Navigation bars from SharePoint:

ClientContext context = ClientContext.Current;
Web site = context.Web;

context.Load(site.Navigation.QuickLaunch);
context.Load(site.Navigation.TopNavigationBar);

context.ExecuteQueryAsync(OnSuccess, OnFailure);

Compile the project by selecting Build

Check the Error List pane for any errors and fix them before continuing.

Click the Show All Files button in the Solution Explorer pane.

In the Solution Explorer pane, expand the Bin and Debug folders and select the XAP file.

Double-click the value of the Full Path property in the Properties pane to select it and press Ctrl+C to copy the path to the clipboard.

Navigate your browser to a document library in your SharePoint site.

Select Upload Document from the Documents tab on the ribbon.

In the Upload Document dialog, click the Browse button.

Paste the file path from Step 47 and click Open.

Click the OK button to close the Upload Document dialog and upload the XAP file to SharePoint.

When the document library is updated with your file, right-click its name and choose Copy Hyperlink to copy the URL of your XAP file.

Navigate your browser to a web part page in your site.

Select Edit Page from the Site Actions menu to place the page in Edit mode.

Select Web Part from the Insert tab on the ribbon.

Choose Media and Content from the Categories list and select Silverlight Web Part from the Web Parts list.

Select the location to put the web part from the "Add Web Part to" drop-down list and click the Add button.

In the Silverlight Web Part dialog, paste the URL from Step 53 and click the OK button.

Configure the web part properties as follows:

Select Save & Close from the Page tab on the ribbon.

Refresh the page in your browser.

Enter the following values in the Silverlight control and click the Add Quick Launch button:

Select the newly created node, enter the following values in the Silverlight control, and click the Add Quick Launch button:

Refresh the page to see the Quick Launch bar updated with your changes.

Select the Level 1 node and click the Delete Node button.

Refresh the page to see the Quick Launch bar updated with your changes.

Select the Home node, enter the following values in the Silverlight control, and click the Add Top Nav button. (Note that URL should be left blank.):

Select the newly created node, enter the following values in the Silverlight control, and click the Add Top Nav button:

Select the newly created node, enter the following values in the Silverlight control, and click the Add Top Nav button:

Select the newly created node, enter the following values in the Silverlight control, and click the Add Top Nav button:

Refresh the page to see the Top Navigation bar updated with your changes.

Select the Useful Sites node and click the Delete Node button.

Refresh the page to see the Top Navigation bar updated with your changes.