CornerRadiusでボーダー内をスクロールするコンテンツ

Question

私はしばらくレスリングしてきたWPFの問題に関する助けを探しています。私はタブの表示をスタイリングし、タブを左に動かして縦に表示しました。これらのタブは、左上と左下に丸みを帯びたコーナーがある境界内にあります。

Normal Tab http://gallery.me.com/theplatz/100006/TabGood.png?derivative=medium&source=web.png&type=medium&ver=12464623560001

タブがスクロールされたとき、私は問題に実行していますよ。代わりにスクロールコンテンツをクリッピング丸みを帯びた角をここに見られるように、コンテンツは実際に、コーナーの上に乗り上げる：

Overlapping Tab http://gallery.me.com/theplatz/100006/TabBad/web.png?ver=12464623500001

ここでXAMLです：

<Style x:Key="SidebarTabControl" TargetType="TabControl"> 
    <Setter Property="Background" Value="#FFC6D3DE" /> 
    <Setter Property="Padding" Value="0,20,0,0" /> 
    <Setter Property="TabStripPlacement" Value="Left" /> 
    <Setter Property="IsSynchronizedWithCurrentItem" Value="True" /> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type TabControl}"> 
       <Grid KeyboardNavigation.TabNavigation="Local"> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition Width="200" MinWidth="150" MaxWidth="400" /> 
         <ColumnDefinition /> 
        </Grid.ColumnDefinitions> 

       <Border 
        CornerRadius="10,0,0,10" 
        Background="{TemplateBinding Background}"> 
        <ScrollViewer Grid.Column="0" 
         VerticalScrollBarVisibility="Auto" 
         HorizontalScrollBarVisibility="Disabled" 
         ClipToBounds="True"> 
         <Border Padding="{TemplateBinding Padding}">   
         <TabPanel 
          IsItemsHost="True" 
          KeyboardNavigation.TabIndex="1" 
          Background="Transparent"> 
         </TabPanel> 
         </Border> 
        </ScrollViewer> 
       </Border> 

       <ContentPresenter 
        Grid.Column="1" 
        Margin="0" 
        ContentSource="SelectedContent" /> 

       <GridSplitter Grid.Column="0" 
        HorizontalAlignment="Right" 
        VerticalAlignment="Stretch" 
        Background="{StaticResource SplitterBrush}" 
        ShowsPreview="True" 
        Width="1" /> 
       </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

<Style x:Key="SidebarTab" TargetType="TabItem"> 
    <Setter Property="Padding" Value="10,12,2,12" /> 
    <Setter Property="BorderThickness" Value="0,1,0,1" /> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type TabItem}"> 
       <Border Padding="{TemplateBinding Padding}" 
        Name="tab" 
        BorderThickness="{TemplateBinding BorderThickness}" 
        BorderBrush="{StaticResource SidebarTabBorderBrush}"> 
        <ContentPresenter Style="{StaticResource SidebarTabForegroundStyle}" Name="content" ContentSource="Header" /> 
       </Border> 

       <ControlTemplate.Triggers> 
        <Trigger Property="IsSelected" Value="True"> 
         <Setter TargetName="tab" Property="Background" Value="{StaticResource SidebarTabBackgroundBrushSelected}" /> 
         <Setter TargetName="tab" Property="BorderBrush" Value="{StaticResource SidebarTabBorderBrushSelected}" /> 
         <Setter TargetName="content" Property="Style" Value="{StaticResource SidebarTabForegroundStyleSelected}" /> 
        </Trigger> 
        <Trigger Property="IsSelected" Value="False"> 
         <Setter TargetName="tab" Property="Background" Value="{StaticResource SidebarTabBackgroundBrush}" /> 
         <Setter TargetName="tab" Property="BorderBrush" Value="{StaticResource SidebarTabBorderBrush}" /> 
         <Setter TargetName="content" Property="Style" Value="{StaticResource SidebarTabForegroundStyle}" /> 
        </Trigger> 
       </ControlTemplate.Triggers> 

      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

方法上の任意のアイデア私は私が探しているものを達成することができますか？私はいくつかのZIndexトリックを試しましたが、それはうまくいかないようです。

Answer 1

私が探していたことを達成するために、私は解答hereを使用し、私のニーズに合わせて修正しました。ここに私がなってしまったものです：

<Style x:Key="SidebarTabControl" TargetType="TabControl"> 
    <Setter Property="Background" Value="#FFC6D3DE" /> 
    <Setter Property="Padding" Value="0,20,0,20" /> 
    <Setter Property="TabStripPlacement" Value="Left" /> 
    <Setter Property="IsSynchronizedWithCurrentItem" Value="True" /> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type TabControl}"> 
       <Grid KeyboardNavigation.TabNavigation="Local"> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition Width="200" MinWidth="150" MaxWidth="400" /> 
         <ColumnDefinition /> 
        </Grid.ColumnDefinitions> 

      <!-- Background of the sidebar and our clipping bounds --> 
      <Border Grid.Column="0" 
       CornerRadius="10,0,0,10" 
        Background="{TemplateBinding Background}" 
       Name="mask" /> 

      <!-- Border necessary so that the top tab does not get clipped prematurely --> 
      <Border Grid.Column="0" Background="Transparent"> 
       <!-- Add opacity mask to clip contents as they're scrolled --> 
       <Border.OpacityMask> 
         <VisualBrush Visual="{Binding ElementName=mask}"/> 
       </Border.OpacityMask> 
       <ScrollViewer 
       VerticalScrollBarVisibility="Visible" 
       HorizontalScrollBarVisibility="Disabled"> 
       <Border Padding="{TemplateBinding Padding}">   
         <TabPanel 
         IsItemsHost="True" 
         KeyboardNavigation.TabIndex="1" 
         Background="Transparent"> 
        </TabPanel> 
       </Border> 
       </ScrollViewer> 
      </Border> 

      <ContentPresenter 
       Grid.Column="1" 
         Margin="0" 
         ContentSource="SelectedContent" /> 

      <GridSplitter Grid.Column="0" 
         HorizontalAlignment="Right" 
         VerticalAlignment="Stretch" 
         Background="{StaticResource SplitterBrush}" 
         ShowsPreview="True" 
         Width="1" /> 
       </Grid> 
     </ControlTemplate> 
    </Setter.Value> 
    </Setter> 
</Style> 

編集：私は最初のTabItemとクリッピングの問題への解決策を見つけました。 2番目の枠内でScrollViewをネストし、この枠にOpacityMaskを適用すると、ScrollViewではなく問題が解決されました。さらに、クリップが早すぎることがないように、OpacityMaskが適用されていたBorderに明示的にBackground = "Transparent"を設定する必要がありました。

Answer 2

ボーダーのアウトラインに一致するジオメトリを使用して、丸められたボーダーにClipを設定できます。

<Border> 
    <Border.Clip> 
     <RectangleGeometry Rect="..." RadiusX="..." RadiusY="..."/> 
    </Border.Clip> 
</Border> 

ことに注意してください - あなたは、おそらく発見したとして - Border上ClipToBoundsが動作しませんコーナーと丸みを帯びたエッジとの間の領域は、Borderの境界であり、そうではありませんので、クリップされた。