XAMLによる背景の塗り潰し
背景の塗り潰し方法についての説明です。
今回紹介するのは、色による塗り潰し、画像による塗り潰し、動画による塗り潰しの３つです。画像または動画で塗り潰しを行う際は、あらかじめhtmlファイルと同じフォルダ内にそれぞれのファイルを置いておいてください。
動画の塗り潰しでは、MediaElementであらかじめ動画を読み込んでおき、次の VideoBrush SourceName="myMedia" で呼び出しています。また、IsMuted="True"で音を出さないようにしています。
XAMLのサンプルソース
<Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="500" Height="200"
>
<Rectangle Height="100" Width="100" Canvas.Left="0" Canvas.Top="0">
<Rectangle.Fill>
<SolidColorBrush Color="orange" />
</Rectangle.Fill>
</Rectangle>
<Rectangle Height="100" Width="100" Canvas.Left="110" Canvas.Top="0">
<Rectangle.Fill>
<ImageBrush ImageSource="F1000015.jpg"/>
</Rectangle.Fill>
</Rectangle>
<MediaElement x:Name="myMedia" Source="sanba3.wmv" Opacity="0" IsMuted="True" />
<Rectangle Height="100" Width="100" Canvas.Left="220" Canvas.Top="0">
<Rectangle.Fill>
<VideoBrush SourceName="myMedia" />
</Rectangle.Fill>
</Rectangle>
</Canvas>
プロパティ
| Height | 高さ 例）Height="100" |
| Width | 横幅 例）Width="100" |
| Canvas.Top | 上端からxずらす 例）Canvas.Top="100" |
| Canvas.Left | 左端からxずらす 例）Canvas.Left="100" |
| Fill | 塗りつぶし 例）Fill="#000000" |
| Stroke | 線の色 例）Stroke="#000000" |
| StrokeThickness | 線の幅 例）StrokeThickness="5" |
| Opacity | 透明度 |
| Canvas.ZIndex | 重なりの順序 |
| X1 | X座標の始点 |
| X2 | Y座標の始点 |
| X2 | X座標の終点 |
| Y2 | Y座標の終点 |
| Points | 折れ線で使用 |