wpf progress bar bind to a listbox value

Question

How can i move a progress bar value( i am simulating a car mph circular gauge using a progress bar) in accordance to a listbox value or combobox value? I am using a rectangle for the needle.

I can do it with a scroll bar( the value of the scrollbar makes the needle move) which is the code i will show. Instead of the value of the scroll bar i want to be able to have various speeds set in a listbox, combobox and when selected the progress bar / rectangle will move to that value.

Can this be done?

i will only show the code i think you need to see.. here is a pic of what i am talking about:

enter image description here

<Window.Resources>
<ControlTemplate x:Key="templateSpeedometer"
                     TargetType="ProgressBar">
    <ControlTemplate.Resources>
        <Style TargetType="Line">
        </Style>
    </ControlTemplate.Resources>


        <Canvas Width="0" Height="0" 
                    RenderTransform="1 0 0 1 0 50" Background="#FFF50D0D">

            <Rectangle Name="PART_Track" Width="180" />
            <Rectangle Fill="Black" Name="PART_Indicator" />



            <Polygon Points="5 2 5 -5 -75 0"
                         Stroke="Black" Fill="Gold">
                <Polygon.RenderTransform>
                    <RotateTransform 
                            Angle="{Binding ElementName=PART_Indicator, 
                                            Path=ActualWidth}" />
                </Polygon.RenderTransform>
            </Polygon>
        </Canvas>
    </Border>
</ControlTemplate>
</Window.Resources>

<Grid x:Name="LayoutRoot">

    <StackPanel>
        <Grid Height="216" Name="grid1" Width="612">
            <ScrollBar Name="scroll" Orientation="Horizontal" Minimum="0" Maximum="100" SmallChange="1" LargeChange="10" Margin="8,235,4,-36" />
            <Border Background="#FF5EB6D8"  CornerRadius="25" Height="247" VerticalAlignment="Top" Margin="13,5,27,0">

            <ProgressBar Background="#FFD6E1E5" Margin="4,8,0,112" Maximum="100" Minimum="0" Template="{StaticResource templateSpeedometer}" Value="{Binding ElementName=scroll, Path=Value}" BorderBrush="#FF5EB6D8" OpacityMask="White" HorizontalAlignment="Left" Width="281" BorderThickness="5,1,1,1" Orientation="Vertical"/>
            </Border>

score 1 · Answer 1 · edited May 23 '17 at 12:15

1

I'd change the design of the templateSpeedometer by using the Value property (of the progressbar) and transforming the Value into an angle by using a ValueConverter.

<RotateTransform  
    Angle="{RelativeSource={RelativeSource TemplatedParent}, Path=Value, 
            Converter={StaticResource valueToAngleConverter}}" />

That way you can bind the Value of the Gauge to a TrackBar, ScrollBar, ListBox.SelectedValue or whatever you like.

EDIT

I adjusted the code see here why I switched from TemplateBinding to Binding with RelativeSource.

edited May 23 '17 at 12:15

Community

1
1

answered May 24 '11 at 05:07

Emond

50,210
11
84
115

1

Agreed - this is a better design, but does not answer the question directly, which is how to bind to an item within a listbox. – ColinE May 24 '11 at 05:14
I am getting en error with your code --error MC3045: Unknown property 'Path' for type 'System.Windows.TemplateBindingExtension' encountered while parsing a Markup Extension. Line 254 Position 46. – May 24 '11 at 07:21
@icelated, Sorry Path should be Property – Emond May 24 '11 at 07:36
with your code it highlight it in blue and tells me you cannot set a TemplateBinding if not in a template.. I dont know what to do? – May 24 '11 at 08:19
Ah, Change the the binding like this: – Emond May 24 '11 at 11:34

score 1 · Accepted Answer · answered May 24 '11 at 05:12

1

Yes, this can be done. If you have a list of values displayed within a ListBox (or ComboBox), you can bind to the selected value via the SelectedItem property.

For a potentially better overall design to your control, take a look at this blogpost:

http://www.scottlogic.co.uk/blog/colin/2011/02/a-circular-progressbar-style-using-an-attached-viewmodel/

answered May 24 '11 at 05:12

ColinE

68,894
15
164
232

I tried to bind via SelectedItem proprty but it does nothing and i can see i get a converter error. System.Windows.Data Error: 6 : 'ObjectSourceConverter' converter failed to convert value 'System.Windows.Controls.ListBoxItem: 10' (type 'ListBoxItem'); fallback value will be used, if available. BindingExpression:Path=SelectedItem; DataItem='ListBox' (Name='scroll2'); target element is 'ProgressBar' (Name=''); target property is 'Value' (type 'Double') NotSupportedException:'System.NotSupportedException: DoubleConverter cannot convert from System.Windows.Controls.ListBoxItem. – May 24 '11 at 07:34
Ah ... so you are manually adding ListBoxItems to your ListBox? In that case, your need to bind your ListBox to a list of items that you wish to select from. E.g. MyListBox.ItemsSource = new List() { 10, 20, 30, 40 }; this will result in SelectedItem being a double. – ColinE May 24 '11 at 07:40
Cool - do you want to 'tick' my response as the answer? – ColinE May 24 '11 at 20:50

wpf progress bar bind to a listbox value

2 Answers2