WPF ToolBarとStackPanelは切り取ると自動的にClipToBounds = "True"になります

Question

ツールバーの境界外にいくつかの子アイテムを表示する必要があります（ツールバーのボタンはカーソルで移動すると大きくなります）。

Image 1: Right panel behavior: ClipToBounds="False"

ClipToBounds =「偽」と、すべてのボタンがツールバー内の場所を持っている場合は、すべての権利です。問題は、パネルの一部がウィンドウの端で切り取られ、いくつかのボタンの場所がない場合に発生します。この場合、ToolBarとStackPanelはClipToBoundsプロパティを自動的に "True"に切り替え、子をトリミングします。

Image 2: Wrong panel behavior: ClipToBounds snaps to "True"

私は、この動作を無効にするか、広い最上位の透明な容器上のボタンを描画する以外に方法はありませんすることはできますか？

例XAML：

<Window x:Class="ZoomBarMockup.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     Height="200" Width="300"> 

    <Grid> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="30"/> 
      <RowDefinition Height="30"/> 
      <RowDefinition Height="30"/> 
     </Grid.RowDefinitions> 

     <Rectangle Grid.Row="0" Fill="#CCC"/> 
     <Rectangle Grid.Row="2" Fill="#CCC"/> 

     <StackPanel Grid.Row="1" Orientation="Horizontal" ClipToBounds="False"> 
      <Ellipse Fill="Orange" Height="50" Width="50" Margin="0 -10"/> 
      <Ellipse Fill="Orange" Height="50" Width="50" Margin="0 -10"/> 
      <Ellipse Fill="Orange" Height="50" Width="50" Margin="0 -10"/> 
      <Ellipse Fill="Orange" Height="50" Width="50" Margin="0 -10"/> 
      <Ellipse Fill="Orange" Height="50" Width="50" Margin="0 -10"/> 
     </StackPanel> 

    </Grid> 
</Window> 

だけでパネルの内容がクリッピング表示するには、ウィンドウを縮小。

Answer 1

私のソリューション（層にだけスプリットツールバー）：

<Window x:Class="ZoomBarMockup.Window1" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     Height="200" Width="300"> 

    <Grid> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="30"/> 
      <RowDefinition Height="30"/> 
      <RowDefinition Height="30"/> 
     </Grid.RowDefinitions> 

     <Rectangle Grid.Row="0" Fill="#CCC"/> 
     <Rectangle Grid.Row="2" Fill="#CCC"/> 

     <!-- Decorative toolbar background strip --> 
     <Border Grid.Row="1"> 
      <Border.Background> 
       <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> 
        <GradientStop Color="#FFF" Offset="0"/> 
        <GradientStop Color="#DDD" Offset="1"/> 
       </LinearGradientBrush> 
      </Border.Background>    
     </Border> 

     <!-- Wide transparent panel with negative margin --> 
     <StackPanel Grid.Row="1" Orientation="Horizontal" ClipToBounds="False" 
        Height="50" Margin="0 -10 0 -10"> 
      <Ellipse Fill="Orange" Height="50" Width="50" Margin="5 0"/> 
      <Ellipse Fill="Orange" Height="50" Width="50" Margin="5 0"/> 
      <Ellipse Fill="Orange" Height="50" Width="50" Margin="5 0"/> 
      <Ellipse Fill="Orange" Height="50" Width="50" Margin="5 0"/> 
      <Ellipse Fill="Orange" Height="50" Width="50" Margin="5 0"/> 
     </StackPanel> 

    </Grid> 
</Window>