Scroll Bar Control: Difference between revisions

From Official Kodi Wiki
Jump to navigation Jump to search
>NedBot
m (Robot: Cosmetic changes)
No edit summary
 
(8 intermediate revisions by 4 users not shown)
Line 1: Line 1:
<section begin="main content" />
The scroll bar control is used as a page control for lists, panels, wraplists, fixedlists, textboxes, and grouplists. You can choose the position, size, and look of the scroll bar.
The scroll bar control is used as a page control for lists, panels, wraplists, fixedlists, textboxes, and grouplists. You can choose the position, size, and look of the scroll bar.
=== Example ===
=== Example ===
<source lang="xml">
<source lang=xml>
<control type="scrollbar" id="17">
<control type="scrollbar" id="17">
       <description>My first scroll bar control</description>
       <description>My first scroll bar control</description>
       <posx>80</posx>
       <left>80</left>
       <posy>60</posy>
       <top>60</top>
       <width>250</width>
       <width>250</width>
       <height>30</height>
       <height>30</height>
Line 51: Line 52:
=== Adding Up and Down buttons above and below a scrollbar ===
=== Adding Up and Down buttons above and below a scrollbar ===
To add arrow buttons above and below the scrollbar, you need to add 2 additional button controls to the window, and set their <onclick> tag to
To add arrow buttons above and below the scrollbar, you need to add 2 additional button controls to the window, and set their <onclick> tag to
<source lang="xml">
<source lang=xml>
<onclick>pageup(id)</onclick>
<onclick>pageup(id)</onclick>
</source>
</source>
or
or
<source lang="xml">
<source lang=xml>
<onclick>pagedown(id)</onclick>
<onclick>pagedown(id)</onclick>
</source>
</source>
where id is the id of this scroll bar.
where id is the id of this scroll bar.
<section end="main content" />


== See also ==
== See also ==
Line 65: Line 67:
* [[Skinning]]
* [[Skinning]]


[[Category:Skin Development]]
[[Category:Skin_development]]

Latest revision as of 12:36, 10 July 2018

The scroll bar control is used as a page control for lists, panels, wraplists, fixedlists, textboxes, and grouplists. You can choose the position, size, and look of the scroll bar.

Example

<control type="scrollbar" id="17">
      <description>My first scroll bar control</description>
      <left>80</left>
      <top>60</top>
      <width>250</width>
      <height>30</height>
      <visible>true</visible>
      <texturesliderbackground>scroll-background.png</texturesliderbackground>
      <texturesliderbar>bar.png</texturesliderbar>
      <texturesliderbarfocus>bar-focus.png</texturesliderbarfocus>
      <textureslidernib>nib.png</textureslidernib>
      <textureslidernibfocus>nib-focus.png</textureslidernibfocus>
      <pulseonselect></pulseonselect>
      <orientation>vertical</orientation>
      <showonepage>false</showonepage>
      <onup>2</onup>
      <ondown>3</ondown>
      <onleft>1</onleft>
      <onright>1</onright>
</control>

Available Tags

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

texturesliderbackground

Specifies the image file which should be displayed in the background of the scroll bar control. See here for additional information about textures.

texturesliderbar Specifies the image file which should be displayed for the scroll bar. As the size of the scroll bar is dynamic, it is often useful to use the border attribute of this texture.
texturesliderbarfocus Specifies the image file which should be displayed for the scroll bar when it has focus.
textureslidernib Specifies the image file which should be displayed for the scroll bar nib. The nib is always centered within the scroll bar.
textureslidernibfocus Specifies the image file which should be displayed for the scroll bar nib when it has focus. The nib is always centered within the scroll bar.
orientation Specifies whether this scrollbar is horizontal or vertical. Defaults to vertical.
showonepage Specifies whether the scrollbar will show if the container it's controlling has just one page. Defaults to true.

Adding Up and Down buttons above and below a scrollbar

To add arrow buttons above and below the scrollbar, you need to add 2 additional button controls to the window, and set their <onclick> tag to

<onclick>pageup(id)</onclick>

or

<onclick>pagedown(id)</onclick>

where id is the id of this scroll bar.


See also

Development: