Using Vertical and Horizontal Flow Layouts

  • Article

VerticalFlow and HorzontalFlow positions children in a side-by-side flow (either top to bottom or left to right). By default, these layouts size to children and use only the space that is needed to position the children. If you use inline form (for example, Layout="VerticalFlow" or Layout="HorizontalFlow"), the default configuration is used: wrapping is not set, item alignment is "Near", and there is no space between items. If you want to create a custom configuration, use expanded form.

The example below displays two UI elements side by side in a horizontal flow layout. One UI uses the inline form of vertical flow layout with default settings, and the second UI uses expanded form of vertical flow layout with custom settings.

An example of vertical and horizontal flow layouts.

<!--This UI uses inline form with default settings for vertical flow. -->
<UI Name="Inline">
  <Content>
    <ColorFill Content="CornflowerBlue" Layout="VerticalFlow">
      <Children>
        <Text Content="Inline Form" />
        <Text Content="Apple" />
        <Text Content="Banana" />
        <Text Content="Orange" />
      </Children>
    </ColorFill>
  </Content>
</UI>

<!--This UI uses expanded form with custom settings for spacing and alignment. -->
<UI Name="Expanded">
  <Content>
    <ColorFill Content="Goldenrod" >
      <Layout>
        <FlowLayout Orientation="Vertical" Spacing="15,15" ItemAlignment="Far" />
      </Layout>
      <Children>
        <Text Content="Expanded Form" />
        <Text Content="Apple" />
        <Text Content="Banana" />
        <Text Content="Orange" />
      </Children>
    </ColorFill>
  </Content>
</UI>

Sample Explorer

  • Layout > HorizontalFlow
  • Layout > VerticalFlow

See Also