Click here to Skip to main content
Click here to Skip to main content

TilePanel - An alternative to the WrapPanel

, 24 Oct 2012 CPOL
Rate this:
Please Sign up or sign in to vote.
The TilePanel attempts to wrap the contents of the list by placing the wrapped items at the topmost position they would fit rather than automatically wrapping to the left.

Sample Image

Sample Image

Introduction

The TilePanel is a WPF Panel similar to a WrapPanel that wraps its content by placing the items at the topmost position in the control. This is useful when displaying a collection of different sized objects and the collection order is not important. The Panel also respects the Orientation property for wrapping either horizontally or vertically.

Background

The background to this article stems from a project I am currently working on which requires that a collection of UserControls be embedded into a layout panel. The UserControls are all instrument panels which can vary in size from 100x100 units to 400x400 units in different shapes. When these were laid out with a WrapPanel, large horizontal gaps were left if different sized objects were positioned next to each other. This led me to look to see if I could tile the UserControls so that smaller objects could stack ontop of each other to fill the space generated by a larger object.

The TilePanel is my initial solution.

Using the code

The supplied code is separated into two projects, TilePanel and TilePanelTest.

TilePanel comprises of a single source module TilePanel.cs containing the TilePanel control derived from Panel. TilePanel derives from Panel and overrides Panel's ArrangeOverride and MeasureOverride methods. TilePanel also provides an Orientation property to orient the control in a vertical or horizontal mode.

TilePanelTest is a test application showing how to use the TilePanel.

The following code snippet shows the best way to use this control

The code snippet shows an ItemsControl bound to the TestCollection collection. This supplies the list of objects to be displayed. To put all the items into the TilePanel, set the TilePanel as the ItemsControl.ItemsPanel and set the orientation of TilePanel, in this case to Vertical. To make the TilePanel useful, it needs to have the plane opposite to it's orientation a fixed size so that it will wrap. This has been done in the code snippet by enclosing the ItemsControl in a ScrollViewer with the vertical scroll bar enabled and the horizontal scroll bar disabled. This allows the TilePanel to wrap in the horizontal direction and fill in the vertical direction with a scroll bar to scroll the panel.

Two further properties AlignmentBoundary and AlignOnLesserEdge have beed added to control whether content at similar vertical positions should be aligned to improve layout look and spacial use

<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" >
  <ItemsControl ItemsSource="{Binding TestCollection}" Margin="10" >
     <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
           <TilePanel:TilePanel Background="Beige" Orientation="Vertical" AlignmentBoundary="10" AlignOnLesserEdge="false"/>
        </ItemsPanelTemplate>
     </ItemsControl.ItemsPanel>
  </ItemsControl>
</ScrollViewer>
...   

History

v1.01

Revised the original to fix a bug in the layout algorithm.  This led me to review the layout algorithm with respect to the condition where two 'edges' are close to each other and what should occur under this circumstance.  The new algorithm applies a boundary condition whereby if two edges are close together and overlap then the lower edge is raised to the same level as the higher edge.  At the same time, boundary conditions may differ depending upon the left and right alignment of the similar edges.

Consequently I have added two properties AlignmentBoundary and AlignOnLesserEdge to control the boundary size and alignment mode for the lesser edge.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

LaurenceBunnage
Software Developer (Senior)
United Kingdom United Kingdom
I am a Software Developer working in the Cambridge area (United Kingdom) mainly in Scientific Industries although I have forayed briefly into Inkjet and Financial markets.
 
I work through the entire development structure to provide functional and user friendly applications.
 
I have been programming for many years using C, C++, C# WinForms and most recently WPF.

Comments and Discussions

 
QuestionThanks! PinmemberCharana198421-Jan-14 8:00 
GeneralMy vote of 5 Pinmemberkientrungnguyen8-Aug-13 5:08 
GeneralMy vote of 5 Pinmemberfredatcodeproject26-Oct-12 2:40 
GeneralMy vote of 4 PinmemberSeverin Friede24-Oct-12 22:45 
GeneralMy vote of 3 Pinmemberfredatcodeproject24-Oct-12 12:21 
GeneralRe: My vote of 3 PinmemberLaurenceBunnage24-Oct-12 12:29 
Bugi found some errors Pinmemberdyma24-Oct-12 3:27 
GeneralRe: i found some errors PinmemberLaurenceBunnage24-Oct-12 4:33 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.141216.1 | Last Updated 24 Oct 2012
Article Copyright 2012 by LaurenceBunnage
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid