Bugfix:TabControl

From XfireWiki

Problem

With creating the TabControl fields in the XML system for the buttons, there will be a problem when there are in one tab less buttons as in another tab.

A good example is the browse button in the download-tab. At the Friends-tab and the Servers-tab are 4 buttons visible, but at the Downloads-tab is only 1 button visible. When there are less buttons in one tab then in another, the Xfire will display the buttons below it that are actually available in an inactive tab.

Old version

In the old situation the buttons were called with the tab-index. If the second tab was active, the second tile of each sub-tab was active.

How they solved the problem in the default Xfire-skin was by creating 1 button in the Downloads-tab that covers all the other buttons of the inactive tabs. This button gets the Z-index that is on top of all the other buttons so it will "overwrite" the other buttons of the inactive tabs.

    <Tile Name="TabAddButton" Z="4" ResizeX="100" X="2" Y="10" JustY="BOTTOM" Component="TabAddButton">
      <Tile Name="AddButton" Component="AddButton" />                            <!-- 1.1 - Tab1 -->
      <Tile Name="AddServerButton" Component="AddServerButton" />                <!-- 2.1 - Tab2 -->
      <Tile Name="BigBrowseFileButton" Z="11" Component="BigBrowseFileButton" /> <!-- 3.1 - Tab3 -->
    </Tile>
    <Tile Name="TabChatRefreshButton" Z="4" X="39" Y="10" JustY="BOTTOM" Component="TabChatRefreshButton">
      <Tile Name="ChatButton" Component="ChatButton" />                          <!-- 1.2 - Tab1 -->
      <Tile Name="RefreshButton" Component="RefreshButton" />                    <!-- 2.2 - Tab2 -->
    </Tile>
    <Tile Name="TabInfoButton" Z="4" X="68" Y="10" JustY="BOTTOM" Component="TabInfoButton">
      <Tile Name="WhoButton" Component="WhoButton" />                            <!-- 1.3 - Tab1 -->
      <Tile Name="ServerWhoButton" Component="WhoButton" />                      <!-- 2.3 - Tab2 -->
    </Tile>
    <Tile Name="TabGameDownloadButton" Z="4" X="97" Y="10" JustY="BOTTOM" Component="TabGameDownloadButton">
      <Tile Name="JoinButton" Component="JoinButton" />                          <!-- 1.4 - Tab1 -->
      <Tile Name="ServerJoinButton" Component="JoinButton" />                    <!-- 2.4 - Tab2 -->
    </Tile>

New version

The new situation creates a separate row of buttons for each tab. That row is completely replaced by the active tab. This way there is no old button visible since it is overwriten in total.

  <Tile Name="ButtonArea" Z="4" X="2" Y="10" MinWidth="133" JustY="BOTTOM" Component="ButtonArea">
    <Tile Name="FriendsButtons" ResizeX="100" ResizeY="100" Component="ButtonRow">        <!-- Tab1 -->
      <Tile Name="AddButton" Component="AddButton" />                                     <!-- 1.1 -->
      <Tile Name="ChatButton" X="AddButton.RIGHT+2" Component="ChatButton" />             <!-- 1.2 -->
      <Tile Name="WhoButton1" X="ChatButton.RIGHT+2" Component="WhoButton" />             <!-- 1.3 -->
      <Tile Name="JoinButton1" X="WhoButton1.RIGHT+2" Component="JoinButton" />           <!-- 1.4 -->
    </Tile>
    <Tile Name="ServerButtons" ResizeX="100" ResizeY="100" Component="ButtonRow">         <!-- Tab2 -->
      <Tile Name="AddServerButton" Component="AddServerButton" />                         <!-- 2.1 -->
      <Tile Name="RefreshButton" X="AddServerButton.RIGHT+2" Component="RefreshButton" /> <!-- 2.2 -->
      <Tile Name="WhoButton2" X="RefreshButton.RIGHT+2" Component="WhoButton" />          <!-- 2.3 -->
      <Tile Name="JoinButton2" X="WhoButton2.RIGHT+2" Component="JoinButton" />           <!-- 2.4 -->
    </Tile>
    <Tile Name="FilesButtons" ResizeX="100" ResizeY="100" Component="ButtonRow">          <!-- Tab3 -->
      <Tile Name="BigBrowseFileButton" Component="BigBrowseFileButton" />                 <!-- 3.1 -->
    </Tile>
  </Tile>