Removing gloss from progressbar?

Question

So I was suggested to use WPF forms to make a custom UI for my applications. The first thing I wanted to try was to change the look of the progress bar. The only thing holding me back from it's new look atis the glossy effect over the top of it. I want the progrss bar to be made of mostly solid colours. Is there anyway to remove the glossy part of the progress bar?

Shown here:

enter image description here

Thanks.

You will need to change the [`Template`](http://msdn.microsoft.com/en-us/library/system.windows.controls.control.template.aspx). — H.B., Oct 13 '12 at 12:41
Does this answer your question? [WPF progressbar style is blocky?](https://stackoverflow.com/questions/4815175/wpf-progressbar-style-is-blocky) — StayOnTarget, Jul 13 '21 at 20:23

score 21 · Answer 1 · answered Nov 01 '13 at 23:36

21

Nasreddine answers is very good but if you want something simpler you can use the following

    <Style TargetType="{x:Type ProgressBar}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ProgressBar">
                    <Border BorderBrush="#D9DCE1" BorderThickness="1" Background="#E8E8E8" CornerRadius="0" Padding="0">
                        <Grid x:Name="PART_Track">
                            <Rectangle x:Name="PART_Indicator" HorizontalAlignment="Left" Fill="#FF49A3E1" />
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

answered Nov 01 '13 at 23:36

Mirza Bilal

891
11
34

This is nice. Just to say, it would be useful to use defined colors Background="{TemplateBinding Background}" etc – Fanda Nov 13 '14 at 19:09
As suggested by @Fanda here with the appropriate `TemplateBinding`s: http://pastebin.com/eArqCXP8 – Christoph Fink Jun 09 '15 at 15:21
Nice, but doesn't work well with vertical progress bar :( – Kamil Jun 17 '16 at 08:58
Can be made to work with horizontal ones, by some tweaking easily – Mirza Bilal Jul 13 '17 at 12:46

score 20 · Answer 2 · answered Oct 13 '12 at 15:28

You can achieve any style you want by editing the ControlTemplate of the progress bar. Here's an example :

Disclaimer: I'm not a designer.

<!-- Brushed used by the progress bar style -->
<LinearGradientBrush x:Key="ProgressBarIndicatorAnimatedFill" EndPoint="0,0" MappingMode="Absolute" StartPoint="-100,0">
    <GradientStop Color="#00000000" Offset="0"/>
    <GradientStop Color="#FF000000" Offset="0.4"/>
    <GradientStop Color="#FF000000" Offset="0.6"/>
    <GradientStop Color="#00000000" Offset="1"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="ProgressBarTopHighlight" Color="#80FFFFFF" />
<!-- progress bar style -->
<Style x:Key="FlatProgressBar" TargetType="{x:Type ProgressBar}">
    <Setter Property="Foreground" Value="#01D328"/>
    <Setter Property="Background" Value="#C7C7C7"/>
    <Setter Property="BorderBrush" Value="#B2B2B2"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ProgressBar}">
                <Grid x:Name="Background" SnapsToDevicePixels="true">
                    <Rectangle Fill="{TemplateBinding Background}" RadiusY="2" RadiusX="2"/>
                    <Border Background="{x:Null}" CornerRadius="2" Margin="1"/>
                    <Border BorderBrush="#80FFFFFF" BorderThickness="1,0,1,1" Background="{StaticResource ProgressBarTopHighlight}" Margin="1"/>
                    <Rectangle x:Name="PART_Track" Margin="1"/>
                    <Decorator x:Name="PART_Indicator" HorizontalAlignment="Left" Margin="1">
                        <Grid x:Name="Foreground">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition MaxWidth="15"/>
                                <ColumnDefinition Width="0.1*"/>
                                <ColumnDefinition MaxWidth="15"/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition/>
                                <RowDefinition/>
                            </Grid.RowDefinitions>
                            <Rectangle x:Name="Indicator" Grid.ColumnSpan="3" Fill="{TemplateBinding Foreground}" Grid.RowSpan="2"/>
                            <Rectangle x:Name="Animation" Grid.ColumnSpan="3" Fill="{TemplateBinding Foreground}" Grid.RowSpan="2">
                                <Rectangle.OpacityMask>
                                    <MultiBinding>
                                        <MultiBinding.Converter>
                                            <Themes:ProgressBarHighlightConverter/>
                                        </MultiBinding.Converter>
                                        <Binding Source="{StaticResource ProgressBarIndicatorAnimatedFill}"/>
                                        <Binding ElementName="Background" Path="ActualWidth"/>
                                        <Binding ElementName="Background" Path="ActualHeight"/>
                                    </MultiBinding>
                                </Rectangle.OpacityMask>
                            </Rectangle>
                        </Grid>
                    </Decorator>
                    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="Orientation" Value="Vertical">
                        <Setter Property="LayoutTransform" TargetName="Background">
                            <Setter.Value>
                                <RotateTransform Angle="-90"/>
                            </Setter.Value>
                        </Setter>
                        <Setter Property="LayoutTransform" TargetName="PART_Track">
                            <Setter.Value>
                                <RotateTransform Angle="90"/>
                            </Setter.Value>
                        </Setter>
                        <Setter Property="LayoutTransform" TargetName="PART_Indicator">
                            <Setter.Value>
                                <RotateTransform Angle="90"/>
                            </Setter.Value>
                        </Setter>
                        <Setter Property="LayoutTransform" TargetName="Foreground">
                            <Setter.Value>
                                <RotateTransform Angle="-90"/>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                    <Trigger Property="IsIndeterminate" Value="true">
                        <Setter Property="Visibility" TargetName="Indicator" Value="Collapsed"/>
                    </Trigger>
                    <Trigger Property="IsIndeterminate" Value="false">
                        <Setter Property="Fill" TargetName="Animation" Value="#80B5FFA9"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Apply this style to your ProgressBar and you're good to go :

<ProgressBar Style="{StaticResource FlatProgressBar}" Value="50" />

Here's the end result :

enter image description here

I get an error in the `` part.because "it can't be empty" and another error in `Themes:ProgressBarHighlightConverter`. It asks for the "Themes" namespace. Is ProgressBarHighlightConverter a class? — soulblazer, Nov 26 '15 at 05:45
@soulblazer Add the namespace `xmlns:Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero"` and reference the `PresentationFramework.Aero` assembly — James, Apr 06 '16 at 16:58

Removing gloss from progressbar?

2 Answers2

Linked