Page tree

  Wiki Navigation

    Loading...


 Recently Updated


 Latest Releases

 MediaPortal 1.24 
            Releasenews | Download
 MediaPortal 2.2.3
            Releasenews | Download

Table of Contents

Skin Structure

The skin for MPDisplay is created using xml files that contain elements for Windows, Dialogs and Controls that the user can interact with to control MediaPortal.

 

Image Folder

Skinfiles Folder

Styles Folder

Language.xml

PropertyInfo.xml

SkinInfo.xml

 

Windows

There are 3 different window types for MPDisplay.

  • MediaPortalWindow
  • MPDisplayWindow
  • PlayerWindow

All controls positions and sizes are based upon the windows default resolution, MPDisplay will scale the controls up or down depending of the screens current resolution

 

MediaPortal & MPDisplay Window

MediaPortal  windows are used to replicate, show information from a screen in MediaPortal, These windows contain special "VisibleConditions" that will allow the window to open, close when its respective MediaPortal window opens/closes or when a certain condition is met.

See: MediaPortalWindow Visible Conditions for more info.

MPDisplay windows  to show extra information that does not require MediaPortal to be open or running, for instance a MPDisplay window could be used to show system, weather information, MPDisplay window can only be opened by user.

PlayerWindow

This Window type is used, as the name already says, for Video and Music Playing Screens. The file overview is the same as all other Windows.

 

 

File overview

MediaPortal, MPDisplay and Playerwindows will be indicated in your skin folder “Windows”, below is an example of a MediaPortal window xml. (MPDisplay and Player Windows have the same construction, so here is just the example for a MediaPortal Window)

 

<?xmlversion="1.0"encoding="utf-8"?
<Window xmlns:x="[http://www.w3.org/2001/XMLSchema-instance]" x:type="MediaPortalWindow">
  <IsDefault>true</IsDefault>
  <Width>1280</Width>
  <Height>720</Height>
  <Name>BasicHome</Name>
  <Id>0</Id>
  <BackgroundBrush/>
  <WindowAnimations>
    <Animationx:type="Zoom" Condition="WindowOpen" Duration="500" Easing="EaseOut" />
    <Animationx:type="Zoom" Condition="WindowClose" Duration="500" Delay="500" From="100" To="0" />
 </WindowAnimations>
   <WindowControls>
.
.
.
  </WindowControls>
  <VisibleCondition>IsMediaPortalWindow(35)</VisibleCondition>
</Window>

  

<Window xmlns:x="[http://www.w3.org/2001/XMLSchema-instance]" x:type="MediaPortalWindow">

If you have a MediaPortal Window use the entry „ MediaPortalWindow”.
In case of using a MPDisplay Window use the entry "MPDisplayWindow"
In case of using a Player Window use the entry "PlayerWindow"

 

<IsDefault>true</IsDefault>

(required on 1 MediaPortal Window and 1 MPDisplay Window)
This indicates if this window is the Default MPDisplay/MediaPortal window,
There MUST be 1 and only 1 MPDisplay and MediaPortal window set as default

 

<Width>1280</Width>

(required)
This Value sets the Window width.

 

<Height>720</Height>

(required)
This Value sets the Window height.

 

<Name>Home</Name>

(required)
The name of the window, this should match the filename

 

<Id>0</Id>

(required)
ID represents the unique id for this window, ID's must be unique between all window and dialog types.
using ID ranges is recommended to keep things simple.
e.g. MediaPortal Windows 0-99, MPDisplay Windows 10000-… etc.

 

<BackgroundBrush/>

Here’s the setting of the Background Brush. In this case there is no brush defined in the Style xml.

 

<WindowControls>
 .
 .
 .
 </WindowControls>

Start and End point for all other Controls. Explanation follows…

 

<VisibleCondition>IsMediaPortalWindow(35)</VisibleCondition>

The VisibleCondition(s) to show the window, see: Window Visibility for information about the different Condition types.

 

Dialogs

There are 2 different dialog types for MPDisplay.

?Dialog Types

  • MediaPortalDialog
  • MPDisplayDialog

 

MediaPortal & MPDisplay Dialog

MediaPortal Dialogs are used to replicate, show information from a dialog in MediaPortal, These Dialogs contain special "VisibleConditions" that will allow the dialog to open, close when its respective MediaPortal dialog opens/closes,

?Dialog xml file overview

MediaPortal dialogs will be indicated in your skin folder “Dialogs”, below is an example of a MediaPortal dialog xml.

<?xml version="1.0" encoding="utf-8"?>
<Dialog xmlns:x="[http://www.w3.org/2001/XMLSchema-instance]" x:type="MediaPortalDialog">
  <Name>Menu</Name>
  <Id>2012</Id>
  <Width>798</Width>
  <Height>579</Height>
  <PosX>245</PosX>
  <PosY>187</PosY>
  <BackgroundBrush x:type="ImageBrush" Image="\dialog_background.png" Stretch="Uniform" />
  <DialogAnimations />
  <DialogControls>
.
.
.
  </DialogControls>
  <VisibleCondition>IsMediaPortalDialog(2012)</VisibleCondition>
</Dialog>
<Dialog xmlns:x="[http://www.w3.org/2001/XMLSchema-instance]" x:type="MediaPortalDialog">

If you have a MediaPortal Dialog use the entry „ MediaPortalDialog”.
In case of using a MPDisplay Dialog use the entry "MPDisplayDialog"

 

<Name>Menu</Name>

(required)
The name of the dialog, this should match the filename 

 

<Id>2012</Id>

(required)
ID represents the unique id for this dialog, ID's must be unique between all window and dialog types.
Best way for Dialogs is to use the same ID as they are in MediaPortal Dialogs itself.

 

<Width>798</Width>

(default:100)
This sets the dialogs width (in pixels).

 

<Height>579</Height>

(default:100)
This sets the dialogs height (in pixels).

 

<PosX>245</PosX>

(default:0)
This sets the dialogs "X" (left) position (in pixels) on the window based on the windows default size explained earlier.
e.g. setting the dialogs "PosX" to 300 will place the dialogs left edge 300 pixels from the left side of the window 

 

<PosY>187</PosY>

(default:0)
This sets the dialogs "Y" (left) position (in pixels) on the window based on the windows default size explained earlier.
e.g. setting the dialogs "PosY" to 200 will place the dialogs top edge 200 pixels from the top  of the window

 

<BackgroundBrush x:type="ImageBrush" Image="\dialog_background.png" Stretch="Uniform" />

In this case you have a pre- defined Background Brush. How to handle/code these Brushes will follow later in Style Documentation.

 

<DialogAnimations />

Here can be set, as in Windows, some Animations when opening or closing Dialog windows. Explanation will follow in Animation Documentation.

 

<DialogControls>
 .
 .
 .
   </DialogControls>

Start and End point for all other DialogControls. Explanation follows…

 

<VisibleCondition>IsMediaPortalDialog(2012)</VisibleCondition>

The VisibleCondition(s) to show the window. You can also use here the AND & OR- function.

 

</Dialog>

You always have to type this line. It’s the ending for the xml- file.

 

 

MediaPortal Window Visibility

MediaPortal Window

This condition will open or close the window when the current MediaPortal window is open, see: MediaPortal Window wiki for correct window Id's to set.
 

Visible Conditions:

  • IsMediaPortalWindow(WindowID)
  • IsMediaPortalPreviousWindow(WindowID)

 

This example will open the window when the current MediaPortal window is "ClassicHome" (window Id 0)

<VisibleCondition>IsMediaPortalWindow(0)</VisibleCondition>

This example will open the window when the MediaPortal window is 6 or 500

<VisibleCondition>IsMediaPortalWindow(6) || IsMediaPortalWindow(500)</VisibleCondition>

This example will open the window when the previous MediaPortal window was "Music" (window Id 500)

<VisibleCondition>IsMediaPortalPreviousWindow(500)</VisibleCondition>

 

Dialog Window

This condition will open or close the Dialog when the current MediaPortal Dialog is open, see: MediaPortal Dialog wiki for correct window Id's to set.
 

Visible Conditions:

  • IsMediaPortalDialog(WindowID)

 

This example will open the Dialog when the current MediaPortal Dialog is "Menu" (window Id 2012)

<VisibleCondition>IsMediaPortalDialog(2012)</VisibleCondition>

This example will open the Dialog when the MediaPortal Dialog is 100 or 2012

<VisibleCondition>IsMediaPortalDialog(100) || IsMediaPortalDialog(2012)</VisibleCondition>

 

 

Player

This condition will open the window when MediaPortal player is playing or playing a certain playback type

Playback Types:

  • IsPlayer(None)
  • IsPlayer(IsTV)
  • IsPlayer(IsCDA)
  • IsPlayer(IsDVD)
  • IsPlayer(IsVideo)
  • IsPlayer(IsMusic)
  • IsPlayer(IsRadio)
  • IsPlayer(IsTVRecording)
  • IsPlayer(myFilms)
  • IsPlayer(MovingPictures)
  • IsPlayer(MPTVSeries)
  • IsPlayer(mvCentral)
  • IsPlayer(YouTubeFM)
  • IsPlayer(OnlineVideos)
  • IsPlayer(MyAnime)
  • IsPlayer(Rockstar)
  • IsPlayer(PandoraMusicBox)
  • IsPlayer(RadioTime)
  • IsPlayer(Streamradio)

 

The example below will open the window when the current playback is music

<VisibleCondition>IsPlayer(IsMusic)</VisibleCondition>

In the next example below will show how to link conditions together with “OR”- Function, The window will open when a CD or DVD is playing

<VisibleCondition>IsPlayer(IsCDA) || IsPlayer(IsDVD)</VisibleCondition>

In the next example below will show how to link conditions together with “AND”- Function, The window will open when MediaPortal Window BasicHome is visible and CD is playing

<VisibleCondition>IsMediaPortalWindow(35) && IsPlayer(IsCDA)</VisibleCondition>

 

Other Conditions

The following Conditions can be set if you need a special visible Condition.

 

MediaPortal related:

  • IsMediaPortalListLayout(Vertical)
  • IsMediaPortalListLayout(Horizontal)
  • IsMediaPortalListLayout(CoverFlow)
  • IsMediaPortalControlFocused(controlId)
  • IsPluginEnabled(pluginName)
  • IsTvRecording
  • IsMediaPortalConnected
  • IsTVServerConnected

 

