在我的圆形滑块

时间:2015-06-14 08:06:54

标签: wpf slider

这是我的Circular slider

<Slider Name="knobSlider" Minimum="0" Maximum="50" Value="1" Height="99" Width="75"
        HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Column="1">
    <Slider.Template>
        <ControlTemplate>
            <Viewbox>
                <Canvas Width="300" Height="300" Margin="5">
                    <Ellipse Fill="Transparent" Width="300" Height="300" Canvas.Left="0" Canvas.Top="0" 
                            Stroke="#FF878889" StrokeThickness="10"
                            MouseLeftButtonUp="Ellipse_MouseLeftButtonUp"
                            MouseMove="Ellipse_MouseMove"/>
                    <Ellipse Fill="Transparent" Width="60" Height="60" Canvas.Left="120" Canvas.Top="120"/>
                    <Canvas>
                        <Line Stroke="Transparent" StrokeThickness="5" X1="150" Y1="150" X2="150" Y2="10"
                                MouseLeftButtonUp="Ellipse_MouseLeftButtonUp"/>
                        <Ellipse Fill="White" Width="30" Height="30" Canvas.Left="140" Canvas.Top="0"
                                MouseLeftButtonDown="Ellipse_MouseLeftButtonDown"
                                    MouseLeftButtonUp="Ellipse_MouseLeftButtonUp">
                            <Ellipse.ToolTip>
                                <ToolTip>
                                    <Binding RelativeSource="{RelativeSource TemplatedParent}"
                        Path="Value" Converter="{StaticResource valueTextConverter}"/>
                                </ToolTip>
                            </Ellipse.ToolTip>
                        </Ellipse>
                        <Canvas.RenderTransform>
                            <RotateTransform CenterX="150" CenterY="150">
                                <RotateTransform.Angle>
                                    <MultiBinding Converter="{StaticResource valueAngleConverter}">
                                        <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Value"/>
                                        <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Minimum"/>
                                        <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Maximum"/>
                                    </MultiBinding>
                                </RotateTransform.Angle>
                            </RotateTransform>
                        </Canvas.RenderTransform>
                    </Canvas>
                </Canvas>
            </Viewbox>
        </ControlTemplate>
    </Slider.Template>
</Slider>

public class ValueAngleConverter : IMultiValueConverter
{
    #region IMultiValueConverter Members

    public object Convert(object[] values, Type targetType, object parameter,
                  System.Globalization.CultureInfo culture)
    {
        double value = (double)values[0];
        double minimum = (double)values[1];
        double maximum = (double)values[2];

        return MyHelper.GetAngle(value, maximum, minimum);
    }



    public object[] ConvertBack(object value, Type[] targetTypes, object parameter,
              System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }

        #endregion
    }

   public class ValueTextConverter : IValueConverter
    {

        #region IValueConverter Members

        public object Convert(object value, Type targetType, object parameter,
                  System.Globalization.CultureInfo culture)
        {
            double v = (double)value;
            return String.Format("{0:F2}", v);
        }

        public object ConvertBack(object value, Type targetType, object parameter,
            System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }

        #endregion
    }

结果:

enter image description here

是否可以将此Circular Slider的外观更改为与此类似的内容:

enter image description here

并添加值标记并显示此控件的当前值和此控件的按钮(如示例中所示),而不是在textBlock内放置Circle

0 个答案:

没有答案