WPF滑塊樣式

Question

我對WPF有點新，我試圖給我的滑塊添加一個樣式， ，但有太多選項讓我很困惑。

會有人做，或者給我如何做一個滑塊看起來像這樣開始： 綠色=中國率先，灰跡的休息

而且我想用它來顯示，而玩一首歌曲，灰色=剩餘， 當你拖動它跳到歌曲的那部分時，實現它的最簡單方法是什麼？

我使用n音訊，我得到了跟蹤條滑動（按剩餘時間），而這首歌是由做打：

private void dispatcherTimer_Tick(object sender, EventArgs e) { 
    LabelCurrentTime.Content = _musicManager.getPlayTime(); 
    double totalseconds = _musicManager.totalSeconds(); 
    double currentseconds = _musicManager.currentSeconds(); 
    if (totalseconds > 0 && currentseconds > 0) 
     Trackbar.Value = ((((Trackbar.Width/totalseconds) * currentseconds))/totalseconds) * 10; 
} 

在XAML：

<Slider x:Name="Trackbar" Height="25" Canvas.Left="50" Canvas.Top="10" Width="408" Maximum="10"/> 

Answer 1

在這裏你去：

public partial class MainWindow : Window 
{ 
    public MainWindow() 
    { 
     InitializeComponent(); 
    } 

    private void Border_MouseDown(object sender, MouseButtonEventArgs e) 
    { 
     var mainborder = sender as Border; 
     double x = e.GetPosition(mainborder).X; 
     double val = 1 - (mainborder.ActualWidth - x)/mainborder.ActualWidth; 
     slider.Value = val * (slider.Maximum - slider.Minimum) + slider.Minimum; 
    } 
} 

public class SliderValueConverter : IMultiValueConverter 
{ 
    public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
    { 
     double val = (double)values[0]; 
     double min = (double)values[1]; 
     double max = (double)values[2]; 
     double sliderWidth = (double)values[3]; 
     return sliderWidth * (val - min)/(max - min); 
    } 

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, System.Globalization.CultureInfo culture) 
    { 
     throw new NotImplementedException(); 
    } 
} 

<Window x:Class="WpfTest.MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="clr-namespace:WpfTest" 
    Title="MainWindow" Height="650" Width="825"> 
<Window.Resources> 
    <local:SliderValueConverter x:Key="sliderValueConverter"/> 
</Window.Resources> 
<StackPanel> 
    <Slider Maximum="200" Minimum="100" Name="slider"> 
     <Slider.Template> 
      <ControlTemplate TargetType="{x:Type Slider}"> 
       <Border Background="Silver" Height="30" MouseDown="Border_MouseDown"> 
        <Border Background="Green" HorizontalAlignment="Left"> 
         <Border.Width> 
          <MultiBinding Converter="{StaticResource sliderValueConverter}"> 
           <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Value"/> 
           <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Minimum"/> 
           <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="Maximum"/> 
           <Binding RelativeSource="{RelativeSource TemplatedParent}" Path="ActualWidth"/> 
          </MultiBinding> 
         </Border.Width> 
        </Border> 
       </Border> 
      </ControlTemplate> 
     </Slider.Template> 
    </Slider> 
</StackPanel> 

Answer 2

這不會是一個完整的解決方案，但會讓你開始。

WPF中的所有控件都有一個ControlTemplate，它定義了它們的外觀和行爲方式。 \

Slider控件的ControlTemplate出奇地（起初）很複雜，並且在線有很多示例。請參閱the MSDN example。