Rolagem de conteúdo dentro de uma borda Com CornerRadius

Question

Eu estou procurando ajuda com um problema WPF Eu estive lutando com por um tempo. Eu tenho estilo uma visão guia, movendo as guias para a esquerda e exibi-los verticalmente. Essas guias sentar-se no interior de uma fronteira com cantos arredondados na parte superior e na parte inferior esquerda.

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

Eu estou correndo em um problema quando as guias são rolado. Em vez dos cantos arredondados que grampeiam o conteúdo rolado, o conteúdo realmente monta em cima dos cantos, como visto aqui:

sobreposição Tab http://gallery.me.com /theplatz/100006/TabBad/web.png?ver=12464623500001

Aqui está o 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>

Todas as ideias sobre a maneira que eu poderia realizar o que eu estou procurando? Eu tentei alguns truques ZIndex, mas que não parecem funcionar.

Answer 1

Para realizar o que eu estava procurando, eu usei a solução encontrada aqui , e modificou-lo para caber minhas necessidades. Aqui está o que eu acabei com:

<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>

Editar: Eu encontrei a solução para o problema de corte com o primeiro TabItem. Nidificação o ScrollView dentro de uma segunda fronteira e aplicando a OpacityMask a esta fronteira, e não o ScrollView corrigiu o problema. Além disso, eu tinha que explicitamente Background set = "transparent" até a fronteira, onde o OpacityMask estava sendo aplicada para que o clipe não aconteça prematuramente.

Answer 2

Você pode definir um Clip na fronteira arredondado com uma geometria correspondente contorno da fronteira.

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

Note que - como você provavelmente encontrou - ClipToBounds na Border não vai funcionar porque a área entre o canto ea borda arredondada é nos limites da Border, por isso não vai ser cortada.