MPDisplay related:

  • IsSkinOptionEnabled(SkinOption)
  • IsControlVisible(Control)
  • IsMPDisplayConnected

 

You can also use the AND " && " / OR " || " function here.

 

If you want to handle a visible Condition if there should one or more condition(s) NOT visible, just type a "!" in front of the condition.

The example below will show a control when the current playback is "not" music

<VisibleCondition>!IsPlayer(IsMusic)</VisibleCondition>

You also can use here AND / OR functions and you can use it with all Visible Conditions!

 

Animations

Animations can be applied to all Window, Dialog and Control types. Windows and Dialog types contain "AnimationWindowOpen" and "AnimationWindowClose" animation conditions, however Controls contain more animation conditions, see: Base Control xml element for information on the different animation conditions for Controls.

 

Each animation has its own set of animation values but all animation entries have common properties which are explained below.

 

<Animationx:type="Type"Condition="AnimationCondition"Duration="10" Delay="10"Easing="EaseInOut"Reverse="true"Repeat="1"Values.../> 

 

Type = Indicates the type of animation (Fade, Zoom, Slide, Rotate)

Condition= Indicates condition of animation (WindowOpen, WindowClose, TouchDown, TouchUp, VisibleTrue, VisibleFalse, FocusTrue, FocusFalse, PropertyChanging, PropertyChanged)

Duration = The duration in milliseconds the animation will last.

Delay = The duration in milliseconds to wait before starting the animation

EasingMode = The easing property of the animation, see: EasingMode for more information

Reverse = Set to True will play the animation in reverse when it is finished.

Repeat = Sets how many times to Repeat the whole animation

Values... = Each animation has its own set of values which are explained for each animation below.

Note: All of these animation properties MUST be included in you animation xml entry

 

 

Fade Animation

The Fade animation is a simple animation to fade a control in or out. setting the first value to "Fade" indicates this is a fade animation as explained above.

 Fade animates the controls Opacity value in a range of 0% - 100%. The xml entry for a fade animation is as follows.

 

<Animationx:type="*Fade*"Condition="AnimationCondition"Duration="" Delay=""Easing=""Reverse=""Repeat=""*_From_**_="0"_**_To_**_="100"_*/> 

 

Fade = Indicates this is a Fade animation

From = The controls Opacity value to start fading from, value between 0 and 100

To = The value to fade the controls Opacity value to value between 0 and 100

 

 The example below will fade the control until its invisible over a time of 1 second when the window opens.

<Animationx:type="Fade"Condition="WindowOpen"Duration="1000" Delay="0"Easing="None"Reverse="False"Repeat="1"_From__="100"__To__="0"_/>

 

The example below will fade the control until its invisible over a time of 1 second and back again when the control is touched.

<Animationx:type="Fade"Condition="TouchDown"Duration="1000" Delay="0"Easing="None"Reverse="True"Repeat="1"_From__="100"__To__="0"_/>

 

 

Zoom Animation

The Zoom animation is a simple animation to zoom a control in or out. setting the first value to "Zoom" indicates this is a zoom animation as explained above.

 Zoom animates the controls Width, Height, PosX, PosY values in a range of 0% - 100% or 0% - -100%. The xml entry for a zoom animation is as follows.

 

<Animationx:type="*Zoom*"Condition="AnimationCondition"Duration="" Delay=""Easing=""Reverse=""Repeat=""*_From_**_="0"_**_To_**_="100"_*/>

 

Zoom = Indicates this is a Zoom animation

From = The controls zoom percent to start from, 0 being its original size

To = The value to zoom the control to in percent, a positive value will make it bigger, a negative value will make it smaller.

 

The example below will zoom the control to twice is original size

<Animationx:type="Zoom"Condition="WindowOpen"Duration="1000" Delay="0"Easing="None"Reverse="False"Repeat="1"_From__="0"__To__="100"_/>

 

The example below will zoom the control to half is original size and back again

<Animationx:type="Zoom"Condition="WindowOpen"Duration="1000" Delay="0"Easing="None"Reverse="False"Repeat="1"_From__="0"__To__="\-50"_/>

 

 

Slide Animation

The Slide animation is an animation to slide(move) a control to an new location on the window. setting the first value to "Slide" indicates this is a slide animation as explained above.

 Slide animates the controls PosX, PosY values by a determined amount of pixels relative to the windows size.

 The xml entry for a zoom animation is as follows.

 

<Animationx:type="*Slide*" Condition="AnimationCondition" Duration="" Delay="" Easing="" Reverse="" Repeat="1" *StartX**=""* *StartY**=""* *StartZ**=""* *EndX**=""* *EndY**=""* *EndZ**=""*/>

 

Slide = Indicates this is a Fade animation

StartX= The controls PosX value to start from. this normally is the controls PosX value

StartY = The controls PosY value to start from. this normally is the controls PosY value

StartZ = The controls PosY value to start from. this normally is the controls PosY value

EndX = The controls PosX value slide(move) to.

EndY = The controls PosY value slide(move) to.

EndZ = The controls PosY value slide(move) to.

 

 The example below will slide the control to 200 pixels to the right from a starting position of X=20, Y=20

<Animationx:type="Slide" Condition="WindowOpen" Duration="1000" Delay="0" Easing="None" Reverse="False" Repeat="1" StartX="20" StartY="20" StartZ="0" EndX="220" EndY="20" EndZ="0" />

 

The example below will slide the control to 200 pixels to the right and 20 pixels down from a starting position of X=20, Y=20

<Animationx:type="Slide" Condition="WindowOpen" Duration="1000" Delay="0" Easing="None" Reverse="False" Repeat="1" StartX="20" StartY="20" StartZ="0" EndX="220" EndY="40" EndZ="0" />

 

The example below will slide the control to 200 pixels to the right from a starting position of X=20, Y=20 and back again

<Animationx:type="Slide" Condition="WindowOpen" Duration="1000" Delay="0" Easing="None" Reverse="True" Repeat="1" StartX="20" StartY="20" StartZ="0" EndX="220" EndY="20" EndZ="0" />

 

 

Rotate Animation

The Rotate animation is an animation to rotate a control in 3D space. setting the first value to "Rotate" indicates this is a rotate animation as explained above.

 Rotate animates the controls Pos3DX, Pos3DY, Pos3DZ, Center3DX, Center3DY, Center3DZ values by a determined amount of degrees.

 The xml entry for a zoom animation is as follows.

 

<Animationx:type="*Rotate*" Condition="AnimationCondition" Duration="" Delay="" Easing="" Reverse="" Repeat="1" *Pos3DXFrom**="10"* *Pos3DXTo**="10"* *Pos3DCenterXFrom**="10"* *Pos3DCenterXTo**="10"* *Pos3DYFrom**="10"* *Pos3DYTo**="10"* *Pos3DCenterYFrom**="10"* *Pos3DCenterYTo**="10"* *Pos3DZFrom**="10"* *Pos3DZTo**="10"* *Pos3DCenterZFrom**="10"* *Pos3DCenterZTo**="10" />*

 

Rotate = Indicates this is a rotate animation in degrees (- or +)

Pos3DXFrom = The Pos3DX value to start the animation from in degrees(- or +)

Pos3DXTo = The Pos3DX value animation to in degrees(- or +)

Pos3DCenterXFrom = The Center3DX value to start the animation from in degrees(- or +)

Pos3DCenterXTo = The Center3DX value animation to in degrees(- or +)

Pos3DYFrom = The Pos3DY value to start the animation from in degrees(- or +)

Pos3DYTo = The Pos3DY value animation to in degrees(- or +)

Pos3DCenterYFrom = The Center3DY value to start the animation from in degrees(- or +)

Pos3DCenterYTo = The Center3DY value animation to in degrees(- or +)

Pos3DZFrom = The Pos3DZ value to start the animation from in degrees(- or +)

Pos3DZTo = The Pos3DZ value animation to in degrees(- or +)

Pos3DCenterZFrom = The Center3DZ value to start the animation from in degrees(- or +)

Pos3DCenterZTo = The Center3DZ value animation to in degrees(- or +)

 

See: Control 3D Coordinates for more explanations on the 3D positions.

 

 

The example below will rotate the control in a full rotation on the X axis.

<Animationx:type="Rotate" Condition="WindowOpen" Duration="1000" Delay="0" Easing="None" Reverse="False" Repeat="1" Pos3DXFrom="0" Pos3DXTo="360" Pos3DCenterXFrom="0" Pos3DCenterXTo="0" Pos3DYFrom="0" Pos3DYTo="0" Pos3DCenterYFrom="0" Pos3DCenterYTo="0" Pos3DZFrom="0" Pos3DZTo="0" Pos3DCenterZFrom="0" Pos3DCenterZTo="0" />

 

The example below will rotate the control backwards in a full rotation on the Y axis.

<Animationx:type="Rotate" Condition="WindowOpen" Duration="1000" Delay="0" Easing="None" Reverse="False" Repeat="1" Pos3DXFrom="0" Pos3DXTo="0" Pos3DCenterXFrom="0" Pos3DCenterXTo="0" Pos3DYFrom="0" Pos3DYTo="-360" Pos3DCenterYFrom="0" Pos3DCenterYTo="0" Pos3DZFrom="0" Pos3DZTo="0" Pos3DCenterZFrom="0" Pos3DCenterZTo="0" />

 

The example below will rotate the control on its top left corner on the Z axis, where the controls size is H=100, W=200, in this example we set the Center3DX and Center3DY to the edges of the control.

<Animationx:type="Rotate" Condition="WindowOpen" Duration="1000" Delay="0" Easing="None" Reverse="False" Repeat="1" Pos3DXFrom="0" Pos3DXTo="0" Pos3DCenterXFrom="-50" Pos3DCenterXTo="-50" Pos3DYFrom="0" Pos3DYTo="-360" Pos3DCenterYFrom="-100" Pos3DCenterYTo="-100" Pos3DZFrom="0" Pos3DZTo="360" Pos3DCenterZFrom="0" Pos3DCenterZTo="0" />

 

Note: The best way to understand rotate animations is to experiment in your skin with different values.

 

 

Easing Mode

Easing can be used to make you animation appear to accelerate/decelerate throughout the duration of the animation, this can create a more realistic and smother animation.

?EasingMode Types

These are the EasingMode that can be used in you animation xml entry.

  • None
  • EaseIn
  • EaseOut
  • EaseInOut

 

