May 2011 - posts

Player Framework–A Sample UI with tips and tricks

For a basic understanding of customizing the UI of the Microsoft Media Platform Player Framework, have a look at this earlier post.

On the discussion board of the Player Framework there were a number of discussions about specific UI customizations. To have some more samples how to create a sample UI on top of the player framework I actually created one. If you look at it, it looks a bit like a well-known player. Of course there are lots of other UI elements in this sample one to enable all the Player Framework goodness. This is what the player looks like (it’s an image, not the actual player):

This sample UI was completely done in XAML without any code-behind. I want to highlight a few things I found while creating this.

Use of colors-definition or a resource

In the session I gave on customizing the UI of the Player Framework I already mentioned the use of color-definitions and resources is not consistent in the default template of the SMFPlayer control. I found a small clue why that happened in specific cases. When you use a resource brush for a color, it’s impossible to change that to another color in a storyboard or a visual state. This can only be done with color-definitions. A way to work around this is to use various objects (for instance rectangles for the background of a button), use various brushes as resource per background and make only that background visible in a specific state that you need. This is done partially in the default template, that’s why some elements have objects like background, background_hover and background_press. In my sample UI I used the same construct everywhere to define objects with resources. That way you just need to change a resource to make all the color changes.

A good tip when you start drawing the visuals for a player, is to also draw the various states of objects and group them in layers. This will translate in a Canvas or a Grid that contains the various objects. That way you just have to decide how to show and hide them in states. You can use the Visibility property if you just want to change immediately, or use Opacity if you want to animate the transition (e.g. cross-fade).

The time track

A challenge was the time track (the red transparent bar with the circle shape thumb, called the TimelineElement in the template). I wanted to place this outside of the ControllerContainer and I wanted to change it’s shape when we kind of ‘hide’ the controllers when the mouse hasn’t been moved for 5 seconds. As the look and feel of the time track, which is actually just a slider control, is defined in a template, how would you change it with an animation? The answer had to be: Visual States.

First I moved the TimelineElement on the same level as the ControllerContainer under PlayerRoot. MediaPresenterElement is in Row 0 and has a RowSpan of 3. ControllerContainer is positioned in Row 3 and TimelineElement in Row 2. That way the TimelineElement hides the bottom part of the video, which isn’t a problem if it’s transparent.

After that I changed the template of the TimelineElement. I shaped the HorizontalTrackLargeChangeIncreaseRepeatButton, the HorizontalAvailableBar and the HorizontalTrackLargeChangeDecreaseRepeatButton to define the tracks. I made sure that these tracks take the Height defined by their container (HorizontalTemplate). I also shaped the HorizontalThumb to be a circle.

In the shapes for the TimelineElement I added a new group called ActiveStates and I created the Active and Inactive state within that group. The Active state defines what the TimelineElement looks like when everything is visible, the Inactive when … well, it’s not active (sounds logical, doesn’t it ). In the Inactive state I changed the Height of the HorizontalTemplate to 6 pixels and I set the Visibility of the HorizontalThumb to Collapsed. I used 0,1 second to do the transition.

The next thing was to trigger the animations. I have also defined a white transparent rectangle inside the ControllerContainer to cover the controls when the mouse wasn’t active for 5 seconds. To make that happen I created a storyboard called AutoDimControllers. At 0,1s the Visibility of the rectangle is set to Collapsed, at 5s the Visibility is set to Visible and the Opacity to 0% and at 5,2s the Opacity is set to 40%. To trigger this I added two ControlStoryboardAction behaviors to the PlayerRoot, both playing the AutoDimControllers storyboard, one on the Loaded event the other on the MouseMove event. The last one is needed to start the animation over and over again when the mouse is moved, so it always stays up for 5 seconds.

But a visual state cannot be set with an animation. So I added 3 GoToStateAction behaviors to the PlayerRoot. The first GoToStateAction fires on the Loaded event of PlayerRoot and sets the visual state “Active” of the TimelineElement, to set the initial state on load. The seconds GoToStateAction fires on the MouseMove event of PlayerRoot, and sets the visual state “Active” of the TimelineElement, to make it visible again when the mouse is moved. The third one uses a Trigger of type StoryboardCompletedTrigger on AutoDimControllers, and it sets the visual state “Inactive” of the TimelineElement.

