（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>
