Scrolling Content Inside A Border With CornerRadius

Answer 1

You could set a Clip on the rounded border with a geometry matching the border's outline.

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

Note that - as you've probably found - ClipToBounds on the Border won't work because the area between the corner and the rounded edge is in the bounds of the Border, so won't be clipped.

HTH, Kent

Answer 2

To accomplish what I was looking for, I used the solution found here, and modified it to fit my needs. Here's what I ended up with:

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

Edit: I found the solution to the clipping problem with the first TabItem. Nesting the ScrollView inside a second border and applying the OpacityMask to this border, and not the ScrollView fixed the problem. Additionally, I had to explicitly set Background="Transparent" to the Border where the OpacityMask was being applied in order for the clip to not happen prematurely.