<x-dart-flex-root-container>
          
  <x-view-stack 
    id="target"
    percent-width="{{100.0}}"
    percent-height="{{100.0}}">
    
    <x-view-stack-element
      x-id="layoutView"
      id="view-1"
      list-name="Layout swapper"
      percent-width="{{100.0}}"
      percent-height="{{100.0}}">
        
        <x-h-group
          align="left"
          percent-width="{{100.0}}"
          height="{{20}}">
            
          <x-rich-text
            width="{{160}}"
            text="Swap the layout!"
            align="center">
          </x-rich-text>
          
          <x-combo-box
            x-id="layoutSelector"
            width="{{120}}"
            height="{{20}}"
            label-function="{{
              (Map item) => item['label']
            }}"
            x-data-provider="{{
              new ListCollection(
                  source: [
                    {'label':'tile group', 'value':new TileLayout()},
                    {'label':'horizontal group', 'value':new HorizontalLayout()},
                    {'label':'vertical group', 'value':new VerticalLayout()}
                  ]
              )
            }}">
          </x-combo-box>
          
        </x-h-group>
        
        <x-h-group
          align="left"
          percent-width="{{100.0}}"
          height="{{20}}">
            
          <x-rich-text
            width="{{160}}"
            text="Change the gap!"
            align="center">
          </x-rich-text>
          
          <x-slider
            x-id="gapSelector"
            min="{{0}}"
            max="{{50}}"
            step="{{1}}"
            value="{{10}}"
            width="{{120}}"
            height="{{20}}">
          </x-slider>
          
        </x-h-group>
        
        <x-group
          x-id="imageGroup"
          layout="{{new TileLayout()}}"
          percent-width="{{100.0}}"
          percent-height="{{100.0}}">
            
            <x-image
              width="{{100}}"
              height="{{100}}"
              source="dartlang.png">
            </x-image>
            
            <x-image
              width="{{100}}"
              height="{{100}}"
              source="dartlang.png">
            </x-image>
            
            <x-image
              width="{{100}}"
              height="{{100}}"
              source="dartlang.png">
            </x-image>
            
            <x-image
              width="{{100}}"
              height="{{100}}"
              source="dartlang.png">
            </x-image>
            
            <x-image
              width="{{100}}"
              height="{{100}}"
              source="dartlang.png">
            </x-image>
            
            <x-image
              width="{{100}}"
              height="{{100}}"
              source="dartlang.png">
            </x-image>
            
            <x-image
              width="{{100}}"
              height="{{100}}"
              source="dartlang.png">
            </x-image>
            
            <x-image
              width="{{100}}"
              height="{{100}}"
              source="dartlang.png">
            </x-image>
            
            <x-image
              width="{{100}}"
              height="{{100}}"
              source="dartlang.png">
            </x-image>
            
            <x-image
              width="{{100}}"
              height="{{100}}"
              source="dartlang.png">
            </x-image>
            
            <x-image
              width="{{100}}"
              height="{{100}}"
              source="dartlang.png">
            </x-image>
            
            <x-image
              width="{{100}}"
              height="{{100}}"
              source="dartlang.png">
            </x-image>
            
            <x-image
              width="{{100}}"
              height="{{100}}"
              source="dartlang.png">
            </x-image>
            
            <x-image
              width="{{100}}"
              height="{{100}}"
              source="dartlang.png">
            </x-image>
            
            <x-image
              width="{{100}}"
              height="{{100}}"
              source="dartlang.png">
            </x-image>
            
            <x-image
              width="{{100}}"
              height="{{100}}"
              source="dartlang.png">
            </x-image>
            
            <x-image
              width="{{100}}"
              height="{{100}}"
              source="dartlang.png">
            </x-image>
            
            <x-image
              width="{{100}}"
              height="{{100}}"
              source="dartlang.png">
            </x-image>
            
            <x-image
              width="{{100}}"
              height="{{100}}"
              source="dartlang.png">
            </x-image>
            
            <x-image
              width="{{100}}"
              height="{{100}}"
              source="dartlang.png">
            </x-image>
            
            <x-image
              width="{{100}}"
              height="{{100}}"
              source="dartlang.png">
            </x-image>
            
            <x-image
              width="{{100}}"
              height="{{100}}"
              source="dartlang.png">
            </x-image>
            
            <x-image
              width="{{100}}"
              height="{{100}}"
              source="dartlang.png">
            </x-image>
            
            <x-image
              width="{{100}}"
              height="{{100}}"
              source="dartlang.png">
            </x-image>
            
            <x-image
              width="{{100}}"
              height="{{100}}"
              source="dartlang.png">
            </x-image>
            
            <x-image
              width="{{100}}"
              height="{{100}}"
              source="dartlang.png">
            </x-image>
            
            <x-image
              width="{{100}}"
              height="{{100}}"
              source="dartlang.png">
            </x-image>
            
            <x-image
              width="{{100}}"
              height="{{100}}"
              source="dartlang.png">
            </x-image>
            
        </x-group>
        
    </x-view-stack-element>
    
    <x-view-stack-element
      x-id="dataGridView"
      id="view-2"
      list-name="Dart full list issues grid"
      percent-width="{{100.0}}"
      percent-height="{{100.0}}">
        
        <x-data-grid
          x-id="issuesGrid"
          percent-width="{{100.0}}"
          percent-height="{{100.0}}"
          header-height="{{40}}"
          row-height="{{60}}"
          column-spacing="{{0}}"
          row-spacing="{{0}}">
        </x-data-grid>
        
    </x-view-stack-element>

    
    <x-view-stack-element
      x-id="layoutViewCode"
      id="view-1-code"
      list-name="web_ui code"
      percent-width="{{100.0}}"
      percent-height="{{100.0}}">
        
        <x-rich-text
          percent-width="{{100.0}}"
          percent-height="{{100.0}}"
          text="{{layoutViewCodePage}}">
        </x-rich-text>
        
    </x-view-stack-element>
    
    <x-view-stack-element
      x-id="dataGridViewCode"
      id="view-2-code"
      list-name="web_ui code"
      percent-width="{{100.0}}"
      percent-height="{{100.0}}">
        
        <x-rich-text
          percent-width="{{100.0}}"
          percent-height="{{100.0}}"
          text="{{dataGridViewCodePage}}">
        </x-rich-text>
        
    </x-view-stack-element>
    
  </x-view-stack>
  
</x-dart-flex-root-container>