Как настроить ширину в соответствии с пространством, доступным для wpf toolbartray

Question

Я использую около 10-15 элементов управления внутри элемента управления WPF ToolbarTray. Теперь проблема заключается в том, что при изменении разрешения имеющиеся в нем элементы управления не корректируются в соответствии с моими потребностями в случае окна «Максимизировано». Для более подробной информации я прикрепил скриншот ниже.

Панель инструментов Панель управления появляется изначально:

Панель инструментов трея должна выглядеть так (что я пытаюсь):

Может кто-нибудь сказать мне, как настроить или что сделать, чтобы получить второе изображение, как ToolbarTray. Любая помощь приветствуется.

Заранее спасибо,

Обновление:

<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

Насколько я знаю, это невозможно из коробки, поскольку ToolbarTray весьма ограничен в своих параметрах компоновки.

Что вы можете сделать, это обернуть панели инструментов в DockPanel для выполнения компоновки.Но вам не хватает таких вещей, как изменение положения панели инструментов с помощью перетаскивания.

  <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

Я нашел решение своей проблемы, теперь я использую Grid внутри элемента управления ToolBar и настраиваю размер одного столбца Grid (toolbarGrid), чтобы сделать мои элементы управления такими, как видно на моем втором изображении.* Код:

<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

Простой ответ не состоял бы в том, чтобы нарисовать серый фон в верхней «линии» вашего приложения ??