Right-click
the MainPage.xaml file in the Solution Explorer, and select View Code.
Amend the code in the Silverlight code-behind as shown in the following
code listing:
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.Media.Imaging;
using System.Windows.Shapes;
using Silverlight_Media_Player.AzureImagesWCFService;
using System.Xml;
using System.Xml.Linq;
using System.Linq.Expressions;
using Microsoft.SharePoint.Client;
namespace Silverlight_Media_Player
{
public partial class MainPage : UserControl
{
List<ImageInfo> listOfImages = new List<ImageInfo>();
GetAzureStorageDataClient myServiceProxy = new GetAzureStorageDataClient();
string imageName = "";
string imageURI = "";
string azureImageName = "";
string azureImageURI = "";
string azureImageCoolness = "";
string azureImageNotes = "";
string mySPSite = "";
public MainPage()
{
InitializeComponent();
}
private void btnLoadImage_Click(object sender, RoutedEventArgs e)
{
myServiceProxy.GetDataCompleted += new
EventHandler<GetDataCompletedEventArgs>(
myServiceProxy_GetDataCompleted);
myServiceProxy.GetDataAsync();
}
void myServiceProxy_GetDataCompleted(object sender,
GetDataCompletedEventArgs e)
{
cmbobxImages.Items.Clear();
var returnBlobData = e.Result;
XDocument blobXMLData = XDocument.Parse(returnBlobData);
foreach (var p in blobXMLData.Descendants("Blob"))
{
ImageInfo tempImage = new ImageInfo();
tempImage.imageName = p.Element("Name").Value;
tempImage.imageURL = p.Element("Url").Value;
listOfImages.Add(tempImage);
cmbobxImages.Items.Add(p.Element("Name").Value);
imageName = p.Element("Name").Value;
imageURI = p.Element("Url").Value;
};
}
private void cmbobxImages_SelectionChanged(
object sender, SelectionChangedEventArgs e)
{
UpdateUIControlProperties();
Image azureImage = new Image();
azureImage.Width = 387;
azureImage.Height = 299;
azureImage.Stretch = Stretch.UniformToFill;
Uri azureURI = new Uri(imageURI, UriKind.Absolute);
ImageSource azureImageSource = new
System.Windows.Media.Imaging.BitmapImage(azureURI);
azureImage.SetValue(Image.SourceProperty, azureImageSource);
azureImageCanvas.Children.Clear();
azureImageCanvas.Children.Add(azureImage);
}
private void UpdateUIControlProperties()
{
string fileNameFilter = "";
fileNameFilter = cmbobxImages.SelectedValue.ToString();
var query = from filteredImage in listOfImages
where filteredImage.imageName == fileNameFilter
select filteredImage;
foreach (var item in query)
{
imageName = item.imageName;
imageURI = item.imageURL;
}
imageName = imageName.Substring(0, imageName.LastIndexOf("."));
txtbxName.Text = imageName;
txtbxLink.Text = imageURI.ToString();
}
private void btnClearFields_Click(object sender, RoutedEventArgs e)
{
txtbxNotes.Text = "";
}
private void btnSaveToSharePoint_Click(object sender, RoutedEventArgs e)
{
ConnectToSharePoint();
}
private void ConnectToSharePoint()
{
azureImageName = txtbxName.Text;
azureImageURI = txtbxLink.Text;
azureImageCoolness = cmbobxPriority.SelectionBoxItem.ToString();
azureImageNotes = txtbxNotes.Text;
mySPSite = "http://blueyonderdemo";
ClientOM.ClientContext mySPContext = new ClientContext(mySPSite);
ClientOM.List azureImageList = mySPContext.Web.Lists.GetByTitle(
"Azure Images");
mySPContext.Load(mySPContext.Web);
mySPContext.Load(azureImageList);
ListItemCreationInformation newImageRecord = new
ListItemCreationInformation();
ClientOM.ListItem newImage = azureImageList.AddItem(newImageRecord);
newImage["Title"] = azureImageName;
newImage["Link"] = azureImageURI;
newImage["Coolness"] = azureImageCoolness;
newImage["Notes"] = azureImageNotes;
newImage.Update();
mySPContext.ExecuteQueryAsync(OnItemAddedSucceeded, OnItemAddedFailed);
}
private void OnItemAddedSucceeded(Object sender,
ClientOM.ClientRequestSucceededEventArgs args)
{
MessageBox.Show("SharePoint List Updated!");
}
private void OnItemAddedFailed(Object sender,
ClientOM.ClientRequestFailedEventArgs args)
{
Dispatcher.BeginInvoke(() => ShowErrorMessages(args));
}
private void ShowErrorMessages(ClientRequestFailedEventArgs args)
{
MessageBox.Show(args.Message + " " + args.ErrorValue);
}
}
}
In this large chunk of code, you’re doing three things: retrieving the information you need from BLOB storage (that is, the name and image URI), displaying the image from BLOB
storage in the Silverlight image viewer, and adding user-entered
information into a SharePoint list by using the SharePoint client object
model.
To retrieve information from BLOB storage, you’re implementing the WCF service you deployed to your local IIS. You could instead deploy this service to Windows
Azure as a web role, in which case you could use this service in
SharePoint Online as well as SharePoint Server. You can see that the
core code is implemented in the myServiceProxy_GetDataCompleted event. Here you can see that you’re representing the return XML data as a var called returnBlobdata and then you’re using an XDocument
object to parse the return data. You might have a variation on how you
serialize and deserialize data, so you don’t necessarily have to use XDocument. You’re then cycling through the return data and adding the information to the combo box (cmbobxImages):
...
void myServiceProxy_GetDataCompleted(object sender,
GetDataCompletedEventArgs e)
{
cmbobxImages.Items.Clear();
var returnBlobData = e.Result;
XDocument blobXMLData = XDocument.Parse(returnBlobData);
foreach (var p in blobXMLData.Descendants("Blob"))
{
ImageInfo tempImage = new ImageInfo();
tempImage.imageName = p.Element("Name").Value;
tempImage.imageURL = p.Element("Url").Value;
listOfImages.Add(tempImage);
cmbobxImages.Items.Add(p.Element("Name").Value);
imageName = p.Element("Name").Value;
imageURI = p.Element("Url").Value;
};
}
...
After the data has been added to the combo box control, you can select an image to be displayed in the Image control (azureImage). The event that manages this display and redisplay of images is the cmbobxImages_SelectionChanged event. To properly display the metadata, this code uses a helper function (UpdateUIControlProperties) to get the right name and URI of the image in the appropriate textboxes (which are disabled for user entry). The cmbobxImages_SelectionChanged event then creates a new instance of an Image object, sets the properties of the image, and then sets the source of the image to be displayed in the Silverlight control:
...
private void cmbobxImages_SelectionChanged(
object sender, SelectionChangedEventArgs e)
{
UpdateUIControlProperties();
Image azureImage = new Image();
azureImage.Width = 387;
azureImage.Height = 299;
azureImage.Stretch = Stretch.UniformToFill;
Uri azureURI = new Uri(imageURI, UriKind.Absolute);
ImageSource azureImageSource = new
System.Windows.Media.Imaging.BitmapImage(azureURI);
azureImage.SetValue(Image.SourceProperty, azureImageSource);
azureImageCanvas.Children.Clear();
azureImageCanvas.Children.Add(azureImage);
}
private void UpdateUIControlProperties()
{
string fileNameFilter = "";
fileNameFilter = cmbobxImages.SelectedValue.ToString();
var query = from filteredImage in listOfImages
where filteredImage.imageName == fileNameFilter
select filteredImage;
foreach (var item in query)
{
imageName = item.imageName;
imageURI = item.imageURL;
}
imageName = imageName.Substring(0, imageName.LastIndexOf("."));
txtbxName.Text = imageName;
txtbxLink.Text = imageURI.ToString();
}
...
Although more illustrative than functional, the third part of the
application enables you to add data to a SharePoint list based on
user-entered text. This is handled within the ConnectToSharePoint
method, which not only connects to SharePoint but also takes
information from the user controls within the Silverlight application
and then adds the information in those controls to a list called Azure Images. The key point here is that you can use the SharePoint client object model to inject information programmatically into SharePoint—thus creating a connection with your BLOB storage metadata. The use of the SharePoint client object model can equally apply to SharePoint Server and SharePoint Online. The key code for this is the creation of the context by using the ClientContext object, which establishes a connection with your SharePoint site. You set several properties for the ClientContext
object, such as the site to which you’re connecting, the list with
which you want to interact, and so on. You also must explicitly create
the list item and set its properties, which is reflected in the
following code through the newImage object (which maps back to properties of the UI controls) and the call to the Update method. You could, of course, optimize the code to map directly to the user control properties as opposed to having a string variable intermediary. The final event that is called is the ExecuteQueryAsync method, which takes all of the code within the ConnectToSharePoint method and batch processes it against the SharePoint server. The result is a new line-item entry in the Azure Images list:
...
private void ConnectToSharePoint()
{
azureImageName = txtbxName.Text;
azureImageURI = txtbxLink.Text;
azureImageCoolness = cmbobxPriority.SelectionBoxItem.ToString();
azureImageNotes = txtbxNotes.Text;
mySPSite = "http://blueyonderdemo";
ClientOM.ClientContext mySPContext = new ClientContext(mySPSite);
ClientOM.List azureImageList = mySPContext.Web.Lists.GetByTitle(
"Azure Images");
mySPContext.Load(mySPContext.Web);
mySPContext.Load(azureImageList);
ListItemCreationInformation newImageRecord = new
ListItemCreationInformation();
ClientOM.ListItem newImage = azureImageList.AddItem(newImageRecord);
newImage["Title"] = azureImageName;
newImage["Link"] = azureImageURI;
newImage["Coolness"] = azureImageCoolness;
newImage["Notes"] = azureImageNotes;
newImage.Update();
mySPContext.ExecuteQueryAsync(OnItemAddedSucceeded, OnItemAddedFailed);
}
...
