设计silverlight的MediaPlay控件--silverlight(银光)学习3

 大家都知道silverlight里用了获得艾美奖的新的视频编解码技术。视频质量无论从移动设备还是桌面浏览器都可以达到720p HDTV video模式。如果能用silverlight技术设计一个视频网站估计客户体验很不错的。
      那我们就开始做一个最简单的MediaPlayer控件，能动态的传入视频的URI参数，还能控制视频的播放。
      在上次我们建的silverlight控件类库项目里添加一个新的silverlight控件----MediaPlayControl.xaml.
      做一个媒体播放器，难就难在界面设计上。如果要设计的简陋话，只需要在xaml文件里放上一个MediaElement和几个TextBlock就可以了，不过这样实在太丑陋了。我就用了Microsoft  Expression Encoder 里面媒体播放器的界面，效果如下：

中间带摄像机图标的就是MediaElement ，几个按钮是由Canvas组成的。代码过长，请下载该文件
/Files/wangergo/MediaPlayControl.rar

那么如何控制视频的播放呢，这主要跟MediaElement有关系。
MediaElement有一个重要的属性是Source，它是指所要播放的媒体文件的Uri，也就是媒体文件的地址。
                      还有几个重要方法：Pause--暂停播放,Play--播放,Stop--停止.
xaml文件对应的.cs文件代码如下:

 1

/**/ /// <summary>
 2

    /// Desc:媒体播放器控件
 3

    /// Author:williams
 4

    /// Date:2007-9-27
 5

    /// </summary>
 6

     public   class  MediaPlayControl : Control
 7

    

{
 8

    
 9

         私有变量#region 私有变量
10

             private FrameworkElement parentControl;
11

             private Canvas timeline;
12

             private Canvas playButton;
13

             private Canvas pauseButton;
14

             private Canvas stopButton;
15

             private MediaElement videoWindow;
16

             private string mediaUrl="";
17

         #endregion
18

         
19

         公有属性#region 公有属性
20

           public string MediaUrl
21

           

{
22

                get

{return this.mediaUrl;}
23

               set
24

               

{
25

                   this.mediaUrl = value;
26

                   Uri url = new Uri(this.mediaUrl, UriKind.Relative);
27

                   this.videoWindow.source = url;
28

               }
29

           }
30

         #endregion
31

         
32

         构造函数#region 构造函数
33

        public MediaPlayControl()    
34

        

{
35

            System.IO.Stream s = this.GetType().Assembly.GetManifestResourceStream("SilverControls.MediaPlayControl.xaml");
36

            parentControl =  this.InitializefromXaml(new System.IO.StreamReader(s).ReadToEnd());
37

            this.playButton = parentControl.FindName("PlayButton") as Canvas;
38

            this.pauseButton = parentControl.FindName("PauseButton") as Canvas;
39

            this.stopButton = parentControl.FindName("StopButton") as Canvas;
40

            this.videoWindow = parentControl.FindName("VideoWindow") as MediaElement;
41

42

            this.playButton.MouseLeftButtonUp += new MouseEventHandler(playButton_MouseLeftButtonUp);
43

            this.stopButton.MouseLeftButtonUp += new MouseEventHandler(stopButton_MouseLeftButtonUp);
44

            this.pauseButton.MouseLeftButtonUp += new MouseEventHandler(pauseButton_MouseLeftButtonUp);
45

            
46

        }
47

48

        void pauseButton_MouseLeftButtonUp(object sender, MouseEventArgs e)
49

        

{
50

            this.videoWindow.Pause();
51

        }
52

53

        void stopButton_MouseLeftButtonUp(object sender, MouseEventArgs e)
54

        

{
55

           this.videoWindow.Stop();
56

        }
57

58

        void playButton_MouseLeftButtonUp(object sender, MouseEventArgs e)
59

        

{
60

            this.Play();
61

        } 
62

     #endregion
63

     
64

         公有方法#region 公有方法
65

        public void Play()
66

        

{
67

            if(this.mediaUrl!=string.Empty)
68

            

{
69

                 
70

                 this.videoWindow.Play();
71

            }
72

        }
73

     #endregion
74

    }

然后我们在上次建的silverlight项目里的page.xaml.cs文件的page_loaded事件里调用我们做的控件。

 1

  public   void  Page_Loaded( object  o, EventArgs e)
 2

        

{
 3

            // required to initialize variables
 4

            InitializeComponent();
 5

            
 6

            double top = 100;
 7

            
 8

            double left = 20;
 9

            
10

            MediaPlayControl media = new MediaPlayControl();
11

12

           media.MediaUrl = "wow.wmv";
13

14

            media.SetValue<double>(Canvas.TopProperty, top);
15

16

            media.SetValue<double>(Canvas.LeftProperty, left);
17

          
18

            this.Children.Add(media);
19

}

具体silverlight控件库和silverlight项目如何建，请看
设计一个silverlight的Button控件--silverlight(闪光)学习（1）



   本文版权属于 www.80back.com，williams所有，转载请注明出处。