Click here to Skip to main content
13,668,886 members
Click here to Skip to main content
Add your own
alternative version

Tagged as


18 bookmarked
Posted 23 Oct 2012
Licenced CPOL

TilePanel - An alternative to the WrapPanel

, 24 Oct 2012
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


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.


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" >
           <TilePanel:TilePanel Background="Beige" Orientation="Vertical" AlignmentBoundary="10" AlignOnLesserEdge="false"/>



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.


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


About the Author

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.

You may also be interested in...

Comments and Discussions

PraiseThank you Pin
Mohammad Maleki12-May-18 20:30
memberMohammad Maleki12-May-18 20:30 
QuestionThanks! Pin
Charana198421-Jan-14 7:00
memberCharana198421-Jan-14 7:00 
GeneralMy vote of 5 Pin
kientrungnguyen8-Aug-13 4:08
memberkientrungnguyen8-Aug-13 4:08 
GeneralMy vote of 5 Pin
fredatcodeproject26-Oct-12 1:40
memberfredatcodeproject26-Oct-12 1:40 
GeneralMy vote of 4 Pin
Severin Friede24-Oct-12 21:45
memberSeverin Friede24-Oct-12 21:45 
GeneralMy vote of 3 Pin
fredatcodeproject24-Oct-12 11:21
memberfredatcodeproject24-Oct-12 11:21 
GeneralRe: My vote of 3 Pin
LaurenceBunnage24-Oct-12 11:29
memberLaurenceBunnage24-Oct-12 11:29 
Bugi found some errors Pin
dyma24-Oct-12 2:27
memberdyma24-Oct-12 2:27 
GeneralRe: i found some errors Pin
LaurenceBunnage24-Oct-12 3:33
memberLaurenceBunnage24-Oct-12 3:33 

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

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

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web01-2016 | 2.8.180820.1 | Last Updated 24 Oct 2012
Article Copyright 2012 by LaurenceBunnage
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid