Question

我是WPF的新手，我正在尝试为我的滑块添加一个样式，但有很多选择让我感到困惑。

有人可以制作，或者给我一个如何使滑块看起来像这样的开始： Slider 绿色=通过，灰色其余的轨道

我正在尝试用它来播放歌曲时显示，所以灰色=剩下的，什么是最简单的实现方式，而你拖动它会跳到歌曲的那一部分。

我正在使用NAudio，当歌曲正在播放时，我让轨迹栏滑动（剩余时间）：

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

with in 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。

WPF滑块样式

2 个答案: