wpf toolbartrayで使用可能なスペースに応じて幅を調整する方法

Question

WPF ToolbarTrayコントロール内で約10〜15個のコントロールを使用しています。現在、解像度を変更している間に問題が発生しています。 Maximizedウィンドウの場合の必要性。詳細については、以下のスクリーンショットを添付しました。

もともと登場ツールバートレイコントロール：

ツールバートレイは、（私がしようとしていますどの）のように表示される必要があります。

誰がどのように達成するためにカスタマイズするか、何をすべきかを教えてもらえますToolbarTrayのような2番目の画像です。助けていただければ幸いです。私の知る限り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

私の問題の解決策を見つけたので、今度はToolBarコントロール内のグリッドを使用して、グリッド（toolbarGrid）の1つの列のサイズを調整して、2番目の画像に表示されるコントロールを作成します。

コード：

<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

：事前に

おかげで、

更新そのレイアウトオプション。

あなたができることは、レイアウトを行うためにツールバーを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 3

単純な答えは、アプリケーションの一番上の「線」に灰色の背景を描くことではありませんか？