SCED/xml/Global/PlayareaGallery.xml

<Defaults>
  <!-- type selection at the top -->
  <Button class="imageTab"
    hoverClass="bGrey"
    pressClass="bWhite"
    onClick="b7b45b/onClick_imageTab"
    color="#888888"
    fontSize="24"
    font="font_teutonic-arkham"/>
  <Button class="bGrey"
    color="grey"/>
  <Button class="bWhite"
    color="white"/>

  <!-- image boxes in the grid -->
  <VerticalLayout class="imageBox"
    color="black"
    outline="#303030"
    outlineSize="2 2"
    onClick="b7b45b/onClick_image"/>
  <Image class="playareaImage"
    preferredHeight="330"/>
  <Text class="imageName"
    preferredHeight="40"
    resizeTextForBestFit="true"
    resizeTextMinSize="10"
    resizeTextMaxSize="18"/>

  <!-- item selection on the left -->
  <Text class="itemText"
    alignment="MiddleLeft"/>
  <Panel class="itemPanel"
    preferredHeight="45"
    onClick="b7b45b/onClick_listItem"/>

  <!-- other -->
  <Text class="headerText"
    fontSize="35"/>
  <VerticalLayout childForceExpandHeight="false"/>
</Defaults>

<VerticalLayout id="playareaGallery"
  active="false"
  color="black"
  height="880"
  width="900"
  outlineSize="2 2"
  outline="#303030">

  <!-- window header -->
  <Panel preferredHeight="60"
    padding="10 10 5 5"
    spacing="10"
    outlineSize="2 2"
    outline="#303030"
    color="black">
    <Text fontSize="32"
      font="font_teutonic-arkham"
      preferredWidth="600"
      alignment="MiddleLeft">Playarea Image Gallery</Text>
    <Panel preferredWidth="50">
      <Button rectAlignment="MiddleRight"
        width="50"
        color="clear"
        icon="close"
        tooltip="Close"
        tooltipPosition="Right"
        tooltipBackgroundColor="rgba(0,0,0,1)"
        onClick="onClick_toggleUi(playareaGallery)"/>
    </Panel>
  </Panel>

  <!-- tab selection -->
  <HorizontalLayout preferredHeight="60"
    padding="5"
    spacing="5">
    <Button class="imageTab"
      id="imageTab1">Official Campaigns</Button>
    <Button class="imageTab"
      id="imageTab2">Official Scenarios</Button>
    <Button class="imageTab"
      id="imageTab3">Fan-Made Campaigns</Button>
    <Button class="imageTab"
      id="imageTab4">Fan-Made Scenarios</Button>
    <Button class="imageTab"
      id="imageTab5">Other Images</Button>
  </HorizontalLayout>

  <HorizontalLayout preferredHeight="760">
    <!-- left column: navigation bar -->
    <VerticalLayout id="itemSelection"
      preferredWidth="180"
      padding="10 15 0 0">
      <!-- this will be filled via scripting -->
      <!-- <Panel class="itemPanel">
        <Text class="itemText">Item</Text>
      </Panel> -->
    </VerticalLayout>

    <!-- right column: image gallery -->
    <VerticalScrollView color="transparent"
      minHeight="100"
      flexibleHeight="100"
      preferredWidth="720"
      scrollSensitivity="380"
      scrollbarColors="grey|grey|#C8C8C8|rgba(0.78,0.78,0.78,0.5)"
      horizontalScrollbarVisibility="AutohideAndExpandViewport"
      raycastTarget="true">
      <GridLayout id="playareaList"
        preferredWidth="700"
        padding="25 25 5 5"
        spacing="10"
        cellSize="330 370">
        <!-- this will be filled via scripting -->
        <!-- <VerticalLayout class="imageBox">
          <Image class="playareaImage" image=""/>
          <Text class="imageName">Image Name</Text>
        </VerticalLayout> -->
      </GridLayout>
    </VerticalScrollView>
  </HorizontalLayout>
</VerticalLayout>