• MediaPortal2 Development
• Skinning

MediaPortal-II skinning

The purpose of this section is to explain how you can create your own skins for MediaPortal-II

Skin file format

MediaPortal-II uses XAML as skin file format
XAML is a XML based file format which is used to define UI elements, data binding, events and other features

The XAML files are interpreted by MediaPortal-II own opensource version of the WPF engine
Although we do try to make our WPF engine as much as compatible as possible there are a number of
incompatibilities which we will describe here

Differences between Microsoft XAML and MediaPortal-II XAML

XML namespaces

The MediaPortal-II XAML/WPF engine does not used xml namespaces.
Therefore if you have a XAML file which contains namespace prefix then you need to remove the prefix
Example:

<Button x:Name="somename"/>

Will need to be translated to:

<Button Name="somename"/>

XML root tag

The root tag for MediaPortal-II XAML differs from Microsofts XAML
Example of Microsoft XAML:

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:sys="clr-namespace:System;assembly=mscorlib" 
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
  ... 
</Page>

Example of MP-II XAML

<?xml version="1.0" encoding="utf-8"?>
<MyXaml >
....
</MyXaml >

Video playback

For video playback we introduced a ?VideoBrush.
A ?VideoBrush can be used like any brush in XAML
Example:

<Canvas>
  <Canvas.Background>
    <VideoBrush Stream="0"/>
  </Canvas.Background>
</Canvas>

This example will render the background of the canvas with the video.
Note that the ?VideoBrush has an optional Stream property.
The stream indicates which video-stream to display in the brush.
So when for example two videos are playing, you can choose between Stream="0" and Stream="1"
For example PIP could be done like:

<Canvas Width="720" Height="576">
  <Canvas.Background>
    <VideoBrush Stream="0"/>
  </Canvas.Background>
</Canvas>

<Canvas Width="160" Height="40">
  <Canvas.Background>
    <VideoBrush Stream="1"/>
  </Canvas.Background>
</Canvas>

This will render the main video fullscreen and the PIP video stream in the upper left corner

Learning XAML

There are many tutorials and books available on XAML.
Some online examples:
dotnetslackers.com
wpf-tutorials.com
xamldev.com
xamllog.com

Also please note XamlPadX
This application is notepad for XAML and allows your to quickly try things in XAML

XAML design tools

Most people wont like editting xaml directly
Luckily there are a number of graphical design tools you can use.
Microsoft Expression
Adobe Illustrator
Using these tools you can graphicly design your skin (or part of it)
and when you are done, you can export your work to xaml and use it in MP-II

Converting .svg to XAML

If you have a .svg file and want to use it in MediaPortal II
then you can use ViewerSvg to covert the .svg file to a XAML file
After conversion you can use the XAML file in MediaPortal-II