Silverlight Media Viewer Web Part for SharePoint

One of my blog readers asked me for help with a variant of the Silverlight Media Viewer, which is one of the Silverlight BluePrint samples, and he wondered why he couldn’t make it run on his machine.

First of all, at this time of writing, not all of the BluePrint samples seem to be converted yet to the released version of Silverlight 2, and the Media Viewer is not among the converted ones. So I made the necessary changes to make it compatible for Silverlight 2. These changes include setting the MinimumVersion property of the SilverlightControl to 2.0.31005.0.

The Media Viewer is a web part that hosts a Silverlight application that is uploaded in a document library. When you want to add the web part to a page in your SharePoint site you can find it in the Silverlight Web Parts category of the Web Part Gallery.

If you work with a standard Picture library, the Media Viewer will show up as the classic Media Viewer from the BluePrint samples with all pictures listed in the list box at the left of the web part.

But you can also arrange your pictures in categories. In that case you have a custom list containing the different categories and a lookup field in the picture library referencing the category list. The Media Viewer shows up with an extra list box at the bottom of the web part. Clicking on one of the categories causes the left list box to display the pictures of the selected category.

 

The web part contains a custom editor part in which you can configure following options:

• the document library where you uploaded the Silverlight application
• the picture library that contains the pictures
• the type of media: picture or movie
• the list containing the categories
• a field that will be used as the caption of the button
• a field that contains an URL to a picture that can be used as the background of the button

 

 

 

 

 

 

 

 

 

 

If you don’t choose a document library from the first dropdown list, the Web Part will try to load the Silverlight application from the Shared Documents document library.

If you choose a Category list but no fields, the Title field will be used as button caption and the background of the button will be a simple glass button. With thanks to Michael for providing the code of his glass button.

The communication between SharePoint and Silverlight is established by passing the necessary data through the InitParameters property of the SilverlightControl.

// parameters passed are the name of the selected picture library, the media
// type and the url of the SharePoint site
string parameters = "lib=" + mediaLibName + ",type=" + mediaType.ToString() 
   + ",url=" + SPContext.Current.Web.Url;

if (!string.IsNullOrEmpty(categoryListName) && !categoryListName.StartsWith("Select"))
{
   parameters += ",evlist=" + categoryListName;

   if (!string.IsNullOrEmpty(categoryFieldName) && !categoryFieldName.StartsWith("Select"))
       parameters += ",caption=" + categoryFieldName;
   if (!string.IsNullOrEmpty(categoryPictureUrl) && !categoryPictureUrl.StartsWith("Select"))
       parameters += ",pic=" + categoryPictureUrl;
}
silverlightControl.InitParameters = parameters; 

Within the Silverlight application the SharePoint data from the picture library and category list are retrieved using the HttpWebRequest technique which on its turn can call the standard SharePoint web services. As this runs completely asynchronous and on different background threads now (this is different form the way it worked in Beta 2), I had to make some changes to the code to make this work again for Silverlight 2.

In Beta 2, when I initialized the HttpWebRequest object, I defined a callback method for both the BeginGetRequestStream method and the BeginGetResponseStream method. Now you have to define a callback for the BeginGetResponse method within the callback method passed in the BeginGetRequestStream.

This is the initialization code of the HttpWebRequest object:

internal void BuildPreviewBar(string title)
{
   HttpWebRequest request = (HttpWebRequest)WebRequest.Create(
   new Uri(siteUrl + "/_vti_bin/Lists.asmx", UriKind.Absolute));
   request.Method = "POST";
   request.ContentType = "application/soap+xml; charset=utf-8";
   request.Headers["ClientType"] = "Silverlight";
   // changed for additionally handling the event results
   request.Headers["ListType"] = "piclib";
   if (title != null)
      request.Headers["Event"] = title;
   request.BeginGetRequestStream(new AsyncCallback(RequestCallback), request);
}

Within the callback method for the BeginGetRequestStream method, you can define a callback method for the BeginGetResponse method. But before you can define that callback, you have to make sure to call the EndGetRequestStream method and to close the stream.

body = request.EndGetRequestStream(asyncResult);
System.Text.UTF8Encoding encoding = new System.Text.UTF8Encoding();
byte[] formBytes = encoding.GetBytes(envelope);
body.Write(formBytes, 0, formBytes.Length);
body.Close();
request.BeginGetResponse(new AsyncCallback(ResponseCallback), request); 

