本文主要是在学习MediaElement的过程中的心得，比如怎么为自定义控件增加绑定属性，怎么为绑定的MediaElement增加Event的响应，PathGeometry的使用， 利用StoryBoard对MediaElement移动进行控制。
在xml中添加Style
<Style x:Key="MediaStyle" TargetType="MediaElement"> <Setter Property="LoadedBehavior" Value="Manual"></Setter> <EventSetter Event="MouseDown" Handler="ME_MouseDown"></EventSetter> <EventSetter Event="MediaEnded" Handler="ME_MediaEnded"></EventSetter> </Style>添加播放器的移动路径以及相关的story
<PathGeometry x:Key="PG"> <PathFigure StartPoint="-100,0"> <LineSegment Point="50,0"></LineSegment> <ArcSegment Point="50,100" RotationAngle="91" IsLargeArc="False" SweepDirection="Clockwise" Size="50,50"></ArcSegment> <BezierSegment Point1="6,109" Point2="50,170" Point3="60,190"></BezierSegment> </PathFigure> </PathGeometry> <Storyboard x:Key="KeySB" AutoReverse="True" RepeatBehavior="Forever"> <DoubleAnimationUsingPath Storyboard.TargetName="TT" Storyboard.TargetProperty="X" Source="X" PathGeometry="{StaticResource PG}" Duration="0:0:15"></DoubleAnimationUsingPath> <DoubleAnimationUsingPath Storyboard.TargetName="TT" Storyboard.TargetProperty="Y" Source="Y" PathGeometry="{StaticResource PG}" Duration="0:0:15"></DoubleAnimationUsingPath> </Storyboard> 添加MediaElement 控件 <MediaElement Width="100" Height="100" x:Name="ME" Style="{StaticResource MediaStyle}" Margin="-106,0,302,189" RenderTransformOrigin="0.5,0.5" MouseEnter="img_MouseEnter" MouseLeave="img_MouseLeave" Volume="0"> <MediaElement.RenderTransform> <TransformGroup> <TranslateTransform x:Name="TT" /> </TransformGroup> </MediaElement.RenderTransform> </MediaElement>
添加Trigger
<EventTrigger RoutedEvent="MediaElement.MediaOpened" SourceName="ME"> <BeginStoryboard Storyboard="{StaticResource KeySB}"></BeginStoryboard> </EventTrigger> 在.cs文件中添加如下代码 public partial class VideoPlayer : UserControl { public static DependencyProperty VideoSourceDP = DependencyProperty.Register("VideoSource", typeof(ObservableCollection<string>), typeof(VideoPlayer), new PropertyMetadata(new ObservableCollection<string>(), new PropertyChangedCallback(VideoSourceChanged))); public ObservableCollection<string> VideoSource { get { return GetValue(VideoSourceDP) as ObservableCollection<string>; } set { SetValue(VideoSourceDP, value); } } public int BeginIndex { get; set; } public VideoPlayer() { InitializeComponent(); } #region virtul function public virtual void VideoSourceChanged(DependencyPropertyChangedEventArgs e) { var newSourceFile = e.NewValue as ObservableCollection<string>; if (newSourceFile == null) return; var old = e.OldValue as ObservableCollection<string>; if(old != null) old.CollectionChanged -= Items_CollectionChanged; var newvalue = e.NewValue as ObservableCollection<string>; if (newvalue != null) newvalue.CollectionChanged += Items_CollectionChanged; if (newSourceFile.Count == 0) { //ME.Stop(); //ME.Source = null; } else { if (BeginIndex >= newSourceFile.Count) BeginIndex = 0; ME.Source = new Uri(newSourceFile[BeginIndex]); ME.Play(); } } void Items_CollectionChanged(object sender, NotifyCollectionChangedEventArgs e) { if (ME.Source == null) { if(VideoSource.Count > 0) { BeginIndex = 0; ME.Source = new Uri(VideoSource[BeginIndex]); ME.Play(); } } else { if(VideoSource.Count == 0) { ME.Stop(); ME.Source = null; } } } #endregion #region static dependency property public static void VideoSourceChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { var obj = d as VideoPlayer; if (obj == null) return; obj.VideoSourceChanged(e); } #endregion #region event bool bPause = false; private void ME_MouseDown(object sender, MouseButtonEventArgs e) { if(sender == ME) { if (!bPause) ME.Pause(); else ME.Play(); bPause = !bPause; } } #endregion private void ME_MediaEnded(object sender, RoutedEventArgs e) { if(sender == ME) { BeginIndex++; if (BeginIndex >= VideoSource.Count) BeginIndex = 0; ME.Source = new Uri(VideoSource[BeginIndex]); } } }
