Overview

Styles are a collection of tags that can be used to format the presentation of a control in a skin xml. As is the case with the use of styles in any software, they help ensure consistency of formatting and reduce the duplication of control tags throughout the skin.

Defining Styles

Styles are defined in the file references.xml, usually right after the <skin> control at the top of the file. They are defined using the following format:

• <style Name="stylename">
• tags that you want to include in the style (see examples)
• </style>

where stylename is the name that you choose for the style.

Using Styles

Once the style has been defined in "references.xml", the name of the style can be specified on a <control> tag to identify the collection of tags that you want at that point in the skin file.  Any tags specified as part of the style can be overridden by specifying them following the <control> tag.  However, one tag must be specified following the <control> tag, namely the <type> tag:

• <control Style="stylename">
• <type>type_of_this_control</type>
• tags overriding the values specified in the style definition (optional)
• </control>

where stylename is the name of the style in "references.xml".

Example from the StreamedMP skin

• In the file references.xml:

<style Name="smallTitle">
  <id>0</id>
  <width>220</width>
  <font>mediastream9c</font>
  <textcolor>ffffffff</textcolor>
</style>

• In the file movingpictures.views.xml:

<control Style="smallTitle">
  <type>label</type>
  <label>#MovingPictures.SelectedMovie.genres</label>
  <posX>825</posX>
  <posY>485</posY>
  <width>580</width>
  <visible>facadeview.filmstrip+Control.IsVisible(50)</visible>
</control>

Example from the aMPed skin

• In the file references.xml:

<style Name="Square Filmstrip">
  <posX>40</posX>
  <posY>225</posY>
  <width>720</width>
  <height>576</height>
  <itemWidth>135</itemWidth>
  <itemHeight>135</itemHeight>
  <textureWidth>123</textureWidth>
  <textureHeight>123</textureHeight>
  <thumbWidth>115</thumbWidth>
  <thumbHeight>116</thumbHeight>
  <thumbPosX>3</thumbPosX>
  <thumbPosY>3</thumbPosY>
  <frame>Picture_cover.png</frame>
  <frameFocus>Picture_cover.png</frameFocus>
  <keepaspectratio>no</keepaspectratio>
</style>

• In the file common.facade.music.xml:

<control Style="Square Filmstrip">
  <description>Filmstrip view</description>
  <type>filmstrip</type>
  <id>50</id>
  <onup>2</onup>
  <animation effect="rotatey" start="60" end="0" center="600,0"
  tween="back" ease="easeout" time="500" reversible="false">
  focus</animation>
  <animation effect="rotatey" start="0" end="60" center="600,0"
  tween="back" ease="easeout" time="500" reversible="false">
  unfocus</animation>
</control>