How to implement custom progressbar in XAML

Question

I'm trying to implement custom "progressbar" which is based on image that is not rectangle. I through I could use opacitymask to achieve this, but I haven't yet figured out how to do it. I have an image which has transparent background and it's colored on white from inside. Initial state is that image is completely blue, and end state is that image is completely white (except borders will remain black)

Currently I have this kind of XAML code for this, but I dont see any blue filling over image...

<Style TargetType="ProgressBar" x:Name="ImageProgressBar">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Border BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Margin="{TemplateBinding Margin}"
                            Background="{TemplateBinding Background}"
                            Width="{TemplateBinding Width}"
                            Height="{TemplateBinding Height}">
                            <Grid>
                                <Image Source="Assets/emptyprogress.png" Stretch="Fill" />
                                <Rectangle Fill="Blue">
                                    <Rectangle.OpacityMask>
                                        <ImageBrush ImageSource="Assets/emptyprogress.png" Stretch="Fill" />
                                    </Rectangle.OpacityMask>
                                    <Rectangle.Clip>
                                        <RectangleGeometry x:Name="CLIPRECTANGLE" />
                                    </Rectangle.Clip>
                                </Rectangle>
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    <ProgressBar Grid.Row="3" Style="{StaticResource ImageProgressBar}" 
                 Width="200"
                 Height="200"
                 Minimum="0"
                 Maximum="100"
                 Value="50" />

This is what I have and this should be end point

This is what I want

Answer 1

Your fill rectangle needs to be named ProgressBarIndicator for the ProgressBar to be able to find and fill it.

You might also consider replacing your tooth image with a PathGeometry. You can then use the same geometry to Clip the rectangle.

Here's an example with Ellipses and inappropriately hard-coded values (I'll leave a more complicated path for an artist :) )

<Grid x:Name="DeterminateRoot" Margin="{TemplateBinding Padding}" Visibility="Visible">                       
    <Ellipse  Height="50" x:Name="ProgressBarTrack" Fill="{TemplateBinding Background}" />
    <Rectangle  Height="50" x:Name="ProgressBarIndicator" Fill="{TemplateBinding Foreground}" HorizontalAlignment="Left" >
         <Rectangle.Clip>
              <EllipseGeometry  Center="200,25" RadiusY="25" RadiusX="200" /> 
         </Rectangle.Clip>
    </Rectangle>
</Grid>