天天看點

【Win 10應用開發】實作全屏播放的方法

有人會問,以前的MediaElement控件不是有現成的一排操作按鈕嗎?而且可以直接進入全屏播放。是的,我們知道,以往的Store App都是在全屏模式下運作的,隻要MediaElement控件填滿整個視窗,就等于全屏播放了,但是,Win10應用是視窗化的,将MediaElement控件的IsFullWindow屬性設定為true後,就會這樣:

【Win 10應用開發】實作全屏播放的方法

從上面的截圖看,MediaElement控件隻是覆寫整個視窗而已,并沒有實作全屏。那有辦法讓它全屏播放嗎?

老周既然寫部落格了,當然是有的了。其實,SDK是公開了允許應用程式全屏的API,就像Win8/8.1應用那樣。在Windows.UI.ViewManagement命名空間下,提供了與應用程式視圖管理有關的類型,其中有一個類叫ApplicationView,類如其名,你看它的名字就知道它是幹嗎的了,是呀,就是管理應用視圖呗。

ApplicationView類有兩個方法比較好玩:

TryEnterFullScreenMode:猜到它的用途沒有?

ExitFullScreenMode:調用後退出全屏模式。

OK,知道了有這麼個家夥後,大概有思路了:當MediaElement控件鋪滿視窗時調用TryEnterFullScreenMode方法,全屏;反過來,當MediaElement控件還原時就用ExitFullScreenMode方法退出全屏。即:

當MediaElement.IsFullWindow == true時,TryEnterFullScreenMode;

當MediaElement.IsFullWindow == false時,ExitFullScreenMode。

原理就是這樣,至于如何實作法嘛,仁者見仁,你喜歡怎麼弄都行,達到預期效果就OK。

老周的方法是通過依賴項屬性之間的雙向綁定完成的。

首先在包含MediaElement控件的頁面類或者自定義容器類上聲明一個依賴項屬性IsFullScreen:

OnIsFullScreenPropertyChanged方法是用來響應屬性更改的,在這個方法裡面,判斷屬性的值,如果true,就進入全屏;否則退出全屏。

屬性是弄好了,那如何與MediaElement的IsFullWindow屬性關聯呢?IsFullWindow屬性也是依賴項屬性,依賴項屬性之間可以直接完成雙向綁定,這就是剛才要把IsFullScreen屬性定義為依賴項屬性的原因。

在XAML文檔中,隻要把IsFullScreen與IsFullWindow綁定即可。

thePage是目前頁面執行個體的命名。

因為剛才我的IsFullScreen屬性就是在MainPage頁面類中定義的。

如此一來,隻要IsFullWindow屬性發生變化,IsFullScreen屬性就會跟着變,然後就可以進入/退出全屏了。

咱們來看看結果。

剛運作時,非全屏,效果如下圖:

【Win 10應用開發】實作全屏播放的方法

然後點選MediaElement控件的全屏按鈕,進入全屏播放,如下圖:

【Win 10應用開發】實作全屏播放的方法

怎麼樣,達到效果了吧?

示例源代碼下載下傳:http://files.cnblogs.com/files/tcjiaan/FullScreenApp.zip