In a radical and terrifying experiment, I’m going to document what happens when I try to extend the Silverlight Media Framework (SMF) for the Silverlight HyperVideo Player as I do it.
This article is part of the Mini-Tutorial Series
This article is part of the Silverlight HVP Documentation
My plan is to follow along with this video (part of the SMF documentation) and adapt it to extending the SMF player already embedded in the HVP source code so as to add a pseudo-links window to the right of the video player.
|
Note: Click on images below, to see full size.
|
Adding the SMF Player
-
I begin by checking out (updating) my copy of the Silverlight HVP source code (available here)
to version 52279
-
Opened the project and added a new view named Player
-
Added the DLLs required by the SMF (see Image)
-
Added the namespace for the Media Player to the top of the Player.xaml file
-
Added the code to create a player that begins playing immediately, using the URL provided by the SMF project, as shown in the code block:
xmlns:p="clr-namespace:Microsoft.SilverlightMediaFramework.Player;
assembly=Microsoft.SilverlightMediaFramework.Player"
<p:Player>
<p:CoreSmoothStreamingMediaElement AutoPlay="True"
SmoothStreamingSource="http://video3..../Manifest" />
</p:Player>
6. Added a block to MainPage.xaml to navigate to the new page:
<HyperlinkButton x:Name="PlayerLink"
Style="{StaticResource LinkStyle}"
NavigateUri="/Player"
TargetName="ContentFrame"
Content="{Binding Path=ApplicationStrings.PlayerPageTitle,
Source={StaticResource ResourceWrapper}}" />
7. Opened Assets –> Resources –> ApplicationStrings.resx and added a string for the new page title and fixed up any detritus from previous updates.
While I was at it, I removed the link to home.xaml and set About.xaml as the default page. Running the application brings you to the About page, clicking on the player page brings up the SMF player and starts the movie.
Adding A Custom Player
I’m now ready to begin the process covered in the SMF video Extending The Video Player
Create a new class: SlhvpPlayer and add these attributes:
[TemplatePart(Name="TOCToggle", Type=typeof(ButtonBase))]
[TemplateVisualState(Name="ShowTOC", GroupName = "TOCVisibility")]
[TemplateVisualState(Name="HideTOC", GroupName = "TOCVisibility")]
Indicating that the class will have a template part of type Button that will toggle between the Show and Hide visual states.
The new class extends Player, and thus needs a using statement:
using Microsoft.SilverlightMediaFramework.Player;
We’ll also give the class a private member variable to track whether the Table of Contents (toc) is visible,
private bool tocIsVisible;
The custom class also overrides OnApplyTemplate, calling the base method but retrieving a reference to the Button that (will be) in the templated player and setting a handler for the click event on that button. The click event toggles between the two visual states.
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
var btn = GetTemplateChild("TOCToggle") as ButtonBase;
if (btn != null)
{
btn.Click += BtnClick;
}
}
private void BtnClick(object sender, RoutedEventArgs e)
{
tocIsVisible = !tocIsVisible;
string whichState = tocIsVisible ? "ShowTOC" : "HideTOC";
VisualStateManager.GoToState(this, whichState, true);
}
Returning to the Player.xaml file, you’ll need an alias to the project itself,
xmlns:hvp="clr-namespace:SilverlightHVP"
That will allow you to swap out the SMF player for your derived player:
<hvp:SlhvpPlayer>
<p:CoreSmoothStreamingMediaElement AutoPlay="True"
SmoothStreamingSource="http://video3.../Manifest" />
</hvp:SlhvpPlayer>
Templating in Blend
All of this is well and good, but nothing will change with the new player unless we open the project in Blend and set some form of behavior for the two Visual States we created. I’ll start by checking in what I have so far (always nice to have a working copy checked in). [Version 52355].
Next Best Practice: I’ll stop for the night and get a good night’s sleep!
— Next Day —
My goal now is to modify the template to have a place for the links to the right of the video, and a button at the bottom that will make this appear and disappear.
Adding the pseudo-links list
Returning to the project, I’ll open it in Blend, double click on Player.xaml file and right click on the Player in Objects and Timeline and click on Edit Template –> Copy. I’ve named the template SlhvpPlayerToggleButtonTemplate. I’ll select the radio button to place the new template into a Resource dictionary and name that dictionary SLHvpPlayer.xaml.
Click on the layout controls in the toolbox and choose StackPanel. Double click to add a StackPanel to the template, and then right click on the StackPanel in the Objects and Timeline window and use the Order context menu to send it to the back. In the properties window, set its size to Auto/Auto and both alignments to Stretch. Finally, set its orientation to horizontal.
Click on the MediaPresenterElement (which displays the video) and drag and drop it onto the StackPanel, causing it to be a child of the StackPanel. Set its width to Auto.
To stand in for the links, add a TextBlock to the StackPanel, Set its font to Goergia, 12 and its vertical alignment to center, horizontal alignment to stretch and its height and width to auto.
Adding the Toggle Button
In the Ojbects and Timeline window, click on the ControllerContainer, and then in properties set its height to Auto. Expand the Layout section and click on the elipses button
for the RowDefinition collection (as shown, cropped) . Add two rows to the ControllerContainer, setting the height of each to Auto.
In Objects and TimeLine click on the ControllerContainer to make it the selected object and then in the toolbox double click on the button, causing it to be added to the ControllerContainer. Click on the button in either Objects and Timeline or the designer and turn to the properties window where you can set the button’s ColumnSpan to 1, its Row to 1 (second row) and its margins to 0. Set its content to “Toggle.”
We want the name of the button to match the name we set up in the TemplatePart attribute for the derived player: TOCToggle.
Toggling the View State
Click on the States tab to open the States window and notice that the TOCVisibility states are available for you to modify.
Click on the ListBox and then on ShowTOC and set visibility to Visible. Then click on HideTOC and set visibility to collapsed. Finally, set the default transition time to 0.3s.
Click on the ShowTOC state and then click on the TextBox that holds our pseudo-links and set its Visibility property to visible. Then click on the red circle in the design frame to stop recording state changes. Repeat for HideTOC setting Visibility to collapsed, and then save the project.
Return to Visual Studio, click Yes to accept the changes that were made by Expression Blend and run the application. Click on the Player button and the movie starts playing. Click the toggle button to display or hide the “list of links”
| Architectural Note
The goal will be to decouple the Links window, the Table of Contents window and the Player, through MEF, so that we can swap in alternative (or newer) versions of each without breaking the others. Time and resources will determine whether that is done in the first version or immediately afterwards |
There is much more to be done, but we’ve extended the SMF player within a view of the HVP project and it is quite clear that we can add both a links and a TOC window based on this work. This is checked in as 52454