An EasingMode of "None" will play the animation at a constant speed, however you can control whether the animation accelerates, decelerates, or both by specifying other EasingMode types. The following graph below demonstrates the different values of EasingMode where f(t) represents the animation progress and t represents time.

 

 

 

Controls

Control Base

All controls contain common properties used to set the appearance and actions of that control.

Most properties contain a default value so only properties you would like to change will be needed in the xml. Each control type will contain extra properties specific to that control.

 

The controls full xml element is described below.

 

<WindowControls>
    <Controlx:type="Label">
      <Name>Name</Name>
      <Id>1</Id>
      <Description>My Control</Description>
      <IsDefault>false</IsDefault>
      <Width>0</Width>
      <Height>0</Height>
      <PosX>0</PosX>
      <PosY>0</PosY>
      <PosZ>0</PosZ>
      <Pos3DX>0</Pos3DX>
      <Pos3DY>0</Pos3DY>
      <Pos3DZ>0</Pos3DZ>
      <Center3DX>0</Center3DX>
      <Center3DY>0</Center3DY>
      <Center3DZ>0</Center3DZ>
      <VisibleCondition></VisibleCondition>
      <IsWindowOpenVisible>true</IsWindowOpenVisible>
      <Animations></Animations>
    </Control>
  </WindowControls>

 

<WindowControls>

This indicates the start of the Controls List.

 

<Controlx:type="Type">

(required) 

This indicates the controls type as listed above e.g. Label

 

<Name>Name of the Control</Name>

(required) 

The Name of this Control

 

<Id>1</Id>

 (required) 

For each Control there has to be a unique ID within this window.

 

<Description>My Control</Description>

The description of the control, try keep the control name logical so it can be found easily in your window xml

 

<IsDefault>false</IsDefault>

(required)

This sets if the window is the default window or not. There must be at least 1 window where this function must be “True”

 

<Width>0</Width>

This sets the controls width (in pixels).

 

<Height>0</Height>

This sets the controls height (in pixels).

 

<PosX>0</PosX>

This sets the controls "X" (left) position (in pixels) on the window based on the windows default size explained earlier

e.g. setting the controls "PosX" to 20 will place the controls left edge 20 pixels from the left side of the window

 

<PosY>0</PosY>

This sets the controls "Y" (left) position (in pixels) on the window based on the windows default size explained earlier

e.g. setting the controls "PosY" to 20 will place the controls top  edge 20 pixels from the top  of the window

 

<Pos3DX>0</Pos3DX>

Setting the controls "Pos3DX" position will rotate the control on its X axis, the value is indicated in degrees, (0 to 360) negative or positive, see: Control 3D Coordinate+s+ for more information and examples

 

<Pos3DY>0</Pos3DY>

Setting the controls "Pos3DY" position will rotate the control on its Y axis, the value is indicated in degrees, (0 to 360) negative or positive, see:   Control 3D Coordinates for more information and examples

 

<Pos3DZ>0</Pos3DZ>

Setting the controls "Pos3DZ" position will rotate the control on its Z axis, the value is indicated in degrees, (0 to 360) negative or positive, see: Control 3D Coordinate+s+ for more information and examples

 

<Center3DX>0</Center3DX>

Setting the controls "Center3DX" position of the controls X axis (in pixels) 

 see: Control 3D Coordinate+s+ for more information and examples

 

<Center3DY>0</Center3DY>

Setting the controls "Center3DY" position of the controls Y axis (in pixels) 

 see: Control 3D Coordinate+s+ for more information and examples

 

<Center3DZ>0</Center3DZ>

Setting the controls "Center3DZ" position of the controls Z axis (in pixels) 

 see: Control 3D Coordinate+s+ for more information and examples

 

 <VisibleCondition></VisibleCondition>

This sets the group of Visible Conditions for this control, the control will be visible/invisible based on the MPDisplay/MediaPortal conditions, see: Control Visibility for more information

 

<IsWindowOpenVisible></IsWindowOpenVisible>

(default: True)

This indicates if the control should be made visible when the window opens

 

<Animations></Animations>

These properties set the animations to play when the window is opened/closed, see: Control Animations for more information on setting animations

  

</Control>

(required)

This indicates the end of the controls xml element.

 

</WindowControls>

(required)

This indicates the end of the Window Controls xml elements.

 

?Control 3D Coordinate+s+

The coordinate system for 2D positions (PosX, PosY) locates the origin in the upper left of the window. In the 2D system, positive "PosX" values proceed to the right and positive "PosY" values proceed downward. In the 3D coordinate values, however, the origin is located in the center of the window area, with positive "Pos3DX" values proceeding to the right but positive "Pos3DX" values proceeding upward instead, and positive "Pos3DZ" values proceeding outward from the origin, toward the viewer.

 

 

 

 

 

Brushes

There are three different kinds of Brushes you can use on all Controlls.

  • ImageBrush
  • GradientBrush
  • ColorBrush

 

ImageBrush

Here an example for a NoFocusBrush of a Button:

<NoFocusBrush x:type="ImageBrush" Image="\audio_nothumb.png" Stretch="Fill" />

 

ColorBrush

Here an example for a FocusBrush of a Button:

<FocusBrush x:type="ColorBrush" Color="#FF00BFFF" />

 

GradientBrush

Here an example for a ShadeBrush of a Button:

        <ShadeBrush x:type="GradientBrush">
          <GradientStops>
            <GradientStop Color="#0E000000" Offset="0.367" />
            <GradientStop Color="#FF000000" Offset="1" />
          </GradientStops>
          <Angle>Vertical</Angle>
        </ShadeBrush>

You can add as many GradientStops as you want.
Angle can be “Vertical” or “Horizontal”

 

 

Control Types

 

There are several different control types for MPDisplay.

  • Button
  • Image
  • Label
  • List
  • ProgressBar
  • Equalizer
  • Rectangle
  • Group

  

 

 

Button

The Button control is a simple control that users can press to perform actions, although all control types can send actions the Button control is more specialized to this task and provides feedback to the user when pressed by showing different Images, Colors or Gradients.

But compared to the old MPD++ Versions you can use here self-defined style sets. This means, you can add different StyleID’s (in this case a Button Style).
First possibility is to write everything into the control in every window you create (shown in red), or just to add different button styles into the Style xml file and just refer to this style (shown in blue).

 

The Button's full xml element is described below.

 

    <entry Any other Control Base property values......

 

      <MediaPortalFocusControls>
        <MediaPortalControlId>1</MediaPortalControlId>
        <MediaPortalControlId>2</MediaPortalControlId>
      </MediaPortalFocusControls>
<ButtonStyle>
        <BorderThickness>2,2,2,2</BorderThickness>
        <CornerRadius>3,3,3,3</CornerRadius>
        <NoFocusBrush x:type="ColorBrush" Color="#FF000000" />
        <NoFocusBorderBrush x:type="ColorBrush" Color="#FF00BFFF" />
        <FocusBrush x:type="ColorBrush" Color="#FF00BFFF" />
        <FocusBorderBrush x:type="ColorBrush" Color="#FF000000" />
        <ShadeBrush x:type="GradientBrush">
          <GradientStops>
            <GradientStop Color="#0E000000" Offset="0.367" />
            <GradientStop Color="#FF000000" Offset="1" />
          </GradientStops>
          <Angle>Vertical</Angle>
        </ShadeBrush>
        <GlossBrush x:type="ImageBrush" Image="\audio_nothumb.png" Stretch="Fill" />
        <EnableLabel>false</EnableLabel>
        <FontType>Angsana New</FontType>
        <FontSize>35</FontSize>
        <FocusFontBrush x:type="ColorBrush" Color="#FF000000" />
        <NoFocusFontBrush x:type="ColorBrush" Color="#FF00BFFF" />
        <LabelMargin>4,4,4,4</LabelMargin>
        <LabelHorizontalAlignment>Left</LabelHorizontalAlignment>
        <LabelVerticalAlignment>Top</LabelVerticalAlignment>
        <EnableImage>true</EnableImage>
        <ImageMargin>4,4,4,4</ImageMargin>
        <ImageHorizontalAlignment>Left</ImageHorizontalAlignment>
        <ImageVerticalAlignment>Top</ImageVerticalAlignment>
        <ImageStretch>None</ImageStretch>
        <ImageCornerRadius>6</ImageCornerRadius>
      </ButtonStyle>

or

<ButtonStyle StyleId="ButtonStyle" />

      <Image>\audio_nothumb.png</Image>
      <LabelText>NewButton</LabelText>
      <Actions>
        <Action Action="MediaPortalAction" Param="ACTION_REWIND" />
        <Action Action="ControlVisible" Param="10" />
      </Actions>

 

Explanation:

      <MediaPortalFocusControls>
        <MediaPortalControlId>1</MediaPortalControlId>
        <MediaPortalControlId>2</MediaPortalControlId>
      </MediaPortalFocusControls>

Specifies the ID of the button to the MediaPortal the button should focus pensated (here is no need to do this with the Visible Conditions and two button records)

 

<ButtonStyle>

(required)

Indicates where the Button Style is starting

 

<BorderThickness>2,2,2,2</BorderThickness>

Sets the thickness of the Border (Upper left, upper right, lower right, lower left)

 

<CornerRadius>3,3,3,3</CornerRadius>

Sets the Corner Radius of the Button (Upper left, upper right, lower right, lower left)

 

<NoFocusBrush x:type="ColorBrush" Color="#FF000000" />

Sets the look of the non-focused Button. This can be a ColorBrush, GradientBrush or an ImageBrush

 

<NoFocusBorderBrush x:type="ColorBrush" Color="#FF00BFFF" />

Sets the look of the Border of the non-focused Button. This can be a ColorBrush, GradientBrush or an ImageBrush

 

<FocusBrush x:type="ColorBrush" Color="#FF00BFFF" />

Sets the look of the focused Button. This can be a ColorBrush, GradientBrush or an ImageBrush

 

<FocusBorderBrush x:type="ColorBrush" Color="#FF000000" />

Sets the look of the Border of the focused Button. This can be a ColorBrush, GradientBrush or an ImageBrush

 

<ShadeBrush x:type="GradientBrush">

Sets the Shade of the Button. This can be a ColorBrush, GradientBrush or an ImageBrush

 

<GlossBrush x:type="ImageBrush" Image="\audio_nothumb.png" Stretch="Fill" />

