Dimming the indicator of a custom progressbar

[2hdass]

Hi there, I am new to WPF, I have just learned how to customize the progressbar by using a control template. I made it so that the indicator part of the progressbar has a gradient effect. Now i actually want it to fade in as the value increase, I know that I can make use of the triggers on the value of the progress bar and set the opacity of the indicator, but i am not sure how that can be done. Also, I would like to have a box following the top of the indicator to indicate the value of the progessbar, my approach is to create another column from the grid, place a textbox inside, and then again using trigger change the coordinates of the box. But i am not sure how i can convert the value of the progressbar to the coordinates of the textbox. here is what i have so far

<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="IceControls.CivicProgressbar"
x:Name="UserControl" d:DesignHeight="492" Width="50">
<UserControl.Resources>

    <ControlTemplate x:Key="templateThermometer"
                     TargetType="{x:Type ProgressBar}">

        <ControlTemplate.Resources>
            <LinearGradientBrush x:Key="brushStem" 
                                 StartPoint="0 0" EndPoint="7 0">
				<LinearGradientBrush.Transform>
					<RotateTransform  Angle="90"></RotateTransform>
				</LinearGradientBrush.Transform>
                <GradientStop Offset="0" Color="white" />
				<GradientStop Offset="1" Color="transparent" />
            </LinearGradientBrush>

        </ControlTemplate.Resources>
		
      
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="\*" />
            </Grid.RowDefinitions>

          
            <Grid Grid.Row="0">
                <Grid.ColumnDefinitions>
					<ColumnDefinition Width="100\*" />
                </Grid.ColumnDefinitions>

              
                <Border Grid.Column="0" BorderBrush="Gray" 
                        BorderThickness="1 1 1 1"
                        CornerRadius="6 6 0 0" >