CornerRadiusとの国境内のコンテンツをスクロール

Question

私は、私はしばらくの間と格闘してきたWPFの問題のヘルプを探しています。私は左の上にタブを移動し、垂直方向にそれらを表示し、タブ表示をスタイリングしました。これらのタブは、上部と左下の角を丸めた境界の内側に座っている。

ノーマルタブのhttp：/ /gallery.me.com/theplatz/100006/TabGood.png?derivative=medium&source=web.png&type=medium&ver=12464623560001する

タブがスクロールされたときに

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

重複タブ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

私が探していたものを達成するために、私は解決策を使用<のhref =「http://chriscavanagh.wordpress.com/2008/10/03/wpf-easy-rounded-corners-for-anything/」が見つかりrelが=「nofollowをnoreferrer」>ここの、そして私のニーズに合うようにそれを修正。ここに私がなってしまったものです。

<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とクリッピングの問題への解決策を見つけました。第二の境界線の内側にScrollViewをネストして、この境界線にOpacityMaskを適用し、そしてないScrollViewは、問題を修正しました。また、私は明示的にOpacityMaskはクリップが途中で起こらないようにするために適用されていたボーダーに=「透明」の背景を設定する必要がありました。

Answer 2

あなたが境界線のアウトラインのマッチングジオメトリと丸い境界にClipを設定することができます。

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

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