Windows 10 released a lot of new functionality and controls. One of the new controls is the RelativePanel. This panel takes the great Grid panel and cranks it up to 11.

The Grid panel gives a lot of control with how you layout controls. You specify rows and columns of various heights and widths and then place controls within the grid and define the row and/or column through attached properties. Instead of rows/columns, the RelativePanel places controls relative to itself or other controls within it. Just like the Grid, the RelativePanel uses 16 different attached properties to define where elements should be placed. In fact, the RelativePanel has no additional properties or methods from a regular Panel. It only contains attached properties.

Aligning relative to the RelativePanel

The relative panel does not respect controls with traditional alignment via HorizontalAlignment and VerticalAlignment. Instead there are six new properties to define how an element should align relative to the RelativePanel. These properties are boolean values that specify if it should align.

The following table shows the new attached properties.

Attached Property Default value Horizontal/VerticalAlignment equivalent RelativePanel.AlignBottomWithPanel false VerticalAlignment=”Bottom” RelativePanel.AlignHorizontalCenterWithPanel false HorizontalAlignment=”Center” RelativePanel.AlignLeftWithPanel true HorizontalAlignment=”Left” RelativePanel.AlignRightWithPanel false HorizontalAlignment=”Right” RelativePanel.AlignTopWithPanel true VerticalAlignment=”Top” RelativePanel.AlignVerticalCenterWithPanel false VerticalAlignment=”Center”

You can combine these values just as you could with HorizontalAlignment and VerticalAlignment. If you would like to center a control in the panel:

< RelativePanel > < Border Width ="100" Height ="100" Background ="Blue" RelativePanel . AlignHorizontalCenterWithPanel ="True" RelativePanel . AlignVerticalCenterWithPanel ="True" /> </ RelativePanel >

By themselves, these six new properties are not very exciting. They are equivalent to the HorizontalAlignment and VerticalAlignment properties. The awesomeness comes from aligning with other elements.

NOTE: If you are following along with the blog, you will notice the designer, in both Visual Studio and Blend, will only render elements with the above properties correctly. It will not render elements with the properties below correctly. You will need to run the application to see the layout.

Align relative to other elements

This is where the RelativePanel shines. With the Grid control you had to create many different rows and columns. You had to know the row and/or column of a particular control. Then you assign the row and/or column of a control you wanted next to the first. Here is an example displaying name of someone

< TextBlock Text ="Name" Grid . Row ="1" Grid . Column ="1" /> < TextBlock Text ="Shawn Kendrot" Grid . Row ="1" Grid . Column ="2" Margin ="12,0,0,0" />

Here is how you would accomplish that with the RelativePanel

< TextBlock x:Name ="NameText" Text ="Name" /> < TextBlock Text ="Shawn Kendrot" RelativePanel . RightOf ="NameText" Margin ="12,0,0,0" />

When you want to align one control to the right of another another, simple say so!

Let’s take a look at the 10 new attached properties that allow for relative placement of one control with another.

Above

Aligns an element vertically above another element. This alone will not place an element directly above an element.

< RelativePanel > < Border x:Name ="ElementOne" Width ="200" Height ="200" Background ="Red" RelativePanel . AlignHorizontalCenterWithPanel ="True" RelativePanel . AlignVerticalCenterWithPanel ="True" /> < Border x:Name ="ElementTwo" Width ="100" Height ="100" Background ="Blue" RelativePanel . Above ="ElementOne" /> </ RelativePanel >

AlignBottomWith

Vertically aligns the bottom of a control with the bottom of another control. This property will not affect the horizontal alignment of the control.

< RelativePanel > < Border x:Name ="ElementOne" Width ="200" Height ="200" Background ="Red" RelativePanel . AlignHorizontalCenterWithPanel ="True" RelativePanel . AlignVerticalCenterWithPanel ="True" /> < Border x:Name ="ElementTwo" Width ="100" Height ="100" Background ="Blue" RelativePanel . AlignBottomWith ="ElementOne" /> </ RelativePanel >

AlignHorizontalCenterWith

Horizontally aligns the center of one control with the center of another control. This property will not affect vertical alignment of the control.

< RelativePanel > < Border x:Name ="ElementOne" Width ="200" Height ="200" Background ="Red" RelativePanel . AlignHorizontalCenterWithPanel ="True" RelativePanel . AlignVerticalCenterWithPanel ="True" /> < Border x:Name ="ElementTwo" Width ="100" Height ="100" Background ="Blue" RelativePanel . AlignHorizontalCenterWith ="ElementOne" /> </ RelativePanel >

AlignLeftWith

Horizontally aligns the left edge of the control with the left edge of another control. This will not affect vertical alignment.

< RelativePanel > < Border x:Name ="ElementOne" Width ="200" Height ="200" Background ="Red" RelativePanel . AlignHorizontalCenterWithPanel ="True" RelativePanel . AlignVerticalCenterWithPanel ="True" /> < Border x:Name ="ElementTwo" Width ="100" Height ="100" Background ="Blue" RelativePanel . AlignLeftWith ="ElementOne" /> </ RelativePanel >

