UI/Examples

UI Frame Examples/Samples

15x1 Command Card (Sample)

Description

This layout moves the command card to center in a 15x1 strip, instead of a 15x3 in the bottom right.

XML Code

Expand this example

<Frame type="Frame" name="GameUI/UIContainer/ConsoleUIContainer" file="GameUI">
        <Frame type="CommandPanel" name="CommandPanel">
            <Anchor side="Bottom" relative="$parent" pos="Max" offset="-18"/>
            <Anchor side="Right" relative="$parent" pos="Mid" offset="577"/>
            <Width val="1155"/>
            <Height val="76"/>
            <Frame type="CommandTooltip" name="CommandTooltip">
                <Anchor side="Bottom" relative="$parent" pos="Max" offset="-100"/>
                <Anchor side="Right" relative="$parent" pos="Mid" offset="235"/>
            </Frame>
            <Frame type="CommandButton" name="CommandButton00">
                <Anchor side="Top" relative="$parent" pos="Min" offset="0"/>
                <Anchor side="Left" relative="$parent" pos="Min" offset="0"/>
            </Frame>
            <Frame type="CommandButton" name="CommandButton05">
                <Anchor side="Top" relative="$parent" pos="Min" offset="0"/>
                <Anchor side="Left" relative="$parent/CommandButton04" pos="Max" offset="#CommandButtonGap"/>
            </Frame>
            <Frame type="CommandButton" name="CommandButton10">
                <Anchor side="Top" relative="$parent" pos="Min" offset="0"/>
                <Anchor side="Left" relative="$parent/CommandButton09" pos="Max" offset="#CommandButtonGap"/>
            </Frame>
        </Frame>
        <Frame type="Image" name="CommandPanelBorder">
            <Anchor side="Top" relative="$parent/CommandPanel" pos="Min" offset="-26"/>
            <Anchor side="Bottom" relative="$parent/CommandPanel" pos="Max" offset="35"/>
            <Anchor side="Left" relative="$parent/CommandPanel" pos="Min" offset="-33"/>
            <Anchor side="Right" relative="$parent/CommandPanel" pos="Max" offset="32"/>
            <Texture val="@UI/TimerWindowBackground"/>
            <TextureType val="Border"/>
            <RenderPriority val="500"/>
        </Frame>
    </Frame>

Tab Control (example)

Description

This frame creates buttons for a series of tabs within a frame, when a button is selected it shows the frame that is associated with the button and hides the others.

XML Code

Expand this example

<Frame type="TabControl" name="InfoTabController">
	<Anchor relative="$parent"/>
	<TabListItem val="PageButtonsContainer/Button01"/>
	<TabListItem val="PageButtonsContainer/Button02"/>
	<TabListItem val="PageButtonsContainer/Button03"/>
	<PanelListItem val="InfoPage1"/>
	<PanelListItem val="InfoPage2"/>
	<PanelListItem val="InfoPage3"/>
	<Frame type="Frame" name="PageButtonsContainer" template="CampaignInfoDialog/CampaignInfoPage3ButtonsContainerTemplate">
		<Anchor side="Top" relative="$parent" pos="Min" offset="199"/>
		<Anchor side="Left" relative="$parent" pos="Min" offset="78"/>
		<Frame type="Button" name="Button01">
		</Frame>
		<Frame type="Button" name="Button02">
		</Frame>
		<Frame type="Button" name="Button03">
		</Frame>
	</Frame>
	<Frame type="Frame" name="InfoPage1" template="CampaignInfoDialog/CampaignInfoTemplate"/>
	<Frame type="Frame" name="InfoPage2" template="CampaignInfoDialog/CampaignInfoTemplate"/>
	<Frame type="Frame" name="InfoPage3" template="CampaignInfoDialog/CampaignInfoTemplate"/>
</Frame>

Template for adding more examples

Layout Name (example or sample)

• This should be a descriptive title of what this layout does (don't do things like best command card ever)
• Choose to tag it as example or sample based on the contents of the frame, avoid using both.
  • If it's meant to demonstrate something it's an example
  • If it's meant to be copy pasted without any necessary changes it's a sample

Description

This is my Layout, it moves these frames and/or creates these frames.

Pictures (optional, but helpful)

XML Code

Layout Name

Only include
<Frame>
    </Frame Contents>
</Frame>

• The desc and utf tags are part of the base layout system and easy enough to add if necessary
• Remember to use 4 spaces instead of tab.