C＃WPF椭圆滑块

Question

我只是想知道是否有一种方法可以用拇指制作椭圆滑块，就像我在油漆中制作的一个例子：

现在我正在使用style，但仅适用于水平刨花机。以下是示例代码：

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

如果我尝试用圆形图像替换图像，则圆圈会切成半圆形，滑块会水平移动。我很高兴在这里回答你的问题。感谢。

Answer 1

使用旋转拇指怎么样，这不是100％工作，但是你应该可以从这里得到它，基本上它绘制一个矩形并允许你旋转它。您可以旋转您在问题中显示的图像，这似乎是一个滑块，但实际上您只是旋转图像。破碎的部分是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>

Thumb子类：

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