| Comments

If you aren’t aware of the Silverlight Media Framework, you should take a look.  This is a media playback framework for Silverlight that is based off of a lot of best practices from such implementations as the NBC Olympics, Sunday Night Football and others. 

Silverlight Media Framework screenshot

It has a lot of features built-in to the framework such as:

  • Logging
  • DVR-style features
  • Fast forward
  • Slow motion
  • Media Markers
  • etc

Basic stuff plus some great included features and extensibility points.

Missing Features – Part 1

What I didn’t like in v1 was two things: it was only for Smooth Streaming and it was a framework versus just a XAP I could use in a web application.  After some successful complaining :-) and an opportunity to get into a milestone build, the progressive download feature was added which enabled non-Smooth Streaming people to use it.

I’m wanting to standardize on what our teams are providing for best practices, so I’ve started using this player. 

NOTE: Does SL Video Player still live?  Yes, and it has VERY basic features.  It is super small and simple, but may not be for everyone’s liking.

So I started to solve the other problem, primarily for my use, of having essentially a stand-alone player using this framework. 

Extending the Silverlight Media Framework

You see, the SMF itself is essentially a set of controls…but not an ‘app’ itself that you can just consume the binary.  What I did was basically create a new Silverlight application myself with one simple element: Player.  This way I could implement what I needed for my use.  The first thing I wanted was to have a simple XAP that I’d be able to load parameters in…very much like we did for SL Video Player on codeplex.  To make essentially the player have a flexible use model.  I could host the player anywhere and just feed it media to play.

I used the InitParams feature of the Silverlight plugin model to enable me to pass in parameters to the application.  I wanted a simple parameter ‘media’ that basically was a URI to my media.  For most of my needs this would be a progressive download situation.  I added the simple feature using InitParams, and passed that URI to the MediaElement of the player framework.  All was well.

Missing Features – Part 2

I then realized two features that I love about the Expression Encoder templates: AutoLoad and ThumbnailImage.  These two features are pretty much essential for a bandwidth saving playback experience.  AutoLoad basically disables the media from starting to be fetched until the user clicks play.  The ThumbnailImage enables a static screenshot view to be displayed until a media frame could be captured.  These two features work well together.

The AutoLoad (cueing) was critical for me.  I didn’t want media to start downloading until the user said so.  This saves me bandwidth as well as doesn’t annoy the user if there is a ton of media on one page (which might not be a good UX to begin with, but I digress).

I saw an event PlayControlClicked in the framework that I felt I could tap into.  I figured I’d just wire up to that event and set the MediaElement.Source when the user clicked that.  FAIL.  The problem was that the play control in the current framework isn’t even enabled until the media source is set.  This defeated my whole purpose.

After some spelunking in the source – did I mention that SMF is Open Source? – I found the culprit functions.  Disabling them made everything work but it just didn’t feel right.  Luckily one of the developers of the framework, Kevin from Vertigo, and I start chatting (virtually of course, after all nobody ‘talks’ anymore for real right?).  I told him of my findings and hacks and he educated me that I didn’t even need to mess with the source, but could accomplish my needs by subclassing the Player.  Kevin sent me some sample code for what he called a DeferredSource, which is what I wanted.

After some quick tests, I realized that I should keep all scenarios enabled:

  • Deferred loading (AutoLoad=false)
  • Normal progressive playback (AutoLoad=true)
  • Windows Streaming
  • IIS Smooth Streaming

I modified Kevin’s source a bit and got everything working.  Now I have 3 parameters:

  • media – the URI of the stream, IIS Smooth Streaming manifest, or media file for progressive download
  • autoload – used really only for progressive download, would enable/disable cueing of the video upon load
  • ss – to specify if the URI indicated in ‘media’ is an IIS Smooth Streaming implementation

