In today’s installment of my series on path-based layout, let me show you that path-based layout can actually be used for dynamic, resizable layout
If you are looking for previous parts of this series, they are here:
A fairly common layout problem is to simply distribute items horizontally or vertically, to fill the available space with equal spacing.
If the number of items is known at design time, you can do this with a grid, using star-sized rows or columns, but that does not work well with a variable number of items to layout.
Using PathListBox or PathPanel, this is quite easy:
- Draw a vertical or horizontal line with the Line tool (hold shift to snap to angles), within the resizable container you want you dynamic layout to happen in. In this example, the line is in the main user control:
- Add a PathListBox or PathPanel to the same layout container the line is in.
- Add the line as a layout path, and make sure that the distribution mode for the path is set to Even:
- Add some items to the path list box or the path panel:
- As you can see, the items are evenly spaced along the line. Now try resizing the container the path and list box are in:
As you can see, you get a dynamic version of a “distribute” layout that resizes properly in the context of application resizing.
Here is a slightly more complex example, using 3 separate paths with overflow from one to the next: