WPF - Slider with a range of number - draw bar

Question

I'm working on a WPF project with the MVVM pattern and i need to create a user control like the following image:

Which has a vertical slider, a range of numbers and a graph that represent the selected value over the total being able the user to increment and decrease the value with the slider.

The problem is that i don't know how to create such a slider and i am also having some problems to draw the colour bar filled.

Any help would be very appreciated. Thanks in advance.

This is what i have in xaml:

<UserControl x:Class="Tenaris.SM.View.CCMOperativeScreen.View.Controls.SetPointSteelLevel"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         mc:Ignorable="d" 
         d:DesignHeight="300" d:DesignWidth="300">
<UserControl.Resources>

</UserControl.Resources>
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="3*"/>
        <ColumnDefinition Width="3*"/>
        <ColumnDefinition Width="7*"/>
    </Grid.ColumnDefinitions>
    <Grid>
         <Slider Orientation="Vertical"></Slider>
    </Grid>
    <Grid Grid.Column="1" HorizontalAlignment="Left">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <TextBlock Style="{StaticResource GridValueCell}" Text="88" />
        <TextBlock Style="{StaticResource GridValueCell}" Text="87" Grid.Row="1"/>
        <TextBlock Style="{StaticResource GridValueCell}" Text="86" Grid.Row="2"/>
        <TextBlock Style="{StaticResource SetPointPresetNumber}" Text="85" Grid.Row="3"/>
        <TextBlock Style="{StaticResource SetPointPresetNumber}" Text="84" Grid.Row="4"/>
        <TextBlock Style="{StaticResource SetPointPresetNumber}" Text="83" Grid.Row="5"/>
        <TextBlock Style="{StaticResource SetPointPresetNumber}" Text="82" Grid.Row="6"/>
        <TextBlock Style="{StaticResource GridValueCell}" Text="81" Grid.Row="7"/>
        <TextBlock Style="{StaticResource GridValueCell}" Text="80" Grid.Row="8"/>
        <TextBlock Style="{StaticResource GridValueCell}" Text="79" Grid.Row="9"/>

    </Grid>
    <Grid Grid.Column="2">
        <Rectangle>
            <Rectangle.Fill>
                <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                    <GradientStop Color="#303030" Offset="0" />
                    <GradientStop Color="LightGray" Offset=".5"/>
                    <GradientStop Color="#303030" Offset="1" />
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
    </Grid>
</Grid>

You need to show some effort. Post the code/XAML of what you already tried. Otherwise this question will get closed as too broad. — Federico Berasategui, Nov 21 '13 at 15:25
As HighCore has said, you need to show us what you already have. IMO if i was doing something like this i would do a composite of a range slider and a progress bar whose value is bound to the range scale of the slider. See this link perhaps for customising a progress bar [link](http://stackoverflow.com/questions/5167867/progress-bar-with-dynamic-text-text-color-update) — auburg, Nov 21 '13 at 15:35

score -1 · Answer 1 · answered Nov 21 '13 at 16:06

Dude, you need to learn how to search for help. If you type Slider class into a search engine, the very first result will almost certainly be for the API page on MSDN: Slider Class. The vast majority of these API pages on MSDN have detailed descriptions and often code examples to help you... use them. If you had looked there, you'd have seen that you don't have to manually add the numbers to the side of the Slider... they will be added by the control if you set the right settings on the control.

Next: Rectangle Class. On this page, you'll find a Height property that Gets or sets the suggested height of the element. We can use that to change the Height of the rectangle/bar. You could do that in two ways... either by manually setting Rectangle.Height = newValue, or by using data Binding... again, MSDN to the rescue.

Finally to the Style... your bar looks like it has one grey Rectangle in the background that doesn't move and then one on top of it (with a small Margin set on it). You could put both of these into the same grid cell making sure to declare the back one first. I hope that helps.

Good luck with your interesting project.

Please do not be abusive with your answers. If you think the question is not worth answering, then don't answer. Otherwise, simply add the MSDN links and move on. — Jim, Apr 14 '17 at 09:04
@Jim, thank you for your comment. Perhaps you could highlight the part of my answer that is abusive? I answered the question. I provided helpful tips on how the question author could find solutions by themselves in future and I even wished them good luck. I'm struggling to find any abuse in my answer at all. — Sheridan, Apr 26 '19 at 10:46
"Dude, you need to learn how to search for help. " is unnecessary. People often start at stack overflow for help because the community keeps it kind. — Jim, Jul 09 '19 at 12:00

WPF - Slider with a range of number - draw bar

1 Answers1