UI/Frame Types/Scrollable Frame

From SC2Mapster Wiki
Jump to: navigation, search

Scrollable Frame

A scrollable frame uses a container to store items inside of it. The scrollable frame then has a scrollbar appear depending on whether the container height has exceeded it's own.

Structure

A scrollable Frame consists of three parts

  • The scrollable frame itself
  • A scrollbar (The name of the scrollbar has to be ScrollBar)
  • And a container frame for the items to be placed in.

It is also possible (as with most any other frame) to place other frames in it such as an Image to give it a background or other functionality.
It is important to note that the container frame height is what determines when the scrollbar appears and works.


Scrollable Frame Properties


Scrollable Frame inherits from Frame and shares all of its properties. Additionally it has:


Need to look up properties

Frame

General purpose Frame type, with its most common use as a container for other specialized frames, such as Controls, Images, among others. Basically every Frame Type inherits from Frame at one point, and it has a fair share of properties.

Structure

Frame Properties




Examples

Expand this example
<Frame type="ScrollableFrame" name="ScrollableList">
	<Anchor side="Top" relative="$parent" pos="Mid" offset="0"/>
	<Anchor side="Bottom" relative="$parent" pos="Mid" offset="0"/>
	<Anchor side="Left" relative="$parent" pos="Mid" offset="0"/>
	<Anchor side="Right" relative="$parent" pos="Mid" offset="0"/>
	<Width val="400"/>
	<Height val="600"/>
	<AcceptsMouse val="true"/>

	<Frame type="Image" name="Background">
		<Anchor relative="$parent"/>
		<Texture val="@@UI/StandardListBox"/>
		<TextureType val="Border"/>
		<Tiled val="true"/>
	</Frame>

	<Frame type="Frame" name="ContainerFrame">
		<Anchor side="Top" relative="$parent" pos="Min" offset="5"/>
		<Anchor side="Bottom" relative="$this/Bottom" pos="Max" offset="0"/>
		<Anchor side="Left" relative="$parent" pos="Min" offset="2"/>
		<Anchor side="Right" relative="$parent" pos="Max" offset="0"/>

		<Frame type="Frame" name="ItemFrame">
			<Anchor side="Left" relative="$parent" pos="Mid" offset="0"/>
			<Anchor side="Right" relative="$parent" pos="Mid" offset="0"/>
			<Anchor side="Top" relative="$parent" pos="Min" offset="0"/>
		</Frame>

		<Frame type="Image" name="Bottom">
			<Anchor side="Top" relative="$parent/ItemFrame" pos="Max" offset="0"/>
			<Anchor side="Left" relative="$parent" pos="Mid" offset="0"/>
			<Anchor side="Right" relative="$parent" pos="Mid" offset="0"/>
			<Width val="1"/>
			<Height val="1"/>
			<Visible val="false"/>
		</Frame>
	</Frame>

	<Frame type="ScrollBar" name="ScrollBar">
		<Anchor side="Top" relative="$parent" pos="Min" offset="0"/>
		<Anchor side="Bottom" relative="$parent" pos="Max" offset="2"/>
		<Anchor side="Right" relative="$parent" pos="Max" offset="-4"/>
		<Orientation val="Vertical"/>
		<StepValue val="50"/>
		<Continuous val="true"/>
		<Width val="16"/>

		<Frame type="Image" name="Image">
			<Anchor relative="$parent"/>
			<Texture val="Assets/Textures/UI_Battlenet_Glue_ChatPanelScrollBarLine.dds"/>
			<TextureType val="NineSlice"/>
			<Tiled val="true"/>
			<Alpha val="0"/>
		</Frame>

		<Frame type="Button" name="Button">
			<Frame type="Image" name="NormalImage">
				<Anchor relative="$parent"/>
				<Texture val="@UI/ChatPanelScrollBarGrabber_Normal"/>
				<TextureType val="NineSlice"/>
				<StateCount val="2"/>
				<Tiled val="true"/>
			</Frame>

			<Frame type="Image" name="HoverImage">
				<Anchor relative="$parent"/>
				<Texture val="@UI/ChatPanelScrollBarGrabber_Hover"/>
				<TextureType val="NineSlice"/>
				<StateCount val="2"/>
				<Tiled val="true"/>
			</Frame>
		</Frame>
	</Frame>
</Frame>