Windows UWP Development Series –relativepanel

Relativepanel is a new layout panel introduced in the Windows ten UWP program that implements layout by setting the location relationship between elements through attached properties. A simple example is as follows:

<relativepanel>
????<textbox x:Name= "TextBox1" Text= "TextBox" Margin= "5"/>
????<button x:Name= "BlueButton" Margin= "5" Background= "LightBlue" Content = "Buttonright" relativepanel.rightof= "TextBox1"/>
????<button x:Name= "Orangebutton" Margin= "5" Background= "Orange" Content = "Buttonbelow" relativepanel.rightof= "TextBox1" relativepanel.below= "BlueButton"/>
</relativepanel>

The effect of the layout is as follows:

????????

It supports the following types of positional relationships:

Adjacent to the other elements:

• Leftof
• Rightof
• Above
• Below

Aligns with the edges of other elements:

• Alignbottomwith
• Alignleftwith
• Aligntopwith
• Alignrightwith

Align with center of other elements:

• Alignhorizontalcenterwith
• Alignverticalcenterwith

Align with panel edge:

• Alignbottomwithpanel
• Alignleftwithpanel
• Alignrightwithpanel
• Aligntopwithpanel

Align with the Panel center:

• Alignhorizontalcenterwithpanel
• Alignverticalcenterwithpanel

Trial, the common alignment has been, basically all kinds of complex layout can be easily implemented. The only drawback is that this layout is coupled with other elements, and the elements inside are not as free to be removed as other panels. But it's also very powerful, and it's much more convenient than the layout panels under the WINRT.

Windows UWP Development Series –relativepanel