×

First time here?

You are looking at the most recent posts. You may also want to check out older archives. Please leave a comment, ask a question and consider subscribing to the latest posts via RSS or email. Thank you for visiting!

I’ve just finished updating my modification of Joel’s original concept.  Joel had a really great base for me to build off of and used styling and templates to create simple controls for a standard Silverlight media player that could be embedded.  I took his sample and made some minor adjustments to accommodate automatic sizing as well as make it a bit more parameter-driven.  The end result was (what I think at least) a fairly nice player that could be flexible if needed:

Joel made great use of styling primitive controls to be able to leverage core functionality rather than building it all himself.  One of those controls used was the ToggleButton (the play/pause feature) which makes sense for the implementation.  In the beta 1 version of styling we were able to use different styles for MouseOver states for checked/unchecked features.  A snippet of the styling XAML looked like this:

<Storyboard x:Key="MouseOver Unchecked State">
    <DoubleAnimation Duration="0:0:0.1" Storyboard.TargetName="playSymbol" 
Storyboard.TargetProperty="Opacity" To="1" /> <DoubleAnimation Duration="0:0:0.1" Storyboard.TargetName="pauseSymbol"
Storyboard.TargetProperty="Opacity" To="0" /> </Storyboard>

This worked fine in beta 1.  Beta 2 introduces the VisualStateManager model which is an exciting new feature for developers and designers.  Opening the video player project in the latest tools had some things blow up for us…no problem, let’s make use of VSM to change the styling implementation.

One problem…the ToggleButton no longer supports MouseOver states specifically for Checked/Unchecked as we’ve implemented in the video player.  My first thought (and a few emails to the team) was to inherit from the ToggleButton and do my own implementation, adding those states into the control.  I was able to do this by creating a new class file in my Silverlight project, then inheriting from ToggleButton and a few overrides.  I first wanted to support VSM so I added the appropriate TemplateParts to my class:

[TemplateVisualState(Name = "CheckedMouseOver", GroupName = "CheckStates"), 
TemplateVisualState(Name = "CheckedMouseOut", GroupName = "CheckStates"), TemplateVisualState(Name = "UncheckedMouseOver", GroupName = "CheckStates"),
TemplateVisualState(Name = "UncheckedMouseOut", GroupName = "CheckStates")] public class ToggleButtonEnhanced : ToggleButton {

This worked fine and they showed up in Blend designers as well for me to implement.  I then chose to override the MouseEnter/Leave events and did something quick like this:

protected override void OnMouseEnter(MouseEventArgs e)
{
    base.OnMouseEnter(e);
    if (base.IsEnabled)
    {
        if ((bool)base.IsChecked)
        {
            VisualStateManager.GoToState(this, "CheckedMouseOver", true);
        }
        else if ((bool)!base.IsChecked)
        {
            VisualStateManager.GoToState(this, "UncheckedMouseOver", true);
        }
    }
}

Fair enough right?  Well it appeared to be working.  The problem was that ToggleButton maintained a Normal state that was conflicting with certain scenarios I had in my implementation.  You see the base.OnMouseEnter() was essentially the rathole here.  Some spelunking showed that when a state changed it actualy went from the desired state, then back to ‘Normal’ – for example the Pressed action wend: MouseOver,Pressed,Normal.  The final transition was causing my problem.

Now I was looking at overriding the OnApplyTemplate method and thus virtually having to re-implement all the other state transitions as well.  Now I’m no longer really getting a huge benefit out of my inheritance.  So I went back to some experts for some advice.  Dave gave me some pointers and we chatted about the implementation and desired outcomes.  Dave’s much smarter than me on VSM, well, because he had to implement it :-).  For my particular scenario he pointed out that I really had only one property that was changing in the MouseEnter/Leave events: Opacity.  So why not just change Opacity for the Grid container rather than worry about the elements.  Duh.

So now I no longer needed my custom ToggleButton, but could use the primitive ToggleButton to do my dirty work.  I implemented the MouseOver, Checked, and Unchecked states is all I really needed to manage my transitions.  A few learnings about some things I was doing wrong and boom, the new player works as expected.

I learned a few things in this quick journey through VSMville, and one was that it was pretty easy to implement a custom control to support the VisualStateManager model as well.  I think I’ll be digging into this one deeper soon.

Hope this helps someone!  Here’s the code for the updated Video Player.  While the ToggleButtonEnhanced is not used in the final implementation, I kept it in the code file so you could see what path I started along.


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


