Overview

Find here some additional information regarding skin development, like tips & tricks or differences between WPF and MPF.

Tips and tricks for skinning in MP2

Converting .svg to XAML

If you have a .svg file and want to use it in MediaPortal 2, you can use ViewerSvg to covert the .svg file to a XAML file.
After the conversion, you can use the XAML file in MediaPortal 2. In the future, the SkinEngine will also be able to load .svg files as pictures. The advantage of using vector definitons for graphical elements instead of pixel-graphics will make them scale to different resolutions without quality loss.

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.

Picture playback

For playback of pictures from the picture player, we use a technique similar to the VideoBrush Here, a special ImageSource must be used inside an Image element.
Example:

<Image x:Name="PiPPicture" IsVisible="{Binding IsPicturePlayerPresent}" Width="{Binding ImageWidth}" Height="{Binding ImageHeight}" Stretch="Uniform">
  <Image.Source>
    <PicturePlayerImageSource Stream="1"
        Transition="transitions\granular_dissolve;transitions\fade;transitions\dissolve;transitions\wipe_right;transitions\wipe_down;transitions\wipe_down-right;transitions\wipe_up-left"
        TransitionInOut="False" />
  </Image.Source>
</Image>

Examples for the usages can be found in the backgrounds of the SkinBase plugin.

Disambiguation of terms

For a description of several UI related terms, see Terms.

Differences between MPF and WPF

This section contains some differences between Microsoft's WPF library and the MPF library. It is by far not complete; there are many more differences.

All Controls

• WPF: ForeColor="#FF000000" BackColor="#FF000000"
• MPF: Color="#FF000000"
• WPF: Font.XXX="..."
• MPF: FontSize="30" FontFamily="SansBetween"

DockPanel.Dock

• WPF: Top, Left, Right, Bottom
• MPF: Top, Left, Right, Bottom, Center

Storyboard.TargetProperty

• WPF: (Shape.Fill).(Brush.RelativeTransform).(TransformGroup.Children)[3].(TranslateTransform.X)
• MPF: Fill.RelativeTransform.Children[3].X

Code-behind

• WPF: Code-behind to handle events, for example
• MPF: No code-behind -> every code has to be invoked by the {Command} markup extension or by assigning the Command property of ListItems

ResourceWrapper, LateBoundValue, BindingWrapper

• WPF: -
• MPF:
  • <ResourceWrapper x:Key="..." Resource="abc"/>
    Makes it possible to put non-MPF resources like strings in ResourceDictionaries
  • <LateBoundValue x:Key="..." Value="{Binding ...}"/>
    Makes it possible to assign binding values to a list, for example as command parameters. The LBV will not be evaluated before the parent Command is executed.
  • <BindingWrapper x:Key="..." Binding="{Binding ...}"/>
    Makes it possible to assign binding templates via PickupBindingMarkupExtension or BindingSetter.