如何在滑塊上繪製線條或其他東西？

Question

我將爲我自己的玩家設計一個Seek酒吧。我已經使用Slider。

場景：當用戶點擊按鈕A，在搜索欄，一條線將繪製並繼續進行，直到用戶點擊按鈕B。查看圖像以更好地理解！ ;）

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

我怎麼能就這麼畫紅線上滑蓋的？

Answer 1

我相信有兩種解決方案。

• Create a custom template（或將其基於現有的）創建您自己的滑塊佈局。我相信你將不得不從Slider擴展爲了添加額外的依賴性屬性來存儲繪製線條的信息。
• 使用adorner覆蓋現有的滑塊。

希望這會引導你在正確的方向。

Answer 2

最好的方式去我認爲是使用自定義模板。

在這裏看到更多http://msdn.microsoft.com/en-us/library/aa970773.aspx

您可以下載默認控件模板這裏
http://code.msdn.microsoft.com/Project/Download/FileDownload.aspx?ProjectName=wpfsamples&DownloadId=7741

那麼你應該適應任何你想要的默認。從上面的鏈接中查看slider.xaml文件，並將以下部分更新爲任何您喜歡的內容。

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