Box Layout Panel

Here’s another quick WPF custom control derived from Panel. This one is a cross between a StackPanel and a WrapPanel. It supports two modes of layout – Inline and Block.


Inline elements are wrapped left to right much as the same as a WrapPanel with the default Orientation = Horizontal.


Block elements are stacked as per a StackPanel with the default Orientation = Vertical.


The benefit of combining (a simplified version) of this logic into one layout control is that an attached property can then be used on a per child basis to determine the layout (LayoutMode = Block or Inline). This is even more convenient when the property is set via an implicit style, e.g. all TextBlocks set to Inline by default, all Buttons as Block.


I also added some dependency properties for Padding (space between edge and top/left/right/bottom-most controls) and InternalPadding (the vertical and horizontal spacing between wrapped/stacked controls).

<panels:BoxPanel Height=”Auto” Background=”PaleGreen” InternalPadding=”4,2″ Padding=”50,8,8,8″>
<
TextBlock>Some inline text.</TextBlock
>
<
TextBlock>Followed by some more inline text.</TextBlock
>
<
TextBlock>Followed by yet some more inline text.</TextBlock
>
<
TextBlock panels:BoxPanel.LayoutMode=”Block”>A new paragraph.</TextBlock
>
<
Button panels:BoxPanel.LayoutMode=”Block”>A Button</Button
>
<
TextBlock>Below are three buttons in a line</TextBlock
>
<
Button panels:BoxPanel.LayoutMode=”Inline”>One</Button
>
<
Button panels:BoxPanel.LayoutMode=”Inline”>Two</Button
>
<
Button panels:BoxPanel.LayoutMode=”Inline”>Three</Button
>
<
panels:BoxPanel Background=”LightYellow” Padding=”10,2″ InternalPadding
=”4,0″>
<
TextBlock>The</TextBlock
>
<
Image Source=”Passport_Photo_with_blue_background_half_size.png” Width
=”24″/>
<
TextBlock>End.</TextBlock
>
</
panels:BoxPanel
>
</
panels:BoxPanel>

BoxPanel - Layout Measures


 


Sound a bit obscure? Trust me, I had a reason .