Comment dessiner une ligne ou quelque chose sur un Slider?

Question

Je vais concevoir une barre de recherche pour mon propre joueur. J'utilise déjà Slider.

Scénario: Lorsque l'utilisateur clique sur le bouton A, dans la barre de recherche, une ligne sera tracée et continue jusqu'à ce que l'utilisateur clique sur le bouton B. Découvrez l'image pour mieux comprendre! ;)

Image http://efreephoto.com/pictures/11182763364d5141df3d8d8.png

Comment puis-je attirer cette ligne rouge sur curseur?

Answer 1

Je crois qu'il existe deux solutions.

• Create a custom template (ou de le baser sur celui existant) pour créer votre propre disposition de curseur. Je crois que vous devrez étendre de Slider afin d'ajouter des propriétés de dépendance supplémentaires pour stocker des informations pour la ligne à dessiner. Utilisez un adorner pour superposer le curseur existant.

Espérons que cela vous guidera dans la bonne direction.

Answer 2

La meilleure façon de procéder est d'utiliser un modèle personnalisé.

Voir ici pour plus d'http://msdn.microsoft.com/en-us/library/aa970773.aspx

Vous pouvez télécharger les modèles de contrôle par défaut ici
http://code.msdn.microsoft.com/Project/Download/FileDownload.aspx?ProjectName=wpfsamples&DownloadId=7741

Ensuite, vous devez adapter la valeur par défaut à tout ce que vous voulez. À partir du lien ci-dessus, jetez un coup d'œil au fichier slider.xaml et mettez à jour la section suivante comme vous le souhaitez.

<ControlTemplate x:Key="HorizontalSlider" TargetType="{x:Type Slider}"> 
    <Grid> 
     <Grid.RowDefinitions> 
     <RowDefinition Height="Auto"/> 
     <RowDefinition Height="Auto" MinHeight="{TemplateBinding Slider.MinHeight}"/> 
     <RowDefinition Height="Auto"/> 
     </Grid.RowDefinitions> 
     <TickBar 
     Name="TopTick" 
     SnapsToDevicePixels="True" 
     Placement="Top" 
     Fill="{StaticResource GlyphBrush}" 
     Height="4" 
     Visibility="Collapsed" /> 
     <Border 
     Name="TrackBackground" 
     Margin="0" 
     CornerRadius="2" 
     Height="4" 
     Grid.Row="1" 
     Background="{StaticResource LightBrush}" 
     BorderBrush="{StaticResource NormalBorderBrush}" 
     BorderThickness="1" /> 
     <Track Grid.Row="1" Name="PART_Track"> 
     <Track.DecreaseRepeatButton> 
      <RepeatButton 
      Style="{StaticResource SliderButtonStyle}" 
      Command="Slider.DecreaseLarge" /> 
     </Track.DecreaseRepeatButton> 
     <Track.Thumb> 
      <Thumb Style="{StaticResource SliderThumbStyle}" /> 
     </Track.Thumb> 
     <Track.IncreaseRepeatButton> 
      <RepeatButton 
      Style="{StaticResource SliderButtonStyle}" 
      Command="Slider.IncreaseLarge" /> 
     </Track.IncreaseRepeatButton> 
     </Track> 
     <TickBar 
     Name="BottomTick" 
     SnapsToDevicePixels="True" 
     Grid.Row="2" 
     Fill="{TemplateBinding Foreground}" 
     Placement="Bottom" 
     Height="4" 
     Visibility="Collapsed" /> 
    </Grid>