What i need to achieve :
what i have :
I need to some how create a gap , iv'e tried using something like the BorderGapMaskConverter from the GroupBox template but i can't seem to figure out how to position it ( for starters i would like to apply the opacity mask for all tab items .
My TabControl Template : (Shortend xaml) , Below iv'e created a test opacity mask which i would attempt to show only a small part of my TabControl by assigning an opacity mask containing a visual brush containing this rectangle as it's visual (THIS IS JUST A FAILED ATTEMPT TO TRY TO UNDERSTAND HOW TO APPLY AN OPACITY MASK ):
<Rectangle Width="100" Height="100" RadiusX="0.5" RadiusY="0.5" Fill="Black" />
for starters i would like to know why this does not work ..
<ControlTemplate TargetType="{x:Type TabControl}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="0"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition />
</Grid.RowDefinitions>
<TabPanel Panel.ZIndex="1"/>
<Border>
<Border.OpacityMask>
<VisualBrush>
<VisualBrush.Visual>
<Rectangle Width="100" Height="100" RadiusX="0.5" RadiusY="0.5" Fill="Black" />
</VisualBrush.Visual>
</VisualBrush>
</Border.OpacityMask>
<ContentPresenter/>
</Border>
</Grid>
2) Secondly, The real question , any ideas how to achieve the effect described in the pictures ?
Why can't you just do that with the
Border
properties?: