c# - Progress bar from two images

Question

I want to create a progress bar from two images (empty and filled), if value is set to 30, there is image combined from 30% filled and 70% empty etc.

That's my current code

<ProgressBar Value="30" Height="30" Width="230" 
                     BorderThickness="0" 
                     HorizontalAlignment="Center" 
                     Foreground="#0A8098" Maximum="100"
                     BorderBrush="Transparent" Name="ProgressBar" Margin="137,0,147,0" >
    <ProgressBar.Template>
        <ControlTemplate>
            <Grid>
                <Image Name="PART_Track" Source="Resources/emptybar.png"  Stretch="Fill"/>
                <Rectangle Name="PART_Indicator"    HorizontalAlignment="Left">
                    <Rectangle.Fill>
                        <ImageBrush ImageSource="Resources/filledbar.png" Stretch="UniformToFill"/>
                    </Rectangle.Fill>
                </Rectangle>
            </Grid>
        </ControlTemplate>
    </ProgressBar.Template>
</ProgressBar>

Here is how it's work, and here is how I want it to work.

Answer 1

For the sake of simplicity I use colors instead of your image paths, but the idea stays the same.

Set the width of the indicator element to the width of the full track and wrap it inside a Grid which acts as the PART_Indicator control, which is responsible for clipping the progress indicator.

<ControlTemplate>
    <Grid>
        <Rectangle Name="PART_Track" Fill="Gray"  Stretch="Fill"/>
        <Grid Name="PART_Indicator" HorizontalAlignment="Left">
            <Rectangle HorizontalAlignment="Left" Width="{Binding ActualWidth,ElementName=PART_Track}">
                <Rectangle.Fill>
                    <LinearGradientBrush>
                        <GradientStop Color="Green" Offset="0.2"/>
                        <GradientStop Color="Orange" Offset="0.8"/>
                    </LinearGradientBrush>
                </Rectangle.Fill>
            </Rectangle>
        </Grid>
    </Grid>
</ControlTemplate>