如何根据wpf toolbartray的可用空间调整宽度

Question

I am using around 10-15 controls inside a WPF ToolbarTray control, Now the issue is while I am changing the resolution the controls present in it is not adjusting according to my need in case of Maximized window. For more detail I attached the screenshot below.

Toolbar Tray control appearing originally:

Toolbar Tray need to appear like this(Which I am trying):

Can anybody tell me how to customize or what to do to achieve the 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

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

What you could do is wrap the Toolbars in a DockPanel to do the layouting. But you are missing things then like changing toolbar positions via 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 2

I found the solution of my problem, now I am using a Grid inside the ToolBar control and adjusting the size of one column of the Grid(toolbarGrid) to make my controls as seen 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 3

简单的答案不是在你的应用程序的顶部“行”中绘制灰色背景？