Sets the Gloss of the Button. This can be a ColorBrush, GradientBrush or an ImageBrush

 

<EnableLabel>false</EnableLabel>

(default: True)

Type this if you don’t want to display a Label within the Button.

 

<FontType>Angsana New</FontType>

Sets the font that is used within the Button, if EnableLabel is set to “true”.

 

<FontSize>35</FontSize>

Sets the Size of the Font, if EnableLabel is set to “true”.

 

<FocusFontBrush x:type="ColorBrush" Color="#FF000000" />

The Look of the Font when in focus, if EnableLabel is set to “true”. This can be a ColorBrush, GradientBrush or an ImageBrush

 

<NoFocusFontBrush x:type="ColorBrush" Color="#FF00BFFF" />

The Look of the Font when it’s not focused, if EnableLabel is set to “true”. This can be a ColorBrush, GradientBrush or an ImageBrush

 

<LabelMargin>4,4,4,4</LabelMargin>

The Margin of the Position you set in the next two settings. (Left, Up, right, Down)

 

<LabelHorizontalAlignment>Left</LabelHorizontalAlignment>

Sets the Horizontal Alignment of the Label. (Left, Center, Right, Stretch)

 

<LabelVerticalAlignment>Top</LabelVerticalAlignment>

Sets the Vertical Alignment of the Label. (Top, Center, Bottom, Stretch)

 

<EnableImage>false</EnableImage>

(default: True)

Type this if you don’t want to display an Image within the Button.

 

<ImageMargin>4,4,4,4</ImageMargin>

The Margin of the Position you set in the next two settings. (Left, Up, right, Down)

 

<ImageHorizontalAlignment>Left</ImageHorizontalAlignment>

Sets the Horizontal Alignment of the Image. (Left, Center, Right, Stretch)

 

<ImageVerticalAlignment>Top</ImageVerticalAlignment>

Sets the Vertical Alignment of the Image. (Left, Center, Right, Stretch)

 

<ImageStretch>None</ImageStretch>

Sets, how the image is scaled. (None, Fill, Uniform, UniformToFill)

 

<ImageCornerRadius>6</ImageCornerRadius>

Sets the Corner Radius of the Image.

 

</ButtonStyle>

Indicates where the Button Style is ending.

 

<ButtonStyle StyleId="*Standard Button*" />

You can use this instead of all lines in red above, if you added these lines into the Style xml with a unique Style name. How you can add this into the Style xml will follow.

 

<Image>\audio_nothumb.png</Image>

Here you can set the Image you want to use, if EnableImage is set to true.

<LabelText>#selecteditem+ , +@Hello World</LabelText>

This sets the text to display on the Button, this can contain a "Property Tag" a "Language Property" or a combination of the two. see: Control Labels for more information.

 

<Actions>
  <Action Action="MediaPortalAction" Param="ACTION_REWIND" />
  <Action Action="ControlVisible" Param="10" />
</Actions>

Here you can set the Actions you can use with this Button.
An explanation, what Actions can be used will follow.

 

 

In Style xml

<ControlStyle x:type="ButtonStyle" StyleId="ButtonStyle">
      <BorderThickness>2,2,2,2</BorderThickness>
      <CornerRadius>3,3,3,3</CornerRadius>
      <NoFocusBrush x:type="ColorBrush" Color="#FF000000" />
      <NoFocusBorderBrush x:type="ColorBrush" Color="#FF00BFFF" />
      <FocusBrush x:type="ColorBrush" Color="#FF00BFFF" />
      <FocusBorderBrush x:type="ColorBrush" Color="#FF000000" />
      <ShadeBrush x:type="GradientBrush">
        <Angle>Vertical</Angle>
        <GradientStops>
          <GradientStop Color="#0E000000" Offset="0.367" />
          <GradientStop Color="#FF000000" Offset="1" />
        </GradientStops>
      </ShadeBrush>
      <GlossBrush x:type="ImageBrush" Image="\audio_nothumb.png" Stretch="Fill" />
      <FontType>Angsana New</FontType>
      <FontSize>35</FontSize>
      <FocusFontBrush x:type="ColorBrush" Color="#FF000000" />
      <NoFocusFontBrush x:type="ColorBrush" Color="#FF00BFFF" />
      <LabelMargin>4,4,4,4</LabelMargin>
      <LabelHorizontalAlignment>Left</LabelHorizontalAlignment>      <LabelVerticalAlignment>Top</LabelVerticalAlignment>
      <EnableImage>true</EnableImage>
      <ImageMargin>4,4,4,4</ImageMargin>
      <ImageHorizontalAlignment>Left</ImageHorizontalAlignment>
      <ImageVerticalAlignment>Top</ImageVerticalAlignment>
      <ImageStretch>None</ImageStretch>
      <ImageCornerRadius>6</ImageCornerRadius>
    </ControlStyle>

 

 Actions

You can use several Actions within MPDisplay Buttons.

 

MediaPortal related:

  • Previous Window

Returns to the previous Window  – e.g.

<Action Action="PreviousWindow" />
  • NowPlaying

Switches to the Now Playing screen if media is playing – e.g.

<Action Action=" NowPlaying " />
  • ChangeListView

Change the current ListControls Item Layout – e.g.

<Action Action=" ChangeListView " />
  • MediaPortalWindow

ID of the MediaPortal Window to open – e.g.

<Action Action=" MediaPortalWindow " Param="35" />
  • MediaPortalAction

Action to be started within MP – e.g.

<Action Action=" MediaPortalAction " Param="ACTION_REWIND" />

All usable commands can be found HERE

 

MPDisplay related:

  • Exit

Exits MPDisplay++ – e.g.

<Action Action=" Exit " />
  • LockWindow

Locks the current MPDisplay Window – e.g.

<Action Action=" LockWindow " />
  • CloseWindow

Closes the current window – e.g.

<Action Action=" CloseWindow " />
  • ControlVisible

ID of the Control to make visible/invisible – e.g.

<Action Action=" ControlVisible " Param="1" />
  • OpenWindow

ID of the MPDisplay Window to open – e.g.

<Action Action="OpenWindow" Param="10" />
  • OpenDialog

ID of the MPDisplay Dialog to open – e.g.

<Action Action="OpenDialog" Param="1000" />
  • SwitchTheme

Changed the current Skin Theme – e.g.

<Action Action=" SwitchTheme " />
  • Connect

Connects to the MPDisplay Server if connection is lost – e.g.

<Action Action=" Connect " />

 

Something else:

  • RunProgram

Starts a third party Program – e.g.

<Action Action=" RunProgram " Param="c:\Hello world.exe" />
  • KillProgram

Stops a third party Program – e.g.

<Action Action=" KillProgram " Param="c:\Hello world.exe" />

 

 

 

Image

The Image control is used to display an image from MediaPortal or an image from the skin Image folder.

Image also contains a "Cover" image to overlay the main image, this is typically used to display a clear CD/DVD case over a MediaPortal album/DVD image.

 

The Image's full xml element is described below.

 

<Control x:type="Image">
      <Name>NewImage</Name>
      <Id>1</Id>

    <entry Any other Control Base property values......

 

      <ImageStyle>
        <BorderThickness>2,2,2,2</BorderThickness>
        <CornerRadius>20,20,20,20</CornerRadius>
        <BackgroundBrush x:type="ImageBrush" Image="\audio_nothumb.png" Stretch="Uniform" />
        <BorderBrush />
      </ImageStyle>

Or

    <ImageStyle StyleId="Music Cover" />

      <Image>#selectedthumb</Image>
      <ImageStretch>Uniform</ImageStretch>
      <ImageCornerRadius>20</ImageCornerRadius>
      <ImageMargin>-80,-20,-20,-20</ImageMargin>
      <CoverImage x:type="ImageBrush" Image="\mediatip_cdbox.png" Stretch="Fill" />
      <CoverCornerRadius>0,0,0,0</CoverCornerRadius>

 

<ImageStyle>

Indicates where the Image Style is starting.

 

<BorderThickness>2,2,2,2</BorderThickness>

Sets the Border Thickness of the Image (Left, Top, Right, Bottom)

 

<CornerRadius>20,20,20,20</CornerRadius>

Sets the Corner Radius of the Image (Left, Top, Right, Bottom)

 

<BackgroundBrush x:type="ImageBrush" Image="\audio_nothumb.png" Stretch="Uniform" />

Sets the Background Brush (In this case, used as a default Picture).

 

<BorderBrush  x:type="ColorBrush" Color="#00000000" />

Sets the Border Brush. If you don’t need a Border use: <BorderBrush /> instead.

 

</ImageStyle>

Indicates where the Image Style is ending.

 

Or

<ImageStyle StyleId="Music Cover" />

You can use this instead of all lines in red above, if you added these lines into the Style xml with a unique Style name. How you can add this into the Style xml will follow.

 

<Image>#selectedthumb</Image>

Sets the Property or Image you want to use.

 

<ImageStretch>Uniform</ImageStretch>

Sets the scaling of the image (None, Fill, Uniform, UniformToFill)

 

<ImageCornerRadius>20</ImageCornerRadius>

Sets the Corner Radius of the image.

 

<ImageMargin>-80,-20,-20,-20</ImageMargin>

Sets the Margin of the image to the used CoverImage (Left, Top, Right, Bottom)

 

<CoverImage x:type="ImageBrush" Image="\mediatip_cdbox.png" Stretch="Fill" />

Sets the used Image for the Cover and the scaling of it (None, Fill, Uniform, UniformToFill).

 

<CoverCornerRadius>0,0,0,0</CoverCornerRadius>

Sets the Cover Corner Radius (Left, Top, Right, Bottom).

 

In Style xml

    <ControlStyle x:type="ImageStyle" StyleId="Music Cover">

      <BorderThickness>2,2,2,2</BorderThickness>

      <CornerRadius>20,20,20,20</CornerRadius>

      <BackgroundBrush x:type="ImageBrush" Image="\audio_nothumb.png" Stretch="Uniform" />

      <BorderBrush />

    </ControlStyle>

 

 

 

Label

The Label control is used to display text from MediaPortal or an text from the skin Language Manager.

Labels have the ability to scroll its content if the label is longer than the labels width.

 

The Label full xml element is described below.

 

