Difference between revisions of "Standard View Skinning SDK"
From JRiverWiki
| (23 intermediate revisions by 4 users not shown) | |||
| Line 1: | Line 1: | ||
| − | The | + | The Standard View Skinning SDK requires Media Center 9.0.170 or above. This SDK is meant to complement the Standard View skinning tutorial. It just offers more detail in certain areas. Start with the tutorial first, and refer to this if necessary. |
| − | The file | + | The file called main.xml is a key file for controlling the look and functionality of the skin. This SDK focuses on the components of the main.xml and what they mean. |
| − | + | You need to include file named TheSkin.gif (jpg,bmp) (preferred size: 310x210) with your skin package, this image will be displayed in Skin Manager. | |
| − | + | ==Skin Items== | |
| − | + | The following skin item, from [[MEGAMorphis#Skin|Skin]] to [[MEGAMorphis#ScrollBar|ScrollBar]] describe the pieces of the skin. These can be | |
| − | + | used as ''Item''s in the [[MJAutomation#number GetSkinInfo.28string_strItem.2C_string_strAttribute.29|GetSkinInfo]] automation function. | |
| − | + | Sub items, such as the '''CaptionArea''' of [[MEGAMorphis#Frame|Frame]] are specified like ''Frame::CaptionArea''. | |
| − | + | ||
| − | + | Attributes, described for each item, are passed as the second argument of the GetSkinInfo function. | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
==Skin== | ==Skin== | ||
| − | |||
This is where you give the skin its name, identify yourself as the author, and add any special notes about the skin. | This is where you give the skin its name, identify yourself as the author, and add any special notes about the skin. | ||
Attributes: | Attributes: | ||
| − | + | * Name - name of the skin | |
| − | + | * Author - name of the author | |
| − | + | * EMail - (optional) author's e-mail address | |
| − | + | * WebSite - (optional) address of author's website | |
| − | + | * About - (optional) short description of the skin. | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
==Frame== | ==Frame== | ||
| + | Frame is the most complicated part of Standard View skinning. It contains all items necessary to change the look of the main application. | ||
| − | + | '''CaptionArea''' - Top area of the frame with text in it.<br> | |
| + | Attributes: | ||
| + | * Bitmap - (optional) name of bitmap file to use for caption area | ||
| + | * TransColor - (optional) color of the transparent area inside the bitmap | ||
| + | * Margins - (optional) size of the image regions, see [[Drawing Images]] | ||
| + | * DrawMode - (optional) see Drawing Image | ||
| + | * Alignement - Location of the CationArea on the titlebar, 0 - Left, 1 - Center, 2 - Right | ||
| + | * OffsetX - horizontal offset of the Caption area from default location. | ||
| + | * OffsetY - vertical offset of the Caption area from default location | ||
| + | * ActiveTextColor - Color of the text for active application | ||
| + | * InactiveTextColor - Color of the text for inactive application | ||
| + | * TextShadowColor - Color of the text shadow. | ||
| − | + | '''Icon''' - top area of the frame with image<br> | |
| + | Attributes: | ||
| + | * Alignement - Location of the Icon on the titlebar, 0 - Left, 1 - Center, 2 - Right | ||
| + | * OffsetX - horizontal offset of the Icon from default location. | ||
| + | * OffsetY - vertical offset of the Icon from default location | ||
| + | * SizeX - horizontal size of the Icon | ||
| + | * SizeY - vertical size of the Icon | ||
| − | + | '''CloseButton''' - button to close application | |
| − | + | '''MaximizeButton''' - button to maximize application | |
| − | + | '''MinimizeButton''' - button to minimize application | |
| − | + | '''RestoreButton''' - ( optional) button to restore application from maximized state.<br> | |
| − | + | Attributes: | |
| + | * Bitmap - name of bitmap file to use for buttons | ||
| + | * TransColor - (optional) color of the transparent area inside the bitmap | ||
| + | * Margins - (optional) size of the image regions, see [[Drawing Images]] | ||
| + | * DrawMode - (optional) see [[Drawing Images]] | ||
| + | * NumberImages - (optional) number of sub images inside bitmap, see [[Drawing Images]]. Number of images for the buttons is 3: 1 - UP, 2 - Over, 3- Down | ||
| + | * Alignement - Location of the button on the titlebar, 0 - Left, 1 - Center, 2 - Right | ||
| + | * OffsetX - horizontal offset of the button from default location. | ||
| + | * OffsetY - vertical offset of the button from default location | ||
| − | + | '''LeftBorder''' - left border of the frame | |
| − | |||
| − | + | '''RightBorder''' - right border of the frame | |
| − | |||
| − | + | '''TopBorder''' - top border of the frame | |
| − | |||
| − | + | '''BottomBorder''' - bottom border of the frame<br> | |
| − | + | Attributes: | |
| + | * Bitmap - name of bitmap file to use for borders | ||
| + | * TransColor - (optional) color of the transparent area inside the bitmap | ||
| + | * Margins - (optional) size of the image regions, see [[Drawing Images]] | ||
| + | * DrawMode - (optional) see [[Drawing Images]] | ||
| + | * NumberImages - (optional) number of sub images inside bitmap, see [[Drawing Images]]. Max number of images for borders is 2: 1 - Active borders, 2 - (optional) Inactive borders. if NumberImages is 1 then active and inactive borders will be the same. | ||
| − | + | '''Button''' - generic windows button<br> | |
| − | + | Attributes: | |
| + | * Bitmap - name of bitmap file to use for the button | ||
| + | * TransColor - (optional) color of the transparent area inside the bitmap | ||
| + | * Margins - (optional) size of the image regions, see [[Drawing Images]] | ||
| + | * DrawMode - (optional) see [[Drawing Images]] | ||
| + | * NumberImages - (optional) number of sub images inside bitmap, see [[Drawing Images]]. Number of images for the button is 4: 1 - UP, 2 - Over, 3- Down, 4 - Disabled | ||
| − | + | '''DialogBack''' - background of some pop-up and some internal windows<br> | |
| − | + | Attributes: | |
| + | * BackColor - color of dialog background | ||
| + | * Bitmap - bitmap to use to paint dialog background, if this attribute used then BackColor attribute is ignored. | ||
| − | + | '''TextBox''' - generic text area.<br> | |
| − | + | Attributes: | |
| + | * TextColor - color of the textbox text. | ||
| + | * DisabledTextColor - disabled color of the textbox text. | ||
| − | + | '''Edit''' - generic edit window<br> | |
| − | + | Attributes: | |
| + | * BackColor - color of the edit window background. | ||
| + | * TextColor - color of the edit window text. | ||
| + | * DisabledBackColor - color of the disabled edit window background. | ||
| + | * DisabledTextColor - color of the disabled edit window text. | ||
| − | + | '''ComboBox''' - generic combobox window<br> | |
| + | Attributes: | ||
| + | * Bitmap - name of bitmap file to use for the combobox | ||
| + | * TransColor - (optional) color of the transparent area inside the bitmap | ||
| + | * Margins - (optional) size of the image regions, see [[Drawing Images]] | ||
| + | * DrawMode - (optional) see [[Drawing Images]] | ||
| + | * NumberImages - (optional) number of sub images inside bitmap, see [[Drawing Images]]. Number of images for the combobox is 4: 1 - UP, 2 - Over, 3- Down, 4 - Disabled | ||
| + | * BackColor - color of the combobox window background. | ||
| + | * TextColor - color of the combobox window text. | ||
| + | * DisabledBackColor - color of the disabled combobox window background. | ||
| + | * DisabledTextColor - color of the disabled combobox window text. | ||
| − | + | '''CheckBox''' - generic checkbox window<br> | |
| + | Attributes: | ||
| + | * Bitmap - name of bitmap file to use for the checkbox | ||
| + | * TransColor - (optional) color of the transparent area inside the bitmap | ||
| + | * NumberImages - (optional) number of sub images inside bitmap, see [[Drawing Images]]. Number of images for the checkbox is 8: 1 - UP, 2 - Up Checked, 3 - Over, 4 - Over Checked, 5 - Down, 6 - Down Checked, 7 - Disabled, 8 - Disabled Checked | ||
| − | + | '''RadioButton''' - generic radiobutton window<br> | |
| + | Attributes: | ||
| + | * Bitmap - name of bitmap file to use for the radiobutton | ||
| + | * TransColor - (optional) color of the transparent area inside the bitmap | ||
| + | * NumberImages - (optional) number of sub images inside bitmap, see [[Drawing Images]]. Number of images for the radiobutton is 8: 1 - UP, 2 - Up Checked, 3 - Over, 4 - Over Checked, 5 - Down, 6 - Down Checked, 7 - Disabled, 8 - Disabled Checked | ||
| − | + | '''OptionsList'''- options list which is visible on the right side of Options window.<br> | |
| − | + | Attributes: | |
| − | + | * TextColor - color of text of the options list | |
| − | + | * BackColor - color of background. | |
| − | + | * ShadowColor - color of shadow parts of the list. | |
| − | + | * HilightColor - color of highlight parts. | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | OptionsList - options list which is visible on the right side of Options window. | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
==PlayerWindow== | ==PlayerWindow== | ||
| − | |||
Player window is the window in the left bottom corner of the Media Center. | Player window is the window in the left bottom corner of the Media Center. | ||
| − | Button: PlayButton, StopButton, PauseButton, NextButton, PreviousButton, ShuffleButton, ShuffleOffButton, ContinuousButton, ContinuousOffButton, OptionsButton | + | Button: '''PlayButton, StopButton, PauseButton, NextButton, PreviousButton, ShuffleButton, ShuffleOffButton, ContinuousButton, ContinuousOffButton, OptionsButton'''<br> |
| + | Attributes: | ||
| + | * Bitmap - name of bitmap file to use for a button | ||
| + | * TransColor - (optional) color of the transparent area inside the bitmap | ||
| + | * Margins - (optional) size of the image regions, see [[Drawing Images]] | ||
| + | * DrawMode - (optional) see [[Drawing Images]] | ||
| + | * NumberImages - (optional) number of sub images inside bitmap, see [[Drawing Images]]. Number of images for the buttons is 3: 1 - UP, 2 - Over, 3- Down | ||
| − | + | Areas: '''Display, ControlBar, TargetBar'''<br> | |
| + | Attributes: | ||
| + | * Bitmap - name of bitmap file to use for an area | ||
| + | * TransColor - (optional) color of the transparent area inside the bitmap | ||
| + | * Margins - (optional) size of the image regions, see [[Drawing Images]] | ||
| + | * DrawMode - (optional) see [[Drawing Images]] | ||
| + | * NumberImages - (optional) number of sub images inside bitmap, see [[Drawing Images]]. Number of images for the area bitmap is 1. | ||
| − | + | Sliders: '''VolumeSlider, PositionSlider'''<br> | |
| + | Attribute: | ||
| + | * Bitmap - name of bitmap file to use for a button | ||
| + | * TransColor - (optional) color of the transparent area inside the bitmap | ||
| + | * Margins - (optional) size of the image regions, see [[Drawing Images]] | ||
| + | * DrawMode - (optional) see [[Drawing Images]] | ||
| + | * NumberImages - (optional) number of sub images inside bitmap, see [[Drawing Images]]. Number of images for the sliders is 1. | ||
| − | + | Slider Thumbs: '''VolumeSliderThumb, PositionSliderThumb'''<br> | |
| − | + | Attributes: | |
| − | + | * Bitmap - name of bitmap file to use for a thumb | |
| − | + | * TransColor - (optional) color of the transparent area inside the bitmap | |
| − | + | * Margins - (optional) size of the image regions, see [[Drawing Images]] | |
| − | + | * DrawMode - (optional) see [[Drawing Images]] | |
| − | + | * NumberImages - (optional) number of sub images inside bitmap, see [[Drawing Images]]. Max number of images for the buttons is 2: 1 - enabled, 2 - (optional) disabled. | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | Slider Thumbs: VolumeSliderThumb, PositionSliderThumb | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
==Tree== | ==Tree== | ||
| + | '''Colors''':<br> | ||
| + | Attributes: | ||
| + | * Text - color of the tree text | ||
| + | * Back - color of the tree's background | ||
| + | * SelectedText - color of the text of the selected item | ||
| + | * SelectedBack - color of the background of the selected item | ||
| − | + | '''Selection''' (optional):<br> | |
| − | + | Attributes: | |
| − | + | * Bitmap - name of bitmap file to use for the background to the selected element in the tree | |
| − | + | * TransColor - (optional) color of the transparent area inside the bitmap | |
| − | + | * Margins - (optional) size of the image regions, see [[Drawing Images]] | |
| − | + | * DrawMode - (optional) see [[Drawing Images]] | |
| − | + | * NumberImages - (optional) number of sub images inside bitmap, see [[Drawing Images]]. Number of images for the tree selection background is 3: 1 - up, 2 - down, 3 - over | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
==List== | ==List== | ||
| + | '''Colors''':<br> | ||
| + | Attributes: | ||
| + | * Text - color of the list text | ||
| + | * Back - color of the lists' background | ||
| + | * SelectedText - color of the text of the selected item | ||
| + | * SelectedBack - color of the background of the selected item | ||
| + | * Current - color of the text of the currently playing item. | ||
| − | + | '''HeaderBar''': | |
| − | + | * Bitmap - name of bitmap file to use for a thumb | |
| − | + | * TransColor - (optional) color of the transparent area inside the bitmap | |
| − | + | * Margins - (optional) size of the image regions, see [[Drawing Images]] | |
| − | + | * DrawMode - (optional) see [[Drawing Images]] | |
| − | + | * NumberImages - (optional) number of sub images inside bitmap, see [[Drawing Images]]. Number of images for the header is 3: 1 - up, 2 - down, 3 - over | |
| − | + | * TextColor - color of the header's text. | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | HeaderBar: | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
==StatusBar== | ==StatusBar== | ||
| − | + | '''Colors''':<br> | |
| − | Colors: | + | Attributes: |
| − | + | * Text - color of the statusbar text | |
| − | + | * Back - color of the background of the statusbar | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
==ProgressBar== | ==ProgressBar== | ||
| − | + | Bitmaps: '''Back, Front'''<br> | |
| − | Bitmaps: Back, Front | ||
| − | |||
Attributes: | Attributes: | ||
| − | + | * Bitmap - name of bitmap file to use for a thumb | |
| − | + | * TransColor - (optional) color of the transparent area inside the bitmap | |
| − | + | * Margins - (optional) size of the image regions, see [[Drawing Images]] | |
| − | + | * DrawMode - (optional) see [[Drawing Images]] | |
| − | + | * NumberImages - (optional) number of sub images inside bitmap, see [[Drawing Images]]. Number of images for the header is 1. | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
==GroupBox== | ==GroupBox== | ||
| + | '''Colors''':<br> | ||
| + | Attributes: | ||
| + | * Text - color of the groupbox text | ||
| − | + | Bitmaps: '''LeftBorder, RightBorder, TopBorder, BottomBorder'''<br> | |
| − | + | Attributes: | |
| − | + | * Bitmap - name of bitmap file to use for a thumb | |
| − | + | * TransColor - (optional) color of the transparent area inside the bitmap | |
| − | + | * Margins - (optional) size of the image regions, see [[Drawing Images]] | |
| − | + | * DrawMode - (optional) see [[Drawing Images]] | |
| − | + | * NumberImages - (optional) number of sub images inside bitmap, see [[Drawing Images]]. Number of images for the header is 1. | |
| − | |||
| − | Bitmaps: LeftBorder, RightBorder, TopBorder, BottomBorder | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
==Tab== | ==Tab== | ||
| + | '''Colors''':<br> | ||
| + | Attributes: | ||
| + | * Text - color of the tab text | ||
| − | + | Bitmaps: '''Button, LeftBorder, RightBorder, TopBorder, BottomBorder'''<br> | |
| − | + | Attributes: | |
| − | + | * Bitmap - name of bitmap file to use for a thumb | |
| − | + | * TransColor - (optional) color of the transparent area inside the bitmap | |
| − | + | * Margins - (optional) size of the image regions, see [[Drawing Images]] | |
| − | + | * DrawMode - (optional) see [[Drawing Images]] | |
| − | + | * NumberImages - (optional) number of sub images inside bitmap, see [[Drawing Images]]. Number of images for the header is 1 for borders, and 3 for the Button: 1 - up, 2 - down, 3 - over | |
| − | |||
| − | Bitmaps: Button, LeftBorder, RightBorder, TopBorder, BottomBorder | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
==Slider== | ==Slider== | ||
| + | Bitmaps: '''Horizontal Background, Vertical background'''<br> | ||
| + | Attributes: | ||
| + | * Bitmap - name of bitmap file to use for a background | ||
| + | * TransColor - (optional) color of the transparent area inside the bitmap | ||
| + | * Margins - (optional) size of the image regions, see [[Drawing Images]] | ||
| + | * DrawMode - (optional) see [[Drawing Images]] | ||
| + | * NumberImages - (optional) number of sub images inside bitmap, see [[Drawing Images]]. Max number of images for the backgrounds is 2: 1 - background image, 2 - (optional) Fill image. | ||
| − | Bitmaps: | + | Bitmaps: '''Horizontal Handle, Vertical Handle'''<br> |
| − | + | Attributes: | |
| − | + | * Bitmap - name of bitmap file to use for a handle | |
| − | + | * TransColor - (optional) color of the transparent area inside the bitmap | |
| − | + | * Margins - (optional) size of the image regions, see [[Drawing Images]] | |
| − | + | * DrawMode - (optional) see [[Drawing Images]] | |
| − | + | * NumberImages - (optional) number of sub images inside bitmap, see [[Drawing Images]]. Number of images for the handles is 4: 1 - up, 2 - down, 3 - over, 4 -disabled | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
==UpDown== | ==UpDown== | ||
| − | + | Bitmaps: '''Up, Down, Left, Right'''<br> | |
| − | Bitmaps: Up, Down, Left, Right | + | Attributes: |
| − | + | * Bitmap - name of bitmap file to use for a UpDown control | |
| − | + | * TransColor - (optional) color of the transparent area inside the bitmap | |
| − | + | * Margins - (optional) size of the image regions, see [[Drawing Images]] | |
| − | + | * DrawMode - (optional) see [[Drawing Images]] | |
| − | + | * NumberImages - (optional) number of sub images inside bitmap, see [[Drawing Images]]. Number of images for the UpDown controls is 4: 1 - up, 2 - down, 3 - over, 4 -disabled | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
==ScrollBar== | ==ScrollBar== | ||
| − | + | Bitmaps: '''HorizontalLeftArrow, HorizontalRightArrow, HorizontalHandle, HorizontalBackground, VerticalUpArrow, VerticalDownArrow, VerticalHandle, VerticalBackground, Stump'''<br> | |
| − | Bitmaps: HorizontalLeftArrow, HorizontalRightArrow, HorizontalHandle, HorizontalBackground, VerticalUpArrow, VerticalDownArrow, VerticalHandle, VerticalBackground, Stump | + | Attributes: |
| − | + | * Bitmap - name of bitmap file to use for a scrollbar control | |
| − | + | * TransColor - (optional) color of the transparent area inside the bitmap | |
| − | + | * Margins - (optional) size of the image regions, see [[Drawing Images]] | |
| − | + | * DrawMode - (optional) see [[Drawing Images]] | |
| − | + | * NumberImages - (optional) number of sub images inside bitmap, see [[Drawing Images]]. Number of images for the scrollbar controls is 4: 1 - up, 2 - down, 3 - over, 4 -disabled, but Stamp image should contain only one bitmap. | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | == | + | ==Drawing images== |
| − | |||
| − | |||
NumberImages describes how many sub images are there in a bitmap, default value for the attribute is 1. | NumberImages describes how many sub images are there in a bitmap, default value for the attribute is 1. | ||
| − | New Style Matrix Drawing | + | There are two styles of matrix drawing: [[Matrix Drawing|New Style Matrix Drawing]] and Old Style Matrix Drawing. |
| − | |||
| − | |||
Old Style Matrix Drawing: | Old Style Matrix Drawing: | ||
| Line 661: | Line 293: | ||
Here is the diagram of the image regions: | Here is the diagram of the image regions: | ||
| − | A | B | C | + | {| border="1" |
| − | + | |- | |
| − | D | E | F | + | | A || B || C |
| − | + | |- | |
| − | G | H | I | + | | D || E || F |
| + | |- | ||
| + | | G || H || I | ||
| + | |} | ||
Margins help to define regions size, for example Margins="10,5,20,30" where 10 - left margin, 5 - top margin, 20 - right margin, 30 - bottom margin, will create 9 regions with following sizes: | Margins help to define regions size, for example Margins="10,5,20,30" where 10 - left margin, 5 - top margin, 20 - right margin, 30 - bottom margin, will create 9 regions with following sizes: | ||
| − | A - 10 x 5 | + | A - 10 x 5<br> |
| − | B - X x 5 | + | B - X x 5<br> |
| − | C - 20 x 5 | + | C - 20 x 5<br> |
| − | D - 10 x Y | + | D - 10 x Y<br> |
| − | E - X x Y | + | E - X x Y<br> |
| − | F - 20 x Y | + | F - 20 x Y<br> |
| − | G - 10 x 30 | + | G - 10 x 30<br> |
| − | H - X x 30 | + | H - X x 30<br> |
| − | I - 20 x 30 | + | I - 20 x 30<br> |
To change default drawing behavior for sub image use DrawMode attribute. | To change default drawing behavior for sub image use DrawMode attribute. | ||
DrawMode values: | DrawMode values: | ||
| + | * '''REGION_B_STRETCH''' - stretch region B | ||
| + | * '''REGION_B_TILE''' - tile region B | ||
| + | * '''REGION_D_STRETCH''' - stretch region D | ||
| + | * '''REGION_D_TILE''' - tile region D | ||
| + | * '''REGION_F_STRETCH''' - stretch region F | ||
| + | * '''REGION_F_TILE''' - tile region F | ||
| + | * '''REGION_H_STRETCH''' - stretch region H | ||
| + | * '''REGION_H_TILE''' - tile region H | ||
| + | * '''REGION_E_VSTRETCH''' - stretch region E vertically | ||
| + | * '''REGION_E_VTILE''' - tile region E vertically | ||
| + | * '''REGION_E_HSTRETCH''' - stretch region E horizontally | ||
| + | * '''REGION_E_HTILE''' - tile region E horizontally | ||
| − | + | [[Category:Skinning]] | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
Latest revision as of 00:42, 4 May 2015
The Standard View Skinning SDK requires Media Center 9.0.170 or above. This SDK is meant to complement the Standard View skinning tutorial. It just offers more detail in certain areas. Start with the tutorial first, and refer to this if necessary.
The file called main.xml is a key file for controlling the look and functionality of the skin. This SDK focuses on the components of the main.xml and what they mean.
You need to include file named TheSkin.gif (jpg,bmp) (preferred size: 310x210) with your skin package, this image will be displayed in Skin Manager.
Contents
Skin Items
The following skin item, from Skin to ScrollBar describe the pieces of the skin. These can be used as Items in the GetSkinInfo automation function. Sub items, such as the CaptionArea of Frame are specified like Frame::CaptionArea.
Attributes, described for each item, are passed as the second argument of the GetSkinInfo function.
Skin
This is where you give the skin its name, identify yourself as the author, and add any special notes about the skin.
Attributes:
- Name - name of the skin
- Author - name of the author
- EMail - (optional) author's e-mail address
- WebSite - (optional) address of author's website
- About - (optional) short description of the skin.
Frame
Frame is the most complicated part of Standard View skinning. It contains all items necessary to change the look of the main application.
CaptionArea - Top area of the frame with text in it.
Attributes:
- Bitmap - (optional) name of bitmap file to use for caption area
- TransColor - (optional) color of the transparent area inside the bitmap
- Margins - (optional) size of the image regions, see Drawing Images
- DrawMode - (optional) see Drawing Image
- Alignement - Location of the CationArea on the titlebar, 0 - Left, 1 - Center, 2 - Right
- OffsetX - horizontal offset of the Caption area from default location.
- OffsetY - vertical offset of the Caption area from default location
- ActiveTextColor - Color of the text for active application
- InactiveTextColor - Color of the text for inactive application
- TextShadowColor - Color of the text shadow.
Icon - top area of the frame with image
Attributes:
- Alignement - Location of the Icon on the titlebar, 0 - Left, 1 - Center, 2 - Right
- OffsetX - horizontal offset of the Icon from default location.
- OffsetY - vertical offset of the Icon from default location
- SizeX - horizontal size of the Icon
- SizeY - vertical size of the Icon
CloseButton - button to close application
MaximizeButton - button to maximize application
MinimizeButton - button to minimize application
RestoreButton - ( optional) button to restore application from maximized state.
Attributes:
- Bitmap - name of bitmap file to use for buttons
- TransColor - (optional) color of the transparent area inside the bitmap
- Margins - (optional) size of the image regions, see Drawing Images
- DrawMode - (optional) see Drawing Images
- NumberImages - (optional) number of sub images inside bitmap, see Drawing Images. Number of images for the buttons is 3: 1 - UP, 2 - Over, 3- Down
- Alignement - Location of the button on the titlebar, 0 - Left, 1 - Center, 2 - Right
- OffsetX - horizontal offset of the button from default location.
- OffsetY - vertical offset of the button from default location
LeftBorder - left border of the frame
RightBorder - right border of the frame
TopBorder - top border of the frame
BottomBorder - bottom border of the frame
Attributes:
- Bitmap - name of bitmap file to use for borders
- TransColor - (optional) color of the transparent area inside the bitmap
- Margins - (optional) size of the image regions, see Drawing Images
- DrawMode - (optional) see Drawing Images
- NumberImages - (optional) number of sub images inside bitmap, see Drawing Images. Max number of images for borders is 2: 1 - Active borders, 2 - (optional) Inactive borders. if NumberImages is 1 then active and inactive borders will be the same.
Button - generic windows button
Attributes:
- Bitmap - name of bitmap file to use for the button
- TransColor - (optional) color of the transparent area inside the bitmap
- Margins - (optional) size of the image regions, see Drawing Images
- DrawMode - (optional) see Drawing Images
- NumberImages - (optional) number of sub images inside bitmap, see Drawing Images. Number of images for the button is 4: 1 - UP, 2 - Over, 3- Down, 4 - Disabled
DialogBack - background of some pop-up and some internal windows
Attributes:
- BackColor - color of dialog background
- Bitmap - bitmap to use to paint dialog background, if this attribute used then BackColor attribute is ignored.
TextBox - generic text area.
Attributes:
- TextColor - color of the textbox text.
- DisabledTextColor - disabled color of the textbox text.
Edit - generic edit window
Attributes:
- BackColor - color of the edit window background.
- TextColor - color of the edit window text.
- DisabledBackColor - color of the disabled edit window background.
- DisabledTextColor - color of the disabled edit window text.
ComboBox - generic combobox window
Attributes:
- Bitmap - name of bitmap file to use for the combobox
- TransColor - (optional) color of the transparent area inside the bitmap
- Margins - (optional) size of the image regions, see Drawing Images
- DrawMode - (optional) see Drawing Images
- NumberImages - (optional) number of sub images inside bitmap, see Drawing Images. Number of images for the combobox is 4: 1 - UP, 2 - Over, 3- Down, 4 - Disabled
- BackColor - color of the combobox window background.
- TextColor - color of the combobox window text.
- DisabledBackColor - color of the disabled combobox window background.
- DisabledTextColor - color of the disabled combobox window text.
CheckBox - generic checkbox window
Attributes:
- Bitmap - name of bitmap file to use for the checkbox
- TransColor - (optional) color of the transparent area inside the bitmap
- NumberImages - (optional) number of sub images inside bitmap, see Drawing Images. Number of images for the checkbox is 8: 1 - UP, 2 - Up Checked, 3 - Over, 4 - Over Checked, 5 - Down, 6 - Down Checked, 7 - Disabled, 8 - Disabled Checked
RadioButton - generic radiobutton window
Attributes:
- Bitmap - name of bitmap file to use for the radiobutton
- TransColor - (optional) color of the transparent area inside the bitmap
- NumberImages - (optional) number of sub images inside bitmap, see Drawing Images. Number of images for the radiobutton is 8: 1 - UP, 2 - Up Checked, 3 - Over, 4 - Over Checked, 5 - Down, 6 - Down Checked, 7 - Disabled, 8 - Disabled Checked
OptionsList- options list which is visible on the right side of Options window.
Attributes:
- TextColor - color of text of the options list
- BackColor - color of background.
- ShadowColor - color of shadow parts of the list.
- HilightColor - color of highlight parts.
PlayerWindow
Player window is the window in the left bottom corner of the Media Center.
Button: PlayButton, StopButton, PauseButton, NextButton, PreviousButton, ShuffleButton, ShuffleOffButton, ContinuousButton, ContinuousOffButton, OptionsButton
Attributes:
- Bitmap - name of bitmap file to use for a button
- TransColor - (optional) color of the transparent area inside the bitmap
- Margins - (optional) size of the image regions, see Drawing Images
- DrawMode - (optional) see Drawing Images
- NumberImages - (optional) number of sub images inside bitmap, see Drawing Images. Number of images for the buttons is 3: 1 - UP, 2 - Over, 3- Down
Areas: Display, ControlBar, TargetBar
Attributes:
- Bitmap - name of bitmap file to use for an area
- TransColor - (optional) color of the transparent area inside the bitmap
- Margins - (optional) size of the image regions, see Drawing Images
- DrawMode - (optional) see Drawing Images
- NumberImages - (optional) number of sub images inside bitmap, see Drawing Images. Number of images for the area bitmap is 1.
Sliders: VolumeSlider, PositionSlider
Attribute:
- Bitmap - name of bitmap file to use for a button
- TransColor - (optional) color of the transparent area inside the bitmap
- Margins - (optional) size of the image regions, see Drawing Images
- DrawMode - (optional) see Drawing Images
- NumberImages - (optional) number of sub images inside bitmap, see Drawing Images. Number of images for the sliders is 1.
Slider Thumbs: VolumeSliderThumb, PositionSliderThumb
Attributes:
- Bitmap - name of bitmap file to use for a thumb
- TransColor - (optional) color of the transparent area inside the bitmap
- Margins - (optional) size of the image regions, see Drawing Images
- DrawMode - (optional) see Drawing Images
- NumberImages - (optional) number of sub images inside bitmap, see Drawing Images. Max number of images for the buttons is 2: 1 - enabled, 2 - (optional) disabled.
Tree
Colors:
Attributes:
- Text - color of the tree text
- Back - color of the tree's background
- SelectedText - color of the text of the selected item
- SelectedBack - color of the background of the selected item
Selection (optional):
Attributes:
- Bitmap - name of bitmap file to use for the background to the selected element in the tree
- TransColor - (optional) color of the transparent area inside the bitmap
- Margins - (optional) size of the image regions, see Drawing Images
- DrawMode - (optional) see Drawing Images
- NumberImages - (optional) number of sub images inside bitmap, see Drawing Images. Number of images for the tree selection background is 3: 1 - up, 2 - down, 3 - over
List
Colors:
Attributes:
- Text - color of the list text
- Back - color of the lists' background
- SelectedText - color of the text of the selected item
- SelectedBack - color of the background of the selected item
- Current - color of the text of the currently playing item.
HeaderBar:
- Bitmap - name of bitmap file to use for a thumb
- TransColor - (optional) color of the transparent area inside the bitmap
- Margins - (optional) size of the image regions, see Drawing Images
- DrawMode - (optional) see Drawing Images
- NumberImages - (optional) number of sub images inside bitmap, see Drawing Images. Number of images for the header is 3: 1 - up, 2 - down, 3 - over
- TextColor - color of the header's text.
StatusBar
Colors:
Attributes:
- Text - color of the statusbar text
- Back - color of the background of the statusbar
ProgressBar
Bitmaps: Back, Front
Attributes:
- Bitmap - name of bitmap file to use for a thumb
- TransColor - (optional) color of the transparent area inside the bitmap
- Margins - (optional) size of the image regions, see Drawing Images
- DrawMode - (optional) see Drawing Images
- NumberImages - (optional) number of sub images inside bitmap, see Drawing Images. Number of images for the header is 1.
GroupBox
Colors:
Attributes:
- Text - color of the groupbox text
Bitmaps: LeftBorder, RightBorder, TopBorder, BottomBorder
Attributes:
- Bitmap - name of bitmap file to use for a thumb
- TransColor - (optional) color of the transparent area inside the bitmap
- Margins - (optional) size of the image regions, see Drawing Images
- DrawMode - (optional) see Drawing Images
- NumberImages - (optional) number of sub images inside bitmap, see Drawing Images. Number of images for the header is 1.
Tab
Colors:
Attributes:
- Text - color of the tab text
Bitmaps: Button, LeftBorder, RightBorder, TopBorder, BottomBorder
Attributes:
- Bitmap - name of bitmap file to use for a thumb
- TransColor - (optional) color of the transparent area inside the bitmap
- Margins - (optional) size of the image regions, see Drawing Images
- DrawMode - (optional) see Drawing Images
- NumberImages - (optional) number of sub images inside bitmap, see Drawing Images. Number of images for the header is 1 for borders, and 3 for the Button: 1 - up, 2 - down, 3 - over
Slider
Bitmaps: Horizontal Background, Vertical background
Attributes:
- Bitmap - name of bitmap file to use for a background
- TransColor - (optional) color of the transparent area inside the bitmap
- Margins - (optional) size of the image regions, see Drawing Images
- DrawMode - (optional) see Drawing Images
- NumberImages - (optional) number of sub images inside bitmap, see Drawing Images. Max number of images for the backgrounds is 2: 1 - background image, 2 - (optional) Fill image.
Bitmaps: Horizontal Handle, Vertical Handle
Attributes:
- Bitmap - name of bitmap file to use for a handle
- TransColor - (optional) color of the transparent area inside the bitmap
- Margins - (optional) size of the image regions, see Drawing Images
- DrawMode - (optional) see Drawing Images
- NumberImages - (optional) number of sub images inside bitmap, see Drawing Images. Number of images for the handles is 4: 1 - up, 2 - down, 3 - over, 4 -disabled
UpDown
Bitmaps: Up, Down, Left, Right
Attributes:
- Bitmap - name of bitmap file to use for a UpDown control
- TransColor - (optional) color of the transparent area inside the bitmap
- Margins - (optional) size of the image regions, see Drawing Images
- DrawMode - (optional) see Drawing Images
- NumberImages - (optional) number of sub images inside bitmap, see Drawing Images. Number of images for the UpDown controls is 4: 1 - up, 2 - down, 3 - over, 4 -disabled
ScrollBar
Bitmaps: HorizontalLeftArrow, HorizontalRightArrow, HorizontalHandle, HorizontalBackground, VerticalUpArrow, VerticalDownArrow, VerticalHandle, VerticalBackground, Stump
Attributes:
- Bitmap - name of bitmap file to use for a scrollbar control
- TransColor - (optional) color of the transparent area inside the bitmap
- Margins - (optional) size of the image regions, see Drawing Images
- DrawMode - (optional) see Drawing Images
- NumberImages - (optional) number of sub images inside bitmap, see Drawing Images. Number of images for the scrollbar controls is 4: 1 - up, 2 - down, 3 - over, 4 -disabled, but Stamp image should contain only one bitmap.
Drawing images
NumberImages describes how many sub images are there in a bitmap, default value for the attribute is 1.
There are two styles of matrix drawing: New Style Matrix Drawing and Old Style Matrix Drawing.
Old Style Matrix Drawing:
Every sub image is broken into 9 regions and draws each one separately.
Here is the diagram of the image regions:
| A | B | C |
| D | E | F |
| G | H | I |
Margins help to define regions size, for example Margins="10,5,20,30" where 10 - left margin, 5 - top margin, 20 - right margin, 30 - bottom margin, will create 9 regions with following sizes:
A - 10 x 5
B - X x 5
C - 20 x 5
D - 10 x Y
E - X x Y
F - 20 x Y
G - 10 x 30
H - X x 30
I - 20 x 30
To change default drawing behavior for sub image use DrawMode attribute.
DrawMode values:
- REGION_B_STRETCH - stretch region B
- REGION_B_TILE - tile region B
- REGION_D_STRETCH - stretch region D
- REGION_D_TILE - tile region D
- REGION_F_STRETCH - stretch region F
- REGION_F_TILE - tile region F
- REGION_H_STRETCH - stretch region H
- REGION_H_TILE - tile region H
- REGION_E_VSTRETCH - stretch region E vertically
- REGION_E_VTILE - tile region E vertically
- REGION_E_HSTRETCH - stretch region E horizontally
- REGION_E_HTILE - tile region E horizontally
