wpf 进度条绑定到列表框值

发布于 2024-11-09 04:18:22 字数 2081 浏览 0 评论 0 原文

如何根据列表框值或组合框值移动进度条值(我正在使用进度条模拟汽车每小时圆形仪表)?我使用矩形作为针。

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

这可以做到吗?

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

在此处输入图像描述

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

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>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

じее 2024-11-16 04:18:22

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

要获得更好的控件整体设计,请查看此博文:

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

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/

无言温柔 2024-11-16 04:18:22

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

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

这样您就可以将仪表的值绑定到 TrackBar、ScrollBar、ListBox.SelectedValue 或您喜欢的任何内容。

编辑

我调整了代码在这里查看为什么我从 TemplateBinding 切换到 Binding相对来源

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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文