Theming RadMediaPlayer

[felix]

Hi Telerik,

your Silverlight controls look great - I would love to use the RadMediaPlayer in a project for a client - I saw from your newsletter:

In addition, RadMediaPlayer allows you to specify a playlist and provide the application with more than one multimedia element, time markers and loading images. Changing themes in RadMediaPlayer cannot be easier. Along with the in-built themes that RadMediaPlayer supports, you can adorn the player with their own custom theme, built with Microsoft Expression Blend.

This would be fantasic, and although I can open the control in Blend - I can't seem to skin it - how do I create my own custom theme based on the existing?

Many thanks!

PS not sure if you're aware of this but when I set the source of the player in Blend, the clip starts playing (audio only)!

[Kiril Stanoev]

Hello Felix,

You can find attached a sample project that includes RadMediaPlayer's theme. There are couple of things you need to be aware of before you decide to edit the theme in Expression Blend.
You have to comment a few lines within App.xaml's Application.Resources. This is the place where RadMediaPlayer's theme is situated.

The first piece of code you need to comment is on line 1197 - an event trigger.
The second one resides on line number 1347 - a MediaElement.

For your convenience I have placed comments around these lines. I have also added a couple of bookmarks so that you can easily navigate between the places you have to comment.

Once you are done restyling the control, simply uncomment the previously mentioned lines.

Please let me know how this works and if you have any additional questions.

Sincerely yours,
Kiril Stanoev
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[felix]

Wow thanks Kiril that works great!

I shall have a go at reskinning it and let you know how I get on,

Thanks again

Felix

[David]

Hi i would like to reskin the Video player i'm using the RTM version but there are alot of things that have changed and now i can't get it to work,

i need to make heavy changes to the way it looks like having the media items at the bottom etc.. is this possable thanks David

[Kiril Stanoev]

Hi David,
Very soon we will update our Telerik.Windows.Controls.Blend project to work with the latest plugin, and you will be able easily to restyle each and every control.
Stay tuned for updates!

Greetings,
Kiril Stanoev
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[herve]

hi,

i ve used the attached file, and this is what i got as error,and the page is whole white with no silverlight player activated, any ideas why?

best regards

herve

Build project: RadMediaPlayerThemeProject.sln, Targets: Build
__________________________________________________
Projet "D:\wbltech\Player leepcast\095806_RadMediaPlayerThemeProject\RadMediaPlayerThemeProject\RadMediaPlayerThemeProject.sln" (Build cibles) :

__________________________________________________
Le projet "D:\wbltech\Player leepcast\095806_RadMediaPlayerThemeProject\RadMediaPlayerThemeProject\RadMediaPlayerThemeProject.sln" génère "D:\wbltech\Player leepcast\095806_RadMediaPlayerThemeProject\RadMediaPlayerThemeProject\RadMediaPlayerThemeProject\RadMediaPlayerThemeProject.csproj" (cibles par défaut) :

