How to adjust width according to space available for wpf toolbartray

Question

I use about 10-15 controls inside a WPF ToolbarTray control. Now the problem is that I am changing the resolution, the controls present in it are not adjusted according to my need in the case of a maximum window. In more detail, I attached the screenshot below.

The toolbar control panel item appeared initially:

The toolbar tray should appear as follows (what I'm trying):

Can someone tell me how to set up or what to do to achieve a second image like ToolbarTray. Any help is appreciated.

Thanks in advance,

Update:

<ToolBarTray Background="White"> <ToolBar> <Button Width="50" Content="hi"/> <Button Width="100" Content="bye"/> <Button Content="welcome"/> <Button Width="20"/> <Button Content="Welcome"/> <Separator /> <Button ToolBar.OverflowMode="Always" Content="save" /> <Button ToolBar.OverflowMode="Always" Content="open" /> <Button ToolBar.OverflowMode="AsNeeded" Content="bmp" /> </ToolBar> <ToolBar HorizontalAlignment="Right"> <StackPanel Orientation="Horizontal" HorizontalAlignment="Right"> <Button Content="New Hi1"/> <Button Content="New Hi2"/> <Button Content="New Hi3"/> </StackPanel> </ToolBar> </ToolBarTray> 

Answer 1

I found a solution to my problem, now I use the Grid inside the ToolBar element and adjust the size of one Grid column (toolbarGrid) to make my controls visible in my second image.

code:

 <Grid.ColumnDefinitions> <ColumnDefinition Width="0"/> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions> <Stackpanel Grid.Column ="0"> <Button Width="50" Content="hi"/> <Button Width="100" Content="bye"/> <Button Content="welcome"/> <Button Width="20"/> <Button Content="Welcome"/> <Separator /> <Button ToolBar.OverflowMode="Always" Content="save" /> <Button ToolBar.OverflowMode="Always" Content="open" /> <Button ToolBar.OverflowMode="AsNeeded" Content="bmp" /> </StackPanel> <ToolBarTray x:Name ="toolBarTray" Grid.Column ="1" HorizontalAlignment ="Right" IsLocked="True"> <!--First Toolbar for the controls from Print to Zoom Control--> <ToolBar x:Name ="topToolBar" FocusVisualStyle="{x:Null}"> <Grid x:Name="toolbarGrid"> <Grid.ColumnDefinitions> <ColumnDefinition Width="0"/> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions> <Button Content="New Hi1"/> <Button Content="New Hi2"/> <Button Content="New Hi3"/> </Grid> </ToolBar> </ToolBarTray> </Grid> 

Answer 2

As far as I know, this is not possible out of the box, since ToolbarTray is quite limited in its layout options.

What you can do is wrap the toolbars in the DockPanel to perform prototyping. But you are missing things like moving toolbar positions with drag and drop.

  <Grid> <Grid.RowDefinitions> <RowDefinition Height="50"></RowDefinition> <RowDefinition Height="*"></RowDefinition> </Grid.RowDefinitions> <DockPanel Grid.Row="0" Background="White"> <ToolBar DockPanel.Dock="Left"> .... </ToolBar> <ToolBar DockPanel.Dock="Right" HorizontalAlignment="Right" HorizontalContentAlignment="Stretch"> ... </ToolBar> </DockPanel> 

Answer 3

A simple answer would be not drawing a gray background on the top line of your application?