One strange this is that Blend starts complaining about these states that they cannot be resolved. Don’t get frightened by this, it just works.

Now everything is hooked up to get the controls out of the way (or less intrusive) when the user is watching the video.

The volume control

The volume control expands horizontally. This was all handled by defining the visuals and changing the states within the volume control.

Sample download

Perhaps I wasn’t that clear in the description above or want to have a look at the template. You can download a sample project here or just the resource file here.

The complete styling is in a separate resource file. If you want to reuse it in another project, just add the resource XAML file as an existing item (a link to this resource is automatically added in App.xaml) and a a reference to Microsoft.Expression.Interactions.dll. If you don’t know how to locate the dll, just add a behavior to the LayoutRoot of your main page and remove that again. The reference is then set automatically.

Let me know what you think or miss.

Posted 26 May 2011 05:51 PM door Martin Tirion | 1 comment(s)

Opgeslagen onder: Expression Blend, tutorial, Silverlight, Player Framework, Microsoft Media Platform

Framerate Fest site of the day op theFWA.com

Alhoewel de wedstrijd nu is afgelopen is de website van Framerate Fest nog steeds in de lucht, en dat blijft hij natuurlijk ook nog steeds. Binnenkort wordt hij geupdate met de winnaars van de wedstrijd. Favorite Website Awards, afgekort FWA, vond de website in ieder geval interesant genoeg naar aanleiding van stemmen op de website. Op maandag 15 mei 2011 was Framerate Fest dan ook ‘site of the day’. Cool he?!

Posted 16 May 2011 05:57 PM door Martin Tirion | no comments

Opgeslagen onder: Internet Explorer, web, HTML5

Player Framework – How to set the background color of the video

For a basic understanding of customizing the UI of the Microsoft Media Platform Player Framework, have a look at this earlier post.

I got questions on changing the background color of the video window in the Player Framework. If you set the Background color of the PlayerRoot in the template, you see the selected background color briefly until the video from the selected playlist item is loaded and it is black again.

Remember that the actual control to play the video is loaded dynamically through the plugin mechanism in the Player Framework. That control is then loaded into the Content of the MediaPresenterElement (which is of type ContentControl). It turns out that the control that’s loaded has a background color Black, which overrules any changes in the hierarchy above it. I haven’t been able yet to trace where the definition for that control is set. But I have found out how to overrule that, without having to change the sources of the Player Framework. Follow these steps, preferably in Visual Studio:

1. [optional] Open Visual Studio 2010 and create a new project of type SMF Smooth Streaming Application (template made available through the MSI installer of the Player Framework)
2. Create a custom class in your Silverlight project, e.g. MyPlayer.cs
3. That class should inherit from SMFPlayer
4. Add a using statement to Microsoft.SilverlightMediaFramework.Core
5. override the OnMediaPluginLoaded method
6. after calling the base method, add code to set the Background property of the control in the Content property of the MediaPresenterElement to Transparent.

The result should look like something this (maybe you have a different namespace or classname):

using System.Windows.Controls;

using System.Windows.Media;

using Microsoft.SilverlightMediaFramework.Core;

namespace SMF_SmoothStreaming1

{

    public class MyPlayer : SMFPlayer

    {

        protected override void OnMediaPluginLoaded()

        {

            base.OnMediaPluginLoaded();

            Control mediaElement = this.MediaPresenterElement.Content as Control;

            mediaElement.Background = new SolidColorBrush(Colors.Transparent);

        }

    }

}

Don’t set the Background to null, as a null-brush cannot receive mouse events. In that case when a user double clicks on the background (to switch full screen) nothing happens. If it’s transparent it will work just fine.

Now open MainPlayer.xaml, use the newly created MyPlayer instead of the standard SMFPlayer control. You might need to add a namespace to the XAML. It should look something like this:

<UserControl x:Class="SMF_SmoothStreaming1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    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"
    d:DesignHeight="300" d:DesignWidth="400" 
    xmlns:smf="http://schemas.microsoft.com/smf/2010/xaml/player"
    xmlns:media="clr-namespace:Microsoft.SilverlightMediaFramework.Core.Media;assembly=Microsoft.SilverlightMediaFramework.Core"
    xmlns:local="clr-namespace:SMF_SmoothStreaming1">

    <Grid x:Name="LayoutRoot" Background="White">
        <local:MyPlayer>
            <smf:SMFPlayer.Playlist>
                <media:PlaylistItem DeliveryMethod="AdaptiveStreaming" MediaSource="http://video3.smoothhd.com.edgesuite.net/ondemand/Big%20Buck%20Bunny%20Adaptive.ism/Manifest"/>
            </smf:SMFPlayer.Playlist>
        </local:MyPlayer>
    </Grid>
