How to convert a Silverlight control to a Visual WebGui Silverlight control

Introduction

In this “How to” we are going to learn how to convert a Silverlight control to a Visual WebGui Control. This will allow you to take your hard earned controls that you created in Silverlight our Silverlight controls that you found while roaming the web and convert them with very little effort to a Visual WebGui control.

To download Visual WebGui SDK and source code please use this link.

Background

This topic assumes that you have some basic knowledge of Visual WebGui.

Using the Code

The first thing we do is take a Silverlight control in this case I’ve created a simple Silverlight Media Player control.

This is the Media player control Generic.xaml

<ResourceDictionary 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:GZVideoPlayer.Controls;assembly=GZVideoPlayer.Controls">
<Style TargetType="local:VideoPlayer">

<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:VideoPlayer">
<Grid Background="White" Margin="10,10,10,10" ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="35"></RowDefinition>
</Grid.RowDefinitions>
<MediaElement Stretch="Fill" x:Name="MediaElement"
   Source="{TemplateBinding MediaSource}" Margin="0,0,0,0" Grid.Row="0"/>
<Grid Grid.Row="1" Grid.Column="1" Width="500" Background="#FFEFEFE8">
<Grid.ColumnDefinitions> 
<ColumnDefinition Width="55"></ColumnDefinition>
<ColumnDefinition Width="445"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Button x:Name="PlayButton" HorizontalAlignment="Left" Margin="5,1,0,0"
    VerticalAlignment="Stretch" Width="50" Height="25" Grid.Column="0"
    Grid.Row="0" Content="Play"/>
<Button x:Name="StopButton" HorizontalAlignment ="Left" Margin="0,1,0,0"
    VerticalAlignment="Stretch" Width="50" Height="25" Grid.Column="1" Grid.Row="0"
    Content="Stop"/> 
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>

And this is the Media Player control class VideoPlayer.cs

public class VideoPlayer : Control
{
    public static DependencyProperty MediaSourceProperty;
    private Button mobjPlayButton;
    private Button mobjStopButton;
    private MediaElement mobjMediaElement;
    static VideoPlayer()
    {
        MediaSourceProperty = DependencyProperty.Register("MediaSource", typeof(Uri),
           typeof(VideoPlayer), null);
    }
    public VideoPlayer()
    {
        this.DefaultStyleKey = typeof(VideoPlayer);
    }
    public override void OnApplyTemplate()
    {
        base.OnApplyTemplate();
        mobjPlayButton = this.GetTemplateChild("PlayButton") as Button;
        mobjPlayButton.Click += new RoutedEventHandler(mobjPlayButton_Click);
        mobjStopButton = this.GetTemplateChild("StopButton") as Button;
        mobjStopButton.Click += new RoutedEventHandler(mobjStopButton_Click);
        mobjMediaElement = this.GetTemplateChild("MediaElement") as MediaElement;
    }
    void mobjPlayButton_Click(object sender, RoutedEventArgs e)
    { 
        mobjMediaElement.Play();
    }
    void mobjStopButton_Click(object sender, RoutedEventArgs e)
    {
        mobjMediaElement.Stop();
    }
    public Uri MediaSource
    {
        get
        {
            return (Uri)this.GetValue(MediaSourceProperty);
        }
        set
        {
            this.SetValue(MediaSourceProperty, value);
        }
    }
}

As you can see this my solution has one Silverlight application and one Silverlight class library that I used to create this Silverlight control.

Now we’ll add a Visual WebGui Silverlight Application that will host our Control.

Next we’ll add a new Visual WebGui Silverlight Control Library named VideoPlayer.Silverlight.Controls

Delete the empty generic.xml file from the project and select the generic.xaml and the generic.xaml files from the Silverlight project and drag them to the VideoPlayer.Controls project.

Change the VideoControl class to inherit from BindableControl and not from control.

Next will add VideoPlayerDelegate that is in charge of updating our control when attribute value is changed.

public class VideoPlayerDelegate : BindingDelegate
{
    public Uri MediaSource
    {
        get
        { 
            return Session.GetResourceUri(this.GetValue("MediaSource", ""), false); 
        }
    }
    protected override void OnAttributeChange(string strAttribute)
    {
        base.OnAttributeChange(strAttribute);
        if (strAttribute == "MediaSource")
        {
            OnPropertyChanged("MediaSource");
        }
    }
}

We’ll override the ApplyBindings method to set the VideoPlayerDelegate.

protected override void ApplyBindings()
{
    base.ApplyBindings();
    BindingManager.SetDelegate(this, typeof(VideoPlayerDelegate));
    this.SetBinding(MediaSourceProperty, new Binding("Delegate.MediaSource"));
}

Now will add a new Visual WebGui class library project to create the DHTML control Named .

And create a new Visual WebGui Control Named VideoPlayer.Cs

In the DHTML control add this attribute so our control will be added to the manifest with the right template.

[SilverlightControl("VideoPlayer.Silverlight.Controls.VideoPlayer,
    VideoPlayer.Silverlight.Controls, Version=1.0.0.0, Culture=neutral,
    PublicKeyToken=null")]
public partial class VideoPlayer : Control
Add a ResourceHandle property named MediaSource.

private ResourceHandle _MediaSource;
public ResourceHandle MediaSource
{
    get
    {
        return _MediaSource;
    }
    set
    {
        if (_MediaSource != value)
        {
            _MediaSource = value;
            this.Update();
        }
    }
}

And add the property as an attribute so will have access to in the client.

protected override void RenderAttributes(IContext context, IAttributeWriter writer)
{
    base.RenderAttributes(context, writer);
    if (this.MediaSource != null)
    {
        writer.WriteAttributeString("MediaSource", this.MediaSource.ToString());
    }
}

Now will open the application main form and add the Video player control to our designer.

Add a folder named Resources and a sub folder named Data and in it place the video file you want to play.

Next we’ll set on the form load the video Uri that we want to play.

private void Form1_Load(object sender, EventArgs e)
{ 
    videoPlayer1.MediaSource = new UrlResourceHandle("Resources/Data/lake.wmv");
}

Next register our control in the web.config so the Visual WebGui server can access the resources.

<Controls>
    <Control Type="VideoPlayer.Controls.VideoPlayer, VideoPlayer.Controls" />
</Controls>

Now we’ll build the application to allow the VWG Silverlight packaging tool to build the application Silverlight packages.
Notice that the our VideoPlayer.Silverlight.Controls Dll was added to the primary package and will be downloaded to the client.

And now we can watch our movie played in our Silverlight application

So in this “How to” we’ve seen how easy it is to take a Silverlight control and convert it in just a few steps to a Visual WebGui Control.

-- Eyal Albert @ Eyal.Albert (at) Gizmox.com