Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Wpf Rounded corners progress bar

Tags:

c#

templates

wpf

I'm trying to make a simple progress bar with rounded corners.

This is my xaml:

 <Grid>
    <ProgressBar Minimum="0" Maximum="100"  Height="50"  Value="50" Name="pbStatus" BorderBrush="Black" BorderThickness="3" Foreground="#336699"  />
    <TextBlock Text="{Binding ElementName=pbStatus, Path=Value, StringFormat={}{0:0}%}" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>

I'm trying to look for the Border-Radius property.... but i just find it. Any help please?

Thanks.

like image 695
Slashy Avatar asked Sep 02 '15 13:09

Slashy


2 Answers

From Visual Studio Designer Right Click on the ProgressBar > Edit Template > Edit a Copy, In the Generated Style add CornerRadius to the Border and set the RadiusX and RadiusY in the filling Rectangles :

<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="30"/>
                        <Rectangle x:Name="PART_Track" />
                        <Grid x:Name="PART_Indicator" ClipToBounds="true" HorizontalAlignment="Left">
                            <Rectangle x:Name="Indicator" Fill="{TemplateBinding Foreground}" RadiusX="30" RadiusY="30"/>
                            <Rectangle x:Name="Animation" Fill="{TemplateBinding Foreground}" RenderTransformOrigin="0.5,0.5" RadiusX="30" RadiusY="30">
                                <Rectangle.RenderTransform>
                                    <TransformGroup>
                                        <ScaleTransform/>
                                        <SkewTransform/>
                                        <RotateTransform/>
                                        <TranslateTransform/>
                                    </TransformGroup>
                                </Rectangle.RenderTransform>
                            </Rectangle>
                        </Grid>
like image 193
SamTh3D3v Avatar answered Nov 12 '22 19:11

SamTh3D3v


Put a border inside and set the corner radius property of the border instead. Here is the link describing this progressbar bar style right radius

like image 29
WAQ Avatar answered Nov 12 '22 20:11

WAQ