Core Library for WPF | ComponentOne
Core Library / ProgressBar / Styling and Appearance
In This Topic
    Styling and Appearance
    In This Topic

    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.

    Styling

    ProgressBar provides options to style the UI of the ProgressBar control, which is covered in the following section.

    Custom Foreground

    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:

    Progressbar with colored 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>
    

    Custom Background

    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:

    Progressbar with colored 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"/>
    

    Indeterminate Foreground

    You can also set the foreground to highlight the dots when the ProgressBar is in indeterminate state using the IndeterminateForeground property.

    Progressbar with colored indeterminate foreground

    In the code snippet below we have set the IndeterminateForeground property to Brown color.

    XAML
    Copy Code
    <c1:C1ProgressBar IsIndeterminate="True" IndeterminateForeground="Brown"  />
    

    Appearance

    ProgressBar provides options to change the appearance of the ProgressBar control, which is covered in the following section.

    Corner radius

    You can use the CornerRadius property to set a value that represents the degree to which the corners of the element are rounded.

    Progressbar with corners 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" />