Begin application manifest generation
No changes detected. Application manifest file is up to date
Validating file names being packaged in the XAP
RadMediaPlayerThemeProject -> D:\wbltech\Player leepcast\095806_RadMediaPlayerThemeProject\RadMediaPlayerThemeProject\RadMediaPlayerThemeProject\Bin\Debug\RadMediaPlayerThemeProject.dll
D:\wbltech\Player leepcast\095806_RadMediaPlayerThemeProject\RadMediaPlayerThemeProject\RadMediaPlayerThemeProject\App.xaml(32,30,32,30): warning : The property 'Duration' does not exist on the type 'VisualTransition' in the XML namespace 'clr-namespace:System.Windows;assembly=System.Windows'.
D:\wbltech\Player leepcast\095806_RadMediaPlayerThemeProject\RadMediaPlayerThemeProject\RadMediaPlayerThemeProject\App.xaml(33,30,33,30): warning : The property 'Duration' does not exist on the type 'VisualTransition' in the XML namespace 'clr-namespace:System.Windows;assembly=System.Windows'.
D:\wbltech\Player leepcast\095806_RadMediaPlayerThemeProject\RadMediaPlayerThemeProject\RadMediaPlayerThemeProject\App.xaml(34,30,34,30): warning : The property 'Duration' does not exist on the type 'VisualTransition' in the XML namespace 'clr-namespace:System.Windows;assembly=System.Windows'.
D:\wbltech\Player leepcast\095806_RadMediaPlayerThemeProject\RadMediaPlayerThemeProject\RadMediaPlayerThemeProject\App.xaml(99,30,99,30): warning : The property 'Duration' does not exist on the type 'VisualTransition' in the XML namespace 'clr-namespace:System.Windows;assembly=System.Windows'.
D:\wbltech\Player leepcast\095806_RadMediaPlayerThemeProject\RadMediaPlayerThemeProject\RadMediaPlayerThemeProject\App.xaml(100,30,100,30): warning : The property 'Duration' does not exist on the type 'VisualTransition' in the XML namespace 'clr-namespace:System.Windows;assembly=System.Windows'.
D:\wbltech\Player leepcast\095806_RadMediaPlayerThemeProject\RadMediaPlayerThemeProject\RadMediaPlayerThemeProject\App.xaml(101,30,101,30): warning : The property 'Duration' does not exist on the type 'VisualTransition' in the XML namespace 'clr-namespace:System.Windows;assembly=System.Windows'.
D:\wbltech\Player leepcast\095806_RadMediaPlayerThemeProject\RadMediaPlayerThemeProject\RadMediaPlayerThemeProject\App.xaml(224,30,224,30): warning : The property 'Duration' does not exist on the type 'VisualTransition' in the XML namespace 'clr-namespace:System.Windows;assembly=System.Windows'.
D:\wbltech\Player leepcast\095806_RadMediaPlayerThemeProject\RadMediaPlayerThemeProject\RadMediaPlayerThemeProject\App.xaml(225,30,225,30): warning : The property 'Duration' does not exist on the type 'VisualTransition' in the XML namespace 'clr-namespace:System.Windows;assembly=System.Windows'.
D:\wbltech\Player leepcast\095806_RadMediaPlayerThemeProject\RadMediaPlayerThemeProject\RadMediaPlayerThemeProject\App.xaml(226,30,226,30): warning : The property 'Duration' does not exist on the type 'VisualTransition' in the XML namespace 'clr-namespace:System.Windows;assembly=System.Windows'.
D:\wbltech\Player leepcast\095806_RadMediaPlayerThemeProject\RadMediaPlayerThemeProject\RadMediaPlayerThemeProject\App.xaml(348,33,348,33): warning : The property 'Duration' does not exist on the type 'VisualTransition' in the XML namespace 'clr-namespace:System.Windows;assembly=System.Windows'.
D:\wbltech\Player leepcast\095806_RadMediaPlayerThemeProject\RadMediaPlayerThemeProject\RadMediaPlayerThemeProject\App.xaml(349,33,349,33): warning : The property 'Duration' does not exist on the type 'VisualTransition' in the XML namespace 'clr-namespace:System.Windows;assembly=System.Windows'.
D:\wbltech\Player leepcast\095806_RadMediaPlayerThemeProject\RadMediaPlayerThemeProject\RadMediaPlayerThemeProject\App.xaml(350,33,350,33): warning : The property 'Duration' does not exist on the type 'VisualTransition' in the XML namespace 'clr-namespace:System.Windows;assembly=System.Windows'.
D:\wbltech\Player leepcast\095806_RadMediaPlayerThemeProject\RadMediaPlayerThemeProject\RadMediaPlayerThemeProject\App.xaml(461,33,461,33): warning : The property 'Duration' does not exist on the type 'VisualTransition' in the XML namespace 'clr-namespace:System.Windows;assembly=System.Windows'.
D:\wbltech\Player leepcast\095806_RadMediaPlayerThemeProject\RadMediaPlayerThemeProject\RadMediaPlayerThemeProject\App.xaml(462,33,462,33): warning : The property 'Duration' does not exist on the type 'VisualTransition' in the XML namespace 'clr-namespace:System.Windows;assembly=System.Windows'.
D:\wbltech\Player leepcast\095806_RadMediaPlayerThemeProject\RadMediaPlayerThemeProject\RadMediaPlayerThemeProject\App.xaml(463,33,463,33): warning : The property 'Duration' does not exist on the type 'VisualTransition' in the XML namespace 'clr-namespace:System.Windows;assembly=System.Windows'.
D:\wbltech\Player leepcast\095806_RadMediaPlayerThemeProject\RadMediaPlayerThemeProject\RadMediaPlayerThemeProject\App.xaml(588,33,588,33): warning : The property 'Duration' does not exist on the type 'VisualTransition' in the XML namespace 'clr-namespace:System.Windows;assembly=System.Windows'.
D:\wbltech\Player leepcast\095806_RadMediaPlayerThemeProject\RadMediaPlayerThemeProject\RadMediaPlayerThemeProject\App.xaml(654,33,654,33): warning : The property 'Duration' does not exist on the type 'VisualTransition' in the XML namespace 'clr-namespace:System.Windows;assembly=System.Windows'.
D:\wbltech\Player leepcast\095806_RadMediaPlayerThemeProject\RadMediaPlayerThemeProject\RadMediaPlayerThemeProject\App.xaml(720,33,720,33): warning : The property 'Duration' does not exist on the type 'VisualTransition' in the XML namespace 'clr-namespace:System.Windows;assembly=System.Windows'.
D:\wbltech\Player leepcast\095806_RadMediaPlayerThemeProject\RadMediaPlayerThemeProject\RadMediaPlayerThemeProject\App.xaml(780,33,780,33): warning : The property 'Duration' does not exist on the type 'VisualTransition' in the XML namespace 'clr-namespace:System.Windows;assembly=System.Windows'.
D:\wbltech\Player leepcast\095806_RadMediaPlayerThemeProject\RadMediaPlayerThemeProject\RadMediaPlayerThemeProject\App.xaml(851,33,851,33): warning : The property 'Duration' does not exist on the type 'VisualTransition' in the XML namespace 'clr-namespace:System.Windows;assembly=System.Windows'.
D:\wbltech\Player leepcast\095806_RadMediaPlayerThemeProject\RadMediaPlayerThemeProject\RadMediaPlayerThemeProject\App.xaml(911,33,911,33): warning : The property 'Duration' does not exist on the type 'VisualTransition' in the XML namespace 'clr-namespace:System.Windows;assembly=System.Windows'.
D:\wbltech\Player leepcast\095806_RadMediaPlayerThemeProject\RadMediaPlayerThemeProject\RadMediaPlayerThemeProject\App.xaml(1038,115,1038,115): warning : The property 'Background' does not exist on the type 'ScrollContentPresenter' in the XML namespace 'http://schemas.microsoft.com/winfx/2006/xaml/presentation'.
D:\wbltech\Player leepcast\095806_RadMediaPlayerThemeProject\RadMediaPlayerThemeProject\RadMediaPlayerThemeProject\App.xaml(1038,157,1038,157): warning : The property 'HorizontalContentAlignment' does not exist on the type 'ScrollContentPresenter' in the XML namespace 'http://schemas.microsoft.com/winfx/2006/xaml/presentation'.
D:\wbltech\Player leepcast\095806_RadMediaPlayerThemeProject\RadMediaPlayerThemeProject\RadMediaPlayerThemeProject\App.xaml(1038,231,1038,231): warning : The property 'VerticalContentAlignment' does not exist on the type 'ScrollContentPresenter' in the XML namespace 'http://schemas.microsoft.com/winfx/2006/xaml/presentation'.
D:\wbltech\Player leepcast\095806_RadMediaPlayerThemeProject\RadMediaPlayerThemeProject\RadMediaPlayerThemeProject\App.xaml(1038,418,1038,418): warning : The property 'TextAlignment' does not exist on the type 'ScrollContentPresenter' in the XML namespace 'http://schemas.microsoft.com/winfx/2006/xaml/presentation'.
D:\wbltech\Player leepcast\095806_RadMediaPlayerThemeProject\RadMediaPlayerThemeProject\RadMediaPlayerThemeProject\App.xaml(1038,466,1038,466): warning : The property 'TextDecorations' does not exist on the type 'ScrollContentPresenter' in the XML namespace 'http://schemas.microsoft.com/winfx/2006/xaml/presentation'.
D:\wbltech\Player leepcast\095806_RadMediaPlayerThemeProject\RadMediaPlayerThemeProject\RadMediaPlayerThemeProject\App.xaml(1038,518,1038,518): warning : The property 'TextWrapping' does not exist on the type 'ScrollContentPresenter' in the XML namespace 'http://schemas.microsoft.com/winfx/2006/xaml/presentation'.
D:\wbltech\Player leepcast\095806_RadMediaPlayerThemeProject\RadMediaPlayerThemeProject\RadMediaPlayerThemeProject\App.xaml(1115,30,1115,30): warning : The property 'Duration' does not exist on the type 'VisualTransition' in the XML namespace 'clr-namespace:System.Windows;assembly=System.Windows'.
D:\wbltech\Player leepcast\095806_RadMediaPlayerThemeProject\RadMediaPlayerThemeProject\RadMediaPlayerThemeProject\App.xaml(1212,33,1212,33): warning : The property 'Duration' does not exist on the type 'VisualTransition' in the XML namespace 'clr-namespace:System.Windows;assembly=System.Windows'.
D:\wbltech\Player leepcast\095806_RadMediaPlayerThemeProject\RadMediaPlayerThemeProject\RadMediaPlayerThemeProject\App.xaml(1267,33,1267,33): warning : The property 'Duration' does not exist on the type 'VisualTransition' in the XML namespace 'clr-namespace:System.Windows;assembly=System.Windows'.
D:\wbltech\Player leepcast\095806_RadMediaPlayerThemeProject\RadMediaPlayerThemeProject\RadMediaPlayerThemeProject\App.xaml(1295,33,1295,33): warning : The property 'Duration' does not exist on the type 'VisualTransition' in the XML namespace 'clr-namespace:System.Windows;assembly=System.Windows'.
Begin Xap packaging
Packaging RadMediaPlayerThemeProject.dll
Packaging Telerik.Windows.Controls.dll
Packaging Telerik.Windows.Controls.MediaPlayer.dll
Packaging System.Windows.Controls.Data.dll
Packaging AppManifest.xaml
Xap packaging completed successfully
Creating test page
Test page created successfully
Génération du projet "RadMediaPlayerThemeProject.csproj" terminée.
MSBUILD : warning : MSB3021 : Impossible de copier le fichier "D:\Program Files\Microsoft SDKs\Silverlight\v2.0\Libraries\Server\System.Web.Silverlight.dll" vers "RadMediaPlayerThemeProjectWeb\\Bin\System.Web.Silverlight.dll". Impossible de trouver une partie du chemin d'accès 'D:\Program Files\Microsoft SDKs\Silverlight\v2.0\Libraries\Server\System.Web.Silverlight.dll'.
C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727\aspnet_compiler.exe -v /RadMediaPlayerThemeProjectWeb -p RadMediaPlayerThemeProjectWeb\ -u -f -d PrecompiledWeb\RadMediaPlayerThemeProjectWeb\ 
Génération du projet "RadMediaPlayerThemeProject.sln" terminée.
The build has successfully completed.

[Kiril Stanoev]

Hi Felix,
Thank you for your interest in our control suite and in particular RadMediaPlayer. In the attachment, you can find all the resources necessary for skinning RadMediaPlayer in Expression Blend. Just copy all the content in your main page, open the page with Expression Blend and start editing the ControlTemplate of RadMediaPlayer.

Please, let us know how this works for you and if you have any additional questions, contact us as soon as possible.

Regards,
Kiril Stanoev
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Gene Grant]

Kiril - Could you pleae post a complete example solution (web and silverlight application) instead of just the MediaPlayer.xaml file? I'm trying to follow along with your instructions, but I must be missing something.

 

Thanks in advance!

[Ivan]

Hello Gene Grant,

Attached, you can find the example application where custom theme is applied.
All the styles and templates related to the RadMediaPlayer are located in the App.Xaml file.

Please note that the released version of the RadMediaChapter's template lacks ImageSource. However, the attached one is corrected and now you can display images in your chapters.

Hope this helps.

Sincerely yours,
Ivan
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.