Auto Layout Increase Controls

Question

I am somewhat new to WPF and hope that I am not asking for peace here, but I am looking for advice / guidance on how to implement something like the following.

I want my MainWindow buttons to contain N. Each Button performs the same action on a different dataset (for example, prints image 1, prints image 2, ..., prints image N). I would like my window to automatically place buttons, as described below:

Notice how the number of buttons increases, the layout is automatically configured in a convenient mode. To 6, and then it provides horizontal scrolling to move through the buttons.

It seems to me that <Grid> control may be a way to ensure this, but I'm lost in how to get the layout automatically set up, with the exception of a large rough foreground.

I tangentially see the power in data binding in WPF, and ideally the button information (it displays text, graphics, etc.) is automatically attached to the observed collection, so when I insert the buttons into the collection, the user interface automatically updates. And vice versa, when each button is pressed, I would like for the 5th element of my collection to be indicated general information about button 5, which contains all this additional information (that is, the name of the file to print).

Everything sounds good and good, but again I lost a little implementation.

Answer 1

As Allonym said, the most customizable way would be to create a new custom Panel for it. IMHO, it is also possible to achieve this using a UniformGrid , and slightly correcting it with bindings and transformers. This is for prototyping.

About your second question, I think using ItemsControl is the best way. You can pass it a new Panel (or UniformGrid ) as an ItemsPanel . In addition, you can create a DataTemplate using the button inside, bind its Command property to one command (= common handler), with the DataContext DataTemplate parameter (= current list item). This part is simpler than layout.

Does it help?

Antoine

Answer 2

I think you need to create your own Panel class by overriding MeasureOverride and ArrangeOverride to achieve the desired layout. Check out this (very short) tutorial .