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:
<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_In开发者_C百科dicator,
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>
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/
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.
精彩评论