Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Below is the example for you. Set MyProgressBarStyle for the ProgressBar. I have set the background of the progress bar as 30% red, 30% Green and 30% Blue using LinearGradientBrush. And reversed the PART_Indicator. So you need to use SetMyProgressBarValue function to set the percentage value for the ProgressBar. Try it its working for me.</p> <p><img src="https://i.stack.imgur.com/a4hUP.png" alt="enter image description here"></p> <p><strong>XAML</strong></p> <pre><code> &lt;Grid Background="Gray"&gt; &lt;Grid.Resources&gt; &lt;Style x:Key="MyProgressBarStyle" TargetType="{x:Type ProgressBar}"&gt; &lt;Setter Property="Template"&gt; &lt;Setter.Value&gt; &lt;ControlTemplate TargetType="{x:Type ProgressBar}"&gt; &lt;Grid MinHeight="14" MinWidth="200"&gt; &lt;Border Name="PART_Track" CornerRadius="2" BorderBrush="Transparent" BorderThickness="1" &gt; &lt;Border.Background&gt; &lt;LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5"&gt; &lt;LinearGradientBrush.GradientStops&gt; &lt;GradientStop Color="red" Offset="0" &gt;&lt;/GradientStop&gt; &lt;GradientStop Color="red" Offset="0.3" &gt;&lt;/GradientStop&gt; &lt;GradientStop Color="Green" Offset=".3" &gt;&lt;/GradientStop&gt; &lt;GradientStop Color="Green" Offset=".3" &gt;&lt;/GradientStop&gt; &lt;GradientStop Color="Green" Offset=".6" &gt;&lt;/GradientStop&gt; &lt;GradientStop Color="Blue" Offset=".6" &gt;&lt;/GradientStop&gt; &lt;GradientStop Color="Blue" Offset="1" &gt;&lt;/GradientStop&gt; &lt;/LinearGradientBrush.GradientStops&gt; &lt;/LinearGradientBrush&gt; &lt;/Border.Background&gt; &lt;/Border&gt; &lt;Border Name="PART_Indicator" CornerRadius="2" Background="Gray" BorderBrush="Transparent" BorderThickness="1" HorizontalAlignment="Right" /&gt; &lt;/Grid&gt; &lt;/ControlTemplate&gt; &lt;/Setter.Value&gt; &lt;/Setter&gt; &lt;/Style&gt; &lt;/Grid.Resources&gt; &lt;ProgressBar x:Name="MyProgressBar" Style="{StaticResource MyProgressBarStyle}" Minimum="0" Maximum="100" Height="80" Value="20"&gt;&lt;/ProgressBar&gt; &lt;/Grid&gt; </code></pre> <p><strong>Function to set percentage value for MyProgressBar</strong></p> <pre><code> public void SetMyProgressBarValue(Double percentageValue) { MyProgressBar.Value = 100 - percentageValue; } </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload