3

I am attempting to insert a panel into my WPF application that would have a few very specific behaviours:

1.) Wraps content evenly. Starting from the top left corner and running downward, before moving to the next column.

Example1

2.) Allows me to define a maximum number of columns to wrap to. For my purposes, this number would be between 1 and 3.

3.) Allows me to set an initial height, but it will also grow to accommodate additional items. (Only setting an initial height because my content won't wrap without it. If I leave it auto, it all comes out in a single column regardless of whether it fits on screen or not)

Example2

At this point, I have concluded that what I'm attempting do will require a custom panel, but I'd like to ensure before I begin that process (and learning how to do so) that I'm not missing a much simpler answer.

Sypher_04
  • 121
  • 11
  • wrap panel where it's width binded to the [child item template width] x [number of columns you want] – Franck Jan 22 '15 at 13:04
  • 1
    try looking here http://stackoverflow.com/questions/13944322/how-to-make-uniformgrid-vertically – stsur Jan 22 '15 at 13:54

2 Answers2

1

A WrapPanel can be set to wrap vertically, but you have no control over the number of columns.

A UniformGrid would offer you control over the number of columns, but wraps horizontally not vertically.

In short: you need a custom panel. The built-in ones do not offer the combination of features that you want.

Steven Rands
  • 5,160
  • 3
  • 27
  • 56
  • Darn. I was afraid of that. Oh well, I guess I have some research ahead of me. Thanks! – Sypher_04 Jan 22 '15 at 14:20
  • You DO have control over number of columns with the wrap panel. You simply make a multi converter on the wrap panel width to use the the child template actual width and your viewmodel value of column quantity. in the converter the width return = TemplateActualWidth x ColumnQuantity. i have it working perfectly in my custom "my computer style" window – Franck Jan 23 '15 at 13:07
  • @Franck That's a bit of a hack but obviously works for you. My recommendation to the OP would still be to write a custom panel. – Steven Rands Jan 23 '15 at 13:17
  • i'm not a fan or writing a whole new control that will be used in 1 place that will take me half a day to think, write and test when in 5 minute i can get the exact result i want with a 5 line converter on an already existing control – Franck Jan 23 '15 at 13:24
  • @Franck That's fair enough, I'm a big believer in reusing existing controls and panels wherever possible, although I'm not convinced that your solution would solve *all* of the OP's requirements. I'll admit though that I haven't put too much thought into it. Maybe you could post your solution in an answer, it might be useful to the OP. – Steven Rands Jan 23 '15 at 13:31
  • I'm quite curious how this would work exactly. In every attempt I've made to wrap to a maximum columns, I was only able to make it stop showing them at 2 columns. My overflown content just continued running out of visible range of the panel. – Sypher_04 Jan 23 '15 at 13:56
  • being vertical orientation the actual value you want to set is the height of the wrap to equal the height of a childs x the quantity of columns. in other word if the items in the wrap panel are 100 units and you want 3 columns and you have 28 items you want the height of the wrap to force 2 wraps to give 3 columns. if the height of the wrap is set to 200 you will get 2 item per column (100 per item) and that gives 14 columns generated by the wrappanel so it's not good. You need `Math.Ceiling(ItemQty / ColumnRequired) * ItemHeight = Ceiling(28 / 3) * 100 = 10 * 100 = 1000` this give 3 columns – Franck Jan 23 '15 at 15:35
0

UniformGrid has a LayoutTransform property, which can be used to transform it in order to change the position/rotation of the elements inside. But it will also transform the content.

Some more tricks involving Setters on the types of the items inside your UniformGrid and the content can be transformed again to retain the desired "original" orientation.

You can learn more in this tutorial.

Alternatively, it seems that the Extended WPF Toolkit contains its own implementation of UniformGrid, with an Orientation property, the only problem being that it won't grow to accomodate the number of items; instead, it will obey to an arbitrary Columns property.

Then again, you may be able to change the value of this property each time you add a new item/resize your UniformGrid, but it will be some more manual work and may potentially lead to code behind, which could be seen as an issue if you're working in MVVM.

Kilazur
  • 3,089
  • 1
  • 22
  • 48