WPF controls custom design

Question

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.

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:

2) A slider that looks like:

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):

Answer 1

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">
    <ProgressBar.Template>
        <ControlTemplate TargetType="{x:Type ProgressBar}" >
            <Grid Height="20">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="30"/>
                </Grid.ColumnDefinitions>

                <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"/>
                </Grid>

                <TextBlock Grid.Column="1" Text="{Binding Value, RelativeSource={RelativeSource TemplatedParent}, StringFormat={}{0} %}" Foreground="Black" VerticalAlignment="Center"/>
            </Grid>
        </ControlTemplate>
    </ProgressBar.Template>
</ProgressBar>