C# WPF Ellipse Slider

Question

Tôi chỉ muốn biết nếu có một cách làm thế nào để thực hiện một thanh trượt hình elip với ngón tay cái như một ví dụ này tôi thực hiện trong sơn:

Ngay bây giờ tôi đang sử dụng một style nhưng chỉ hoạt động trên silders ngang. Đây là mã mẫu:

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

Nếu tôi cố gắng thay hình ảnh bằng hình tròn, hình tròn được cắt thành hình bán nguyệt và thanh trượt sẽ di chuyển theo chiều ngang. Tôi sẽ vui mừng khi đến đây câu trả lời của bạn. Cảm ơn.

Answer 1

Cách sử dụng ngón tay cái Xoay, điều này không hoạt động 100%, nhưng bạn có thể lấy nó từ đây, về cơ bản điều này vẽ một hình chữ nhật và cho phép bạn xoay nó. Bạn có thể xoay hình ảnh bạn đã cho thấy trong câu hỏi của bạn, điều này dường như là một thanh trượt, nhưng thực sự bạn chỉ xoay một hình ảnh. Phần vỡ được lớp rotatethumb được quay hình chữ nhật xung quanh góc dưới bên trái thay vì trung tâm đó là những gì bạn muốn

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 lớp con:

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(); 
     } 
    } 
} 

này đã được điều chỉnh từ bài viết về Thiết kế Sơ đồ WPF của sukram về dự án mã số