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 .

 

What did you think of this article?




Trackbacks
  • No trackbacks exist for this entry.
Comments
  • No comments exist for this entry.
Leave a comment

 Enter the above security code (required)

 Name

 Email (will not be published)

 Website

Your comment is 0 characters limited to 3000 characters.