WPF篇（15）-Expander折叠控件+MediaElement媒体播放器

Expander折叠控件

Expander也是一个内容控件，它有一个标题属性和内容属性。

Expander类的定义

public class Expander : HeaderedContentControl
{
    public static readonly DependencyProperty ExpandDirectionProperty;
    public static readonly DependencyProperty IsExpandedProperty;
    public static readonly RoutedEvent ExpandedEvent;
    public static readonly RoutedEvent CollapsedEvent;
 
    public Expander();
 
    public ExpandDirection ExpandDirection { get; set; }
    public bool IsExpanded { get; set; }
 
    public event RoutedEventHandler Expanded;
    public event RoutedEventHandler Collapsed;
 
    public override void OnApplyTemplate();
    protected virtual void OnCollapsed();
    protected override AutomationPeer OnCreateAutomationPeer();
    protected virtual void OnExpanded();
 
}

Expander自身只提供了两个属性，分别是ExpandDirection和IsExpanded。

ExpandDirection属性定义了Expander的内容在打开时的方向。它是一个枚举值，分别有Down、Up、Left和Right四个方向，默认方向为Down。

IsExpanded属性用来获取或设置内容窗口是否可见。比如在后端代码中，将这个属性赋值true，意味着展开Expander。

它还有两个事件成员，分别是Expanded和Collapsed，也就是其内容在展开和隐藏时触发。

Expander示例

前端代码

<StackPanel Margin="15">
        <TextBlock Text="控件课程"/>
        <Expander Header="Button控件" 
                  ExpandDirection="Down" 
                  Expanded="Expander_Expanded" 
                  Collapsed="Expander_Collapsed">
            <Grid Background="#FFE5E5E5">
                <TextBlock TextWrapping="Wrap" Padding="10">
                    表示 Windows 按钮控件，该按钮对 Click 事件做出反应。
                    Button类 直接从 System.Windows.Controls.Primitives.ButtonBase 类继承。
                    Button是内容模型ContentControl的子类。ContentControl内容属性为 Content。
                    在用户单击 Button时做出响应的事件叫ButtonBase.Click 。                    
                </TextBlock>
            </Grid>
        </Expander>
        <Expander Header="TextBox控件" ExpandDirection="Left">
            <Grid Background="#FFE5E5E5">
                <TextBlock TextWrapping="Wrap" Padding="10">
                    TextBox控件是WPF的文本输入控件，使用户输入录入系统数据的入口之一。
                    有了此控件，用户可以将数据按照软件的流程录入进去。它允许用户输入一行或多行数据。
                </TextBlock>
            </Grid>
        </Expander>
        <Expander Header="ListBox控件" ExpandDirection="Right">
            <Grid Background="#FFE5E5E5">
                <TextBlock TextWrapping="Wrap" Padding="10">
                    ListBox控件继承自ContentControl类，是一个容器类的控件，
                    向ListBox控件中包含ListBoxItem元素向容器中添加成分，
                    也可以添加其他任意的控件。
                </TextBlock>
            </Grid>
        </Expander>
    </StackPanel>

后端代码

 public partial class MainWindow
    {
        public MainWindow()
        {
            InitializeComponent();
        }
        
        private void Expander_Expanded(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("Expander展开");
        }
 
        private void Expander_Collapsed(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("Expander隐藏");
 
        }
    }

在这里插入图片描述

MediaElement媒体播放器

MediaElement，一个可以播放音频或视频的控件，继承于FrameworkElement基类。MediaElement包含了常见的音频或视频格式，如果需要更强大的功能，可以考虑使用VLC库。

说明：
MediaElement 可以在两种不同的模式下使用，具体取决于驱动控件的内容：独立模式或时钟模式。在独立模式下使用时， MediaElement 类似于图像， Source 可以直接指定 URI。在时钟模式下， MediaElement 可以将视为动画的目标，因此它将在计时树中具有相应的 Timeline 和 Clock 条目。

属性说明

LoadedBehavior：获取或设置加载媒体的行为，如果加载希望手动控制播放，请设置为Manual。
CanPause：获取一个值，该值指示是否可以暂停媒体。
IsBuffering：获取一个值，该值指示是否缓冲媒体。
DownloadProgress：获取一个百分比值，该值为位于远程服务器上的内容完成的下载量。
BufferingProgress：获取一个值，该值指示缓冲进度的百分比。0-1之间
NaturalVideoHeight：获取与媒体关联的视频的高度。
NaturalDuration：获取介质的自然持续时间。也就是视频播放总时长。
HasAudio：获取一个值，该值指示媒体是否具有音频。
HasVideo：获取一个值，该值指示媒体是否具有视频。
Position：通过媒体的播放时间获取或设置进度的当前位置。
SpeedRatio：获取或设置媒体的速率。也就是按几倍播放视频。
UnloadedBehavior：获取或设置卸载媒体的行为。
NaturalVideoWidth：获取与媒体关联的视频的宽度。
ScrubbingEnabled：获取或设置一个值，该值指示MediaElement 是否将更新帧的查找操作在暂停状态。
Clock：获取或设置MediaElement 媒体播放相关联的时钟。
Balance：获取或设置扬声器的音量比。
Volume：获取或设置媒体的音量。0-1之间，默认0.5
StretchDirection：获取或设置一个值，确定扩展的限制应用于映像。
Stretch：获取或设置MediaElement媒体的拉伸方式。
Source：获取或设置MediaElement媒体源[重点]
IsMuted：是否静音

