Introduction
Silverlight, a Microsoft product, is the application framework that provides rich interaction in thin (Web) environment. It is often weighed against Adobe’s Flash. Silverlight has come a long way from the version 1.0 to the Silverlight 4.0. Refer to the section titled “References” at the end of the article that provides you the necessary links to understand the improvements in features of each version.
The User interface layout of the Silverlight application is created using XAML – markup.
The Wiki link of Microsoft clearly states the flow of a Silverlight application:
“A Silverlight application starts by invoking the Silverlight control from the Hyper Text Markup Language (HTML) page, which then loads up a XAML file. The XAML file contains a Canvas object, which acts as placeholder for other elements.”
Let’s see how we can develop our own customizable media player using Silverlight.
First, create a Silverlight Application. You would choose to create a Silverlight Application from the File – New Project menu. The following window would appear.
Figure 1
|
Back to our application, modify the App.XAML.cs
to hook the Startup, Exit
and Unhandled Exception
events. The sample code is as shown below:
<CODE>
public App()
{
//hook events
this.Startup += this.Application_Startup;
this.Exit += this.Application_Exit;
this.UnhandledException += this.Application_UnhandledException;
InitializeComponent();
}
</CODE>
Modify the Application_Startup
method code like below:
<CODE>
private void Application_Startup(object sender, StartupEventArgs e)
{
//Set Page as the Root Visual.
this.RootVisual = new Page();Dictionary<string, string> inputs = new
Dictionary<string, string>();if (e.InitParams != null)
{
//Add the data in the initParams
//to the Resource.
foreach (var data in e.InitParams)
{
inputs.Add(data.Key, data.Value);
}
inputs.Add(“Skin”, “SimpleResources”);
this.Resources.Add(“InputParams”,
inputs);
}
}
</CODE>
InitParameters: To pass information from an ASPX page to a Silverlight library, you would make use of the Property called InitParameters
. They are of key-value type of collection and are comparable to vars in Flash. Yes, it would be set up in the markup of the HTML page.
One has to just pass a comma separated Key-Value pairs like shown below:
“param1=value1,param2=value2,param3=value3”
After the parameters are defined and set values, you would use the Application_Startup
event handler to capture the init params
. Look above for example.
The Control and the Skin parameter allow you to set the skins for the control.
|
The attached solution with this article consists of two Media player controls in the Silverlight library. The Customized Media Player control in the Silverlight Library is the Media Control. It’s comprised of The |
Let’s first create the ucMediaControl: The markup would look like below:
<CODE>
<UserControl x_Class=”SilverLightLibrary.ucMediaElement”
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”
xmlns:vsm=”clr-namespace:System.Windows;assembly=System.Windows” > <Grid x_Name=”LayoutRoot” Background=”White” >
<Grid.RowDefinitions>
<RowDefinition x_Name=”VideoRow” Height=”Auto” />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition x_Name=”VideoColumn” />
</Grid.ColumnDefinitions>
<Border CornerRadius=”1″ BorderThickness=”2″ Margin=”2″ BorderBrush=”{StaticResource MyBorderBrush}”>
<MediaElement Name=”mediaPlayer” Grid.Row=”0″></MediaElement>
</Border>
</Grid>
</UserControl>
</CODE>
The ucMediaControl
element contains a Grid. The grid has a Row and a Column. The MediaElement
is present in the Row. Note the use of the Borderbrush
property for the border element. It is loaded from Resources.