WPF - 自定义设计音量控制答案

【问题标题】：WPF - Custom design volume controlWPF - 自定义设计音量控制
【发布时间】：2012-12-18 05:46:11
【问题描述】：

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

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

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

感谢期待。

【问题讨论】：

标签： wpf wpf-controls slider

【解决方案1】：

我更喜欢在这类显示中使用进度条。这是我实现的简单音量控制，看起来很像您作为示例显示的那个：

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>

【讨论】：

【解决方案2】：

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

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

标准的 Slider 模板有几个重复按钮。只需将左侧重复按钮设置为红色，您就可以对所需控件进行非常基本的实现。

【讨论】：

【解决方案3】：

看看这篇文章希望对你有帮助..

链接：

1：Sliders

2：Similar to VLC player volume control

【讨论】：