Appearance and Styling in UWP Progress Bar (SfProgressBar)

Customizing the Hot Spots

The brush of animating element (except Custom progress type) in the control can be changed using the FillColor property. It can set as given below:

<notification:SfProgressBar x:Name="progressBar" FillColor="Green"/>
progressBar.FillColor = new SolidColorBrush(Colors.Green);

Appearance-and-Styling-img1

The brush of background element (except Custom progress type) in the control can be changed using BackRimFillColor property. It can be set as given below:

<notification:SfProgressBar x:Name="progressBar" BackRimillColor="PaleVioletRed"/>
progressBar.BackRimFillColor = new SolidColorBrush(Colors.PaleVioletRed);

Appearance-and-Styling-img2

Customizing the Circular Progress Types

Increasing Radius of the ArcSegment

The Radius of ArcSegments in SolidCircular progress type can be increased using Radius and BackRimRadius properties. It can be set as given below:

<notification:SfProgressBar ProgressType="SolidCircular" Height="210" Width="210" Radius="100" BackRimRadius="100" Value="35"/>

Appearance-and-Styling-img3

Increasing the StrokeThickness of ArcSegment

The StrokeThickness of ArcSegments in SolidCircular progress type can be increased using StrokeThickness and BackRimStrokeThickness properties. It can be set as given below:

<notification:SfProgressBar ProgressType="SolidCircular" Height="210" Width="210" StrokeThickness="20" BackRimStrokeThickness="20" Value="35"/>

Appearance-and-Styling-img4

Customizing the SegmentedLinear Progress Type

The SegmentedLinear progress type can be customized as given below:

Changing the Segment Counts

SegmentCount property is used to increase or decrease the segment count.

<notification:SfProgressBar ProgressType="SegmentedLinear" Height="38" Width="900" SegmentCount="20" Value="35"/>

Appearance-and-Styling-img5

Increasing the Width of Progress Line Segment

<notification:SfProgressBar ProgressType="SegmentedLinear" Height="38" Width="900" SegmentWidth="20" Value="35">

Appearance-and-Styling-img6

Increasing the Height of Progress Line Segment

<notification:SfProgressBar ProgressType="SegmentedLinear" Height="38" Width="900" SegmentHeight="20" Value="35">

Appearance-and-Styling-img7

Adjusting the Spacing between Line Segments

<notification:SfProgressBar ProgressType="SegmentedLinear" Height="38" Width="900" SegmentSpacing="2" Value="35">

Appearance-and-Styling-img8