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> 

拇指子类：

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 article