Question

我已经和WPF合作了一段时间。

我需要在Internet上创建以下控件，但找不到合适的。

任何人都可以帮助您实现此功能。单击控件时，值应该增加或减少。我发现我可以使用音量控制或滑块，但不清楚我应该使用什么。

enter image description here

感谢您的期待。

Answer 1

我更喜欢使用Progressbar来进行这类显示。这是我实现的一个简单的音量控制，看起来非常像你展示的那个：

public partial class MainWindow : Window, INotifyPropertyChanged
{

    private double _volume;
    private bool mouseCaptured = false;

    public double Volume
    {
        get { return _volume; }
        set
        {
            _volume = value;
            OnPropertyChanged("Volume");
        }
    }

    public MainWindow()
    {
        InitializeComponent();
        DataContext = this;
    }

    private void MouseMove(object sender, MouseEventArgs e)
    {
        if (Mouse.LeftButton == MouseButtonState.Pressed && mouseCaptured)
        {
            var x = e.GetPosition(volumeBar).X;
            var ratio = x/volumeBar.ActualWidth;
            Volume = ratio*volumeBar.Maximum;
        }
    }

    private void MouseDown(object sender, MouseButtonEventArgs e)
    {
        mouseCaptured = true;
        var x = e.GetPosition(volumeBar).X;
        var ratio = x / volumeBar.ActualWidth;
        Volume = ratio * volumeBar.Maximum;
    }

    private void MouseUp(object sender, MouseButtonEventArgs e)
    {
        mouseCaptured = false;
    }

    #region Property Changed

    public event PropertyChangedEventHandler PropertyChanged;

    private void OnPropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }

    #endregion


}

和XAML：

<Window x:Class="VolumeControlApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="196" Width="319">
    <Window.Resources>
        <Style x:Key="VolumeStyle" TargetType="{x:Type ProgressBar}">
            <Setter Property="Foreground" Value="#FFB00606"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ProgressBar}">
                        <Grid x:Name="TemplateRoot">
                            <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"/>
                            <Rectangle x:Name="PART_Track"/>
                            <Grid x:Name="PART_Indicator" ClipToBounds="True" HorizontalAlignment="Left">
                                <Rectangle x:Name="Indicator" Fill="{TemplateBinding Foreground}" RadiusX="5" RadiusY="3"/>
                            </Grid>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid Background="#FF363636">
        <Border Background="Gray" BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Center" VerticalAlignment="Center" CornerRadius="3" Padding="2">
            <Border Background="Black" CornerRadius="3">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>
                    <TextBlock Text="Vol:" Foreground="White" VerticalAlignment="Center" Margin="4 0"/>
                    <ProgressBar x:Name="volumeBar"  Height="10" 
                    Value="{Binding Volume}" 
                    Width="100"
                    MouseMove="MouseMove" 
                    MouseDown="MouseDown"
                    MouseUp="MouseUp" Style="{DynamicResource VolumeStyle}" Grid.Column="1"/>
                </Grid>
            </Border>
        </Border>
    </Grid>
</Window>

Answer 2

您可以使用滑块为其创建模板。

如果需要特殊的鼠标处理，则需要对滑块进行子类化并添加逻辑/事件处理。

标准滑块模板有几个重复按钮。只需将左侧重复按钮设置为红色，即可实现所需控件的基本实现。

Answer 3

看一下这篇帖子希望对你有所帮助..

链接：

1：Sliders

2：Similar to VLC player volume control

WPF - 自定义设计音量控制

3 个答案: