3

私はしばらくWPFを使用してきました。

インターネット経由で次のコントロールを作成する必要がありますが、適切なものが見つかりませんでした。

誰でもこの機能を実装する方法を手伝ってもらえますか? コントロールをクリックすると、値が増加または減少する必要があります。ボリューム コントロールまたはスライダーのいずれかを使用できることがわかりましたが、何を使用すべきかが明確ではありません。

ここに画像の説明を入力

ありがとうございます。

4

3 に答える 3

5

私はこの種のディスプレイにプログレスバーを使用することを好みます。これは、例として示したものとほとんど同じように見える単純なボリュームコントロールの私の実装です。

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-18T10:19:57.260 に答える
2

スライダーを使用して、そのテンプレートを作成できます。

特別なマウス処理が必要な場合は、スライダーをサブクラス化し、ロジック/イベント処理を追加する必要があります。

標準の Slider テンプレートには、いくつかの繰り返しボタンがあります。左のリピート ボタンを赤にするだけで、必要なコントロールの非常に基本的な実装ができます。

于 2012-12-18T06:41:58.317 に答える
0

この投稿を見て、それがあなたに役立つことを願っています。

リンク：

1：スライダー

2：VLCプレーヤーのボリュームコントロールに似ています

于 2012-12-18T09:56:07.110 に答える