<Control x:type="Label">
      <Name>NewLabel</Name>
      <Id>1</Id>

    <entry Any other Control Base property values......

 

      <LabelStyle>
        <FontType>Roboto</FontType>

        <FontSize>30</FontSize>
        <FontBrush x:type="ColorBrush" Color="#FFF8F8FF" />
      </LabelStyle>

Or

      <LabelStyle StyleId="Roboto 30 Bright">
        <FontSize>20</FontSize>
      </LabelStyle>

      <LabelText>#selecteditem</LabelText>
      <IsVertical>true</IsVertical>
      <IsScrollingEnabled>false</IsScrollingEnabled>
      <ScrollDelay>2</ScrollDelay>
      <ScrollSpeed>8</ScrollSpeed>
      <IsScrollWrapEnabled>false</IsScrollWrapEnabled>
      <ScrollSeperator>-------------------</ScrollSeperator>

 

<LabelStyle>

Indicates where the Label Style is starting.

<FontType>Roboto</FontType>

Sets the Font for the Label

<FontSize>30</FontSize>

Sets the Font Size for the Label.

<FontBrush x:type="ColorBrush" Color="#FFF8F8FF" />

Sets the Brush that is used for the Label (ColorBrush, GradientBrush, Image)

</LabelStyle>

Indicates the ending of the Label Style.

 

Or

 

<LabelStyle StyleId="Roboto 30 Bright">
<FontSize>20</FontSize>
</LabelStyle>

You can use this instead of all lines in red above, if you added these lines into the Style xml with a unique Style name. How you can add this into the Style xml will follow.

 

<LabelText>#selecteditem</LabelText>

This sets the text to display on the Label, this can contain a "Property Tag" a "Language Property" or a combination of the two

<IsVertical>true</IsVertical>

Set this to “True” if you need a TextBox. It indicates, that the scrolling will be Vertical instead of Horizontal.

<IsScrollingEnabled>True</IsScrollingEnabled>

Set this to True if you are using a Property Tag where it could be that the Label is too small to show everything (e.g. News Feed). This will override the Global Skin Setting value.

<ScrollDelay>2</ScrollDelay>

Sets the Delay before Scrolling starts.
This will override the Global Skin Setting value.

<ScrollSpeed>8</ScrollSpeed>

Sets the Speed of Scrolling.
This will override the Global Skin Setting value.

<IsScrollWrapEnabled>True</IsScrollWrapEnabled>

Set this to true if you want to display a wrap.
This will override the Global Skin Setting value.

<ScrollSeperator>-------------------</ScrollSeperator>

Indicates how the Scroll Wrap looks like.
This will override the Global Skin Setting value.

 

In Style xml

<ControlStyle x:type="LabelStyle" StyleId="Roboto 30 Bright">

      <FontType>Roboto</FontType>

      <FontSize>30</FontSize>

      <FontBrush x:type="ColorBrush" Color="#FFF8F8FF" />

    </ControlStyle>

 

 

ListControl

The ListControl control is a special control to show a visual representation of the current MediaPortal list of items that can be seen in the MediaPortal application, this also allows you to interact with the items in the MediaPortal application.

The ListControl is the most complex control and contains a lot of xml entry values

 

The ListControl full xml element is described below.

<Control x:type="List">
      <Name>NewList</Name>
      <Id>1</Id>

    <entry Any other Control Base property values......

      <ListControlStyle>
        <BorderThickness>2,2,2,2</BorderThickness>
        <CornerRadius>5,5,5,5</CornerRadius>
        <BackgroundBrush />
        <BorderBrush />
        <GlossBrush />
      </ListControlStyle>

Or

<ListControlStyle StyleId="Empty" />

 

      <ListType>MPDisplayLanguages</ListType>
      <ListLayout>Auto</ListLayout>

      <VerticalItemStyle>
        <BorderThickness>2,2,2,2</BorderThickness>
        <CornerRadius>5,5,5,5</CornerRadius>
        <NoFocusBrush x:type="ColorBrush" Color="#FF000000" />
        <NoFocusBorderBrush x:type="ColorBrush" Color="#FF00BFFF" />
        <FocusBrush x:type="ColorBrush" Color="#FF00BFFF" />
        <FocusBorderBrush x:type="ColorBrush" Color="#FF000000" />
        <EnableLabel>false</EnableLabel>
        <FontType>Georgia</FontType>
        <FontWeight>Bold</FontWeight>
        <FontSize>35</FontSize>
        <FocusFontBrush x:type="ColorBrush" Color="#FF000000" />
        <NoFocusFontBrush x:type="ColorBrush" Color="#FF00BFFF" />
        <LabelMargin>60,0,0,0</LabelMargin>
        <LabelHorizontalAlignment>Right</LabelHorizontalAlignment>
        <LabelVerticalAlignment>Top</LabelVerticalAlignment>
        <EnableImage>true</EnableImage>
        <ImageMargin>4,4,4,4</ImageMargin>
        <ImageHorizontalAlignment>Right</ImageHorizontalAlignment>
        <ImageStretch>Fill</ImageStretch>
        <ImageCornerRadius>5</ImageCornerRadius>
        <Width>599</Width>
        <Height>51</Height>
        <ItemMargin>1,1,1,1</ItemMargin>
        <HorizontalAlignment>Left</HorizontalAlignment>
        <VerticalAlignment>Top</VerticalAlignment>
      </VerticalItemStyle>

Or

<VerticalItemStyle StyleId="Vertical List" />

 

      <HorizontalItemStyle>
       
<entry All other VerticalItemStyle property value......
      </HorizontalItemStyle>

Or

<HorizontalItemStyle StyleId="Horizontal List" />

 

      <CoverFlowItemStyle>
       
<entry All other VerticalItemStyle property value......
      </CoverFlowItemStyle>

Or

<CoverFlowItemStyle StyleId="CoverFlow List" />

    </Control>

 

 

<ListControlStyle>

Indicates the Start of the ListControl Style

 

<BorderThickness>2,2,2,2</BorderThickness>

Sets the Border Thickness of the ListControl

 

<CornerRadius>5,5,5,5</CornerRadius>

Sets the Outer Radius of the ListControl

 

<BackgroundBrush />

Background Brush for the Control. Can be a simple Color, a Gradient or an Image.

 

<BorderBrush />

Border Brush for the Control. Can be a simple Color, a Gradient or an Image.

 

<GlossBrush />

Gloss Brush for the Control. Can be a simple Color, a Gradient or an Image.

 

</ListControlStyle>

Indicates the End of the ListControl Style

 

Or

<ListControlStyle StyleId="Empty" />

You can use this instead of all lines in red above, if you added these lines into the Style xml with a unique Style name. How you can add this into the Style xml will follow.

 

<ListType>MPDisplayLanguages</ListType>

Defines the List Type of the LC. Take a look at the Chapter “List Type” of what is possible to use.

 

<ListLayout>Auto</ListLayout>

Defines the Layout of the List. Auto means, that the LC is always the same as you use it in MediaPortal. The other three options are: Vertical, Horizontal and CoverFlow.

 

<VerticalItemStyle>

Indicates the start of the Vertical Style

 

<BorderThickness>2,2,2,2</BorderThickness>

Border Thickness of the List Items

 

<CornerRadius>5,5,5,5</CornerRadius>

Corner Radius of the List Items

 

<NoFocusBrush x:type="ColorBrush" Color="#FF000000" />

Defines how the non-focused Brush should be. Can be a simple Color, a Gradient or an Image.

 

<NoFocusBorderBrush x:type="ColorBrush" Color="#FF00BFFF" />

Defines how the Border of the non-focused Brush should be. Can be a simple Color, a Gradient or an Image.

 

<FocusBrush x:type="ColorBrush" Color="#FF00BFFF" />

Defines how the focused Brush should be. Can be a simple Color, a Gradient or an Image.

 

<FocusBorderBrush x:type="ColorBrush" Color="#FF000000" />

Defines how the Border of the focused Brush should be. Can be a simple Color, a Gradient or an Image.

 

<EnableLabel>false</EnableLabel>

Defines if there is a Label in the List Item

 

<FontType>Georgia</FontType>

Defines the Font that is used in the List

 

<FontWeight>Bold</FontWeight>

Here you can set the look of the Font. Possible are: Black, Bold, ExtraBlack, ExtraBold, ExtraLight, Light, Medium, Normal, SemiBold, Thin

 

<FontSize>35</FontSize>

Fontsize that should be used.

 

<FocusFontBrush x:type="ColorBrush" Color="#FF000000" />

Defines how the focused Font Brush should be. Can be a simple Color, a Gradient or an Image.

 

<NoFocusFontBrush x:type="ColorBrush" Color="#FF00BFFF" />

Defines how the non-focused Font Brush should be. Can be a simple Color, a Gradient or an Image.

 

<LabelMargin>60,0,0,0</LabelMargin>

Defines the Margin of the Label beginning with “LabelHorizontalAlignement” and “LabelVerticalAlignement”. (Left, Top, Right, Bottom)

 

<LabelHorizontalAlignment>Right</LabelHorizontalAlignment>

The Labels Horizontal Alignement. (Left, Center, Right, Stretch)

 

<LabelVerticalAlignment>Top</LabelVerticalAlignment>

The Labels Vertical Alignement. (Top, Center, Bottom, Stretch)

 

<EnableImage>true</EnableImage>

Defines if there is an Image in the List Item

 

<ImageMargin>4,4,4,4</ImageMargin>

Margin of the Image to the rim of the Item (Left, Top, Right, Bottom)

 

<ImageHorizontalAlignment>Right</ImageHorizontalAlignment>

The Image Horizontal Alignement. (Left, Center, Right, Stretch)

 

<ImageVerticalAlignment>Right</ ImageVerticalAlignment >

The Image Vertical Alignement. (Top, Center, Bottom, Stretch)

 

<ImageStretch>Fill</ImageStretch>

Defines the Scaling of the Image. (None, Fill, Uniform, UniformToFill)

 

<ImageCornerRadius>5</ImageCornerRadius>

Corner Radius of the Image

 

<Width>599</Width>

Sets the Width of the List Item.

 

<Height>51</Height>

Sets the Height of the List Item.

 

<ItemMargin>1,1,1,1</ItemMargin>

Sets the Margin of the List Items (Left, Top, Right, Bottom)

 

<HorizontalAlignment>Left</HorizontalAlignment>

Horizontal Alignement of the List Items (Left, Center, Right, Stretch)

 