事件成员

BufferingEnded：媒体缓冲结束时发生。
BufferingStarted：媒体缓冲开始时发生。
MediaOpened：媒体加载已完成时发生。
MediaFailed：遇到错误时发生。
MediaEnded：媒体结束时发生。
ScriptCommand：在媒体中遇到的脚本命令时发生。

MediaElement示例

我们以MediaElement的独立模式为例，开发一个基础版本的视频播放器，该项目将会用到MediaElement、Gird、Border、TextBlock、Button、Slider、ProgressBar等控件。

前端代码

 <Grid>
                <Grid.RowDefinitions>
                        <RowDefinition/>
                        <RowDefinition Height="auto"/>
                        <RowDefinition Height="auto"/>
                </Grid.RowDefinitions>
                <Grid>
                        <MediaElement x:Name="_MediaElement" LoadedBehavior="Manual" />
                        <Border x:Name="_Border" Background="Black">
                                <TextBlock x:Name="_TextBlock" Text="MediaElement | 媒体播放器" Foreground="LightCoral" FontSize="20"
                                           HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        </Border>
                </Grid>
        
                <StackPanel Orientation="Horizontal" Grid.Row="1">
                        <Button Content="打开" Width="60" Height="25" Margin="5" Click="OpenMedia"/>
                        <Button Content="播放" Width="60" Height="25" Margin="5" Click="PlayMedia"/>
                        <Button Content="停止" Width="60" Height="25" Margin="5" Click="StopMedia"/>
                        <Button Content="后退" Width="60" Height="25" Margin="5" Click="BackMedia"/>
                        <Button Content="前进" Width="60" Height="25" Margin="5" Click="ForwardMedia"/>
                        <TextBlock Text="音量" VerticalAlignment="Center" Margin="5"/>
                        <Slider x:Name="_Slider" Width="120" VerticalAlignment="Center" Maximum="100" Value="50" ValueChanged="_Slider_ValueChanged"/>
                </StackPanel>
 
                <Grid Grid.Row="2">
                        <ProgressBar x:Name="_ProgressBar" Height="10" Margin="5"/>
                </Grid>
        </Grid>

后端代码

public partial class MainWindow : Window
    {
        private string file = string.Empty;
        public MainWindow()
        {
            InitializeComponent();
 
            DispatcherTimer timer = new DispatcherTimer();
            timer.Interval = TimeSpan.FromMilliseconds(1000);
            timer.Tick += (s, e) =>
            {
                var ts = _MediaElement.Position;
                _ProgressBar.Value = ts.TotalMilliseconds;//更新当前播放进度
 
            };
            timer.Start();
        }
 
        private void OpenMedia(object sender, RoutedEventArgs e)
        {
            var openFileDialog = new Microsoft.Win32.OpenFileDialog()
            {
                Filter = "视频文件 (.mp4)|*.mp4",
                Multiselect = true
            };
            var result = openFileDialog.ShowDialog();
            if (result == true)
            {
                file = openFileDialog.FileName;
                _MediaElement.MediaOpened += _MediaElement_MediaOpened;
                _MediaElement.Source = new System.Uri(file);
                this.Title = file;
                _TextBlock.Text = file;
            }
        }
 
        private void _MediaElement_MediaOpened(object sender, RoutedEventArgs e)
        {
            if (_MediaElement.NaturalDuration.HasTimeSpan)
            {
                var ts = _MediaElement.NaturalDuration.TimeSpan;
                _ProgressBar.Maximum = ts.TotalMilliseconds;//设置播放进度条总长
            }
        }
 
        private void PlayMedia(object sender, RoutedEventArgs e)
        {
            _MediaElement.Play();//播放
            _Border.Visibility = Visibility.Collapsed;            
           
        }
 
        private void StopMedia(object sender, RoutedEventArgs e)
        {
            _MediaElement.Pause();//暂停
        }
 
        private void BackMedia(object sender, RoutedEventArgs e)
        {
            _MediaElement.Position = _MediaElement.Position - TimeSpan.FromSeconds(10);//快退10秒
        }
 
        private void ForwardMedia(object sender, RoutedEventArgs e)
        {
            _MediaElement.Position = _MediaElement.Position + TimeSpan.FromSeconds(10);//快进10秒
 
        }
 
        private void _Slider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            _MediaElement.Volume = _Slider.Value;//设置音量
        }
    }