Silverlight播放器MediaElement全屏问题

在Silverlight开发中我们可能需要自定义开发一个播放器来满足自己的需要，其中一个重要的功能是双击播放器界面能够全屏，这里做了一个功能使得播放器能够全屏。

首先，我们新建一个Silverlight项目，并拖一个MediaElement控件和一个辅助的按钮到设计界面上。

为了演示双击产生的全屏效果，这里采用了简单的双击计算进行判断两次单击时间。silverlight本身也提供了将应用程序全屏的方法，

Application.Current.Host.Content.IsFullScreen：

 
List<INT> list = new List<INT>(); 
 
        private void mediaElement1_MouseLeftButtonUp(object sender,MouseButtonEventArgs e) 
 
        { 
 
            if (list.Count == 0) 
 
            { 
 
                list.Add(DateTime.Now.Second); 
 
            } 
 
            else
 
            { 
 
                if (list.Count == 1) 
 
                { 
 
                    if (((int)list[0]) == DateTime.Now.Second) 
 
                    { 
 
                        _scale = !Application.Current.Host.Content.IsFullScreen; 
 
                        Application.Current.Host.Content.IsFullScreen = !Application.Current.Host.Content.IsFullScreen;  
 
                    } 
 
                    list.Clear(); 
 
                } 
 
            } 
 
        }</INT></INT>

按照上面的方法可以全屏，但是全屏后是整个APP的全屏，并非针对某一个控件的全屏，怎样针对某一个控件比如MediaElement进行全屏呢，这里使用了Silverlight中的一个放大的功能，ScaleTransform是一个可以将控件方法的样式组件。

<SCALETRANSFORM scalex="1" scaley="1" x:name="Scale"></SCALETRANSFORM>

当ScaleX="1" ScaleY="1"时，是按照原图显示，当ScaleX="0.5" ScaleY="0.5"时将控件缩放一倍。

于是我们通过这个功能来实现将某一个控件放大到屏幕的大小即可，当然，其他的控件可以选择隐藏或者替换。

先定义出MediaElement的控件大小及是否已经全屏：

 
private static double APP_WIDTH = 352;  @H_502_545@// Application Width 
 
        private static double APP_HEIGHT = 256; @H_502_545@// Application Height 
 
        private bool _scale = false;            @H_502_545@// _scale flag 
 
在构造函数中定义当APP全屏的事件：

 
        public Styletest() 
 
        { 
 
            InitializeComponent(); 
 
            Application.Current.Host.Content.Resized += new EventHandler(Content_Resized); 
 
            Application.Current.Host.Content.FullScreenChanged += new EventHandler(Content_Resized);         
 
        } 
 
当窗体变化时可以将控件的放大倍数计算出来，进而放大MediaElement

 
void Content_Resized(object sender,EventArgs e) 
 
{  
      
    double currentWidth = Application.Current.Host.Content.ActualWidth; 
 
    double currentHeight = Application.Current.Host.Content.ActualHeight; 
 
    if (_scale) 
 
    { 
 
        @H_502_545@// Scale up the Canvas  
 
        Scale.ScaleX = currentWidth / APP_WIDTH; 
 
        Scale.ScaleY = currentHeight / APP_HEIGHT; 
 
    } 
 
    else
 
    { 
 
        @H_502_545@// position the Canvas to the center  
 
        Scale.ScaleX = 1; 
 
        Scale.ScaleY = 1; 
 
    } 
 
}  
      
private void btn_Click(object sender,RoutedEventArgs e) 
 
{  
      
    _scale = !Application.Current.Host.Content.IsFullScreen; 
 
    Application.Current.Host.Content.IsFullScreen = !Application.Current.Host.Content.IsFullScreen;          
 
}

全屏前的效果：

全屏后的效果：

源代码：http://files.cnblogs.com/wengyuli/SilverlightFullScreen.rar

Silverlight播放器MediaElement全屏问题

相关推荐