Search code examples
wpfxamlprogress-bar

Why is WPF ProgressBar PART_Indicator adding opacity?


I'm trying to make a custom style for a ProgressBar control in WPF. But PART_Indicator is decreasing opacity in the right side of the bar. (Check 25%, 50%, 75% examples)

SS

When the bar is 100% this is not happening. Example screenshot to show problem (50%):

SS

It must be like this without opacity decrease (100%):

SS

Source code: http://pastebin.com/jyTDYJjW

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style TargetType="ProgressBar">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ProgressBar">
                    <Border BorderThickness="1" BorderBrush="#1E1E1E">
                        <Grid>
                            <Rectangle Name="PART_Track">
                                <Rectangle.Fill>
                                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                        <GradientStop Color="#2B2B2B" Offset="0"/>
                                        <GradientStop Color="#323232" Offset="1"/>
                                    </LinearGradientBrush>
                                </Rectangle.Fill>
                            </Rectangle>
                            <Border Name="PART_Indicator" BorderThickness="1" HorizontalAlignment="Left">
                                <Border.BorderBrush>
                                    <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                        <GradientStop Color="#85C0F1" Offset="0"/>
                                        <GradientStop Color="#4C77A3" Offset="1"/>
                                    </LinearGradientBrush>
                                </Border.BorderBrush>
                                <Rectangle>
                                    <Rectangle.Fill>
                                        <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                            <GradientStop Color="#66A3E2" Offset="0"/>
                                            <GradientStop Color="#5387BA" Offset="0.5"/>
                                            <GradientStop Color="#4B79AF" Offset="0.5"/>
                                            <GradientStop Color="#385D87" Offset="1"/>
                                        </LinearGradientBrush>
                                    </Rectangle.Fill>
                                </Rectangle>
                            </Border>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

Probably this problem hasa to do with default aero style but I'm not sure.

So my question is: How to remove this opacity gradient clipping or whatever WPF is doing?


Solution

  • Try adding SnapsToDevicePixels="True" to the Rectangle with name PART_Indicator in the template.

    MSDN documentation for the SnapsToDevicePixels property