Gravatar
6/10/2008 8:35 PM | # re: Updated Silverlight media player using VisualStateManager
Dear Sir

I met a problem when I implemented Silverlight 2 in my project.

Description:

A Live Search box will be shown after you input your keywords and click "GO". Now the problems lie in that:

1, The result box is displayed behind the Silverlight area; while in reality it is supposed to be displayed in front of the Silverlight. BTW: I set Silverlight area <div> zindex=0 and Search result box zindex=65534 by default.

2, When the result box is displayed behind the Silverlight, the user can still do some operation on the search result box in firefox browser while can not to do anything in IE browser.

These two problems are to be tackled because they have now blocked my work. Maybe the silverlight must be show before all of element. I am eager for you help!

Thanks,
Dan
6/11/2008 7:57 AM | # re: Updated Silverlight media player using VisualStateManager
Oh Yeah it helps a lot! Thanks a lot Tim. You save me and my brother time for our new portal version.
6/11/2008 9:35 PM | # re: Updated Silverlight media player using VisualStateManager
@Dan: hard for me to understand what you are talking about -- can you send me a sample project?
6/14/2008 1:22 AM | # re: Updated Silverlight media player using VisualStateManager
Hello Tim

I've developed a video player like You.
http://www.silverlight-blog.it/ontheroad/videoplayer/index.html

But i've a problem, when the videoScrubber is moved out of the buffering level ( I set medialelement.position at a value out of bufferingprogress ), the MediaElement has a strange behavior. The downloadprogress go to 100%.
You can help me ?

Mino
7/14/2008 7:41 PM | # re: Updated Silverlight media player using VisualStateManager
i still can't run the player even i already followed ur step..is it cause of i m using silverlight 2 beta 2?
7/14/2008 7:43 PM | # re: Updated Silverlight media player using VisualStateManager
interdamn: which player are you referring to?
7/14/2008 8:39 PM | # re: Updated Silverlight media player using VisualStateManager
i want to make the timeline for my player works...but i m still losing how to make it works :(..is it cause of i m using silverlight 2?
7/14/2008 9:16 PM | # re: Updated Silverlight media player using VisualStateManager
interdamn: so this isn't related to VSM? I'm confused as to your question. If you are trying to make your timeline of your player using a slider take a look at the code in SL2VideoPlayer.
7/14/2008 9:23 PM | # re: Updated Silverlight media player using VisualStateManager
hurm...
i try my best to explain my problem n make u understand what is it..
actually..
i m creating a media player(play, pause, stop button,volume button,and time line bar n time duration for each media played)..
my time line bar doesn't work n my time duration also still doesn't work..
so how i want to make that time line bar n time duration works during playing my media?how do i need to do beause i m using silverlight 2 beta 2?
7/14/2008 10:21 PM | # re: Updated Silverlight media player using VisualStateManager
interdamn: i would look at the source code for a good implementation. It is free/open source for you to download. You'll have to implement a timer and attach the start/stop events to the play/pause features, then on the Tick event of the timer, do your activity to update the slider and/or the text for the durations.
7/15/2008 12:33 AM | # re: Updated Silverlight media player using VisualStateManager
this is the link for my player..i hope u can help me to fix it...

http://www.snapdrive.net/files/514285/My%20Documents/SilverlightApplication/MediaPlayer.rar <--media player i created
8/14/2008 9:48 PM | # re: Updated Silverlight media player using VisualStateManager
Hi,
I am trying to load the project code and was wondering what combination of development tools did you use?

I am getting an error that says the project type is not supported.
my system is VS2008 w/ silverlight 2 beta 2 tool for visual studio.

do I need expression blend 2.5 june preview?
8/22/2008 10:00 AM | # re: Updated Silverlight media player using VisualStateManager
i m u sing vs 2008 with silverlight 2..i design it using expression blend 2.5..u still have an error to open the file?
10/27/2008 1:33 AM | # re: Updated Silverlight media player using VisualStateManager
Tom, thanks a lot.
3/5/2009 9:38 AM | # re: Updated Silverlight media player using VisualStateManager
This does not work.. There is not sifficient documentation as to how to do this
3/5/2009 9:46 AM | # re: Updated Silverlight media player using VisualStateManager
ross -- what isn't working, can you be more specific?

 
Please add 5 and 1 and type the answer here:

DISCLAIMER:

The opinions/content expressed on this blog are provided "ASIS" with no warranties and are my own personal opinions/content (unless otherwise noted) and do not represent my employer's view in any way.