WPF RelativeLayout Control

A custom WPF control that mimics the behaviour of Android's RelativeLayout. This reduces the usage of multiple nested panels and such.

Sample

This is the output of the test application. In this sample, only the RelativeLayout is used here to contain the 9 Grids and position them relative to each other.

Here's a snippet of the XAML code from the test application.

...
<RelativeLayout>
    <Grid x:Name="aqua" 
          Background="Aqua"
          Width="150" Height="150"
          RelativeLayout.CenterInParent="True"/>

    <Grid x:Name="bisque"
          Width="20"
          Background="Bisque"
          RelativeLayout.AlignParentBottom="True"
          RelativeLayout.AlignTop="aqua"
          RelativeLayout.ToRightOf="aqua"/>

    <Grid x:Name="darkBlue"
          Height ="20"
          Background="DarkBlue"
          RelativeLayout.Above="aqua"
          RelativeLayout.AlignLeft="aqua"
          RelativeLayout.AlignParentRight="True"/>
...

How to include in project

1. Download the DLL from here.
2. Add the downloaded DLL as a reference in your WPF Project.

Reference

RelativeLayout's child properties

• ToLeftOf : string. The name of the target control
  The control will be placed on the left of the specified target control.

• ToRightOf : string. The name of the target control
  The control will be placed on the right of the specified target control.

• Above : string. The name of the target control
  The control will be placed above the specified target control.

• Below : string. The name of the target control
  The control will be placed below the specified target control.

• AlignLeft : string. The name of the target control
  The control's left edge will be aligned to the left edge of the specified target control.

• AlignRight : string. The name of the target control
  The control's right edge will be aligned to the right edge of the specified target control.

• AlignTop : string. The name of the target control
  The control's top edge will be aligned to the top edge of the specified target control.

• AlignBottom : string. The name of the target control
  The control's bottom edge will be aligned to the bottom edge of the specified target control.

• AlignParentLeft : boolean.
  The control's left edge will be aligned to the left edge of the RelativeLayout.

• AlignParentRight : boolean.
  The control's right edge will be aligned to the right edge of the RelativeLayout.

• AlignParentTop : boolean.
  The control's top edge will be aligned to the top edge of the RelativeLayout.

• AlignParentBottom : boolean.
  The control's bottom edge will be aligned to the bottom edge of the RelativeLayout.

• CenterInParent : boolean.
  The control will be centered, horizontally and vertically, inside the RelativeLayout.

• CenterHorizontal : boolean.
  The control will be centered horizontally inside the RelativeLayout.

• CenterVertical : boolean.
  The control will be centered vertically inside the RelativeLayout.