Win10系列：VC++媒体播放控制4

（7）音量控制

MediaElement控件具有一个Volume属性，通过设置此属性的值可以改变视频音量的大小。接下来介绍如何实现视频的音量控制，首先打开MainPage.xaml文件，并在Grid元素中原有代码的基础上继续添加如下的代码：

<TextBlock Margin="543,12,0,0" FontSize="15" HorizontalAlignment="Left" Text="音量：" Width="48"/>

<Slider x:Name="VolumeBar" Minimum="0" Maximum="100" HorizontalAlignment="Left" VerticalAlignment="Top" Width="260" Margin="596,0,0,0" Height="40" ValueChanged="VolumeBarChange"/>

在上面的代码中，添加了一个TextBlock控件和一个名为"VolumeBar"的Slider控件，其中Slider控件用于表示一个音量控制条。通过将Slider控件的Minimum属性和Maximum属性分别赋值为0和100，来将音量控制条的音量范围设置在0~100之间。

添加了上述的代码以后，接下来为Slider控件的ValueChanged事件添加事件处理函数VolumeBarChange。打开MainPage.xaml.h头文件，并添加如下的代码，用来声明VolumeBarChange函数。

private:

    //当改变音量控制条时改变视频的音量大小

    void VolumeBarChange(Platform::Object^ sender,Windows::UI::Xaml::Controls::Primitives::RangeBaseValueChangedEventArgs^ e);

声明了VolumeBarChange函数以后，接着在MainPage.xaml.cpp源文件中添加VolumeBarChange函数的实现代码，具体代码如下所示：

//当改变音量控制条时改变视频的音量大小

void FileDemo::MainPage::VolumeBarChange(Platform::Object^ sender,Windows::UI::Xaml::Controls::Primitives::RangeBaseValueChangedEventArgs^ e)

{

    //改变视频的音量

    Video->Volume = (VolumeBar->Value)/100;

}

在上面的代码中，将Slider控件的Value属性除以100所得到的值赋给MediaElement控件中的Volume属性，从而改变MediaElement控件中视频的音量。

添加音量控制条后，前台界面的显示效果如图20-14所示。

图20-14音量控制条

（8） 添加全屏按钮

实现了视频音量控制之后，接下来实现视频的全屏播放。首先布局前台界面，打开MainPage.xaml文件，并在Grid元素中添加一个"全屏"按钮，用于全屏播放MediaElement控件中的视频，代码如下所示：

<Button x:Name="FullScreenButton" Click="FullScreenClick" HorizontalAlignment="Left" Margin="10,0,10,0" Content="全屏" Grid.Column="5"></Button>

添加了"全屏"按钮以后，前台界面的显示效果如图20-15所示，此按钮显示在"快退"按钮之后。

图20-15全屏按钮

布局了前台界面以后，接下来实现视频的全屏播放功能。打开MainPage.xaml.h头文件，添加如下代码：

private:

    bool isFullScreen;

private:

    //设置视频全屏播放

    void FullScreenClick(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e);

在上面的代码中，使用private关键字声明一个bool类型的私有成员变量isFullScreen，用于表示视频的播放模式是否为全屏播放模式。然后使用private关键字声明一个私有的FullScreenClick函数，用于全屏播放视频。

添加了上述的代码以后，接着在MainPage.xaml.cpp源文件中添加FullScreenClick函数的实现代码，具体代码如下所示：

//设置视频全屏播放

void FileDemo::MainPage::FullScreenClick(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)

{

    //设置全屏模式为true

    isFullScreen = true;

    //根据isFullScreen变量改变视频播放窗口的大小

    FullscreenToggle(isFullScreen);

}

在上述的代码中，将isFullScreen变量赋值为true，表示视频的播放模式为全屏播放模式。然后调用FullscreenToggle函数，此函数根据isFullScreen变量的值改变MediaElement控件的大小。

添加了FullScreenClick函数的实现代码以后，接下来在MainPage.xaml.h头文件中添加如下的代码：

private:

    Windows::Foundation::Size previousVideoContainerSize;

private:

    //根据isFullScreen改变视频窗口的全屏模式

    void FullscreenToggle(bool isFullScreen);

在上面的代码中，使用private关键字声明一个Size类型的私有成员变量previousVideoContainerSize，用来保存MediaElement控件的原始大小。然后使用private关键字声明一个私有的FullscreenToggle函数。

声明了FullscreenToggle函数以后，接着在MainPage.xaml.cpp源文件中添加FullscreenToggle函数的实现代码，具体代码如下所示：

//根据isFullScreen改变视频播放窗口的大小

void FileDemo::MainPage::FullscreenToggle(bool isFullScreen)

{

    if(isFullScreen)

    {

        //记录当前MediaElement控件的大小

        previousVideoContainerSize.Width = Video->Width;

        previousVideoContainerSize.Height = Video->Height;

        //将MediaElement控件的大小设置为当前应用窗口的大小

        Video->Width = Window::Current->Bounds.Width;

        Video->Height = Window::Current->Bounds.Height;

    }

    else

    {

        //恢复视频窗口的原始大小

        Video->Width = previousVideoContainerSize.Width;

        Video->Height = previousVideoContainerSize.Height;

    }

}

