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％では動作しませんが、ここから取得できるはずです。基本的には四角形を描き、回転させることができます。あなたはあなたの質問に表示された画像を回転させることができますが、これはスライダのように見えますが、実際には画像を回転させるだけです。

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

この壊れた部分はrotatethumbクラスは、あなたが望むものを

XAMLである代わりに、中央の左下隅の周りに長方形を回転されますコードプロジェクトに関するsukramのWPF Diagram Designerの記事から変更されました