Make border gap using Opacity Mask

1k views Asked by At

What i need to achieve :

enter image description here

what i have :

enter image description here

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 ?

1

There are 1 answers

4
Sheridan On

Why can't you just do that with the Border properties?:

<Border Height="76" Padding="25,0" BorderBrush="Cyan" BorderThickness="1,6,1,0">
    <ContentPresenter />
</Border>