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