I'm trying to create a responsive toolbar in WPF that works like the one in the in Windows Snipping Tool (the one that opens if you press Win Shift S).

The Snipping Tool's toolbar has 3 groups of buttons. When you change the size of the window, the space between the groups changes, while the groups maintain their original width.

Small window Big window

If you make the window any smaller than in the first image, it separates into 2 toolbars. But don't worry about that, I can simply set a minimal width to my app, I don't really care about that part. What I want is the same spacing effect on my toolbar, I have 3/4 groups of buttons but I can't get them to do the same.

I tried using grids for the groups of buttons, and putting the groups inside another grid as the toolbar, but when I resize the window some of the content starts to disappear even tho there's some space left.

CodePudding user response：

I was going to just write a comment but I think I need some xaml for clarity.

Wpf has proportional sizing uses gridlength. You can have columns ( or rows ) use multiples of * to divide up whatever space is unused. Thus:

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="100" Name="SomeButtonsGoHere"/>
        <ColumnDefinition Width="*"  Name="ProportionallySpacedColumnBetweenButtons"/>
        <ColumnDefinition Width="100"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="100"/>
    </Grid.ColumnDefinitions>

You could put say a uniformgrid with just one row in each of the fixed size columns and buttons inside that.

Your Buttons probably aren't 100px wide of course.

But if you put that grid in a window, the fixed size columns will retain size and the * sized ones will fill up the remaining space equally.

Once you had something relatively simple working you can think about iterating. You could use a converter to calculate sizes compare to window width, viewbox to shrink content proportionally. Sounds like that's over complicating things though.