ProgressBar provides various options to style the appearance of ProgressBar, so that you can generate ProgressBar as per your requirement and change the look and feel of the application you are creating.
ProgressBar provides options to style the UI of the ProgressBar control, which is covered in the following section.
You can create a custom foreground by applying linear gradient brush. This paints a gradient along the background of the ProgressBar control. The StartPoint and EndPoint properties of the LinearGradientBrush are used to define the line's start and end points.
Here is how the ProgressBar control looks after applying the custom foreground:
The code snippet below depicts the implementation of the linear gradient brush in ProgressBar.
XAML |
Copy Code
|
---|---|
<!--Create linear gradient brush for styling the ProgressBar indicator--> <Window.Resources> <LinearGradientBrush StartPoint="0,0" EndPoint="1,1" x:Key="gradientBrush"> <GradientStop Color="Green" Offset="0" /> <GradientStop Color="Blue" Offset="2.0" /> </LinearGradientBrush> </Window.Resources> <Grid> <!--Set the Foreground of ProgressBar to the linear gradient brush--> <c1:C1ProgressBar Grid.Row="5" Height="40" Width="400" Value="50" HorizontalAlignment="Left" Margin="3" Name="c1ProgressBar1" VerticalAlignment="Stretch" BorderThickness="1" Foreground="{StaticResource gradientBrush}" /> </Grid> |
You can create a custom background by applying the Background property.
Here is how the ProgressBar control looks before and after applying the custom background:
In the code snippet below we have set the Background property to LightGray color.
XAML |
Copy Code
|
---|---|
<c1:C1ProgressBar Minimum="0" Maximum="100" Value="50" Background="LightGray"/> |
You can also set the foreground to highlight the dots when the ProgressBar is in indeterminate state using the IndeterminateForeground property.
In the code snippet below we have set the IndeterminateForeground property to Brown color.
XAML |
Copy Code
|
---|---|
<c1:C1ProgressBar IsIndeterminate="True" IndeterminateForeground="Brown" /> |
ProgressBar provides options to change the appearance of the ProgressBar control, which is covered in the following section.
You can use the CornerRadius property to set a value that represents the degree to which the corners of the element are rounded.
The code snippet below depicts the use of the CornerRadius property.
XAML |
Copy Code
|
---|---|
<c1:C1ProgressBar BorderThickness="1" CornerRadius="25" Minimum="0" Maximum="100" Value="50" /> |