WPF 超入門　〜レイアウト編その四「グリッド〜その参」

WPF 超入門 WPF .NET

まえがき

またまた今回もグリッドについて学びます。今回は単一セルに対して複数のコントロールを配置する場合を考えてみます。
グリッドは WindowsForms の TableLayoutPanel コントロール と違い、一つのセルに複数のコントロールを配置することが可能です。今回は簡単なメディアプレーヤーを作成し、その辺りを学習してみましょう。


簡易メディアプレーヤー

今回はメディアプレーヤーを作ります。いままで使ってきた「Layout」ソリューションにプロジェクトを追加します。名前は「Layout04」プロジェクトにします。プロジェクトを追加したら、スタートアッププロジェクトに設定してください。

次に Window を設定します。以下の表のとおりに設定してください。なお大きさは変更いたしません。

プロパティ 設定する値
Title MadiaPlayer
WindowStartupLocation CenterScreen


グリッドは何も設定しません。今回はそのままです。この段階で XAML は以下のようになってるはずです。

<Window x:Class="MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MediaPlayer" Height="350" Width="525" WindowStartupLocation="CenterScreen">
    <Grid>

    </Grid>
</Window>


次にコントロールを配置します。ツールボックスから MediaElement を Grid に配置し、プロパティを以下のように設定してください。

MediaElement1

プロパティ 設定する値
HorizontalAlignment Stretch
VerticalAlignment Stretch
Width Auto
Height Auto
Margin 0
UnloadedBehavior Manual
LoadedBehavior Manual


この MediaElement コントロール、動画再生機能がある、なかなか強力なコントロールのようです。WindowsForms にはこのようなコントロールはなかったので、かなり興味深いですね。ここまで書いて気がついたのですが、WindowsForms で動画再生する場合、通常 MediaPlayer の ActiveX を使うしかないのですが、WPF 相互運用機能を使えば、WPF で MediaElement を搭載したユーザーコントロールを作り、ElementHost を使って Form に表示するってことも可能みたいですね。


余談はさておき、次に Button コントロールを配置します。ツールボックスから Button を Grid に三つ配置し、以下の表のようにプロパティを設定してください。なお Button は下の表どおりに名前を変更して下さい。

btnPlay

プロパティ 設定する値
Content 開始
Height 23
Width 75
HorizontalAlignment Right
VerticalAlignment Bottom
Margin 0,0,174,12
Opacity 0.4

btnPause

プロパティ 設定する値
Content 一時停止
Height 23
Width 75
HorizontalAlignment Right
VerticalAlignment Bottom
Opacity 0.4

btnStop

プロパティ 設定する値
Content 停止
Height 23
Width 75
HorizontalAlignment Right
VerticalAlignment Bottom
Margin 0,0,12,12
Opacity 0.4


前回は Grid.Row・Grid.Column プロパティでコントロールのセルの位置を設定したのですが、今回はセルが一つのため、省略しても問題ありません。
また、Button の位置を決める Margin プロパティですが、先に HorizontalAlignment プロパティと VerticalAlignment プロパティを設定しないと位置がずれてしまうので、Margin は最後に設定するようにしてください。

ここまでの作業で、以下のように配置できたでしょうか？


ちなみに Button が MediaElement の上に配置されてますが、MediaElement にはコンテナオブジェクトの機能はありません。Button のコンテナオブジェクトはあくまで Grid です。そして同一セルに配置されたコントロールの表示順序は XAML の位置に依存します。

さて、この段階ではまだメディアの再生はできません。再生するには、動画を指定しなければなりませんね。この MediaElement、Windows Media Player で開ける動画なら再生できるみたいです。そこで適当な MPEG ファイルを指定してみます。Source プロパティにファイル名を指定するのですが、調べたところ、どうやら絶対パスでなきゃ駄目みたいですね。


最後に Button にイベントを設定します。三つのボタンをクリックすると、イベントハンドラが生成されますので、コードを以下のように記述します。

Class MainWindow 

    Private Sub btnPlay_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles btnPlay.Click
        MediaElement1.Play()
    End Sub

    Private Sub btnPause_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles btnPause.Click
        MediaElement1.Pause()
    End Sub

    Private Sub btnStop_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles btnStop.Click
        MediaElement1.Stop()
    End Sub

End Class


XAML は以下のようになります。

<Window x:Class="MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MediaPlayer" Height="350" Width="525" WindowStartupLocation="CenterScreen">
    <Grid>
        <MediaElement Name="MediaElement1" Margin="0" 
                      HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                      LoadedBehavior="Manual" UnloadedBehavior="Manual" 
                      Source="C:\Documents and Settings\user\My Documents\My Videos\hw_pre_640x480.mpg" />
        <Button Name="btnPlay" Content="開始" Height="23" Width="75" Margin="0,0,174,12" 
                HorizontalAlignment="Right" VerticalAlignment="Bottom" Opacity="0.4" />
        <Button Name="btnPause" Content="一時停止" Height="23" Width="75" Margin="0,0,93,12" 
                HorizontalAlignment="Right" VerticalAlignment="Bottom" Opacity="0.4" />
        <Button Name="btnStop" Content="停止" Height="23" Width="75" Margin="0,0,12,12" 
                HorizontalAlignment="Right" VerticalAlignment="Bottom" Opacity="0.4" />
    </Grid>
</Window>


では「F5」キーを押して実行してみましょう。「開始」「一時停止」「停止」それぞれきちんと実行されたら完成です。



マウスで画面のサイズを色々変えてみましょう。MediaElement が画面サイズに応じて伸縮します。またButton は固定サイズですので伸縮しませんが、HorizontalAlignment = Right・VerticalAlignment = Bottom で設定したとおりに、セルの右下の位置に固定されています。
また WPF の強みですが、動画上でボタンを透過することも簡単にできるのがわかると思います。

次回はスタックパネルの話です。お楽しみに。