<Folder>
  <Folder name="ResponsiveComponents">
    <Instance name="ResponsiveViewResource">
      <Instance ref.CodeBehind="false" ref.Class="demo::ResponsiveViewControl">
        <CustomControl ref.Name="self">
          <Table AlignmentToParent="left:0 top:0 right:0 bottom:0" CellPadding="5" BorderVisible="false" MinSizeLimitation="LimitToElementAndChildren">
            <att.Rows>
              <_>composeType:MinSize</_>
              <_>composeType:MinSize</_>
              <_>composeType:MinSize</_>
              <_>composeType:MinSize</_>
              <_>composeType:Percentage percentage:1.0</_>
            </att.Rows>
            <att.Columns>
              <_>composeType:Percentage percentage:1.0</_>
              <_>composeType:MinSize</_>
            </att.Columns>

            <Cell Site="row:0 column:0 rowSpan:5">
              <Bounds MinSizeLimitation="LimitToElementAndChildren" InternalMargin="left:1 top:1 right:1 bottom:1">
                <SolidBorder Color="#00FF00"/>
                <ResponsiveView ref.Name="responsive">
                  <att.SharedControls>
                    <DocumentTextBox ref.Name="documentBox" EditMode="Editable" Text="Edit me!"/>
                  </att.SharedControls>
                  <att.Views>
                    <ResponsiveFixed>
                      <Stack AlignmentToParent="left:0 top:0 right:0 bottom:0" Direction="Vertical" MinSizeLimitation="LimitToElementAndChildren" Padding="5">
                        <StackItem>
                          <Label Text-format="Pen Pineapple Apple Pen: $(documentBox.Text)"/>
                        </StackItem>
                        <StackItem>
                          <ResponsiveShared Shared-ref="documentBox" AlignmentToParent="left:0 top:0 right:0 bottom:0"/>
                        </StackItem>
                      </Stack>
                    </ResponsiveFixed>
                    <ResponsiveFixed>
                      <Stack AlignmentToParent="left:0 top:0 right:0 bottom:0" Direction="Vertical" MinSizeLimitation="LimitToElementAndChildren" Padding="5">
                        <StackItem>
                          <Label Text-format="Pineapple Pen: $(documentBox.Text)"/>
                        </StackItem>
                        <StackItem>
                          <ResponsiveShared Shared-ref="documentBox" AlignmentToParent="left:0 top:0 right:0 bottom:0"/>
                        </StackItem>
                      </Stack>
                    </ResponsiveFixed>
                    <ResponsiveFixed>
                      <Stack AlignmentToParent="left:0 top:0 right:0 bottom:0" Direction="Vertical" MinSizeLimitation="LimitToElementAndChildren" Padding="5">
                        <StackItem>
                          <Label Text-format="Apple: $(documentBox.Text)"/>
                        </StackItem>
                        <StackItem>
                          <ResponsiveShared Shared-ref="documentBox" AlignmentToParent="left:0 top:0 right:0 bottom:0"/>
                        </StackItem>
                      </Stack>
                    </ResponsiveFixed>
                    <ResponsiveFixed>
                      <Stack AlignmentToParent="left:0 top:0 right:0 bottom:0" Direction="Vertical" MinSizeLimitation="LimitToElementAndChildren" Padding="5">
                        <StackItem>
                          <Label Text-format="Pen: $(documentBox.Text)"/>
                        </StackItem>
                        <StackItem>
                          <ResponsiveShared Shared-ref="documentBox" AlignmentToParent="left:0 top:0 right:0 bottom:0"/>
                        </StackItem>
                      </Stack>
                    </ResponsiveFixed>
                  </att.Views>
                </ResponsiveView>
              </Bounds>
            </Cell>

            <Cell Site="row:0 column:1">
              <Button Text="LevelUp();" ev.Clicked-eval="responsive.LevelUp();"/>
            </Cell>

            <Cell Site="row:1 column:1">
              <Button Text="LevelDown();" ev.Clicked-eval="responsive.LevelDown();"/>
            </Cell>

            <Cell Site="row:2 column:1">
              <Label Text-format="LevelCount: $(responsive.LevelCount)"/>
            </Cell>

            <Cell Site="row:3 column:1">
              <Label Text-format="CurrentLevel: $(responsive.CurrentLevel)"/>
            </Cell>
          </Table>
        </CustomControl>
      </Instance>
    </Instance>

    <Instance name="ResponsiveStackResource">
      <Instance ref.CodeBehind="false" ref.Class="demo::ResponsiveStackControl">
        <CustomControl ref.Name="self">
          <Table AlignmentToParent="left:0 top:0 right:0 bottom:0" CellPadding="5" BorderVisible="false" MinSizeLimitation="LimitToElementAndChildren">
            <att.Rows>
              <_>composeType:MinSize</_>
              <_>composeType:MinSize</_>
              <_>composeType:MinSize</_>
              <_>composeType:MinSize</_>
              <_>composeType:Percentage percentage:1.0</_>
            </att.Rows>
            <att.Columns>
              <_>composeType:Percentage percentage:1.0</_>
              <_>composeType:MinSize</_>
            </att.Columns>

            <Cell Site="row:0 column:0 rowSpan:5">
              <Bounds MinSizeLimitation="LimitToElementAndChildren" InternalMargin="left:1 top:1 right:1 bottom:1">
                <SolidBorder Color="#00FF00"/>
                <ResponsiveStack ref.Name="responsive">
                  <Stack AlignmentToParent="left:0 top:0 right:0 bottom:0" Padding="10" MinSizeLimitation="LimitToElementAndChildren" Direction="Vertical">
                    <StackItem>
                      <ResponsiveView>
                        <att.Views>
                          <ResponsiveFixed><Label Text="Pen Pineapple Apple Pen"/></ResponsiveFixed>
                          <ResponsiveFixed><Label Text="Pineapple Pen"/></ResponsiveFixed>
                          <ResponsiveFixed><Label Text="Apple"/></ResponsiveFixed>
                          <ResponsiveFixed><Label Text="Pen"/></ResponsiveFixed>
                        </att.Views>
                      </ResponsiveView>
                    </StackItem>
                    <StackItem>
                      <ResponsiveView>
                        <att.Views>
                          <ResponsiveFixed><Label Text="Pineapple Pen"/></ResponsiveFixed>
                          <ResponsiveFixed><Label Text="Apple"/></ResponsiveFixed>
                          <ResponsiveFixed><Label Text="Pen"/></ResponsiveFixed>
                        </att.Views>
                      </ResponsiveView>
                    </StackItem>
                    <StackItem>
                      <ResponsiveView>
                        <att.Views>
                          <ResponsiveFixed><Label Text="Apple"/></ResponsiveFixed>
                          <ResponsiveFixed><Label Text="Pen"/></ResponsiveFixed>
                        </att.Views>
                      </ResponsiveView>
                    </StackItem>
                    <StackItem>
                      <ResponsiveView>
                        <att.Views>
                          <ResponsiveFixed><Label Text="Pen"/></ResponsiveFixed>
                        </att.Views>
                      </ResponsiveView>
                    </StackItem>
                  </Stack>
                </ResponsiveStack>
              </Bounds>
            </Cell>

            <Cell Site="row:0 column:1">
              <Button Text="LevelUp();" ev.Clicked-eval="responsive.LevelUp();"/>
            </Cell>

            <Cell Site="row:1 column:1">
              <Button Text="LevelDown();" ev.Clicked-eval="responsive.LevelDown();"/>
            </Cell>

            <Cell Site="row:2 column:1">
              <Label Text-format="LevelCount: $(responsive.LevelCount)"/>
            </Cell>

            <Cell Site="row:3 column:1">
              <Label Text-format="CurrentLevel: $(responsive.CurrentLevel)"/>
            </Cell>
          </Table>
        </CustomControl>
      </Instance>
    </Instance>

    <Instance name="ResponsiveGroupResource">
      <Instance ref.CodeBehind="false" ref.Class="demo::ResponsiveGroupControl">
        <CustomControl ref.Name="self">
          <Table AlignmentToParent="left:0 top:0 right:0 bottom:0" CellPadding="5" BorderVisible="false" MinSizeLimitation="LimitToElementAndChildren">
            <att.Rows>
              <_>composeType:MinSize</_>
              <_>composeType:MinSize</_>
              <_>composeType:MinSize</_>
              <_>composeType:MinSize</_>
              <_>composeType:Percentage percentage:1.0</_>
            </att.Rows>
            <att.Columns>
              <_>composeType:Percentage percentage:1.0</_>
              <_>composeType:MinSize</_>
            </att.Columns>

            <Cell Site="row:0 column:0 rowSpan:5">
              <Bounds MinSizeLimitation="LimitToElementAndChildren" InternalMargin="left:1 top:1 right:1 bottom:1">
                <SolidBorder Color="#00FF00"/>
                <ResponsiveGroup ref.Name="responsive">
                  <Stack AlignmentToParent="left:0 top:0 right:0 bottom:0" Padding="10" MinSizeLimitation="LimitToElementAndChildren" Direction="Vertical">
                    <StackItem>
                      <ResponsiveView>
                        <att.Views>
                          <ResponsiveFixed><Label Text="Pen Pineapple Apple Pen"/></ResponsiveFixed>
                          <ResponsiveFixed><Label Text="Pineapple Pen"/></ResponsiveFixed>
                          <ResponsiveFixed><Label Text="Apple"/></ResponsiveFixed>
                          <ResponsiveFixed><Label Text="Pen"/></ResponsiveFixed>
                        </att.Views>
                      </ResponsiveView>
                    </StackItem>
                    <StackItem>
                      <ResponsiveView>
                        <att.Views>
                          <ResponsiveFixed><Label Text="Pineapple Pen"/></ResponsiveFixed>
                          <ResponsiveFixed><Label Text="Apple"/></ResponsiveFixed>
                          <ResponsiveFixed><Label Text="Pen"/></ResponsiveFixed>
                        </att.Views>
                      </ResponsiveView>
                    </StackItem>
                    <StackItem>
                      <ResponsiveView>
                        <att.Views>
                          <ResponsiveFixed><Label Text="Apple"/></ResponsiveFixed>
                          <ResponsiveFixed><Label Text="Pen"/></ResponsiveFixed>
                        </att.Views>
                      </ResponsiveView>
                    </StackItem>
                    <StackItem>
                      <ResponsiveView>
                        <att.Views>
                          <ResponsiveFixed><Label Text="Pen"/></ResponsiveFixed>
                        </att.Views>
                      </ResponsiveView>
                    </StackItem>
                  </Stack>
                </ResponsiveGroup>
              </Bounds>
            </Cell>

            <Cell Site="row:0 column:1">
              <Button Text="LevelUp();" ev.Clicked-eval="responsive.LevelUp();"/>
            </Cell>

            <Cell Site="row:1 column:1">
              <Button Text="LevelDown();" ev.Clicked-eval="responsive.LevelDown();"/>
            </Cell>

            <Cell Site="row:2 column:1">
              <Label Text-format="LevelCount: $(responsive.LevelCount)"/>
            </Cell>

            <Cell Site="row:3 column:1">
              <Label Text-format="CurrentLevel: $(responsive.CurrentLevel)"/>
            </Cell>
          </Table>
        </CustomControl>
      </Instance>
    </Instance>

    <Instance name="ResponsiveTabPageResource">
      <Instance ref.CodeBehind="false" ref.Class="demo::ResponsiveTabPage" xmlns:demo="demo::*">
        <TabPage ref.Name="self" Text="Responsive">
          <Table AlignmentToParent="left:0 top:0 right:0 bottom:0" CellPadding="5">
            <att.Rows>
              <CellOption>composeType:MinSize</CellOption>
              <CellOption>composeType:MinSize</CellOption>
              <CellOption>composeType:MinSize</CellOption>
              <CellOption>composeType:Percentage percentage:1.0</CellOption>
            </att.Rows>
            <att.Columns>
              <CellOption>composeType:Percentage percentage:1.0</CellOption>
            </att.Columns>

            <Cell Site="row:0 column:0">
              <GroupBox Text="GuiResponsiveViewComposition">
                <att.BoundsComposition-set AlignmentToParent="left:0 top:0 right:0 bottom:0"/>
                <demo:ResponsiveViewControl>
                  <att.BoundsComposition-set AlignmentToParent="left:10 top:10 right:10 bottom:10"/>
                </demo:ResponsiveViewControl>
              </GroupBox>
            </Cell>

            <Cell Site="row:1 column:0">
              <GroupBox Text="GuiResponsiveStackComposition">
                <att.BoundsComposition-set AlignmentToParent="left:0 top:0 right:0 bottom:0"/>
                <demo:ResponsiveStackControl>
                  <att.BoundsComposition-set AlignmentToParent="left:10 top:10 right:10 bottom:10"/>
                </demo:ResponsiveStackControl>
              </GroupBox>
            </Cell>

            <Cell Site="row:2 column:0">
              <GroupBox Text="GuiResponsiveGroupComposition">
                <att.BoundsComposition-set AlignmentToParent="left:0 top:0 right:0 bottom:0"/>
                <demo:ResponsiveGroupControl>
                  <att.BoundsComposition-set AlignmentToParent="left:10 top:10 right:10 bottom:10"/>
                </demo:ResponsiveGroupControl>
              </GroupBox>
            </Cell>
          </Table>
        </TabPage>
      </Instance>
    </Instance>
  </Folder>
</Folder>