Graphical Elements (ie: <Grid Style="???" />)

[Ryan F. Mercer]

I've been playing around with the graphical elements a bit and thought I'd start posting my findings.

Grid Tag:

<Grid Size="175,150" Anchor="C,C" Offset="0,0" Padding="0,0" Style="Grid9Detail140" ConsumeMouse="0" />

Grid consists of 9 cells (3x3) and is typically used to frame content. Size: x,y (#,#). Anchor: x,y (L/C/R,T/C/B). Style: Grid9Detail...140 ({nil}/Two/Three/Four/Five/Six). "Grid9Detail" refers to a graphical overlay for a 9 cell grid and "140" is the minimum width before individual cell details begin to overlap each other. You have six base-frame styles to choose from.

The white areas show the full size and placement of each grid. Ideal margins for content are as follows.

grid9details...140 ({nil}/Two/Three/Five/Six):

margin-left:   18
margin-top:    44
margin-right:  17
margin-bottom: 43

grid9details...140 (Four):

margin-left:   20
margin-top:    44
margin-right:  20
margin-bottom: 44

To achieve these margins, content tags must use a combination of the following attributes: Anchor, Offset, Size, WrapWidth (Label tag only).
_

 

[Ryan F. Mercer]

Fonts:

TwCenMT... (14/16/18/20/22/24).
_

 

[Ryan F. Mercer]

ScrollPanel Tag:

<ScrollPanel Anchor="L,T" Offset="0,0" Size="146,163" Vertical="1" AutoScrollBar="1" />

ScrollPanel allows vertical scrolling of content that exceeds the vertical size of the ScrollPanel. It requires Vertical="1", otherwise content will simply overflow. Horizontal="1" is not an option. AutoScrollBar="0" means the scroll controls are always visible. AutoScrollBar="1" will cause the scroll controls to appear and disappear as needed. Either way the scroll control tags must also be added to the ScrollPanel content.

Placement and sizes are fixed. Nothing automatically resizes when other things appear or disappear. Tho nothing prevents creating the necessary lua code for that.


ScrollBar, UpButton, DownButton Tags: (ScrollPanel controls)

<UpButton   Anchor="R,T" AnchorSide="O,I" Offset="1,0" Style="ScrollBarUp" />
<ScrollBar  Anchor="R,T" AnchorSide="O,I" Offset="1,18" Length="127" Style="VertSlider" />
<DownButton Anchor="R,B" AnchorSide="O,I" Offset="1,0" Style="ScrollBarDown" />

Often added with the attribute AnchorSide: x,y (I/O,I/O). This uses the same Anchor attribute, but draws the element either inside or outside the parent tag area, along either axis.
_

 

[Ryan F. Mercer]

Stack Tag:

<Stack Anchor="L,T" Offset="0,0" Padding="0" StackGrowth="Bottom" />

Automatically places content items side-by-side and often used with a ScrollPanel parent tag. StackGrowth: add-on (Top/Bottom/Left/Right). Padding: item-spacing (#).
_

 

[Ryan F. Mercer]

Box Tag:

<Box Anchor="L,T" Offset="18,44" Size="146,163" Color="255,0,0,255" />

Creates a box of the specified color. Color: R,G,B,a (#,#,#,#) [0-255]. An alpha value of 0 is completely transparent while 255 is completely opaque. You can also notate the value this way: Color="White,255". Size: x,y (#/Full,#/Full). "Full" continues drawing to the edge of the screen.
_

 

[Ryan F. Mercer]

Image Tag:

<Image Anchor="L,T" Offset="0,0" Size="98,5" Texture="HorizontalTrim.dds" TextureOffset="0,0" />

The image texture automatically tiles both vertically and horizontally. Offset pertains to the image tag itself while TextureOffset determines from where in the texture it should start drawing it to the screen.
_

 

[Ryan F. Mercer]

Container Tag:

<Container Size="460,32" ID="InstanceRoot" />

Containers are typically used to bind, identify, and act upon (ie: show/hide) an entire collection of tags all at once.

Incidentally, I don't know what makes the following two tags any different from one another.

<Container ID="first" />
<Box ID="second" Color="#,#,#,0" />

 

[SamBC]

Don't suppose you'd be willing to post all this to the Office CivV Wiki, would you? It'd be really useful to people, I think, and would help get the ball rolling on that wiki again.

 

[Ryan F. Mercer]

Don't suppose you'd be willing to post all this to the Office CivV Wiki, would you?

Nope, but others are welcome to.

This information needs a lot more refinement for a good tutorial, but at least it shows up in a google search.

 

[SamBC]

I've started (possibly gradually) copying stuff to the wiki at http://wiki.2kgames.com/civ5/index.php/User_Interface_XML - for now I'm just copying with very basic reformatting. Later I'll sanity-check, and maybe reformat to prettier stuff (like using tables in some places).

 

[Ryan F. Mercer]

Yeah I was thinking of cleaning this up into tables at some point, similar to what you'd find on w3cschools. But that's still too technical for most people, so right now I'm just spitting out what I'm learning while working on another project, because I haven't seen this information anywhere else.

 

[whoward69]

Buttons containing the left and right arrows from the Unit Panel, aligned left/right (margins set for the "non-four" styles)

<Button ID="RotateLeftButton"  Anchor="L,C" Offset="18,0" Size="32,32"
        TextureOffset="32,0" Texture="UnitPanelArrows.dds"
        ToolTip="TXT_KEY_ROTATE_LEFT" />"

<Button ID="RotateRightButton" Anchor="R,C" Offset="17,0" Size="32,32"
        TextureOffset="0,0"  Texture="UnitPanelArrows.dds"
        ToolTip="TXT_KEY_ROTATE_RIGHT" />

Button containing a label

<Button ID="RotateButton" Anchor="C,C" Offset="0,-2" Size="200,32">
  <Label ID="RotateName" Anchor="C,C" Font="TwCenMT24"
         ColorSet="Beige_Black_Alpha" FontStyle="SoftShadow"
         String="TXT_KEY_ROTATE_NAME" ToolTip="TXT_KEY_ROTATE"/>
</Button>

Combined into a grid that displays top-centre

<Grid ID="Grid" Anchor="C,T" Offset="0,-10" Size="400,120" Padding="20,40"
      Color="White.256" Style="Grid9DetailSix140" ConsumeMouse="1">
  <Button ID="RotateButton" Anchor="C,C" Offset="0,-2" Size="200,32">
    <Label ID="RotateName" Anchor="C,C" Font="TwCenMT24"
           ColorSet="Beige_Black_Alpha" FontStyle="SoftShadow"
           String="TXT_KEY_ROTATE_NAME" ToolTip="TXT_KEY_ROTATE"/>
  </Button>
  <Button ID="RotateLeftButton"  Anchor="L,C" Offset="18,0" Size="32,32"
          TextureOffset="32,0" Texture="UnitPanelArrows.dds"
          ToolTip="TXT_KEY_ROTATE_LEFT" />"
  <Button ID="RotateRightButton" Anchor="R,C" Offset="17,0" Size="32,32"
          TextureOffset="0,0"  Texture="UnitPanelArrows.dds"
          ToolTip="TXT_KEY_ROTATE_RIGHT" />
</Grid>

Simples!

 

[hazel16]

I've been working on a UI mod and thought this tutorial was really helpful. However, I noticed going through the base game code that they used a number of other named styles for controls in addition to the ones mentioned above. Through some Find-In-Files, Excel, copy-paste magic, I made a quick mod that displays all the style names and examples for Controls that have more than one style. Not all are very pretty, but this might be useful to other modders.

The full list of styles:

Spoiler :

Box BGBlock
Box BGBlock_ClearTopBar
Box MenuBottomTreatment
Box MenuLeftSideTreatment
Box MenuRightSideTreatment
Box MenuTopTreatment
Box PopupLeftSideTreatment
Box PopupNotificationTopTreatment
Box PopupRightSideTreatment
Button BackButton
Button BoxButton
Button Button_128
Button Button_16
Button Button_256L
Button Button_512L
Button ForwardButton
Button TradeItemButton
Button TradeItemButtonSmall
Grid Grid9Bar
Grid Grid9BlackTint8
Grid Grid9Blank
Grid Grid9BlueFrame
Grid Grid9Detail140
Grid Grid9Detail162
Grid Grid9Detail48
Grid Grid9Detail48Black
Grid Grid9DetailFive140
Grid Grid9DetailSix140
Grid Grid9DetailThree140
Grid Grid9DetailTwo140
Grid Grid9Frame
Grid Grid9Frame27
Grid Grid9Frame27SquareBlack
Grid Grid9FrameTurns
Grid Grid9FrameTurnsHL
Grid Grid9Highlight8
Grid Grid9Red8
Grid Grid9Science8
Grid GridBlack16
Grid GridBlack8
Grid GridBlackIndent8
Grid GridGlass16
Grid GridSquare8
Grid WindowGrid
GridButton BaseButton
GridButton BaseButton2
GridButton FrameButton200
GridButton FrameButton460
GridButton SmallButton
GridButton SmallButton2
GridButton ZoomButton
GridData Grid9DarkBlue8Button
GridData Grid9DetailTwo140
GridData Grid9FrameButtons
Label MenuTitleCaption
TextButton Font14or20
TextButton Font16or20

And the images:
(Note:I eliminated Box and GridData styles since they weren't as easy to display properly; also note that many of the buttons change appearance on mouseover and that's not depicted here)

Spoiler :