Share via

Using Centered Layouts

  • Article

The Center layout centers all children. This layout uses the entire size of the parent and arranges children within that space. In the example below, three ColorFill elements are centered within a parent ColorFill element.

An example of a Center layout.

<UI Name="Centered">
  <Content>
    <ColorFill Content="SlateGray" Layout="Center" >
      <Children>
        <me:SmallBox/>
        <me:MediumBox/>
        <me:LargeBox/>
      </Children>
    </ColorFill>
  </Content>
</UI>

<UI Name="SmallBox">
  <Content>
    <ColorFill Content="Goldenrod" MinimumSize="15,15" />
  </Content>
</UI>
  
<UI Name="MediumBox">
  <Content>
    <ColorFill Content="CornflowerBlue" MinimumSize="50,50" />
  </Content>
</UI>
  
<UI Name="LargeBox">
  <Content>
    <ColorFill Content="Crimson" MinimumSize="100,100" />
  </Content>
</UI>

Sample Explorer

  • Layout > Center

See Also