Panel Container

From Official Kodi Wiki
Revision as of 01:57, 11 September 2022 by RogueScholar (talk | contribs) (Update wikilink targets broken during archiving and refresh page style)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search

The panel container is one of several containers used to display items from file lists in various ways. The panel container is very flexible - it's essentially a multi-column list. The layout of the items is very flexible and is up to the skinner.

Example

<control type="panel" id="52">
	<left>190</left>
	<top>100</top>
	<width>485</width>
	<height>425</height>
	<onleft>9000</onleft>
	<onright>60</onright>
	<onup>52</onup>
	<ondown>52</ondown>
	<scrolltime tween="sine" easing="out">200</scrolltime>
	<autoscroll>true</autoscroll>
	<viewtype label="536">icon</viewtype>
	<pagecontrol>60</pagecontrol>
	<include>contentpanelslide</include>
	<itemlayout height="150" width="120">
		<control type="image">
			<left>10</left>
			<top>10</top>
			<width>100</width>
			<height>100</height>
			<texture>$INFO[ListItem.Icon]</texture>
		</control>
		<control type="image">
			<left>80</left>
			<top>75</top>
			<width>32</width>
			<height>32</height>
			<texture>$INFO[ListItem.Overlay]</texture>
		</control>
		<control type="label">
			<left>0</left>
			<top>115</top>
			<width>110</width>
			<height>22</height>
			<font>font13</font>
			<selectedcolor>green</selectedcolor>
			<align>center</align>
			<label>$INFO[ListItem.Label]</label>
		</control>
	</itemlayout>
	<focusedlayout height="150" width="120">
		<control type="image">
			<width>110</width>
			<height>110</height>
			<left>5</left>
			<top>5</top>
			<texture>folder-focus.png</texture>
			<animation effect="zoom" end="0,0,120,120" time="100">focus</animation>
		</control>
		<control type="image">
			<left>10</left>
			<top>10</top>
			<width>100</width>
			<height>100</height>
			<texture>$INFO[ListItem.Icon]</texture>
			<animation effect="zoom" end="5,5,110,110" time="100">focus</animation>
		</control>
		<control type="image">
			<left>80</left>
			<top>75</top>
			<width>32</width>
			<height>32</height>
			<texture>$INFO[ListItem.Overlay]</texture>
			<animation effect="slide" end="5,5" time="100">focus</animation>
		</control>
		<control type="label">
			<left>0</left>
			<top>120</top>
			<width>110</width>
			<height>22</height>
			<font>font13</font>
			<selectedcolor>green</selectedcolor>
			<align>center</align>
			<label>$INFO[ListItem.Label]</label>
		</control>
	</focusedlayout>
</control>

Available tags

In addition to the Default Control Tags, the following tags are also available. Note that each tag is lower case only. This is important, as XML tags are case-sensitive.

Available tags
Tag Description
<viewtype label="">…</viewtype> The type of view, valid values are: list, icon, wide, wrap, biglist, bigicon, bigwide, bigwrap, info and biginfo. The label attribute indicates the label that will be used in the "View As" control within the GUI. It is localizable via strings.po. This tag has no effect on the view itself, it is simply used by Kodi when switching skins to automatically select a view with a similar layout; skinners should try to set it to best describe the layout provided.
<orientation>…</orientation> The orientation of the panel, defaults to vertical.
<pagecontrol>…</pagecontrol> Used to set the id of the page control used to control that panel.
<scrolltime tween="" easing="">…</scrolltime> The time (in ms) to scroll from one item to another, by default this is 200ms. The panel will scroll smoothly from one item to another as needed; set it to zero to disable the smooth scrolling. The scroll movement can be further adjusted by selecting one of the available tween methods.
<itemlayout height="" width="">…</itemlayout> Specifies the container item layout for the list, and requires both the width and height attributes to be set. It will contain as many label and image controls as needed.
<focusedlayout height="" width="">…</focusedlayout> Specifies the container item layout for items that have focus in the list, and requires both the width and height attributes to be set. It will contain as many label and image controls as needed.
<content>…</content> Used to set the static list content that the panel will contain, allowing the skinner to create a panel anywhere they want with a static set of content, as a useful counterpart to the grouplist control.
<preloaditems>…</preloaditems> Used in association with the background image loader.
<autoscroll>…</autoscroll> Used to make the container scroll automatically, accepts the boolean values of either true or false.