WPFを使用して、リアルな音量コントロールを実装する方法は何ですか？

1年 ago
蓮, 翼
1 minute

アナログボリュームコントロールを実現するには、次の手順に従うことができます。

  1. WPFプロジェクトを作成し、MainWindow.xamlにSliderコントロールとTextBlockコントロールを追加します。Sliderコントロールは音量の調整に使用され、TextBlockコントロールは音量の値を表示するために使用されます。
<Slider x:Name="VolumeSlider" Minimum="0" Maximum="100" ValueChanged="VolumeSlider_ValueChanged"/>
<TextBlock x:Name="VolumeTextBlock" Text="0" HorizontalAlignment="Center" VerticalAlignment="Center"/>
  1. MainWindow.xaml.csに、ValueChangedイベントのハンドラーを追加して、音量値を更新するようにします。
private void VolumeSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
    int volume = (int)VolumeSlider.Value;
    VolumeTextBlock.Text = volume.ToString();
}
  1. MainWindow.xamlにStyle要素を追加して、カスタムのSlider外観を作成します。
<Slider x:Name="VolumeSlider" Minimum="0" Maximum="100" ValueChanged="VolumeSlider_ValueChanged">
    <Slider.Style>
        <Style TargetType="Slider">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Slider">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <Rectangle Grid.Column="0" Width="20" Height="20" Fill="#FF007ACC"/>
                            <Rectangle Grid.Column="1" Height="4" VerticalAlignment="Center" Fill="#FF007ACC" Margin="10,0,10,0"/>
                            <Thumb x:Name="PART_Track" Grid.ColumnSpan="2" Grid.RowSpan="3" Width="20" Height="20" Background="Transparent"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Slider.Style>
</Slider>
  1. プロジェクトを実行し、Sliderコントロールをドラッグすると、音量値が更新され、Sliderの外観もアナログ風に変わります。

外観をさらに美しくカスタマイズすることが可能です。

bannerAds