<?xml version="1.0" encoding="utf-8"?>
<Resource>
  <Folder name="GacGenConfig">
    <Folder name="Cpp">
      <Text name="SourceFolder">Source</Text>
      <Text name="Resource">..\..\UIRes\Flow.bin</Text>
      <Text name="NormalInclude">GacUI.h</Text>
      <Text name="Name">Demo</Text>
    </Folder>
  </Folder>
  <Folder name="MainWindow">
    <InstanceStyle name="MainWindowStyle">
      <Styles>
        <Style ref.Path="//*.groupBoxAxis//RadioButton">
          <ev.SelectedChanged-eval>
            <![CDATA[
            {
              var radioButton = cast (SelectableButton*) sender.RelatedControl;
              if (radioButton.Selected)
              {
                var direction : AxisDirection =
                  radioButton.Text == "LeftDown"  ? LeftDown :
                  radioButton.Text == "LeftUp"    ? LeftUp :
                  radioButton.Text == "RightDown" ? RightDown :
                  radioButton.Text == "RightUp"   ? RightUp :
                  radioButton.Text == "UpRight"   ? UpRight :
                  radioButton.Text == "UpLeft"    ? UpLeft :
                  radioButton.Text == "DownLeft"  ? DownLeft :
                  DownRight;
                var axis = new Axis^(direction);
                flowLayout.Axis = axis;
              }
            }
          ]]>
          </ev.SelectedChanged-eval>
        </Style>
        <Style ref.Path="//*.groupBoxAlignment//RadioButton">
          <ev.SelectedChanged-eval>
            <![CDATA[
            {
              var radioButton = cast (SelectableButton*) sender.RelatedControl;
              if (radioButton.Selected)
              {
                flowLayout.Alignment =
                  radioButton.Text == "Left"   ? Left :
                  radioButton.Text == "Center" ? Center :
                  Extend;
              }
            }
          ]]>
          </ev.SelectedChanged-eval>
        </Style>
        <Style ref.Path="//FlowItem/Button">
          <ev.Clicked-eval>
            <![CDATA[
            {
              for (flowItem in flowLayout.FlowItems)
              {
                flowItem.ExtraMargin = {};
              }
            
              var selectedItem = cast (FlowItem*) sender.Parent;
              selectedItem.ExtraMargin = {left:10 top:10 right:10 bottom:10};
              flowLayout.MoveChild(selectedItem, flowLayout.FlowItems.Count - 1);
            }
          ]]>
          </ev.Clicked-eval>
        </Style>
      </Styles>
    </InstanceStyle>
    <Instance name="MainWindowResource">
      <Instance ref.CodeBehind="false" ref.Class="demo::MainWindow" xmlns:x="presentation::controls::GuiSelectableButton::*" ref.Styles="res://MainWindow/MainWindowStyle">
        <Window Text="Flow" ClientSize="x:480 y:320">
          <x:MutexGroupController ref.Name="groupAxis"/>
          <x:MutexGroupController ref.Name="groupAlignment"/>
          <att.BoundsComposition-set PreferredMinSize="x:480 y:320"/>
          <att.ContainerComposition-set MinSizeLimitation="LimitToElementAndChildren"/>

          <Table AlignmentToParent="left:5 top:5 right:5 bottom:5" CellPadding="5" MinSizeLimitation="LimitToElementAndChildren">
            <att.Rows>
              <CellOption>composeType:MinSize</CellOption>
              <CellOption>composeType:MinSize</CellOption>
              <CellOption>composeType:Percentage percentage:1.0</CellOption>
            </att.Rows>
            <att.Columns>
              <CellOption>composeType:MinSize</CellOption>
              <CellOption>composeType:MinSize</CellOption>
              <CellOption>composeType:Percentage percentage:1.0</CellOption>
            </att.Columns>

            <Cell Site="row:0 column:0">
              <GroupBox ref.Name="groupBoxAxis" Text="Axis">
                <att.BoundsComposition-set AlignmentToParent="left:5 top:5 right:5 bottom:5"/>
                <att.ContainerComposition-set MinSizeLimitation="LimitToElementAndChildren"/>

                <Table AlignmentToParent="left:0 top:0 right:0 bottom:0" MinSizeLimitation="LimitToElementAndChildren">
                  <att.Rows>
                    <CellOption>composeType:MinSize</CellOption>
                    <CellOption>composeType:MinSize</CellOption>
                    <CellOption>composeType:MinSize</CellOption>
                    <CellOption>composeType:MinSize</CellOption>
                  </att.Rows>
                  <att.Columns>
                    <CellOption>composeType:MinSize</CellOption>
                    <CellOption>composeType:MinSize</CellOption>
                    <CellOption>composeType:MinSize</CellOption>
                    <CellOption>composeType:MinSize</CellOption>
                  </att.Columns>

                  <Cell Site="row:0 column:1">
                    <RadioButton Text="RightDown" GroupController-ref="groupAxis" Selected="true"/>
                  </Cell>
                  <Cell Site="row:0 column:2">
                    <RadioButton Text="LeftDown" GroupController-ref="groupAxis"/>
                  </Cell>
                  <Cell Site="row:1 column:0">
                    <RadioButton Text="DownRight" GroupController-ref="groupAxis"/>
                  </Cell>
                  <Cell Site="row:1 column:3">
                    <RadioButton Text="DownLeft" GroupController-ref="groupAxis"/>
                  </Cell>
                  <Cell Site="row:2 column:0">
                    <RadioButton Text="UpRight" GroupController-ref="groupAxis"/>
                  </Cell>
                  <Cell Site="row:2 column:3">
                    <RadioButton Text="UpLeft" GroupController-ref="groupAxis"/>
                  </Cell>
                  <Cell Site="row:3 column:1">
                    <RadioButton Text="RightUp" GroupController-ref="groupAxis"/>
                  </Cell>
                  <Cell Site="row:3 column:2">
                    <RadioButton Text="LeftUp" GroupController-ref="groupAxis"/>
                  </Cell>
                </Table>
              </GroupBox>
            </Cell>

            <Cell Site="row:0 column:1">
              <GroupBox ref.Name="groupBoxAlignment" Text="Alignment">
                <att.BoundsComposition-set AlignmentToParent="left:5 top:5 right:5 bottom:5"/>
                <att.ContainerComposition-set MinSizeLimitation="LimitToElementAndChildren"/>

                <Table AlignmentToParent="left:0 top:0 right:0 bottom:0" MinSizeLimitation="LimitToElementAndChildren">
                  <att.Rows>
                    <CellOption>composeType:MinSize</CellOption>
                    <CellOption>composeType:MinSize</CellOption>
                    <CellOption>composeType:MinSize</CellOption>
                  </att.Rows>
                  <att.Columns>
                    <CellOption>composeType:MinSize</CellOption>
                  </att.Columns>

                  <Cell Site="row:0 column:0">
                    <RadioButton Text="Left" GroupController-ref="groupAlignment" Selected="true"/>
                  </Cell>
                  <Cell Site="row:1 column:0">
                    <RadioButton Text="Center" GroupController-ref="groupAlignment"/>
                  </Cell>
                  <Cell Site="row:2 column:0">
                    <RadioButton Text="Extend" GroupController-ref="groupAlignment"/>
                  </Cell>
                </Table>
              </GroupBox>
            </Cell>

            <Cell Site="row:1 column:0 columnSpan:3">
              <Label Text="Click any button in stack items to enlarge it."/>
            </Cell>

            <Cell Site="row:2 column:0 columnSpan:3">
              <Flow ref.Name="flowLayout" AlignmentToParent="left:0 top:0 right:0 bottom:0" RowPadding="20" ColumnPadding="5" ExtraMargin="left:10 top:10 right:10 bottom:10" MinSizeLimitation="LimitToElementAndChildren">
                <FlowItem>
                  <Button Text="Large 1">
                    <att.BoundsComposition-set AlignmentToParent="left:0 top:0 right:0 bottom:0" PreferredMinSize="x:100 y:100"/>
                  </Button>
                </FlowItem>
                <FlowItem>
                  <Button Text="Medium 1">
                    <att.BoundsComposition-set AlignmentToParent="left:0 top:0 right:0 bottom:0" PreferredMinSize="x:75 y:75"/>
                  </Button>
                </FlowItem>
                <FlowItem>
                  <Button Text="Small 1">
                    <att.BoundsComposition-set AlignmentToParent="left:0 top:0 right:0 bottom:0" PreferredMinSize="x:50 y:50"/>
                  </Button>
                </FlowItem>
                <FlowItem>
                  <Button Text="Large 2">
                    <att.BoundsComposition-set AlignmentToParent="left:0 top:0 right:0 bottom:0" PreferredMinSize="x:100 y:100"/>
                  </Button>
                </FlowItem>
                <FlowItem>
                  <Button Text="Medium 2">
                    <att.BoundsComposition-set AlignmentToParent="left:0 top:0 right:0 bottom:0" PreferredMinSize="x:75 y:75"/>
                  </Button>
                </FlowItem>
                <FlowItem>
                  <Button Text="Small 2">
                    <att.BoundsComposition-set AlignmentToParent="left:0 top:0 right:0 bottom:0" PreferredMinSize="x:50 y:50"/>
                  </Button>
                </FlowItem>
                <FlowItem>
                  <Button Text="Large 3">
                    <att.BoundsComposition-set AlignmentToParent="left:0 top:0 right:0 bottom:0" PreferredMinSize="x:100 y:100"/>
                  </Button>
                </FlowItem>
                <FlowItem>
                  <Button Text="Medium 3">
                    <att.BoundsComposition-set AlignmentToParent="left:0 top:0 right:0 bottom:0" PreferredMinSize="x:75 y:75"/>
                  </Button>
                </FlowItem>
                <FlowItem>
                  <Button Text="Small 3">
                    <att.BoundsComposition-set AlignmentToParent="left:0 top:0 right:0 bottom:0" PreferredMinSize="x:50 y:50"/>
                  </Button>
                </FlowItem>
                <FlowItem>
                  <Button Text="Large 4">
                    <att.BoundsComposition-set AlignmentToParent="left:0 top:0 right:0 bottom:0" PreferredMinSize="x:100 y:100"/>
                  </Button>
                </FlowItem>
                <FlowItem>
                  <Button Text="Medium 4">
                    <att.BoundsComposition-set AlignmentToParent="left:0 top:0 right:0 bottom:0" PreferredMinSize="x:75 y:75"/>
                  </Button>
                </FlowItem>
                <FlowItem>
                  <Button Text="Small 4">
                    <att.BoundsComposition-set AlignmentToParent="left:0 top:0 right:0 bottom:0" PreferredMinSize="x:50 y:50"/>
                  </Button>
                </FlowItem>
              </Flow>
            </Cell>
          </Table>
        </Window>
      </Instance>
    </Instance>
  </Folder>
</Resource>