With this done I can now do something as simple as:

   1: <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="320" height="240">
   2:   <param name="source" value="/ClientBin/SmfSimplePlayer.xap"/>
   3:   <param name="background" value="white" />
   4:   <param name="minRuntimeVersion" value="3.0.40818.0" />
   5:   <param name="initParams" value="media=URL_TO_YOUR_VIDEO" />
   6:   <param name="autoUpgrade" value="true" />
   7:   <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40818.0" style="text-decoration:none">
   8:           <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
   9:   </a>
  10: </object>

Boom, done.  Now I had a player based on SMF that served my needs.


I still didn’t implement the ThumbnailImage in my player.  This is a wishlist item for me…it isn’t critical but nice for when AutoLoad=false so it isn’t just a blank screen!  Additionally, the one thing I have to admit I’m not wild about is the overall size.  The compiled XAP is 230K.  In contrast my SL Video Player is 16K.  Why the big size?  Well, the SMF today is intended for someone who really wants to implement all the features it provides, including Smooth Streaming.  If you aren’t using Smooth Streaming, then you still have those dependencies with you…not ideal.

In talking with the dev team and framework team, I know their plans for updated milestones of SMF and am pleased with the roadmap.  They have taken a lot of feedback of how mainstream uses might be implemented and will make it continue to be awesome with a bit more flexibility of taking what you need!


If you need a solid, basic player take a look at SMF.  There are other players out there of course, but this one is based on proven best practices in the toughest situations.  And it is only getting better.  There is a lot of room for improvement for the ‘YouTube’ style simplicity of playback for medium-low quality video playback for your personal sites showing home movies, etc. – and I know that scenario will improve, because I’m pushing for it as well.

If you want to use what I’ve done here, feel free – here are the files:

There are also a bunch of videos for working with the Silverlight Media Framework beyond the basics.  Be sure to check them out!

Hope this helps!

This work is licensed under a Creative Commons Attribution By license.

| Comments

The source code for the Silverlight 2 controls was just published!  This is the source for the controls as shipped in the runtime and the SDK.  When you download the project you’ll see the structure:

Image of source project tree in Visual Studio

The source, released under the Microsoft Public License (Ms-PL), includes the source for the following controls in the runtime:

    • ButtonBase
    • Button
    • HyperlinkButton
    • CheckBox
    • RadioButton
    • ToggleButton
    • RangeBase
    • ProgressBar
    • Slider
    • ScrollBar
    • Thumb

and the following from the SDK (part of the Silverlight Tools for Visual Studio):

    • Calendar
    • DatePicker
    • DataGrid
    • TabControl
    • GridSplitter

Unit tests for the SDK controls have also been included as well!

With the release of this source code as well as having access to the source for the Silverlight Toolkit, you should have some great base implementations to extend and learn from!  Get the code here: Source code for Silverlight 2 controls.

| Comments

Today at Microsoft PDC, Scott Guthrie demonstrated some of the new controls that have been provided as a part of the Silverlight Toolkit

The Silverlight Toolkit was what was previously named the Silverlight Control Pack in the press release when the runtime was released. 

This toolkit provides a set of controls and themes for Silverlight 2.  In this initial release, they are:

    • AutoCompleteBox
    • Chart
    • DockPanel
    • Label
    • Expander
    • TreeView
    • UpDown
    • ViewBox
    • WrapPanel
    • ImplicitStyleManager
    • Themes (6): ExpressionDark/Light, RanierOrange/Purple, ShinyBlue/Red

These controls are released as an initial version, with tests and available with Ms-Pl licensing on Codeplex.  Of particular interest to me is the Charting components.  Typically available at cost with other platforms, the Silverlight team is providing a base set of Charting controls with source for you to implement, customize and ship with your products.  What is great about this type of control is an implementation with data binding as well, especially with an ObservableCollection.  With this combination you can have a powerful real-time experience updating information without having to re-paint the entire chart or do any postbacks for the app as well.

Let’s take a quick simple sample of what I’m talking about.  To use any of the controls in the toolkit, simply add a reference to the assembly in your project and then use the xmlns declaration at the root of your implementation.  I’m going to use “toolkit” as mine like this:

   1: xmlns:chart="clr-namespace:Microsoft.Windows.Controls.DataVisualization.Charting;assembly=Microsoft.Windows.Controls.DataVisualization"

