C# WPF 椭圆 slider

Question

我只是想知道是否有一种方法可以像我在绘画中制作的这个例子那样用拇指制作椭圆 slider :

现在我正在使用 style 但只适用于水平的silders。这是示例代码:

        <Style x:Key="SliderRepeatButton" TargetType="RepeatButton">
        <Setter Property="SnapsToDevicePixels" Value="true"/>
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="IsTabStop" Value="false"/>
        <Setter Property="Focusable" Value="false" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="RepeatButton">
                    <Border Height="4" >
                        <Border.Background>
                            <ImageBrush ImageSource="/FoodWare;component/Resources/draggerLine.png"></ImageBrush>
                        </Border.Background>
                    </Border>

                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="SliderRepeatButton1" TargetType="RepeatButton">
        <Setter Property="Focusable" Value="false" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="RepeatButton">
                    <Border Height="4">
                        <Border.Background>
                            <ImageBrush ImageSource="/FoodWare;component/Resources/draggerFull.png"></ImageBrush>
                        </Border.Background>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="SliderThumb" TargetType="Thumb">
        <Setter Property="SnapsToDevicePixels" Value="true"/>
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Thumb">
                    <Ellipse Height="10" Width="10" Margin="0" StrokeThickness="0" StrokeDashArray="0" StrokeMiterLimit="0" StrokeLineJoin="Round">
                        <Ellipse.Fill>
                            <ImageBrush ImageSource="/FoodWare;component/Resources/draggerBtn1.png" ></ImageBrush>
                        </Ellipse.Fill>
                    </Ellipse>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <ControlTemplate x:Key="Slider"  TargetType="Slider">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Track Grid.Row="1" x:Name="PART_Track"   >
                <Track.DecreaseRepeatButton>
                    <RepeatButton Style="{StaticResource SliderRepeatButton1}"  Command="Slider.DecreaseLarge" />
                </Track.DecreaseRepeatButton>
                <Track.Thumb>
                    <Thumb Style="{StaticResource SliderThumb}"  />
                </Track.Thumb>
                <Track.IncreaseRepeatButton>
                    <RepeatButton Style="{StaticResource SliderRepeatButton}" Command="Slider.IncreaseLarge" />
                </Track.IncreaseRepeatButton>
            </Track>
        </Grid>
    </ControlTemplate>

    <Style x:Key="Horizontal_Slider" TargetType="Slider">
        <Setter Property="Focusable" Value="False"/>
        <Style.Triggers>
            <Trigger Property="Orientation" Value="Horizontal">
                <Setter Property="Template" Value="{StaticResource Slider}" />
            </Trigger>
        </Style.Triggers>
    </Style>

如果我尝试用圆形图像替换图像，圆形会被切割成半圆形并且 slider 会水平移动。我很高兴在这里得到您的答复。谢谢。

Answer 1

如何使用旋转拇指，这不是 100% 有效，但您应该可以从这里获取它，基本上这会绘制一个矩形并允许您旋转它。您可以旋转您在问题中显示的图像，这看起来是一个 slider ，但实际上您只是旋转图像。损坏的部分是 rotatethumb 类正在围绕左下角而不是您想要的中心旋转矩形

Xaml:

<Canvas>
    <Canvas.Resources>
        <ControlTemplate x:Key="MoveThumbTemplate" TargetType="{x:Type local:RotateThumb}">
            <Rectangle Fill="Transparent"/>
        </ControlTemplate>

        <ControlTemplate x:Key="DesignerItemTemplate" TargetType="Control">
            <Grid>
                <local:RotateThumb Template="{StaticResource MoveThumbTemplate}"
    DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}"
    Cursor="SizeAll"/>
                <ContentPresenter Content="{TemplateBinding ContentControl.Content}"/>
            </Grid>
        </ControlTemplate>
    </Canvas.Resources>
    <ContentControl Name="DesignerItem"
               Width="100"
               Height="100"
               Canvas.Top="100"
               Canvas.Left="100"
               Template="{StaticResource DesignerItemTemplate}">
        <Rectangle Fill="Blue" IsHitTestVisible="False"/>
    </ContentControl>
</Canvas>

拇指子类:

public class RotateThumb : Thumb
{
    private double initialAngle;
    private RotateTransform rotateTransform;
    private Vector startVector;
    private Point centerPoint;
    private ContentControl designerItem;
    private Canvas canvas;
    public RotateThumb()
    {
        DragDelta += new DragDeltaEventHandler(this.RotateThumb_DragDelta);
        DragStarted += new DragStartedEventHandler(this.RotateThumb_DragStarted);
    }
    private void RotateThumb_DragStarted(object sender, DragStartedEventArgs e)
    {
        this.designerItem = DataContext as ContentControl;
        if (this.designerItem != null)
        {
            this.canvas = VisualTreeHelper.GetParent(this.designerItem) as Canvas;
            if (this.canvas != null)
            {
                this.centerPoint = this.designerItem.TranslatePoint(
                new Point(this.designerItem.Width * this.designerItem.RenderTransformOrigin.X,
                this.designerItem.Height * this.designerItem.RenderTransformOrigin.Y),
                this.canvas);
                Point startPoint = Mouse.GetPosition(this.canvas);
                this.startVector = Point.Subtract(startPoint, this.centerPoint);
                this.rotateTransform = this.designerItem.RenderTransform as RotateTransform;
                if (this.rotateTransform == null)
                {
                    this.designerItem.RenderTransform = new RotateTransform(0);
                    this.initialAngle = 0;
                }
                else
                {
                    this.initialAngle = this.rotateTransform.Angle;
                }
            }
        }
    }
    private void RotateThumb_DragDelta(object sender, DragDeltaEventArgs e)
    {
        if (this.designerItem != null && this.canvas != null)
        {
            Point currentPoint = Mouse.GetPosition(this.canvas);
            Vector deltaVector = Point.Subtract(currentPoint, this.centerPoint);
            double angle = Vector.AngleBetween(this.startVector, deltaVector);
            RotateTransform rotateTransform = this.designerItem.RenderTransform as RotateTransform;
            rotateTransform.Angle = this.initialAngle + Math.Round(angle, 0);
            this.designerItem.InvalidateMeasure();
        }
    }
}

这改编自 sukram 关于代码项目的 WPF Diagram Designer 文章