執筆者: セイザインデザイン、PROJECT KySS 薬師寺 聖

動作確認環境: Visual Studio 2010、Silverlight 4、Windows 7 Professional (32 bit)


MediaElement で再生されるメディアを、フルスクリーン表示します。ソリューション名は、"SL4_ fullScreen" としています。

デザイナ画面で、グリッドに行を追加し、各行の高さに、それぞれ "1*" と "Auto" を指定します。上の行には名前 "MediaRow" を設定し、メディア再生用の MediaElement コントロールを配置します。ここで、MediaElement の Source プロパティにはメディアの配置されている URI を指定します。

下の行には Button コントロールを配置します。Content は「フルスクリーン表示」としておきます。

[XAML] MediaElement、Button を配置する (ainPage.xaml)

XAML
<UserControl x:Class="SL4_fullScreen.MainPage"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> 
 
    <Grid x:Name="LayoutRoot" Background="White" Width="400" Height="300" HorizontalAlignment="Left" VerticalAlignment="Top"> 
        <Grid.RowDefinitions> 
            <RowDefinition Height="1*" x:Name="MediaRow" /> 
            <RowDefinition Height="Auto" /> 
        </Grid.RowDefinitions> 
        <MediaElement Name="MediaElement1" Source="任意のメディアファイルを指す URI" Grid.Row="0" HorizontalAlignment="Left" VerticalAlignment="Top"/> 
        <Button Content="フルスクリーン表示" Margin="10" Height="30" Name="Button1" Grid.Row="1" HorizontalAlignment="Left" VerticalAlignment="Top" /> 
    </Grid>  
</UserControl> 
 
 
 

コードビハインドでは Silverlight コンテンツ領域を制御するため、System.Windows.Interop 名前空間をインポートします。

Application.Current プロパティで現在の Application オブジェクトを指定し、Host. Content で Silverlight コンテンツ領域の情報を取得します。

「フルスクリーン表示」ボタンがクリックされた時、IsFullScreen プロパティに True を指定して、メディアをフルスクリーン表示します。フルスクリーン表示された場合、またはエスケープ ボタンなどによってフルスクリーンが解除された場合に呼び出される FullScreenChanged イベントを ScreenResize イベント ハンドラで処理します。

ScreenResize イベント ハンドラ内で、フルスクリーン表示であるかを判定し、フルスクリーン時にはボタンを非表示にし、メディアを保持している MediaRow の高さを、余白全体を利用する GridLength (1, GridUnitType.Star) に拡大します (XAML での記述では Height="*" に相当)。これにより縦横比を維持したままメディアが画面全体の中央に拡大表示されます。

フルスクリーン表示でない時は、ボタンを再表示し、グリッド レイアウトを元に戻します。

[VB] コード ビハインド (MainPage.xaml.vb)

Visual Basic
Option Strict On 
Imports System.Windows.Interop 
Partial Public Class MainPage 
    Inherits UserControl 
 
    Public Sub New() 
        InitializeComponent() 
    End Sub 
 
    Dim myContent As Content = Application.Current.Host.Content 
    Dim OriginalHeight, OriginalWidth As Double 
 
    Private Sub MainPage_Loaded(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles Me.Loaded 
        OriginalHeight = LayoutRoot.Height 
        OriginalWidth = LayoutRoot.Width 
    End Sub 
 
    Private Sub Button1_Click(ByVal sender As Object, ByVal e As System.Windows.RoutedEventArgs) Handles Button1.Click 
        myContent.IsFullScreen = True 
        AddHandler myContent.FullScreenChanged, AddressOf Me.ScreenResize 
    End Sub 
 
    Private Sub ScreenResize(ByVal sender As Object, ByVal e As EventArgs) 
        If myContent.IsFullScreen = True Then 
            LayoutRoot.Height = Double.NaN  
            LayoutRoot.Width = Double.NaN 
            LayoutRoot.HorizontalAlignment = Windows.HorizontalAlignment.Center 
            LayoutRoot.VerticalAlignment = Windows.VerticalAlignment.Center 
            MediaRow.Height = New GridLength(1, GridUnitType.Star) 
            Button1.Visibility = Windows.Visibility.Collapsed 
        Else 
            LayoutRoot.Height = OriginalHeight  
            LayoutRoot.Width = OriginalWidth 
            LayoutRoot.HorizontalAlignment = Windows.HorizontalAlignment.Left 
            LayoutRoot.VerticalAlignment = Windows.VerticalAlignment.Top 
            Dim MediaRowHeight As Double = LayoutRoot.Height - Button1.Height - Button1.Margin.Top 
            MediaRow.Height = New GridLength(MediaRowHeight) 
            Button1.Visibility = Windows.Visibility.Visible 
        End If 
    End Sub 
 
End Class 
 
 
 

実行結果

実行結果は、図 1 (SL4_fullScreen_fig_1.png) のようになります。

図 1 サンプルの実行結果のイメージ。

関連リンク


Code Recipe Code Recipe

 

ページのトップへ