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