Within the callback method for the BeginGetResponse method you first have to retrieve the request object of type HttpWebRequest and then call the EndGetResponse method on it to retrieve the response object of HttpWebResponse. Use the GetResponseStream method to retrieve the response. If the status is OK you can store the response in a class-level variable of type string and call the BeginInvoke method of the Dispatcher to return on the UI thread. Pass in the name of a method to indicate the Dispatcher where you want to continue.

private void ResponseCallback(IAsyncResult asyncResult)
{
   HttpWebRequest request = (HttpWebRequest)asyncResult.AsyncState;
   HttpWebResponse response = (HttpWebResponse)request.EndGetResponse(asyncResult);
   Stream content = response.GetResponseStream();
   if (response.StatusCode == HttpStatusCode.OK)
   {
       using (StreamReader reader = new StreamReader(content))
       {
           responsestring = reader.ReadToEnd();
       }
       try
       {
           // changed for additionally handling the event results
           if (request.Headers["ListType"] != null)
           {
               switch (request.Headers["ListType"])
               {
                   case "event":
                      this.Dispatcher.BeginInvoke(ProcessResponseEvents);
                      break;
                   case "piclib":
                      this.Dispatcher.BeginInvoke(ProcessResponsePictureLibrary);
                      break;
               }
           }
       }
       catch { }
   }
} 

The Silverlight application of the original BluePrint sample (for Silverlight 2 Beta 2) contained one Page.xaml with all Silverlight controls and styles on it. To have a better insight in it, I encapsulated the different controls and styles in different user controls.

I wanted to keep the SharePoint communication outside the controls and in the Page.xaml.cs code behind. This has some implications for the events: I had to create and raise custom events. The event arguments in Silverlight are of type RoutedEventArgs and inheritance is not supported. So I had to work with the standard Silverlight event arguments and place the significant data into properties of the user controls before raising the custom event.

The ItemSource property of the list boxes is set to use data binding.

As you can see there is a difference between the vertical list box at the left of the Silverlight application and the horizontal list box at the bottom of the Silverlight application. The horizontal listbox is a normal listbox with only a custom style template for the item to be able to use the glass button.

<UserControl x:Class="SL.XAML.MediaViewer.HorizontalListBox"
    xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation
    xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
    xmlns:my="clr-namespace:SL.XAML.MediaViewer"
    Width="690" Height="90" Background="Transparent">
   <UserControl.Resources>
      <Style TargetType="ListBox" x:Key="EventListBoxStyle">
          <Style.Setters>
              <Setter Property="Background" Value="Transparent" />
              <Setter Property="ItemsPanel">
                 <Setter.Value>
                     <ItemsPanelTemplate>
                         <StackPanel Orientation="Horizontal"/>
                     </ItemsPanelTemplate>
                 </Setter.Value>
              </Setter>
          </Style.Setters>
      </Style>
   <DataTemplate x:Key="EventButtonTemplate" >
          <Grid x:Name="EventElement">
              <my:GlassButton ButtonClick="GlassButton_ButtonClick" />
          </Grid>
      </DataTemplate>
   </UserControl.Resources>

 

    <Grid x:Name=”LayoutRoot” Background=”Transparent” >

      <ListBox x:Name=”EventListBox” Height=”90″ Width=”690″ Style=”{StaticResource EventListBoxStyle}”
                       ItemTemplate=”{StaticResource EventButtonTemplate}” />
   </Grid>
</UserControl>

 The vertical list box is a more customized control using styles for the ListBoxItem and the ScrollViewer:

