WPF - Custom design volume control

问题

I have been working with WPF for some time.

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

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.

回答1:

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:

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:

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

回答2:

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.

回答3:

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

Link:

1: Sliders

2: Similar to VLC player volume control

来源：https://stackoverflow.com/questions/13927017/wpf-custom-design-volume-control

标签

wpf

wpf-controls

slider