<Instance ref.Class="sample::TabWindowTabTemplate">
  <ref.Members>
    <![CDATA[
      @cpp:Private
      func UpdateTabHeader() : void
      {
        for (flowItem in header.FlowItems)
        {
          var item = cast (TabWindowTabHeaderTemplate*) flowItem.Children[0];
          if (item.CurrentTabPage == self.SelectedTabPage)
          {
            flowItem.ExtraMargin = {left:2 top:2 right:2 bottom:0};
            header.MoveChild(flowItem, header.Children.Count - 1);
          }
          else
          {
            flowItem.ExtraMargin = {left:0 top:0 right:0 bottom:0};
          }
        }
      }

      @cpp:Private
      var remoteHeaderContainer : GuiGraphicsComposition* = null;

      func SetTabHeaderContainer(value : GuiGraphicsComposition*) : void
      {
        if (remoteHeaderContainer is not null)
        {
          remoteHeaderContainer.RemoveChild(headerTable);
        }
        else
        {
          headerContainer.RemoveChild(headerTable);
        }
        remoteHeaderContainer = value;
        if (remoteHeaderContainer is not null)
        {
          remoteHeaderContainer.AddChild(headerTable);
        }
        else
        {
          headerContainer.AddChild(headerTable);
        }
      }

      event AddPageRequested();
    ]]>
  </ref.Members>
  <TabTemplate ref.Name="self" ContainerComposition-ref="container" TabOrder="LeftToRight" MinSizeLimitation="LimitToElementAndChildren">
    <ev.SelectedTabPageChanged-eval>
      <![CDATA[
        {
          self.UpdateTabHeader();
        }
      ]]>
    </ev.SelectedTabPageChanged-eval>
    
    <Table AlignmentToParent="left:0 top:0 right:0 bottom:0" MinSizeLimitation="LimitToElementAndChildren">
      <SolidBackground Color="#2D2D30"/>
      <att.Rows>
        <CellOption>composeType:MinSize</CellOption>
        <CellOption>composeType:Absolute absolute:2</CellOption>
        <CellOption>composeType:Percentage percentage:1.0</CellOption>
      </att.Rows>
      <att.Columns>
        <CellOption>composeType:Percentage percentage:1.0</CellOption>
      </att.Columns>

      <Cell ref.Name="headerContainer" Site="row:0 column:0">
        <Table ref.Name="headerTable" AlignmentToParent="left:0 top:0 right:0 bottom:0" MinSizeLimitation="LimitToElementAndChildren">
          <att.Rows>
            <CellOption>composeType:Percentage percentage:1.0</CellOption>
            <CellOption>composeType:MinSize</CellOption>
            <CellOption>composeType:Percentage percentage:1.0</CellOption>
          </att.Rows>
          <att.Columns>
            <CellOption>composeType:MinSize</CellOption>
            <CellOption>composeType:Percentage percentage:1.0</CellOption>
          </att.Columns>

          <Cell Site="row:1 column:0" InternalMargin="left:2 top:0 right:2 bottom:0">
            <Button Text="+" ev.Clicked-eval="self.AddPageRequested();">
              <att.BoundsComposition-set AssociatedHitTestResult="Client"/>
            </Button>
          </Cell>
          <Cell Site="row:0 column:1 rowSpan:3">
            <RepeatFlow ref.Name="header" AlignmentToParent="left:0 top:-1 right:0 bottom:0" ExtraMargin="left:2 top:2 right:2 bottom:0" MinSizeLimitation="LimitToElementAndChildren">
              <att.ItemTemplate>sample::TabWindowTabHeaderTemplate</att.ItemTemplate>
              <att.ItemSource-bind>self.TabPages</att.ItemSource-bind>
              <ev.ItemInserted-eval>
                <![CDATA[
                  {
                    var flowItem = header.FlowItems[arguments.itemIndex];
                    var item = cast (TabWindowTabHeaderTemplate*) flowItem.Children[0];
                    item.Commands = self.Commands;
                    self.UpdateTabHeader();
                  }
                ]]>
              </ev.ItemInserted-eval>
              <ev.ItemRemoved-eval>
                <![CDATA[
                  {
                    self.UpdateTabHeader();
                  }
                ]]>
              </ev.ItemRemoved-eval>
            </RepeatFlow>
          </Cell>
        </Table>
      </Cell>
      <Cell Site="row:1 column:0">
        <SolidBackground Color="#007ACC"/>
      </Cell>
      <Cell Site="row:2 column:0">
        <SolidBorder Color="#434346"/>
        <Bounds ref.Name="container" AlignmentToParent="left:1 top:1 right:1 bottom:1"/>
      </Cell>
    </Table>
  </TabTemplate>
</Instance>