</UserControl>

Now you can edit a copy of the template to set the required Background color for the PlayerRoot and you’re done.

Posted 16 May 2011 05:37 PM door Martin Tirion | 1 comment(s)

Opgeslagen onder: tutorial, Silverlight, Player Framework, Microsoft Media Platform

How Windows Phone 7 and Bing Maps probably saved our lives

We went for a short vacation to Greece and decided to go for a boat-trip for a day by ourselves. A small boat for a small area around some small islands. Because of a very bad map, bad instructions, bad supplies and an error in navigation we ended up in the middle of open sea without fuel. Luckily I could use my Windows Phone to call the rental agency. They would pick us up. But … where were we?

I mentioned the navigation error, so we thought we were just below a specific island. But they couldn’t find us. We were drifting at (a more and more getting rough) sea for 4 hours and they still couldn’t find us. “Tell us what you see, describe the island you see” … but how to describe an island other than “rocks, trees, and no people or landmarks”. Imagine how we felt: winds picking up, waves getting higher, drifting away, cold, people looking for us but they were unable to find us. And this at the end of the day, so in a few hours the sun would set.

Now, Windows Phone has by default Bing Maps installed combined with use of GPS. To get this to work you need a GPS coordinates and an internet connection to retrieve the maps to show where you are. You need all of that at the same time. At sea we had phone contact most of the time, internet connection through GPRS sometimes. I have no idea how it works with retrieving GPS coordinates. But it didn’t come together until after 4 (long) hours.

I have never been this happy to see Bing Maps on my Windows Phone zoom into the map and show the yellow mark of our location. Immediately I called the guys looking for us and informed them of our location. Finally we were found and rescued!

The guy who picked us up told us we were very, very lucky. We were in open sea and big waves could have tipped our boat over. Big ships could have made waves that would have tipped the boat over. We dropped our anchor just before cliffs of an island (the small one to the right of the blue X) that would have damaged our small boat. The anchor line however was so thin that it could have snapped … and crashed our boat into the rocks of the small island.

So, Windows Phone and Bing Maps probably saved our lives. Talking about user experience …

Posted 16 May 2011 03:11 PM door Martin Tirion | 13 comment(s)

Opgeslagen onder: user experience, Windows Phone, Bing

Beginnen met Silverlight (overzicht, tools en training)

Het is toch wel snel gegaan: in 4 jaar tijd is Silverlight een volwassen platform waarop veel mensen, met name ontwikkelaars, actief zijn. De meeste ontwikkelaars waren al vertrouwd met het .NET Framework, dus dan is Silverlight snel en eenvoudig te gebruiken. Ik kom echter steeds meer ontwikkelaars tegen die meer met design en animatie willen doen, of mensen die nog niet bekend zijn met het .NET platform. In deze post zet ik weer eens een aantal zaken op een rijtje, inclusief handige links, om snel een overzicht te hebben en/of een online training te kunnen volgen.

Een kort overzicht

Een goede analogie voor Silverlight is web development met HTML, Javascript en styling (CSS).
Bij Silverlight heet het XAML (voor de UI), C# of VB.NET (code) en resources (meestal ook XAML).

Alle UI wordt gedefinieerd in een taal die XAML heet (eXtensible Application Markup Language). In XAML kunnen controls, afbeeldingen, video, vectoren, animaties en meer gedefinieerd worden. Controls worden vormgegeven door middel van stijlen om een standaard stijl te overschrijven. Stijlen kunnen worden opgeslagen als resource en weer hergebruikt worden in andere controls. Controls kunnen bestaan uit andere controls. XAML is vrijwel altijd het meest optimale … code gaat niet sneller.

De code is gescheiden van de UI en is C# of VB.NET (er zijn ook mogelijkheden als IronPython, IronRuby en Javascript). Vanuit code kunnen alle XAML elementen gebruikt en aangepast worden. Het eenvoudigste is om een control een naam te geven (in XAML x:Name), waarna het control in de code ook via Intellisense (automatisch typen) gevonden kan worden. Zo kunnen zelfs animaties aangepast worden of toegepast op andere objecten.

