how do you make progress bar with rounded edges?

Question

how do you make a progress bar with rounded edges like this:

 

i'm specifically trying to do this with a progressbar, not a slider. thanks

Answer 1

Change ProgressBar control template will do it.  Please see example at http://msdn.microsoft.com/en-us/library/ms750638.aspx

---

William

Answer 2

um, yeah, how do i make a rounded progress bar? i don't see anywhere how it tells me to make a rounded progress bar.

Answer 3

I'm not sure if I understand your requirement.  If you want to have rounded corner progressbar, I believe you can adjust Border.CornerRadius property in progressbar control template.  Please see example below:

<Window x:Class="RoundedProgressBar.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <LinearGradientBrush x:Key="PressedBrush" StartPoint="0,0" EndPoint="0,1">
            <GradientBrush.GradientStops>
                <GradientStopCollection>
                    <GradientStop Color="#BBB" Offset="0.0"/>
                    <GradientStop Color="#EEE" Offset="0.1"/>
                    <GradientStop Color="#EEE" Offset="0.9"/>
                    <GradientStop Color="#FFF" Offset="1.0"/>
                </GradientStopCollection>
            </GradientBrush.GradientStops>
        </LinearGradientBrush>
        <SolidColorBrush x:Key="SolidBorderBrush" Color="#888" />
        <LinearGradientBrush x:Key="DarkBrush" StartPoint="0,0" EndPoint="0,1">
            <GradientBrush.GradientStops>
                <GradientStopCollection>
                    <GradientStop Color="#FFF" Offset="0.0"/>
                    <GradientStop Color="#AAA" Offset="1.0"/>
                </GradientStopCollection>
            </GradientBrush.GradientStops>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="NormalBorderBrush" StartPoint="0,0" EndPoint="0,1">
            <GradientBrush.GradientStops>
                <GradientStopCollection>
                    <GradientStop Color="#CCC" Offset="0.0"/>
                    <GradientStop Color="#444" Offset="1.0"/>
                </GradientStopCollection>
            </GradientBrush.GradientStops>
        </LinearGradientBrush>
        <Style x:Key="{x:Type ProgressBar}" TargetType="{x:Type ProgressBar}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ProgressBar}">
                        <Grid MinHeight="14" MinWidth="200">
                            <Border Name="PART_Track" CornerRadius="15" Background="{StaticResource PressedBrush}" BorderBrush="{StaticResource SolidBorderBrush}" BorderThickness="1" />
                            <Border Name="PART_Indicator" CornerRadius="15" Background="{StaticResource DarkBrush}" BorderBrush="{StaticResource NormalBorderBrush}"  BorderThickness="1" HorizontalAlignment="Left" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <StackPanel>
        <ProgressBar Width="200" Height="30" Value="80"/>
    </StackPanel>
</Window>

---

William