wpf进度条绑定到列表框值

时间:2011-05-24 05:00:04

标签: wpf xaml

如何根据列表框值或组合框值移动进度条值(我使用进度条模拟汽车mph圆形量规)?我正在使用一个矩形针。

我可以使用滚动条(滚动条的值使针移动),这是我将要显示的代码。我希望能够在列表框,组合框中设置各种速度,而不是滚动条的值,当选择时,进度条/矩形将移动到该值。

可以这样做吗?

我只会显示我认为您需要看到的代码.. 这是我正在谈论的图片:

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>

2 个答案:

答案 0 :(得分:1)

我将使用Value属性(进度条)更改templateSpeedometer的设计,并使用ValueConverter将Value转换为角度。

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

这样你可以将Gauge的值绑定到TrackBar,ScrollBar,ListBox.SelectedValue或任何你喜欢的。

修改

我调整了代码see here why I switched from TemplateBinding to Binding with RelativeSource

答案 1 :(得分:1)

是的,这可以做到。如果您在ListBox(或ComboBox)中显示了值列表,则可以通过SelectedItem属性绑定到所选值。

要想为您的控件提供更好的整体设计,请查看此博文:

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