Then we can use the chart in our XAML along with some other code.  Here I have a Slider and a TextBlock as well showing the value of the Slider as you change it.  I’ve also added the chart series and provided some data binding syntax for the series data:

   1: <UserControl
   2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   4:     x:Class="SLToolkitDemo.Page"
   5:     xmlns:chart="clr-namespace:Microsoft.Windows.Controls.DataVisualization.Charting;assembly=Microsoft.Windows.Controls.DataVisualization"
   6:     Width="800" Height="600">
   7:     <Grid x:Name="LayoutRoot" Background="White">
   9:         <StackPanel Orientation="Vertical" Margin="15">
  10:             <TextBlock Text="Change Line Value"/>
  11:             <Slider x:Name="LineValueSlider" Value="12" Maximum="150" Minimum="0" />
  12:             <TextBlock x:Name="SliderValue" />
  13:             <chart:Chart Height="200" LegendTitle="Item" Title="My Simple Data-bound Chart" 
  14:                          x:Name="MyBarChart">
  15:                 <chart:Chart.Series>
  16:                     <chart:ColumnSeries x:Name="MySalesChartData" Title="Sales of Charts" 
  17:                                         ItemsSource="{Binding}"
  18:                          IndependentValueBinding="{Binding ChartType}"
  19:                          DependentValueBinding="{Binding ChartSaleCount}"/>
  20:                 </chart:Chart.Series>
  21:             </chart:Chart>
  22:             <chart:Chart Height="200" Title="My Simple Pie Chart" x:Name="MyPieChart">
  23:                 <chart:Chart.Series>
  24:                     <chart:PieSeries ItemsSource="{Binding}" 
  25:                                      IndependentValueBinding="{Binding ChartType}"
  26:                                      DependentValueBinding="{Binding ChartSaleCount}" />
  27:                 </chart:Chart.Series>
  28:             </chart:Chart>
  29:         </StackPanel>
  31:     </Grid>
  32: </UserControl>

Now in my code I’ve hacked together some simulation of the ObservableCollection changing the value of the Line data to the value of the slider.  Because I implemented my class of Sale with INotifyPropertyChanged the default databinding of OneWay enables my target to be updated once any of my source (salesData) changes.  Here’s the full code:

   1: using System;
   2: using System.Windows;
   3: using System.Windows.Controls;
   4: using System.Windows.Documents;
   5: using System.Windows.Ink;
   6: using System.Windows.Input;
   7: using System.Windows.Media;
   8: using System.Windows.Media.Animation;
   9: using System.Windows.Shapes;
  10: using System.Collections.ObjectModel;
  11: using Microsoft.Windows.Controls.DataVisualization.Charting;
  13: namespace SLToolkitDemo
  14: {
  15:     public partial class Page : UserControl
  16:     {
  17:         ObservableCollection<Sale> salesData;
  19:         public Page()
  20:         {
  21:             // Required to initialize variables
  22:             InitializeComponent();
  23:             salesData = SalesData.GetData();
  24:             Loaded += new RoutedEventHandler(Page_Loaded);
  25:         }
  27:         void Page_Loaded(object sender, RoutedEventArgs e)
  28:         {
  29:             ColumnSeries column = MyBarChart.Series[0] as ColumnSeries;
  30:             PieSeries pie = MyPieChart.Series[0] as PieSeries;
  31:             column.ItemsSource = salesData;
  32:             pie.ItemsSource = salesData;
  33:             LineValueSlider.ValueChanged += new RoutedPropertyChangedEventHandler<double>(LineValueSlider_ValueChanged);
  34:         }
  36:         void LineValueSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
  37:         {
  38:             salesData[2].ChartSaleCount = Convert.ToInt32(e.NewValue);
  39:             SliderValue.Text = e.NewValue.ToString();
  40:         }
  41:     }
  42: }

