WPF - 自定义设计音量控制

WPF - Custom design volume control

提问by Hardik

I have been working with WPF for some time.

我使用 WPF 已经有一段时间了。

I need to create the following control over Internet, but could not find appropriate.

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

Can anybody help how to implement this functionality. Value should be increasing or decreasing when clicked on control. I found that I can use either Volume control or Slider, but not getting clear what I should use.

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

Thanks in anticipation.

感谢期待。

回答by AkselK

I prefer to use a Progressbar for these kind of displays. This is my implementation of a simple volume control looking pretty much like the one you show as an example:

我更喜欢将 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


}

And the XAML:

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

回答by Erno

You could use a slider and create a template for it.

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

If you need special mouse handling you'll need to subclass the slider and add logic/event handling.

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

The standard Slider template has a couple of repeat buttons. By simply making the left repeat button red you have a very basic implementation of the required control.

标准的 Slider 模板有几个重复按钮。通过简单地将左重复按钮设置为红色，您就可以获得所需控件的基本实现。

回答by SidPen

Take a look at this posts hope it helps you..

看看这个帖子希望它对你有帮助..

Link:

关联：

1: Sliders

1：滑块

2: Similar to VLC player volume control

2：类似VLC播放器音量控制