<VerticalAlignment>Top</VerticalAlignment>

Vertical Alignement of the List Items (Top, Center, Bottom, Stretch)

 

</VerticalItemStyle>

Indicates the End of the Vertical Style.

 

Or

<VerticalItemStyle StyleId="Vertical List" />

You can use this instead of all lines in red above, if you added these lines into the Style xml with a unique Style name. How you can add this into the Style xml will follow.

 

<HorizontalItemStyle>

Indicates the Start of the Horizontal Style

 

… All settings are the same as in Vertical Style.

 

</HorizontalItemStyle>

Indicates the End of the Horizontal Style

 

Or

<HorizontalItemStyle StyleId="Horizontal List" />

You can use this instead of all lines in red above, if you added these lines into the Style xml with a unique Style name. How you can add this into the Style xml will follow.

 

<CoverFlowItemStyle>

Indicates the Start of the Horizontal Style

 

… All settings are the same as in Vertical Style.

 

</CoverFlowItemStyle>

Indicates the Endof the Horizontal Style

 

Or

<CoverFlowItemStyle StyleId="CoverFlow List" />

You can use this instead of all lines in red above, if you added these lines into the Style xml with a unique Style name. How you can add this into the Style xml will follow.

 

 

ListStyle in Style xml

<ControlStyle x:type="ListStyle" StyleId="Empty">

      <BorderThickness>0,0,0,0</BorderThickness>

      <CornerRadius>0,0,0,0</CornerRadius>

      <BackgroundBrush />

      <BorderBrush />

      <GlossBrush />

    </ControlStyle>

 

Vertical List in Style xml

<ControlStyle x:type="ListItemStyle" StyleId="Vertical List">

      <BorderThickness>2,2,2,2</BorderThickness>

      <CornerRadius>5,5,5,5</CornerRadius>

      <NoFocusBrush x:type="ColorBrush" Color="#FF000000" />

      <NoFocusBorderBrush x:type="ColorBrush" Color="#FF00BFFF" />

      <FocusBrush x:type="ColorBrush" Color="#FF00BFFF" />

      <FocusBorderBrush x:type="ColorBrush" Color="#FF000000" />

      <FontType>Georgia</FontType>

      <FontWeight>Bold</FontWeight>

      <FontSize>35</FontSize>

      <FocusFontBrush x:type="ColorBrush" Color="#FF000000" />

      <NoFocusFontBrush x:type="ColorBrush" Color="#FF00BFFF" />

      <LabelMargin>60,0,0,0</LabelMargin>

      <LabelHorizontalAlignment>Right</LabelHorizontalAlignment>

      <LabelVerticalAlignment>Top</LabelVerticalAlignment>

      <ImageMargin>4,4,4,4</ImageMargin>

      <ImageHorizontalAlignment>Right</ImageHorizontalAlignment>

      <ImageStretch>Fill</ImageStretch>

      <ImageCornerRadius>5</ImageCornerRadius>

      <Width>599</Width>

      <Height>51</Height>

      <ItemMargin>1,1,1,1</ItemMargin>

      <HorizontalAlignment>Left</HorizontalAlignment>

      <VerticalAlignment>Top</VerticalAlignment>

    </ControlStyle>

 

CoverFlow List in Style xml

 

<ControlStyle x:type="ListItemStyle" StyleId="CoverFlow List">

              <entry All other VerticalItemStyle property value......

    </ControlStyle>

  

 Horizontal List in Style xml

<ControlStyle x:type="ListItemStyle" StyleId="Horizontal List">

              <entry All other VerticalItemStyle property value......

    </ControlStyle>

 

 

 

 

ListType

 

  • MediaPortalListControl

This will display the current MediaPortal “Facade” list. (Music, Videos, etc.)

 

  • MediaPortalMenuControl

This will display the focused MediaPortal menu control (Home, Plugins)

 

  • MediaPortalButtonGroup

This will display the current focused MediaPortal button group

 

  • MPDisplaySkins

This will display the installed MPDisplay Skins

 

  • MPDisplayStyles

This will display the choosable MPDisplay Styles

 

  • MPDisplayLanguages

This will display the chooseable MPDisplay Languages

 

 

 

Progress

The Progress control is progress bar used to display progress of media etc. from MediaPortal.

Progress can accept property tag values that represent percentage(0 - 100).

 

The Progress full xml element is described below.

 

<Control x:type="ProgressBar">
      <Name>NewProgressBar</Name>
      <Id>1</Id>
    <entry Any other Control Base property values......

 

      <ProgressBarStyle>
        <BorderThickness>1,1,1,1</BorderThickness>
        <CornerRadius>5,5,5,5</CornerRadius>
        <BackgroundBrush x:type="ColorBrush" Color="#FF000000" />
        <BorderBrush x:type="ColorBrush" Color="#FFC0C0C0" />
        <ShadeBrush x:type="GradientBrush">
          <Angle>Vertical</Angle>
          <GradientStops>
            <GradientStop Color="#00000000" Offset="0" />
            <GradientStop Color="#FF000000" Offset="1" />
          </GradientStops>
        </ShadeBrush>
        <BarMargin>2,2,2,2</BarMargin>
        <BarBorderThickness>1,1,1,1</BarBorderThickness>
        <BarCornerRadius>3,3,3,3</BarCornerRadius>
        <BarBorderBrush x:type="ColorBrush" Color="#FFC0C0C0" />
        <BarBackgroundBrush x:type="GradientBrush">
          <Angle>Vertical</Angle>
          <GradientStops>
            <GradientStop Color="#FF00BFFF" Offset="0.563" />
            <GradientStop Color="#FF1294BF" Offset="1" />
          </GradientStops>
        </BarBackgroundBrush>
      </ProgressBarStyle>

Or

<ProgressBarStyle StyleId="Standard Bar" />

 

      <ProgressValue>#percentage</ProgressValue>
    </Control>

 

<ProgressBarStyle>

Indicates the start of the Progress Bar Style

 

<BorderThickness>1,1,1,1</BorderThickness>

Thickness of the Background Border (Left, Top, Right, Bottom)

 

<CornerRadius>5,5,5,5</CornerRadius>

Corner Radius of the Backgound (Left, Top, Right, Bottom)

 

<BackgroundBrush x:type="ColorBrush" Color="#FF000000" />

Brush for the Background of the Progress Bar. This can be an Image, Gradient or just a color.

 

<BorderBrush x:type="ColorBrush" Color="#FFC0C0C0" />

Brush for the Border of the Background. This can be an Image, Gradient or just a color.

 

<ShadeBrush x:type="GradientBrush">
<Angle>Vertical</Angle>
<GradientStops>
<GradientStop Color="#00000000" Offset="0" />
<GradientStop Color="#FF000000" Offset="1" />
</GradientStops>
</ShadeBrush>

Shade Brush of the Background. This can be an Image, Gradient (in this case) or just a color.

 

<BarMargin>2,2,2,2</BarMargin>

Margin of the Bar (Left, Top, Right,Bottom)

 

<BarBorderThickness>1,1,1,1</BarBorderThickness>

Thickness of the Bar Border (Left, Top, Right,Bottom)

 

<BarCornerRadius>3,3,3,3</BarCornerRadius>

The Bars Corner Radius. (Left, Top, Right,Bottom)

 

<BarBorderBrush x:type="ColorBrush" Color="#FFC0C0C0" />

Brush of the Bars Border. This can be an Image, Gradient or just a color (in this case).

 

<BarBackgroundBrush x:type="GradientBrush">
<Angle>Vertical</Angle>
<GradientStops>
<GradientStop Color="#FF00BFFF" Offset="0.563" />
<GradientStop Color="#FF1294BF" Offset="1" />
 </GradientStops>
</BarBackgroundBrush>

Brush of the Bars Background. This can be an Image, Gradient (in this case) or just a color.

 

</ProgressBarStyle>

Indicates the End of the ProgressBar Style

 

Or

<ProgressBarStyle StyleId="Standard Bar" />

You can use this instead of all lines in red above, if you added these lines into the Style xml with a unique Style name. How you can add this into the Style xml will follow.

 

<ProgressValue>#percentage</ProgressValue>

This sets the value to display on the Progress, this can contain a number "Property Tag" see: Property Manager for more information.

 

In Style xml

 

<ControlStyle x:type="ProgressBarStyle" StyleId="Standard Bar">

      <BorderThickness>1,1,1,1</BorderThickness>

      <CornerRadius>5,5,5,5</CornerRadius>

      <BackgroundBrush x:type="ColorBrush" Color="#FF000000" />

      <BorderBrush x:type="ColorBrush" Color="#FFC0C0C0" />

      <ShadeBrush x:type="GradientBrush">

        <Angle>Vertical</Angle>

        <GradientStops>

          <GradientStop Color="#00000000" Offset="0" />

          <GradientStop Color="#FF000000" Offset="1" />

        </GradientStops>

      </ShadeBrush>

      <BarMargin>2,2,2,2</BarMargin>

      <BarBorderThickness>1,1,1,1</BarBorderThickness>

      <BarCornerRadius>3,3,3,3</BarCornerRadius>

      <BarBorderBrush x:type="ColorBrush" Color="#FFC0C0C0" />

      <BarBackgroundBrush x:type="GradientBrush">

        <Angle>Vertical</Angle>

        <GradientStops>

          <GradientStop Color="#FF00BFFF" Offset="0.563" />

          <GradientStop Color="#FF1294BF" Offset="1" />

        </GradientStops>

      </BarBackgroundBrush>

    </ControlStyle>

 

 

Equalizer

The Progress control is a special control to show a visual representation of the current playing Audios FFT data,

Note: This control is only compatible when using the default MediaPortal player (Bass.Net)

 

The Equalizer full xml element is described below.

