C# WPF Progress bar Custom Style

34 views Asked by At

I want to customize the design of the ProgressBar in C# WPF. I've tried to do it a bit, but it's not exactly what I want.

1 - I can't add CornerRadius to the ProgressBar.

2 - The ProgressBar's speed is very slow.

What I want to achieve is:

https://i.stack.imgur.com/pIUys.png

What currently exists is: https://i.stack.imgur.com/mNWcg.png

Style.xaml:

<Style TargetType="ProgressBar" x:Key="ProgressBar">
    <Setter Property="Foreground" Value="#54bdcd"/>
    <Setter Property="Background" Value="#000000"/>
    <Setter Property="Foreground" Value="#54bdcd"/>
    <Setter Property="Background" Value="#000000"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ProgressBar}">
                <Grid Name="TemplateRoot" SnapsToDevicePixels="true">
                    <Rectangle Fill="{TemplateBinding Background}"/>
                    <Rectangle Name="PART_Track" Margin="0"/>
                    <Decorator x:Name="PART_Indicator" HorizontalAlignment="Left" Margin="0">
                        <Grid Name="Foreground">
                            <Rectangle Fill="{TemplateBinding Foreground}" Name="Indicator" />
                            <Grid Name="Animation" ClipToBounds="True">
                                <Border Name="PART_GlowRect"  Margin="0,0,0,0" HorizontalAlignment="Left" Background="{TemplateBinding Foreground}"/>
                            </Grid>
                            <Grid Name="Overlay">
                            </Grid>
                        </Grid>
                    </Decorator>

                    <Border BorderThickness="{TemplateBinding BorderThickness}"
                    BorderBrush="{TemplateBinding BorderBrush}"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsIndeterminate" Value="true">
                        <Setter TargetName="Indicator" Property="Fill" Value="Transparent" />
                        <Setter TargetName="PART_GlowRect" Property="Width" Value="100" />
                        <Trigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <ThicknessAnimation 
                                    Storyboard.TargetName="PART_GlowRect"
                                    Storyboard.TargetProperty="Margin"
                                    From="-10,0,0,0"  To="6,0,0,0" Duration="0:0:1"
                                    AutoReverse="True" RepeatBehavior="Forever" />
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.EnterActions>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Main.xaml:

 <ProgressBar Height="20" Style="{StaticResource ProgressBar}" Grid.Row="1" IsIndeterminate="True"></ProgressBar>
0

There are 0 answers