<UserControl x:Class="SL.XAML.MediaViewer.VerticalListBox"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="86" Height="600" Background="Transparent">
    <UserControl.Resources>
        <!-- Linear Brushes for the preview controls -->
        <LinearGradientBrush x:Key="BorderGradientBrush"  StartPoint="0,0" EndPoint="1,1">
            <GradientStop Color="Turquoise"  Offset="0.0" />
            <GradientStop Color="Black" Offset="0.75" />
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="ActiveBorderGradientBrush"  StartPoint="0.2,0.2" EndPoint="1,1">
            <GradientStop Color="Turquoise" Offset="0.0" />
            <GradientStop Color="DarkTurquoise"  Offset="1" />
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="SelectedGradientBrush" StartPoint="0,0" EndPoint="1,1">
            <GradientStop Color="White" Offset="0.0" />
            <GradientStop Color="DarkTurquoise" Offset="0.85" />
        </LinearGradientBrush>
        <!-- Style for the List Item -->
        <Style x:Key="PreviewPictureItemStyle" TargetType="ListBoxItem">
            <Setter Property="Foreground" Value="#FF000000" />
            <Setter Property="Width" Value="80" />
            <Setter Property="Height" Value="80" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                        <Grid x:Name="PreviewElement" MouseEnter="PreviewElement_MouseEnter" MouseLeave="PreviewElement_MouseLeave"
                              MouseLeftButtonDown="PreviewElement_MouseLeftButtonDown">
                            <Border BorderBrush="{StaticResource BorderGradientBrush}"
                                    BorderThickness="5" CornerRadius="4" Margin="2" Background="Transparent" >
                                <Image Width="70" Height="70" Stretch="Fill" Source="{Binding Url}" />
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="PreviewMovieItemStyle" TargetType="ListBoxItem">
            <Setter Property="Foreground" Value="#FF000000" />
            <Setter Property="Width" Value="80" />
            <Setter Property="Height" Value="80" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                        <Grid x:Name="PreviewElement" MouseEnter="PreviewElement_MouseEnter"
                              MouseLeave="PreviewElement_MouseLeave" MouseLeftButtonDown="PreviewElement_MouseLeftButtonDown">
                            <Border BorderBrush="{StaticResource BorderGradientBrush}"
                                    BorderThickness="5" CornerRadius="4" Margin="2" Background="Transparent" >
                                <MediaElement Width="70" Height="70" Stretch="Fill" AutoPlay="True" Source="{Binding PreviewUri}" />
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <!-- Style for the ScrollViewer -->
        <Style x:Key="ScrollViewerStyle1" TargetType="ScrollViewer">
            <Setter Property="IsEnabled" Value="true"/>
            <Setter Property="Foreground" Value="#FF000000"/>
            <Setter Property="BorderBrush" Value="#FFA4A4A4"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="HorizontalContentAlignment" Value="Left"/>
            <Setter Property="VerticalContentAlignment" Value="Top"/>
            <Setter Property="Cursor" Value="Arrow"/>
            <Setter Property="FontSize" Value="11"/>
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="VerticalScrollBarVisibility" Value="Visible"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ScrollViewer">
                        <Border BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="5">
                            <Grid Background="Transparent">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*"/>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="Auto"/>
                                </Grid.ColumnDefinitions>
                                <Rectangle Grid.Column="1" Grid.Row="1" Fill="Transparent" />
                                <ScrollBar Cursor="Arrow" x:Name="VerticalScrollBar" HorizontalAlignment="Stretch"
                                           Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
                                           Grid.Row="0" Orientation="Vertical" Opacity="1"
                                           ViewportSize="{TemplateBinding ViewportHeight}"
                                           SmallChange="1"
                                           Maximum="{TemplateBinding ScrollableHeight}"
                                           Minimum="0" Value="{TemplateBinding VerticalOffset}"  />
                                <ScrollContentPresenter x:Name="ScrollContentPresenter" Cursor="{TemplateBinding Cursor}"
                                           Margin="0,18,0,18"
                                           Grid.Column="0" Grid.Row="0" Content="{TemplateBinding Content}"
                                           ContentTemplate="{TemplateBinding ContentTemplate}"
                                           />
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <!-- Style for the ListBox -->
        <Style TargetType="ListBox" x:Key="PreviewListBoxStyle">
            <Setter Property="ItemContainerStyle" Value="{StaticResource PreviewMovieItemStyle}" />
            <!-- <Setter Property="Width" Value="86" /> -->
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBox">
                        <Grid x:Name="LayoutRoot">
                            <Border Background="Transparent" CornerRadius="5" Width="86">
                                <ScrollViewer x:Name="PreviewScrollViewer" Width="86"
                                              HorizontalScrollBarVisibility="Disabled"
                                              VerticalScrollBarVisibility="Auto"
                                              Style="{StaticResource ScrollViewerStyle1}"                                            
                                              >
                                    <ItemsPresenter />
                                </ScrollViewer>
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <ListBox x:Name="PreviewListBox" Height="600" Width="86"
                 Style="{StaticResource PreviewListBoxStyle}" >
        </ListBox>
    </Grid>
</UserControl>

If you want to run the sample in your SharePoint environment and you didn’t yet configure it for Silverlight, read this blog post first but also make sure that your read the bottom of this post  otherwise the SharePoint web services will not be working anymore.

You can download the source code here.