progress bar on windows 7 WPF

Question

Hello I am working on WPF application, I've used a progress bar to show the progress of a download. Here is my code:

<ProgressBar x:Name="DownloadProgress" Value="100" Maximum="100" Margin="2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Foreground="#FF222222" Background="Transparent" FlowDirection="RightToLeft" BorderThickness="0"/>

The progress bar is designed such that it looks like its uncovering something hence the progress value starts with 100 ends at 0. The issue is on a windows 10 machine it works exactly as its supposed to look like this: But on a windows 7 machine it looks like this: which is horrible. Can anyone help me finding out why does the progressbar looks like that on windows 7 when it looks perfect to design on windows 10

Probably due to themes. Try changing the theme and see if it looks different again. — Jai, Sep 08 '16 at 08:42
How do we set themes in WPF. requested theme property exists only in Windows 8 and above — iam.Carrot, Sep 08 '16 at 08:49
With such a specific use, I think you should define your own style (or create a custom control!) for this component. There's a good discussion on progressbar style here: http://stackoverflow.com/questions/4815175/wpf-progressbar-style. But a custom control with a rectangle would be easy to code. — Joe, Sep 08 '16 at 09:28
the progress bar is a part of a custom control in my application — iam.Carrot, Sep 08 '16 at 09:30

score 2 · Accepted Answer · answered Sep 08 '16 at 09:36

You need to set up style in your progress bar. What actually happens is, the WPF application by default loads up the theme for you application based on the OS. So while you're setting the foreground property the

<Grid x:Name="PART_Indicator" ClipToBounds="true" HorizontalAlignment="Left">
                            <Rectangle x:Name="Indicator" Fill="{TemplateBinding Foreground}"/>
                            <Rectangle x:Name="Animation" Fill="{TemplateBinding Foreground}" RenderTransformOrigin="0.5,0.5">
                                <Rectangle.RenderTransform>
                                    <TransformGroup>
                                        <ScaleTransform/>
                                        <SkewTransform/>
                                        <RotateTransform/>
                                        <TranslateTransform/>
                                    </TransformGroup>
                                </Rectangle.RenderTransform>
                            </Rectangle>
                        </Grid>

Rectangle named indicator leads up the template Fill which gives you this repulsive color change that to your preferred color and that should do the trick. So your updated code would be:

<Grid x:Name="PART_Indicator" ClipToBounds="true" HorizontalAlignment="Left">
                            <Rectangle x:Name="Indicator" Fill="#FF222222"/>
                            <Rectangle x:Name="Animation" Fill="#FF222222" RenderTransformOrigin="0.5,0.5">
                                <Rectangle.RenderTransform>
                                    <TransformGroup>
                                        <ScaleTransform/>
                                        <SkewTransform/>
                                        <RotateTransform/>
                                        <TranslateTransform/>
                                    </TransformGroup>
                                </Rectangle.RenderTransform>
                            </Rectangle>
                        </Grid>

progress bar on windows 7 WPF

1 Answers1