在上面的代码中，首先判断FullscreenToggle函数的参数isFullScreen是否为true，如果参数isFullScreen为true，则将当前MediaElement控件的Width属性值和Height属性值分别赋给previousVideoContainerSize变量的Width属性和Height属性，以便将其保存。然后将应用窗口的Width属性值和Height属性值赋给MediaElement控件的Width属性和Height属性，从而实现视频的全屏播放。

如果参数isFullScreen为false，则将previousVideoContainerSize变量的Width属性值和Height属性值赋给MediaElement控件的Width属性和Height属性，从而使视频退出全屏播放。

前面只实现了全屏播放的功能，接下来实现通过按下Esc键来退出视频的全屏播放。在MainPage.xaml文件中，指定Grid元素的KeyUp事件处理函数为VideoKeyUp，代码如下所示：

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}" KeyUp="VideoKeyUp">

接下来在MainPage.xaml.h头文件中添加如下代码，用于声明VideoKeyUp函数。

private:

    //退出视频的全屏播放

    void VideoKeyUp(Platform::Object^ sender, Windows::UI::Xaml::Input::KeyRoutedEventArgs ^ e);

声明了VideoKeyUp函数以后，在MainPage.xaml.cpp源文件中添加VideoKeyUp函数的实现代码，具体代码如下所示：

//当按下Esc键时退出全屏模式

void FileDemo::MainPage::VideoKeyUp(Platform::Object^ sender, Windows::UI::Xaml::Input::KeyRoutedEventArgs ^ e)

{

    //当全屏模式下才执行函数

    if(isFullScreen && e->Key == Windows::System::VirtualKey::Escape)

    {

        //设置全屏模式为false

        isFullScreen = false;

        FullscreenToggle(isFullScreen);    

    }

}

在VideoKeyUp函数中首先对isFullScreen变量和按下的键进行判断，如果isFullScreen变量为true且在键盘中按下的键为"Esc"时，将isFullScreen变量赋值为false，并以此变量作为参数调用FullscreenToggle函数来退出视频的全屏播放。

（9）完整前台代码

本部分将给出MainPage.xaml文件中完整的前台代码，由于在前面的部分已经对此代码中所包含的控件进行了详细的介绍，这里将不再赘述，读者可参照这些代码来进行前台界面的布局。在MainPage.xaml文件中用于前台布局的代码如下所示：

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}" KeyUp="VideoKeyUp">

<StackPanel>

<Grid>

<StackPanel>

<Button x:Name="FileButton" Content="打开文件" FontSize="20" Margin="114,30,0,0" Click="FileButtonClick" Width="113" Height="53"></Button>

<MediaElement x:Name="Video" HorizontalAlignment="Left" Height="400" Margin="114,10,0,0" VerticalAlignment="Top" Width="780" AutoPlay="False"/>

</StackPanel>

</Grid>

<Grid>

<StackPanel x:Name="TransportControlsPanel">

<Grid>

<TextBlock x:Name="VideoState" Margin="114,13,0,0" FontSize="15" HorizontalAlignment="Left" Text="播放状态："></TextBlock>

<TextBlock Margin="543,12,0,0" FontSize="15" HorizontalAlignment="Left" Text="音量：" Width="48"/>

<Slider x:Name="VolumeBar" Minimum="0" Maximum="100" HorizontalAlignment="Left" VerticalAlignment="Top" Width="260" Margin="596,0,0,0" Height="40" ValueChanged="VolumeBarChange"/>

</Grid>

<Slider x:Name="VideoSlider" HorizontalAlignment="Left" Height="40" Margin="114,0,0,0" VerticalAlignment="Top" Width="780" ValueChanged="SliderValueChanged"></Slider>

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto"/>

<ColumnDefinition Width="Auto"/>

<ColumnDefinition Width="Auto"/>

<ColumnDefinition Width="Auto"/>

<ColumnDefinition Width="Auto"/>

<ColumnDefinition Width="Auto"/>

</Grid.ColumnDefinitions>

<Button x:Name="PlayButton" Click="PlayClick" HorizontalAlignment="Left" Margin="114,0,10,0" Content="播放" Grid.Column="0"></Button>

<Button x:Name="PauseButton" Click="PauseClick" HorizontalAlignment="Left" Margin="10,0,10,0" Content="暂停" Grid.Column="1"></Button>

<Button x:Name="StopButton" Click="StopClick" HorizontalAlignment="Left" Margin="10,0,10,0" Content="停止" Grid.Column="2"></Button>

<Button x:Name="ForwardButton" Click="ForwardClick" HorizontalAlignment="Left" Margin="10,0,10,0" Content="快进" Grid.Column="3"></Button>

<Button x:Name="BackwardButton" Click="BackwardClick" HorizontalAlignment="Left" Margin="10,0,10,0" Content="快退" Grid.Column="4"></Button>

<Button x:Name="FullScreenButton" Click="FullScreenClick" HorizontalAlignment="Left" Margin="10,0,10,0" Content="全屏" Grid.Column="5"></Button>

</Grid>

</StackPanel>

</Grid>

</StackPanel>

</Grid>