C# WPF Ellisse Slider

Question

Voglio solo sapere se c'è un modo su come fare un cursore un'ellisse con il pollice come questo un esempio che ho fatto in vernice:

In questo momento sto usando un style ma funziona solo su silder orizzontali. Ecco il codice di esempio:

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

Se provo a sostituire l'immagine con immagini cerchio, il cerchio è tagliato a semicerchio ed il cursore si muove orizzontalmente. Sarò felice di qui la tua risposta. Grazie.

Answer 1

Come su un pollice rotante, questo non funziona al 100%, ma dovresti essere in grado di ottenerlo da qui, in pratica questo disegna un rettangolo e ti permette di ruotarlo. Puoi ruotare l'immagine che hai mostrato nella tua domanda, questo sembrerebbe essere un cursore, ma davvero la tua giusta rotazione di un'immagine. Il componente difettoso sia la classe rotatethumb sta ruotando il rettangolo dietro l'angolo in basso a sinistra al posto del centro che è quello che si vorrebbe

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> 

Pollice sottoclasse:

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

Questo è stato adattato dall'articolo WPF Diagram Designer di sukram sul progetto di codice