AlignRightWith

Horizontally aligns the right edge of the control with the right edge of another control. This will not affect vertical alignment.

< RelativePanel > < Border x:Name ="ElementOne" Width ="200" Height ="200" Background ="Red" RelativePanel . AlignHorizontalCenterWithPanel ="True" RelativePanel . AlignVerticalCenterWithPanel ="True" /> < Border x:Name ="ElementTwo" Width ="100" Height ="100" Background ="Blue" RelativePanel . AlignRightWith ="ElementOne" /> </ RelativePanel >

AlignTopWith

Vertically aligns the top edge of the control with the top edge of another control. This will not affect horizontal alignment.

< RelativePanel > < Border x:Name ="ElementOne" Width ="200" Height ="200" Background ="Red" RelativePanel . AlignHorizontalCenterWithPanel ="True" RelativePanel . AlignVerticalCenterWithPanel ="True" /> < Border x:Name ="ElementTwo" Width ="100" Height ="100" Background ="Blue" RelativePanel . AlignTopWith ="ElementOne" /> </ RelativePanel >

AlignVerticalCenterWith

Vertically aligns the center of one control with the center of another control. This will not affect horizontal alignment.

< RelativePanel > < Border x:Name ="ElementOne" Width ="200" Height ="200" Background ="Red" RelativePanel . AlignHorizontalCenterWithPanel ="True" RelativePanel . AlignVerticalCenterWithPanel ="True" /> < Border x:Name ="ElementTwo" Width ="100" Height ="100" Background ="Blue" RelativePanel . AlignVerticalCenterWith ="ElementOne" /> </ RelativePanel >

Below

Vertically aligns an element below another element. This alone will not place an element directly below an element. This will align the top edge of one control with the bottom edge of another control.

< RelativePanel > < Border x:Name ="ElementOne" Width ="200" Height ="200" Background ="Red" RelativePanel . AlignHorizontalCenterWithPanel ="True" RelativePanel . AlignVerticalCenterWithPanel ="True" /> < Border x:Name ="ElementTwo" Width ="100" Height ="100" Background ="Blue" RelativePanel . Below ="ElementOne" /> </ RelativePanel >

LeftOf

Horizontally aligns the right edge of one control with the left edge of another control.

< RelativePanel > < Border x:Name ="ElementOne" Width ="200" Height ="200" Background ="Red" RelativePanel . AlignHorizontalCenterWithPanel ="True" RelativePanel . AlignVerticalCenterWithPanel ="True" /> < Border x:Name ="ElementTwo" Width ="100" Height ="100" Background ="Blue" RelativePanel . LeftOf ="ElementOne" /> </ RelativePanel >

RightOf

Horizontally aligns the left edge of one control with the right edge of another control.

< RelativePanel > < Border x:Name ="ElementOne" Width ="200" Height ="200" Background ="Red" RelativePanel . AlignHorizontalCenterWithPanel ="True" RelativePanel . AlignVerticalCenterWithPanel ="True" /> < Border x:Name ="ElementTwo" Width ="100" Height ="100" Background ="Blue" RelativePanel . RightOf ="ElementOne" /> </ RelativePanel >

Combining properties

Combine the alignment properties for the true power of the RelativePanel. Align the side and top/bottom edges of a control with another for exact layout.

< RelativePanel > < Border x:Name ="ElementOne" Width ="200" Height ="200" Background ="Red" RelativePanel . AlignHorizontalCenterWithPanel ="True" RelativePanel . AlignVerticalCenterWithPanel ="True" /> < TextBlock Text ="Hello" Margin ="12,0,0,0" RelativePanel . RightOf ="ElementOne" RelativePanel . AlignTopWith ="ElementOne" /> < TextBlock Text ="World" Margin ="12,0,0,0" RelativePanel . RightOf ="ElementOne" RelativePanel . AlignBottomWith ="ElementOne" /> </ RelativePanel >

You can try combining multiple horizontal or vertical alignments. As you can imagine, trying to horizontally align with two or more properties will probably not work. It’s hard to align to the left of object one while also aligning right of another.

Precautions

It is possible for items to be rendered outside of the given area. Take the following example of an item aligned to the panels right, and another object aligned to the right of the first.

< RelativePanel > < Border x:Name ="ElementOne" Width ="200" Height ="200" Background ="Red" RelativePanel . AlignRightWithPanel ="True" /> < Border x:Name ="ElementTwo" Width ="100" Height ="100" Background ="Blue" RelativePanel . RightOf ="ElementOne" /> </ RelativePanel >

When this is rendered, the blue area will not be visible.

This is still the case if you limit the size of the RelativePanel. If an item is out of the panel, it will not render.

Layout cascades from one item to another. So if object one aligns with object two, and object three aligns with object two, if object one moves, then object two and three move along with it.

This new controls offers great possibilities. What will you create with it?