WPF - 自定义设计音量控制

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

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

enter image description here

感谢期待。

2012-12-18 Hardik

我更喜欢使用进度为这些类型的显示器。这是我实现一个简单的音量控制的看着很像你看作为一个例子之一：

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>

来源

2012-12-18 10:19:57 AkselK