Search code examples
wpfmvvmcontrolsdocking

How to arrange controls horizontally with even spacing in WPF

I am looking for a flexible way to arrange rectangular controls inside a grid with an even spacing. The controls are added/removed dynamically. Eventually I wish to let user select one of the layouts below:

enter image description here

I am thinking of using UniformGrid and let the rest be handled by grid's properties:

<UniformGrid>
    <Button Content="Button 1"/>
    <Button Content="Button 2"/>
    <Button Content="Button 3"/>
    <Button Content="Button 4"/>
    <Button Content="Button 5"/>
</UniformGrid>

However, my concern is my future ability to customize the layout as in option 3 (see image above). I am looking for suggestions of how to make this as flexible as possible considering I am following MVVM in my design.

Solution

  • A WrapPanel can be used to display any number of items, and will automatically wrap to another row if the items exceed the allowed width. 

    <WrapPanel>
    <Button Content="Button 1"/>
    <Button Content="Button 2"/>
    <Button Content="Button 3"/>
    <Button Content="Button 4"/>
    <Button Content="Button 5"/>
</WrapPanel>

    Alternatively if you're looking for something more structured where you can define a dynamic layout for controls, I'd suggest an ItemsControl with the ItemsPanelTemplate set to either a UniformGrid, WrapPanel, or Grid depending on your requirements. James Lucas' answer provides a good example for that.