Click here to Skip to main content
15,867,756 members
Articles / Desktop Programming / WPF

TilePanel - An alternative to the WrapPanel

Rate me:
Please Sign up or sign in to vote.
4.92/5 (10 votes)
24 Oct 2012CPOL3 min read 31.5K   979   18   9
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

XML
<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)


Written By
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

 
PraiseThank you Pin
Mohammad Maleki12-May-18 20:30
Mohammad Maleki12-May-18 20:30 
QuestionThanks! Pin
Charana198421-Jan-14 7:00
Charana198421-Jan-14 7:00 
GeneralMy vote of 5 Pin
kientrungnguyen8-Aug-13 4:08
kientrungnguyen8-Aug-13 4:08 
GeneralMy vote of 5 Pin
fredatcodeproject26-Oct-12 1:40
professionalfredatcodeproject26-Oct-12 1:40 
GeneralMy vote of 4 Pin
Severin Friede24-Oct-12 21:45
Severin Friede24-Oct-12 21:45 
GeneralMy vote of 3 Pin
fredatcodeproject24-Oct-12 11:21
professionalfredatcodeproject24-Oct-12 11:21 
GeneralRe: My vote of 3 Pin
LaurenceBunnage24-Oct-12 11:29
LaurenceBunnage24-Oct-12 11:29 
Bugi found some errors Pin
dyma24-Oct-12 2:27
dyma24-Oct-12 2:27 
GeneralRe: i found some errors Pin
LaurenceBunnage24-Oct-12 3:33
LaurenceBunnage24-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.