And here is the SalesData.cs class:

   1: using System;
   2: using System.Net;
   3: using System.Windows;
   4: using System.Windows.Controls;
   5: using System.Windows.Documents;
   6: using System.Windows.Ink;
   7: using System.Windows.Input;
   8: using System.Windows.Media;
   9: using System.Windows.Media.Animation;
  10: using System.Windows.Shapes;
  11: using System.Collections.ObjectModel;
  12: using System.Collections.Generic;
  13: using System.ComponentModel;
  15: namespace SLToolkitDemo
  16: {
  17:     public class SalesData
  18:     {
  19:         public static ObservableCollection<Sale> GetData()
  20:         {
  21:             ObservableCollection<Sale> sales = new ObservableCollection<Sale>();
  23:             sales.Add(new Sale() { ChartSaleCount = 100, ChartType = "Bar" });
  24:             sales.Add(new Sale() { ChartSaleCount = 73, ChartType = "Pie" });
  25:             sales.Add(new Sale() { ChartSaleCount = 12, ChartType = "Line" });
  26:             sales.Add(new Sale() { ChartSaleCount = 24, ChartType = "Spline" });
  28:             return sales;
  29:         }
  30:     }
  32:     public class Sale : INotifyPropertyChanged
  33:     {
  34:         private int _count;
  35:         public string ChartType { get; set; }
  36:         public int ChartSaleCount
  37:         {
  38:             get { return _count; }
  39:             set
  40:             {
  41:                 _count = value;
  42:                 NotifyPropertyChanged("ChartSaleCount");
  43:             }
  44:         }
  46:         #region INotifyPropertyChanged Members
  48:         public event PropertyChangedEventHandler PropertyChanged;
  50:         public void NotifyPropertyChanged(string propertyName)
  51:         {
  52:             if (PropertyChanged != null)
  53:             {
  54:                 PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
  55:             }
  56:         }
  57:         #endregion
  58:     }
  59: }

The result of which is when I move the slider to perhaps simulate real-time data, I see the data binding change in the chart represented here:

As you can see I have two charts using the same ObservableCollection<T>, so changing the data, changes both of the charts without any extra effort. 

Charting along with some of the other controls brings this really, really nice addition to Silverlight 2.  I hope you find them valuable.  We’ll be using them in projects and digging deeper (especially in charting) on the Silverlight Community Site, so I hope you visit there.  You can download the actual sample project for this file as well right here: SLToolkitDemo.zip

If you liked this post, please consider subscribing to the feed for more like it.  Justin Angel is also a program manager for the toolkit that you should check out some depth posts from him on the controls as well.  You can visit the samples site here showing you a gallery of the controls in implementation.

| Comments

In the early days of Silverlight 2, one of the included controls was the WatermarkedTextBox.  In Beta 2 the control was removed from the runtime for among other things, WPF compatibility.  The control source code was made available for people to look at as it was referenced in a few projects, namely ScottGu’s Digg sample application.  There was hinting about future plans but nothing concrete. 

Now that Silverlight 2 is released, the control is not there :-).  I’ve gotten enough requests about it that I wanted to provide some action for you.  First, let me say that there are no concrete plans for WatermarkedTextBox at this time that I have to share.  I’m not saying there isn’t plans, but just that none at a point to make any worthwhile announcements.  Perhaps something like this would show up in the Silverlight Toolkit, but at this time no plans have been defined.

Again, as I’ve received enough requests, I’ve modified the source code for WatermarkedTextBox for Silverlight 2 release and am making it available for you to consume.  The code has been updated for use in Silverlight 2 and also updated to reflect the default styling of the released controls (namely to match TextBox).

If you aren’t familiar with the concept, it’s basically a TextBox with a value you can set for some helper text if the value is not set.  Typically you use this when you want to provide “prompt” text for some input, as an example here:

As you can see the TextBox provides a '”faded” default text that isn’t the TextBox.Text property of the control, but rather the Watermark property of this control.  Once data is entered in the control, the watermark goes away.  As long as data is input the watermark isn’t displayed…if the value is empty, the watermark displays.  Simple enough.

The XAML for the above looks like this:

   1: <UserControl x:Class="WatermarkTester.Page"
   2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   4:     xmlns:local="clr-namespace:Microsoft.Windows.Controls;assembly=Microsoft.Windows.Controls.WatermarkedTextBox"
   5:     Height="300" Width="600" xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows">
   6:     <Grid x:Name="LayoutRoot" Background="White">
   7:         <StackPanel Orientation="Vertical">
   8:             <Grid Margin="15">
   9:                 <Grid.RowDefinitions>
  10:                     <RowDefinition Height="Auto" />
  11:                     <RowDefinition Height="Auto" />
  12:                     <RowDefinition Height="Auto" />
  13:                     <RowDefinition Height="Auto" />
  14:                 </Grid.RowDefinitions>
  15:                 <Grid.ColumnDefinitions>
  16:                     <ColumnDefinition Width="Auto" />
  17:                     <ColumnDefinition Width="Auto" />
  18:                 </Grid.ColumnDefinitions>
  19:                 <TextBlock Text="First Name:" Margin="5" Grid.Column="0" Grid.Row="0" />
  20:                 <local:WatermarkedTextBox Grid.Column="1" Grid.Row="0" Watermark="Enter your first name here..."/>
  21:                 <TextBlock Text="Last Name:" Margin="5" Grid.Column="0" Grid.Row="1" />
  22:                 <local:WatermarkedTextBox Grid.Column="1" Grid.Row="1" Watermark="Enter your last name here..." />
  23:                 <TextBlock Text="Phone Number:" Margin="5" Grid.Column="0" Grid.Row="2" />
  24:                 <local:WatermarkedTextBox Grid.Column="1" Grid.Row="2" Watermark="(xxx) xxx-xxxx" />
  25:             </Grid>
  26:         </StackPanel>
  27:     </Grid>
  28: </UserControl>

Note the xmlns:local declaration in the user control which references the binary.

The control is also Blend compatible if you want to change the style/control template so if you wanted to change the Watermark color or something like that you could easily do that with Blend:

So if you’ve been looking for this control, here you go.  You can download the bits here:

The source is available as Ms-Pl.  Hope this helps!

| Comments

Earlier this year I wrote my thoughts on the current mobile scene and what troubles certain players more than others.  I made the assertion that Android will face the same troubles that Windows Mobile is challenged with.  That being that Google/Android are providing a platform and not a physical device.  I think it would be hard to argue that owning the complete platform and hardware is not a good idea.  Apple’s complete control of every aspect of the channel provides them with the ability to deliver in a somewhat more reliable fashion (except for the fact that Contacts suck and their implementation of ‘enterprise’ features is questionable).

So why another post on the failure of Android?  Take a look:

(source: CrunchGear)

What you can’t really see in the photograph is the proposed angle of the button controls (they angle upward in other design drawings/renderings), making it look like a more old-school handset more than a revolutionary device.

And therein lies the struggle for Android: they aren’t making the device.  I’ve seen the demos of Android and have already said they are impressive.  The fact that all of that is made available via open source is great and exciting.  But for consumers, useless unless some great packaging comes with it.  Remember the old adage of lipstick on a pig?  When I look at the above T-Mobile picture device running Android, that’s what I think about.  There isn’t anything innovative in the design and regardless of innovation it doesn’t even match some of the sleekness of current designs.  In the consumer market, design matters over features. 

I will say that the “HTC Dream” has other shots/drawings around that look a lot different than the above picture, so I could be eating my words.  But right now it looks like a Nintendo Wii accessory.  And in some angles it looks like an iPod sized thing with an FM transmitter adapter on the bottom…just not polished.

I foresee a bunch of Silicon Valley types walking around with this device, but my wife won’t be carrying it because it looks too Star Trek-ish.

Better view of the weird angle bottom in this video ("is that Android in your pocket or are you just happy to see me?"):