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