執筆者: セイザインデザイン、PROJECT KySS 薬師寺 聖

動作確認環境: Visual Studio 2010、Silverlight 4、Windows 7 Professional (32 bit)


Slider コントロールを用いて、再生中のメディアの音量を変更します。つまみ横には 0 ~ 100 までの数値で音量を表示します。0 ではミュートとなります。スライドを停止した時には音量を非表示にします。

ソリューション名は、"SL4_ soundVolume" としています。

デザイナー画面で、音声再生用の MediaElement コントロール、Slider コントロールと、音量を表示するための TextBox コントロールを配置します。MediaElement の Source プロパティには、メディア・ファイル名を指定しておきます。

Slider コントロールは、デフォルトでは水平方向に配置されます。垂直方向に配置するには、Orientation プロパティに Vertical を指定します。この例では、音量を 1 ~ 100 までの数値で表示するため、Maximum プロパティに 100 (デフォルトは 10) を、Value プロパティには 50 (デフォルトは 0)、SmallChange には 1 (デフォルトは 0.1) を指定しています。

[XAML] Slider、TextBox、MediaElement を配置する (MainPage.xaml)

XAML
<UserControl x:Class="SL4_soundVolume.MainPage" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        <Grid x:Name="LayoutRoot" Background="White"        <MediaElement Height="20" HorizontalAlignment="Left" Margin="20,20,0,0" Name="MediaElement1" VerticalAlignment="Top" Width="240" Source=" http://www.~任意のドメイン~mp3などのメディア・ファイル名" /> 
        <Slider Height="100" HorizontalAlignment="Left" Margin="100,50,0,0" Name="Slider1" VerticalAlignment="Top" Width="30" Orientation="Vertical" Value="50" Maximum="100" SmallChange="1" /> 
        <TextBox Height="24" HorizontalAlignment="Left" Name="TextBox1" VerticalAlignment="Top" Width="30" Margin="75,0,0,0" TextAlignment="Right" BorderBrush="Black" Visibility="Collapsed" /> 
    </Grid>  
</UserControl> 
 
 
 

Slider にマウスが押下された時、TextBox を表示させ、解放された際に TextBox を非表示にします。

また、Slider の値が変化した時、 MediaElement.Volume プロパティに、音量を指定します。MediaElement の Volume (System.Double 型)は 0 ~ 1 の範囲で指定するため、0 ~ 100 の範囲で指定している Slider の値を 100 で除算します。

XAML 中の Slider の Height および TextBox の Height を変更した場合でも、TextBox が必ずスライダーのつまみ横に表示されるように、Slider の Top マージン、パディング (上下 5 ずつ)、値、高さ、TextBox の高さから、TextBox の Top マージンをもとめます。Thickness 構造体に、Left、Top、Right、Bottom の各マージンを指定して、Slider のつまみ横に TextBox を移動させ、この中に、音量の値を表示します。

[VB] コード ビハインド (MainPage.xaml.vb)

Visual Basic
Option Strict On 
 
Partial Public Class MainPage 
    Inherits UserControl 
 
    Public Sub New() 
        InitializeComponent() 
    End Sub 
 
    Private Sub Slider1_ValueChanged(ByVal sender As System.Object, ByVal e As System.Windows.RoutedPropertyChangedEventArgs(Of System.Double)) Handles Slider1.ValueChanged 
        MediaElement1.Volume = Slider1.Value / 100 
        Dim VolumeTopMargin As Integer = CInt(Slider1.Margin.Top + 5 + (100 - Slider1.Value) * (Slider1.Height - 10/ 100 - (TextBox1.Height / 2)) 
TextBox1.Visibility = Windows.Visibility.Visible 
        TextBox1.Margin = New Thickness(TextBox1.Margin.Left, VolumeTopMargin, 00) 
        TextBox1.Text = CStr(CInt(Slider1.Value)) 
    End Sub 
 
    Private Sub Slider1_MouseLeftButtonDown(sender As System.Object, e As System.Windows.Input.MouseButtonEventArgs) Handles Slider1.MouseLeftButtonDown 
        TextBox1.Visibility = Windows.Visibility.Visible 
    End Sub 
 
    Private Sub Slider1_MouseLeftButtonUp(ByVal sender As Object, ByVal e As System.Windows.Input.MouseButtonEventArgs) Handles Slider1.MouseLeftButtonUp 
        TextBox1.Visibility = Windows.Visibility.Collapsed 
    End Sub  
End Class 
 
 
 

実行結果

実行結果は、図 1 のようになります。

図 1

図 1 サンプルの実行結果。

以上は、Slider の値を、ボリュームの値を表示するために利用する方法です。

Slider の値と、メディアのボリュームの値を連動させたい場合は、次のように、XAML 内で、 ElementName に MediaElement の名前を、 Path に Volume を指定して、Mode に TwoWay を指定してBinding し、音量を双方向に同期させる方法もあります。

XAML
<Slider Name="Slider1" ~ビジュアル・プロパティ略~Value="{Binding Path=Volume, Mode=TwoWay, ElementName=MediaElement1}" Maximum="1" SmallChange="0.1" LargeChange="0.25" /> 
 
 

この場合、Slider の値は MediaElement と同様、0.1 ~ 1 の範囲になりますので、TextBox の Top マージン計算の際には 100 を乗算します。

関連リンク


Code Recipe Code Recipe

 

ページのトップへ