Expression Blend is de XAML tool, waarmee XAML ingetypt kan worden, maar veel beter … alles grafisch gedaan kan worden zodat je geen XAML hoeft te typen. Blend kan Illustrator en Photoshop files importeren (met behoud van layers, en als het FXG is de link zelfs dynamisch). Animaties zijn simpel te definiëren door een Storyboard aan te maken, de tijdlijn te verplaatsen en eigenschappen van controls aan te passen. Silverlight rekent zelf de interpolatie en de optimale framerate uit (je kan dat eventueel ook beïnvloeden). Er bestaan ook behaviors die simpel door drag-and-drop toegepast kunnen worden aan elementen om interactiviteit te definiëren. Meer informatie (en een trial versie) is hier te vinden.

De Ultimate versie van Expression Blend heeft ook Sketchflow als onderdeel. Op basis van de hierboven beschreven basis kan Sketchflow eenvoudig gebruikt worden voor het bouwen van een prototype. Hierdoor kan snel duidelijk worden gemaakt aan een klant wat de visuele beleving zal worden. Hierdoor worden veel problemen later in het proces voorkomen. Meer informatie is hier te vinden.

Visual Studio is de development tool die gebruikt wordt voor het programmeren van C# en VB.NET. Het kan ook met de XAML omgaan. Blend en Visual Studio kunnen dezelfde projectstructuur en bestanden lezen, waardoor developers en designers eenvoudig met elkaar kunnen samenwerken. Blend legt de nadruk op design en animatie, waarbij een simpele code editor is toegevoegd, maar geen debug mogelijkheden zijn. Visual Studio legt de nadruk op programmeren, waarbij design te zien is, maar er geen mogelijkheden zijn om storyboards en dergelijke visueel te definieren.

