wpfclippingclipopacitymask

Clipping a border in WPF


I need to create a round ProgressBar template.

ControlTemplate :

<ControlTemplate TargetType="{x:Type ProgressBar}">
   <Grid x:Name="TemplateRoot" SnapsToDevicePixels="true">                      
     <Rectangle x:Name="PART_Track" Margin="1" Fill="White" />

     <Border x:Name="PART_Indicator" HorizontalAlignment="Left" Margin="1"  >
        <Grid x:Name="Foreground" >
            <Rectangle x:Name="Indicator" Fill="{TemplateBinding Background}" />
            <Grid x:Name="Animation" ClipToBounds="true" >
               <Rectangle x:Name="PART_GlowRect" Fill="#FF86C7EB" 
                          HorizontalAlignment="Left" Margin="-100,0,0,0" Width="100"/>
            </Grid>                             
        </Grid>                                                             
     </Border>

     <Border x:Name="roundBorder" BorderBrush="{TemplateBinding BorderBrush}"
             BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="10" />
     <TextBlock />

  </Grid>
</ControlTemplate>

This results in :

image of incorrect clipping

Where PART_Indicator is the LightBlue rectangle on the left (its width is set internally in the ProgressBar control, as seen here with a value of 20) and the roundBorder.

What I need is for the the PART_Indicator to clip over the roundBorder, resulting in something like:

image of desired clipping


Solution

  • A much better solution using an OpacityMask , All The Template Parts aside from the OuterBorder Placed in "MainGrid" are Clipped using an Opacity mask which is set by an object aside it called "MaskBorder".

    "TemplateRoot" exist for the inner workings of the PrograssBar control.

      <ControlTemplate TargetType="{x:Type ProgressBar}">
            <Grid x:Name="TemplateRoot">
                <Border x:Name="OuterBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="10">
                    <Grid>
                        <Border x:Name="MaskBorder" Background="{TemplateBinding Background}" CornerRadius="9.5" />
    
                        <Grid x:Name="MainGrid">
                            <Grid.OpacityMask>
                                <VisualBrush Visual="{Binding ElementName=MaskBorder}" />                                   
                            </Grid.OpacityMask>
    
                            <Rectangle x:Name="PART_Track" Fill="White" />
    
                            <Border x:Name="PART_Indicator" HorizontalAlignment="Left">                                 
                                <Grid x:Name="Foreground">
                                    <Rectangle x:Name="Indicator" Fill="{TemplateBinding Background}" />
                                    <Grid x:Name="Animation" ClipToBounds="true">
                                        <Rectangle x:Name="PART_GlowRect" Fill="#FF86C7EB" HorizontalAlignment="Left" Margin="-100,0,0,0" Width="100" />
                                    </Grid>
                                </Grid>
                            </Border>                                                                   
                        </Grid>                                                                                                                                     
    
                    </Grid>                         
                </Border>                       
            </Grid>                      
       </ControlTemplate>