<Control x:type="Equalizer">
      <Name>NewEqualizer</Name>
      <Id>1</Id>
    <entry Any other Control Base property values......

 

      <EqualizerStyle>
        <BorderThickness>2,2,2,2</BorderThickness>
        <CornerRadius>6,6,6,6</CornerRadius>
        <BackgroundBrush x:type="ColorBrush" Color="#FF000000" />
        <BorderBrush x:type="ColorBrush" Color="#FF00BFFF" />
        <LowRangeColor x:type="GradientBrush">
          <Angle>Vertical</Angle>
          <GradientStops>
            <GradientStop Color="#FF000000" Offset="1" />
            <GradientStop Color="#FF7FFF00" Offset="0.237" />
            <GradientStop Color="#FFFFFF00" Offset="0" />
          </GradientStops>
        </LowRangeColor>
        <MedRangeColor x:type="GradientBrush">
          <Angle>Vertical</Angle>
          <GradientStops>
            <GradientStop Color="#FFFFFF00" Offset="0.468" />
            <GradientStop Color="#FFFF0000" Offset="0" />
          </GradientStops>
        </MedRangeColor>
        <MaxRangeColor x:type="ColorBrush" Color="#FFFF0000" />
        <BandBorderColor x:type="ColorBrush" Color="#FF00BFFF" />
        <FallOffColor x:type="ColorBrush" Color="#FF00BFFF" />
      </EqualizerStyle>

Or

<EqualizerStyle StyleId="Standard EQ" />

 

      <EQStyle>SingleRoundedRectangle</EQStyle>
      <LowRangeValue>101</LowRangeValue>
      <MedRangeValue>201</MedRangeValue>
      <BandCount>19</BandCount>
      <BandSpacing>5</BandSpacing>
      <BandBorderSize>2</BandBorderSize>
      <BandCornerRadius>1</BandCornerRadius>
      <FalloffSpeed>5</FalloffSpeed>
    </Control> 

 

<EqualizerStyle>

Indicates the start of the EQ Style

 

<BorderThickness>2,2,2,2</BorderThickness>

Sets the Border Thickness of the Control

 

<CornerRadius>6,6,6,6</CornerRadius>

Sets the Corner Radius of the Control

 

<BackgroundBrush x:type="ColorBrush" Color="#FF000000" />

Background Brush for the Control

 

<BorderBrush x:type="ColorBrush" Color="#FF00BFFF" />

Border Brush for the Control

 

<LowRangeColor x:type="GradientBrush">
<Angle>Vertical</Angle>
<GradientStops>
<GradientStop Color="#FF000000" Offset="1" />
<GradientStop Color="#FF7FFF00" Offset="0.237" />
<GradientStop Color="#FFFFFF00" Offset="0" />
</GradientStops>
</LowRangeColor>

This sets the color of the LED's that are in the low range

 

<MedRangeColor x:type="GradientBrush">
<Angle>Vertical</Angle>
<GradientStops>
<GradientStop Color="#FFFFFF00" Offset="0.468" />
<GradientStop Color="#FFFF0000" Offset="0" />
</GradientStops>
</MedRangeColor>

This sets the color of the LED's that are in the mid range

 

<MaxRangeColor x:type="ColorBrush" Color="#FFFF0000" />

This sets the color of the LED's that are in the high range

 

<BandBorderColor x:type="ColorBrush" Color="#FF00BFFF" />

This sets the color of the border around the LED's

 

<FallOffColor x:type="ColorBrush" Color="#FF00BFFF" />

This sets the color of the fall off.

 

</EqualizerStyle>

Indicates the End of the EQ Style

 

Or

<EqualizerStyle StyleId="Standard EQ" />

You can use this instead of all lines in red above, if you added these lines into the Style xml with a unique Style name. How you can add this into the Style xml will follow.

 

<EQStyle>SingleRoundedRectangle</EQStyle>

This sets the style of the Equalizer, there are 8 styles: SingleRectangle, SingleRoundedRectangle, SingleCircle, SingleBar, DoubleRectangle, DoubleRoundedRectangle, DoubleCircle, DoubleBar

 

<LowRangeValue>101</LowRangeValue>

(max. 255)
This sets the range  of the min range, all LED's in this range will be colored as per  "LEDColorLow"

 

<MedRangeValue>201</MedRangeValue>

(max. 255)
This sets the range of the mid range, all LED's between this range and " LowRangeValue "  will be colored as per  "MedRangeColor" any LED's above this range will be colored as per the " MaxRangeColor " setting

 

<BandCount>19</BandCount>

This sets the Bands or rows of LED's

 

<BandSpacing>5</BandSpacing>

Space between the LED’s

 

<BandBorderSize>2</BandBorderSize>

This sets the size of the border around the LED's

 

<BandCornerRadius>1</BandCornerRadius>

This sets the radius on the corner of the LED's

 

<FalloffSpeed>5</FalloffSpeed>

This sets the speed of the fall off.

 

In Style xml

<ControlStyle x:type="EqualizerStyle" StyleId="Standard EQ">

      <BorderThickness>2,2,2,2</BorderThickness>

      <CornerRadius>6,6,6,6</CornerRadius>

      <BackgroundBrush x:type="ColorBrush" Color="#FF000000" />

      <BorderBrush x:type="ColorBrush" Color="#FF00BFFF" />

      <LowRangeColor x:type="GradientBrush">

        <Angle>Vertical</Angle>

        <GradientStops>

          <GradientStop Color="#FF000000" Offset="1" />

          <GradientStop Color="#FF7FFF00" Offset="0.237" />

          <GradientStop Color="#FFFFFF00" Offset="0" />

        </GradientStops>

      </LowRangeColor>

      <MedRangeColor x:type="GradientBrush">

        <Angle>Vertical</Angle>

        <GradientStops>

          <GradientStop Color="#FFFFFF00" Offset="0.468" />

          <GradientStop Color="#FFFF0000" Offset="0" />

        </GradientStops>

      </MedRangeColor>

      <MaxRangeColor x:type="ColorBrush" Color="#FFFF0000" />

      <BandBorderColor x:type="ColorBrush" Color="#FF00BFFF" />

      <FallOffColor x:type="ColorBrush" Color="#FF00BFFF" />

    </ControlStyle>

 

 

Rectangle

This Control can be used if you need just a rectangle. MPDisplay can handle this gfx much faster than using an image file (e.g. Overlays with gradients) as in older Versions.

The Rectangle full xml element is described below.

 

<Control x:type="Rectangle">
      <Name>NewRectangle</Name>
      <Id>1</Id>

    <entry Any other Control Base property values......

      <BorderThickness>4,4,4,4</BorderThickness>
      <CornerRadius>10,10,10,10</CornerRadius>
      <BackgroundBrush x:type="ColorBrush" Color="Black" />
    </Control>

 

<BorderThickness>4,4,4,4</BorderThickness>

Thickness of the Border of the Rectangle (Left, Top, Right, Bottom)

<CornerRadius>10,10,10,10</CornerRadius>

Corner Radius of the Rectangle (Left, Top, Right, Bottom)

<BackgroundBrush x:type="ColorBrush" Color="Black" />

Defines the Brush for the Background. (ColorBrush, GradientBrush, Image)

 

 

Control Labels

Language Labels

Language labels are used to make MPDisplay multilingual friendly, The skins Language file contains multiple languages and these are used to display text in the skin depending on the selected language in the Global Settings file.

If you language is not found in the Language file just simply copy an existing language string and rename and edit to suit your language.

 

The Language xml are formatted in the following way:

<?xml version="1.0" encoding="utf-8"?>
<Languagexmlns:x="http://www.w3.org/2001/XMLSchema-instance">
  <LanguageEntries>
    <LanguageEntryTag="@Preview">
      <Values>
        <LanguageValueLanguage="Deutsch"Value="Vorschau"/>
        <LanguageValueLanguage="English"Value="Preview"/>
        <LanguageValueLanguage="Francais"Value="Aperçu"/>
      </Values>
    </LanguageEntry>
    <LanguageEntryTag="@SkinOption">
      <Values>
        <LanguageValueLanguage="Deutsch"Value="Skin Ausführung"/>
        <LanguageValueLanguage="English"Value="Skin Option"/>
        <LanguageValueLanguage="Francais"Value="Option Skin"/>
      </Values>
    </LanguageEntry>
  </LanguageEntries>
</Language>

 

 

Language Xml Overview

 

<LanguageEntryTag="@Preview">

This is the Identifier for your Labels used in all Windows and Dialogs.

 

<Values>

Defines the Start of the Language Values

 

<LanguageValueLanguage="Deutsch"Value="Vorschau"/>
<LanguageValueLanguage="English"Value="Preview"/>
<LanguageValueLanguage="Francais"Value="Aperçu"/>

Here you can set for each Language an new Value

 

</Values>

Defines the End of the Language Values

 

</LanguageEntry>

Defines the Endpoint of the Identifier.

 

 

Using Language Strings

 

To use a Language sting in your skin you use the following value in the controls text property.

<LabelText>@Preview</LabelText>

This will show "Preview" on the control as text, Language strings can also be combined, this is explained in more detail in the Combining Labels  section below.

 

 Property Labels

 

Property labels are labels sent from MediaPortal across the MPDisplay API so they can be displayed in your skin. see MediaPortal Properties for more information on properties.

 

To use a MediaPortal label property on your control you simply set the property labels "Property Tag" in the controls xml entry.

This example below will show the current MediaPortal selected item text on a Button control

<LabelText>#selecteditem</LabelText>

 

Combining Labels

 

You can combine Properties, Language strings and text on your control, combining is as simple as adding a "+" symbol between the values you want to join.

 

The example below joins to MediaPortal Property values

<LabelText>#date+#time</LabelText>

 

If you were to use this the output would become something like this: "Friday 23 June12:30AM" this is because we did not add a space between the properties, spaces must also be added with the "+" symbol, like below

<LabelText>#date+ +#time</LabelText>

Output: "Friday 23 June 12:30AM"

 

You can also combine Language strings with Property Tags, in this case @Time  = "The Time Is"

<LabelText>@Time+ +#time</LabelText>

Output: "The Time is 12:30AM"

 

This can also be used to show skin images using Property Tag values that match a file name,

in this example "#Codec.Name" label property tag = "MPEG2"

<Image>\Logos\+#Play.Current.VideoCodec.Texture+.png</Image>

This will find and display an image in your skin Images folder that has the following path/name "Images\Logos\MPEG2.png"

 

Control Images

Images are used in the skin to create visual representation of your controls, and to display information in your skin from MediaPortal.

 

Skin Images

Skin images must exist in your skins "Image" folder. You do not need to enter the full path just the filename, unless it is in a subfolder of images, then you would just add the subfolder name also .

e.g

<Image>\Icons\panel_video_actors.png</Image>

 

It is also possible to combine Property Labels in the file path, this can be used in situations like video codec logos.

see: Combining Labels for more information on joining labels.

<Image>\Logos\+#Play.Current.VideoCodec.Texture+.png</Image>

In this situation MPDisplay will look in Logos for a file name MP3.png if the #Play.Current.VideoCodec.Texture value is "MP3"

 

 

Property Images

Property images are images sent from MediaPortal across the MPDisplay API so they can be displayed in your skin. see MediaPortal Properties for more information on properties.

 

To use a MediaPortal image property on your control you simply set the property images "Property Tag" in the controls xml entry.

This example below will show the current MediaPortal selected thumbnail in an Image control

<Image>#selectedthumb</Image>

 

Image Stretch

There a 4 types of stretch that can be applied to skin and Property images

  • Fill
  • Uniform
  • UniformToFill
  • None

 

?None

None will not stretch to fill the output area. If the image is larger than the output area, the image is drawn to the output area, clipping what does not fit.

 

?Fill

Fill will scale the image to fit the output area. Because the image height and width are scaled independently, the original aspect ratio of the image might not be preserved. That is, the image might be warped in order to completely fill the output container.

 

?Uniform

Uniform will scale the image so that it fits completely within the output area. The image's aspect ratio is preserved.

 

?UniformToFill

UniformToFill will scale the image so that it completely fills the output area while preserving the image's original aspect ratio.

 

  

PropertyManager

MediaPortal Properties

MediaPortal uses functions called "Property Tags" to send information to different plugins/windows in MediaPortal, The MPDisplay API intercepts these messages and passes them to MPDisplay this way we can use the same information displayed in MediaPortal in MPDisplay.

 

A Property Tag looks like this "#selectedthumb" they can represent labels, Images or numbers, all information in MPDisplay is based on these Property Tags.

Due to the 1000's of possible Property Tag values, MPDisplay uses a Property Manager this will tell the API to only intercept properties that are defined in the skins PropertyInfo.xml file.

 

Using a Property Tag in the MPDisplay skin is a simple as finding the Property Tag for the information you want to display and adding that tag to the controls xml entry if it is Property Tag Capable these will be indicated in the controls xml element overview. (Property Label/Image/Number Capable)

 

This example below show how we can add the #date property tag to display the date on a MPDisplay Label.

<XmlProperty>
  <SkinTag>#Date</SkinTag>
  <PropertyType>Label</PropertyType>
  <DesignerValue>25.03.2013</DesignerValue>
    <MediaPortalTags>
      <XmlMediaPortalTag Tag="#Date" />
    </MediaPortalTags>
</XmlProperty>

 

Label property tags can be joined combined, see: Combining Labels for more info.

 

?PropertyInfo.xml

The PropertyManager.xml if a file where we can define all the Property Tags we want the API to send to MPDisplay from MediaPortal, This file can also provide some extra abilities to group Property Tags into a single Property Tag for use in the MPDisplay skin.

 

The PropertyManager.xml file contains 5 important sections, there is a section for each property type (Label, Image, Number)

The PropertyManager.xml file is constructed in the following format.

 

<?xml version="1.0" encoding="utf-8"?>
<XmlPropertyInfo xmlns:x="http://www.w3.org/2001/XMLSchema-instance">
  <Properties>
    <XmlProperty>
      <SkinTag>#MPD2.fanart.movie</SkinTag>
      <PropertyType>Image</PropertyType>
      <DesignerValue>New....</DesignerValue>
      <MediaPortalTags>
        <XmlMediaPortalTag Tag="#Anime3.Fanart.1" />
        <XmlMediaPortalTag Tag="#fanarthandler.movie.backdrop1.selected" />
        <XmlMediaPortalTag Tag="#fanarthandler.movie.backdrop2.selected" />
      </MediaPortalTags>
    </XmlProperty>
    <XmlProperty>
      <SkinTag>#MPD2.TVSeries.Summary</SkinTag>
      <PropertyType>Label</PropertyType>
      <DesignerValue>New...</DesignerValue>
      <MediaPortalTags>
        <XmlMediaPortalTag Tag="#TVSeries.Description" />
        <XmlMediaPortalTag Tag="#TVSeries.Series.Summary" />
        <XmlMediaPortalTag Tag="#TVSeries.Episode.Summary" />
        <XmlMediaPortalTag Tag="#Play.Current.Plot" />
      </MediaPortalTags>
    </XmlProperty>
    <XmlProperty>
      <SkinTag>#percentage</SkinTag>
      <PropertyType>Number</PropertyType>
      <DesignerValue>25</DesignerValue>
      <MediaPortalTags>
        <XmlMediaPortalTag Tag="#percentage" />
      </MediaPortalTags>
    </XmlProperty>
  </Properties>
</XmlPropertyInfo>

 

Labels

<PropertyType>*Label*</PropertyType>

In this section you list all the Label(text) MediaPortal properties. The property tag will be sent across the API with the current value for that property, when the property changes in MediaPortal the new value will be sent automatically and the skin will be updated with the new value.

The example below adds the "#date" Label property.

    <XmlProperty>
      <SkinTag>#date</SkinTag>
      <PropertyType>*Label*</PropertyType>
      <DesignerValue>08.08.2013</DesignerValue>
      <MediaPortalTags>
        <XmlMediaPortalTag Tag="#date" />
      </MediaPortalTags>
    </XmlProperty>

 

Images

<PropertyType>*Image*</PropertyType>

In this section you list all the Image MediaPortal properties. . The property tag will be sent across the API with the current value for that property, when the property changes in MediaPortal the new value will be sent automatically and the skin will be updated with the new value. If MPDisplay is installed on the same PC ad MediaPortal the tags value will be a file path to that image, the skin engine will then read and display that image, If your MPDisplay is connected over the local network or internet, the file is sent across the network to the MPDisplay application then displayed in the skin.

The example below adds the "#selectedthumb" Label property.

    <XmlProperty>
      <SkinTag>#selectedthumb</SkinTag>
      <PropertyType>*Image*</PropertyType>
      <DesignerValue>New....</DesignerValue>
      <MediaPortalTags>
        <XmlMediaPortalTag Tag="#selectedthumb" />
      </MediaPortalTags>
    </XmlProperty>

 

Numbers

<PropertyType>*Number*</PropertyType>

In this section you list all the Number MediaPortal properties. The property tag will be sent across the API with the current value for that property, when the property changes in MediaPortal the new value will be sent automatically and the skin will be updated with the new value. Number values are normally percentage values for the Progress control.

The example below adds the "#percentage" Label property.

    <XmlProperty>
      <SkinTag>#percentage</SkinTag>
      <PropertyType>*Number*</PropertyType>
      <DesignerValue>25</DesignerValue>
      <MediaPortalTags>
        <XmlMediaPortalTag Tag="#percentage" />
      </MediaPortalTags>
    </XmlProperty>

 

LabelsToCombine,  ImagesToCombine

In some cases you control may need to show more than one property tag depending on what's happening in MediaPortal, The PropertyManager simplifies this task by grouping property tags into a single tag for use in the MPDisplay skin.

When any of the property tags listed in the entry change the tag indicated by the name= will be sent with the value that just changed.

 

In the example below, When ether #selectedthumb or #TVSeries.SelectedThumb properties change the value will be sent with the tag #MPD.SelectedThumb, The tags you use in your skin files is #MPD.SelectedThumb.

    <XmlProperty>
      <SkinTag>#MPD.SelectedThumb</SkinTag>
      <PropertyType>*Image*</PropertyType>
      <DesignerValue>New....</DesignerValue>
      <MediaPortalTags>
        <XmlMediaPortalTag Tag="#TVSeries.SelectedThumb" />
        <XmlMediaPortalTag Tag="#selectedthumb" />
      </MediaPortalTags>
    </XmlProperty>

 

 

Both Label and Image operate the same way, But you cannot combine Images and Labels together.

 

Styles

The Style Default.xml is used to group all your saved Styles in one place for use in your skin, This helps keep Controls constant between windows and makes changing/amending Controls a lot simpler instead of changing each control in all windows you just need to modify the Control in this files to change the appearance of the Control in the skin. 

You can easily set other Styles than the Default one and they can be chosen from the Settings Menu within the MPDisplay GUI or in the GUI Config.
You have to make a new xml- file for each Style you want to create. The easiest way is, to create the Default.xml and copy/paste it. Just rename the Filename to the Styleoption you want to create. After that edit all necessary Style sets.

 

Xml Overview

There are two different kinds of Styles:

 

  • BrushStyles
  1. ColorBrush
  2. GradientBrush
  3. ImageBrush

 

  • ControlStyles
  1. ButtonStyle
  2. ImageStyle
  3. GroupStyle
  4. ProgressBarStyle
  5. ListStyle
  6. ListItemStyle

 

BrushStyles

Are used for ...

<?xml version="1.0" encoding="utf-8"?>
<StyleCollection xmlns:x="[http://www.w3.org/2001/XMLSchema-instance]">
  <BrushStyles>
    <Brush x:type="ColorBrush" StyleId="1" Color="#FF000000" />
    <Brush x:type="GradientBrush" StyleId="2">
      <Angle>Vertical</Angle>
      <GradientStops>
        <GradientStop Color="#FF000000" Offset="1" />
        <GradientStop Color="#31000000" Offset="0" />
      </GradientStops>
    </Brush>
    <Brush x:type="ImageBrush" StyleId="3" Image="\background.png" Stretch="Uniform" />
  </BrushStyles>
  <ControlStyles />
</StyleCollection>

 

ControlStyles

Are used for ...

<?xml version="1.0" encoding="utf-8"?>
<StyleCollection xmlns:x="[http://www.w3.org/2001/XMLSchema-instance]">
  <BrushStyles />
  <ControlStyles>
    <ControlStyle x:type="LabelStyle" StyleId="Label">
      <FontSize>20</FontSize>
    </ControlStyle>
    <ControlStyle x:type="ButtonStyle" StyleId="Button" />
    <ControlStyle x:type="ImageStyle" StyleId="Image" />
    <ControlStyle x:type="GroupStyle" StyleId="Group" />
    <ControlStyle x:type="ProgressBarStyle" StyleId="ProgressBar" />
    <ControlStyle x:type="ListStyle" StyleId="ListStyle" />
    <ControlStyle x:type="ListItemStyle" StyleId="ListItemStyle" />
  </ControlStyles>
</StyleCollection>

 

The settings within the Style *.xml are the same as in the Controls Documentation.

 

 

 

More Content will follow soon...

Related

   

 

This page has no comments.