Take the 2-minute tour ×

I need to create some controls that look like the following pictures and I have no idea which control to use or how to make it look like I want:

1) An horizontal bar, such that I could change its length dynamically in code.

enter image description here

Iv'e tried using the "Progress bar" control for it, but I can't get rid of the green glow effect, nor the white border:

enter image description here

2) A slider that looks like:

enter image description here

Notice that I have all images of the slider, separately. (The background with the "plus" and "minus" buttons, The thumb etc..)

3) Dynamically changed amount of blades, like (when I have the image for the blade):

enter image description here

share|improve this question

1 Answer 1

up vote 3 down vote accepted

You will have to create a custom template for the slider, the progress bar.

On MSDN, there are the style and template for the standard WPF controls.

Then, for your "blades" control, I think you will have to create a new custom control, maybe based on RangeBase.

For the progress bar you can begin with:

<ProgressBar VerticalAlignment="Top" Value="60" Maximum="100">
        <ControlTemplate TargetType="{x:Type ProgressBar}" >
            <Grid Height="20">
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="30"/>

                <Grid x:Name="PART_Track" ClipToBounds="True">
                    <Rectangle x:Name="PART_Indicator" Margin="-7,0,0,0" HorizontalAlignment="Left" Fill="Green" RadiusX="7" RadiusY="7" Height="14"/>

                <TextBlock Grid.Column="1" Text="{Binding Value, RelativeSource={RelativeSource TemplatedParent}, StringFormat={}{0} %}" Foreground="Black" VerticalAlignment="Center"/>
share|improve this answer

Your Answer