Silverlight bevat zelf een grote set aan controls die gebruikt kunnen worden. Hieronder vallen standaard controls als een button, een listbox, checkbox, enzovoort. Maar ook meer geavanceerde controls als MediaElement (voor het tonen van video), MultiScaleImage (om Deep Zoom te gebruiken voor het optimaal tonen van afbeeldingen zoals Bing Maps en Google Maps dat doen; zie bijvoorbeeld http://memorabilia.hardrock.com). Zoals gezegd zijn alle controls te stijlen naar eigen inzicht. Het aantal controls neemt ook steeds toe.

Naast de standaard set zijn er ook extra controls te vinden in de Silverlight Toolkit (http://silverlight.codeplex.com). Het Silverlight team ontwikkelt aan nieuwe controls en die worden in die toolkit uitgebracht. De toolkit wordt vaker geupdate dan Silverlight zelf, dus vernieuwingen zijn hier snel te vinden.

Aangezien Silverlight enorm goed scoort op hoge kwaliteit video. is het gebruik van Silverlight voor dit doel een logische stap (NOS, RTL, SBS, enzovoort). Met name smooth streaming is een technologie die ervoor zorgt dat de gebruiker de optimale kwaliteit video kan krijgen voor de beschikbare kracht van zijn/haar pc en beschikbare bandbreedte. Dit alles is samengevat in het Microsoft Media Platform. Een onderdeel hiervan is het Player Framework dat een uitstekende basis player biedt (open source) die ook naar eigen behoefte is aan te passen, te stijlen of uit te breiden. Zie http://smf.codeplex.com voor de download van het Player Framework. Voor het stijlen van de player, kijk even naar een andere post die ik gedaan heb.

Benodigde producten

Voor het maken van de visuals voor een applicatie kunnen producten zoals Adobe Photoshop, Adobe Illustrator of Expression Design worden gebruikt.

Voor het definieren van de interactie en om visueel XAML te bewerken wordt Expression Blend gebruikt. Dit is een betaald product, behalve voor Windows Phone ontwikkeling. Er is een trial versie beschikbaar. Meer informatie (en een trial versie) is hier te vinden.

Voor het programmeren is Visual Studio nodig. Hiervan is een Express versie gratis beschikbaar die gebruikt kan worden. Er zijn ook uitgebreidere versies die ondersteuning bieden voor unit testing, in teamverband samenwerken en meer. Die versies zijn betaalde producten. Meer informatie over Visual Studio is hier te vinden, inclusief trial versies.

Je kan eenvoudig de Web Platform Installer gebruiken voor het (optioneel) installeren van Visual Studio Express, Silverlight developer runtime en de Silverlight Tools voor Visual Studio. Zo ben je met een install snel klaar. Klik hier om Web Platform installer te gebruiken.

Online training

Als je gewend bent om met Adobe Flash te werken, is de Project Rosetta website handig. Daar worden een aantal Flash oplossing uitgelegd hoe je die in Silverlight kan maken.
Zie http://visitmix.com/labs/rosetta/

De Silverlight website biedt veel informatie over tools, tutorials, showcases, maar ook forums.
Zie: http://silverlight.net

Er is een 5 daagse online training rond web design/development.
Zie http://www.microsoft.com/expression/resources/BlendTraining/

.toolbox is een reeks van trainingen van klein tot groot, van eenvoudig tot complex, om Silverlight en Expression Studio te leren. Er wordt bijgehouden hoe ver je in het proces bent om te helpen welke trainingen nuttig voor je zijn.
Zie http://www.microsoft.com/design/toolbox/

De Silverlight 4 Training Course laat in een set van presentaties/trainingen het bouwen van een line of business applicatie zien. Er wordt een database gebruikt die met het entity framework wordt benaderd, via RIA Services wordt gecommuniceerd, printen wordt besproken, enzovoort. Een goede development training om een compleet overzicht van de stack te krijgen. 
Zie http://msdn.microsoft.com/en-us/gg315272 

Expression Studio Community heeft tutorials, samples, gallery en forums voor verdere support en resources. Je kan zelf ook zaken uploaden.
Zie http://expression.microsoft.com/en-us/default.aspx

Posted 05 May 2011 01:06 PM door Martin Tirion | no comments

Opgeslagen onder: tutorial, Silverlight

Building a custom video player with the Player Framework for the web, desktop and the phone

You can’t think of the web without video these days it seems. And even on the phone we see more and more video as networks get more speed. If you want to build an application or website that shows video, how can you do that easily? The Microsoft Media Platform Player Framework, formerly known as Silverlight Media Framework, is a very useful and powerful toolkit for using a video player. There is support for various types of video/audio, use of advertisement (VAST/MAST/VPAID), markers, captions and more. And even better, you can customize that player to your needs. That means that you can determine what the framework does for you, you can extend it with your functionality, and you can customize the UI of the player.

In this post I want to talk about the customization of the UI of the player. The default look-and-feel and functionality of the player is great for an out-of-the-box experience. But often you want to tailor it to your needs and style. But when you’ve installed the player framework, it’s not always that obvious how you could or should modify the UI. There is documentation on various scenario’s of use for the player, as well as a CHM-file on the API. There is more on the UI in the Samples.Web project when you have installed the sources of the player framework as well (available in the download section on codeplex). This post, and in more detail my embedded session of the Dutch DevDays 2011 (at the end of this post), will show in more detail how to modify the UI.

Installing the Player Framework

To get the player framework, first you go to http://smf.codeplex.com. On the download page you’ll find all the available downloads. The best one to use is the Full Installer (MSI) that can be found under the Additional Downloads. That installer will install all the binaries under %ProgramFiles%/Microsoft SDKs/Microsoft Silverlight Media Framework/[version]. It will also install the IIS Client SDK for Smooth Streaming 1.5 and templates for use with Visual Studio.

Templates for Blend

If you want to have templates for Blend, download the Blend template I created for Player Framework v2.5 and Blend 4.0.

When on Vista or Windows 7, unblock the zip-file before extracting. To unblock, right-click the downloaded zip-file, select Properties. In the dialog click Unblock like in the picture on the left.

Right-click the zip-file and select Extract All. Select the “My Documents” folder as the target for the files. On Windows 7 it’s C:\Users\[username]\Documents.

Press the Extract button to unpack. Confirm that you want to merge the folders. The templates are now installed for use with Blend.

 

Getting started

It’s easy to start a new project based on the player. Start Visual Studio 2010 (or Expression Blend if you have installed the templates as described above) and select New Project …. Choose the Smooth Streaming or the Progressive Download template as project type. You can immediately run that project, as it contains a MainPage with a player control and a sample stream on the web to play.

Properties of the Player control

The SMF Player control has a number of properties that influence the behavior and functionality. It’s best to use Expression Blend to see the properties. Without going through the complete list, these are a few of the important ones.

In the Common Properties section:

• AutoPlay to start playing the first playlist item when the control is loaded
• Playlist (collection). The ellipses button takes you to a separate screen where playlist items can be added

In the Player Controls section:

• IsControlStripVisible to hide or show the control strip
• PlaylistVisibility to disable, hide or show the playlist (and potentially the Playlist button)

The template of the Player control

To change other things beyond what’s being exposed through the properties, we have to go into the template of the player. To do this, right-click the Player control in Blend and select Edit Template and Edit a Copy ….

After that you see a dialog to ask for a name of your template copy and a location to store it. By default it’s in the page you’re in, but it’s a better idea to store it in a separate Resource Dictionary. Click the New… button to create a new Resource Dictionary in your project. Give the template a name and press OK.

You are now inside the UI definition for the Player control. Here you things like Grids, Buttons and more with styles that make up the UI of the Player control. There are also items with a special icon with a green check-mark after some of the elements. Those are TemplateParts.

TemplateParts are a special link between code of the control and the UI. In the definition in the code of the control is defined what base-class they should be (for instance a ButtonBase) and what the name of the element is so it can be found by the code. It’s important to understand this construct so you know how to work with the template.

Another important thing to understand is that the Player Framework uses a plugin structure to dynamically add functionality to the player. There are plugins for progressive downloads (and normal streaming), for smooth streaming, logging and more.

One of the elements in the template is the MediaPresenterElement. This is of type ContentControl. The player framework uses this control to dynamically load the appropriate MediaElement to show the video.

The ControllerContainer is probably the most interesting one if you want to change the look and feel of the player. This Grid is the strip with the player controls like play/pause (PlayElement), time track (TimelineElement, CurrentPositionElement, CurrentDurationElement), volume (VolumeElement) and full screen toggle (FullScreenToggleElement).

The PlayerRoot at the top of the template is a Grid with five rows. Most of them are auto sized. By default the ControllerContainer is in the fifth row (Row 4 as we start counting at 0) of the grid. So if you want to position the controlstrip at the top, just set the Row property of the ControllerContainer to 0 and the VerticalAlighment to Top.

Change the basic colors (with a fix)

The template of the player control in the current version of the Player Framework has some issues that make it a bit harder to make simple changes. To make your life a bit more easy to change it, take these steps before you do any of the other changes you plan.

For the PlayElement and the VolumeElement, take these steps:

1. Right-click the control and select Edit Template, Edit a Copy…
2. You can change the style name and remove the trailing “1”. Press OK.
3. Click the arrow icon above the Template-element in Objects and Timeline to scope up again.

For the SlowMotionElement and the FullScreenToggleElement, take these steps:

1. Right-click the control and select Edit Template, Edit Current
2. Select the background element and flip it vertical (Menu Object, Flip, Vertical or Ctrl+Shift+4), set the Fill to btnBaseGradient resource, and the Stroke to the btnStrokeGradient resource.
3. Select the background_hover element and flip it vertical (Menu Object, Flip, Vertical or Ctrl+Shift+4), set the Fill to btnBasePressed resource, and the Stroke to the btnStrokeGradient resource.
4. If available, select the background_checked element and flip it vertical (Menu Object, Flip, Vertical or Ctrl+Shift+4), set the Fill to btnBasePressed resource, and the Stroke to the btnStrokeGradient resource.
5. Click the arrow icon above the Template-element in Objects and Timeline to scope up again.

To change colors of the template, change the resources btnBaseGradient and btnBasePressed. If you also change the Fill property of the ControllerContainer, you have made the most important changes to change the color.

Hide and show the control strip on mouse movement

It’s easy to hide and show the control strip on mouse movement … if you know how To give an easy example, make these changes to the Layout properties of ControllerContainer:

1. Set Row to 0
2. Set VerticalAlignment to Bottom
3. Set the Left and Right Margin to 10
4. Set the Bottom Margin to 40

The control strip now hovers over the video. Set the Opacity (under Appearance) to 0%. Next thing to do is to define a Storyboard. Create a new one and give it a name (e.g. ToggleControllerContainerVisibility). Define these storyboard-keyframes:

1. At 0,2s set the opacity of the ControllerContainer to 100%
2. At 5s record a keyframe (with the icon in the storyboard pane) to fix the opacity setting
3. At 5,5s set the opacity of the ControllerContainer to 0%

Now the storyboard is defined, we have to trigger it. We could do that in code, but that’s more complex. Instead we use a behavior for that. Behaviors can be found in the Assets pane. Drag the ControlStoryboardAction to the PlayerRoot. In the properties of the behavior set the EventName to MouseMove and the Storyboard to the storyboard you just created.

Because of the definition of the storyboard it will begin a 5 second timer every time we move the mouse, so it stays visible if it’s already there.

Change the complete UI to your design

If you have a visual design of your player (e.g. in Photoshop), there are a few tips that can be useful:

• Understand the TemplateParts construction (name of elements are crucial)
• Because of the extra attributes on controls in the original template, it’s better to change the visuals in the containers and templates. Don’t start with clean visuals and turn them into TemplateParts, as you will miss vital settings.
• Use Template-databinding and relative-source databinding for showing data. Inspect the original template in XAML mode for more details.

Presentation

To hear more details about customizing the UI of the player, have a look at the session I did at the recent Dutch DevDays 2011. You can also go to Channel 9 and download the video and slides.

Let me know if you succeed or have other findings customizing the template.

Additional howto’s

Also have a look at these how to’s on my blog:

• How to set the background color of the video

Posted 02 May 2011 04:47 PM door Martin Tirion | 14 comment(s)

Opgeslagen onder: Expression Blend, tutorial, Silverlight, Player Framework, Microsoft Media Platform

Zoek

Dit weblog

• Home
• Contact

Nieuws

Tags

• .NET
• Adobe Tools
• Adobe User Group
• adoptie
• Apps
• ASP.NET
• Bing
• boeken
• design
• DevDays
• development
• evenement
• Expression Blend
• Expression Design
• Expression Encoder
• Expression Studio
• Expression Web
• Flash
• HTML5
• IBC
• IIS Media Services
• Internet Explorer
• interview
• Kinect
• Metro
• Microsoft Design Style
• Microsoft Media Platform
• Microsoft Sharepoint
• Microsoft Surface
• Microsoft Tag
• MIX
• NUI
• oplossingen
• PDC
• Photosynth
• PHP
• PICNIC
• Player Framework
• PlayReady
• presentatie
• publicaties
• referenties
• Silverlight
• SketchFlow
• software
• SQL Server
• SuperPreview
• testing
• tutorial
• user experience
• video
• Visual Studio
• web
• Windows
• Windows Phone
• Windows Store
• WPF
• XAML
• XNA

Navigatie

• Home
• Weblogs van Microsoft Nederland

Archieven

• April 2013 (2)
• March 2013 (1)
• February 2013 (1)
• January 2013 (1)
• December 2012 (1)
• October 2012 (2)
• September 2012 (1)
• August 2012 (1)
• July 2012 (1)
• June 2012 (1)
• May 2012 (3)
• April 2012 (3)
• September 2011 (2)
• August 2011 (3)
• July 2011 (5)
• June 2011 (3)
• May 2011 (6)
• April 2011 (1)
• March 2011 (7)
• February 2011 (1)
• January 2011 (1)
• November 2010 (4)
• September 2010 (2)
• July 2010 (4)
• June 2010 (2)
• May 2010 (5)
• April 2010 (1)
• March 2010 (5)
• November 2009 (3)
• October 2009 (2)
• September 2009 (6)
• August 2009 (1)
• July 2009 (8)
• June 2009 (5)
• May 2009 (6)
• April 2009 (1)
• March 2009 (8)
• February 2009 (2)
• January 2009 (3)
• December 2008 (2)
• October 2008 (4)
• September 2008 (7)
• August 2008 (4)
• July 2008 (5)
• June 2008 (7)
• May 2008 (5)
• April 2008 (3)
• March 2008 (9)
• February 2008 (14)
• January 2008 (2)
• December 2007 (2)
• November 2007 (1)
• October 2007 (1)
• September 2007 (5)
• August 2007 (1)
• July 2007 (2)
• May 2007 (3)
• April 2007 (3)
• March 2007 (3)