１．目的
|
|
WPFのBrushは、GDI+ とはずいぶん違います。ここでは、WPF の Brush
を中心にどのようなことができるのか確認します。
|
２．参考書
|
|
（１） XAMLプログラミング
（２）
WPF のブラシの概要
|
３．Brush
|
|
WPFでは、6種類の Brush があります。
| Brushの種類 |
説明 |
| SolidColorBrush |
単色での塗りつぶし |
| LinearGradientBrush |
線形グラデーションでの塗りつぶし |
| RadialGradientBrush |
放射グラデーションでの塗りつぶし |
| ImageBrush |
画像での塗りつぶし |
| DrawingBrush |
Drawingでの塗りつぶし |
| VisualBrush |
Visualでの塗りつぶし |
WPFでは、6種類の Brush があります。
|
３．１ SolidColorBrush
|
|
SolidColorBrushでの塗りつぶしを行います。
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<WrapPanel>
<Canvas Width="200" Height="100" Margin="10,10,10,10">
<Rectangle Width="200" Height="100">
<Rectangle.Fill>
<SolidColorBrush Color="Cyan"/>
</Rectangle.Fill>
</Rectangle>
</Canvas >
<Canvas Width="200" Height="100" Margin="10,10,10,10">
<Ellipse Width="200" Height="100">
<Ellipse.Fill>
<SolidColorBrush Color="Cyan"/>
</Ellipse.Fill>
</Ellipse>
</Canvas >
</WrapPanel>
</Page>
|
３．２ LinearGradientBrush
|
|
線形グラデーションでの塗りつぶしを行います。
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<WrapPanel>
<Canvas Width="200" Height="100" Margin="10,10,10,10">
<Rectangle Width="200" Height="100">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="Magenta" Offset="0"/>
<GradientStop Color="Blue" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Canvas >
<Canvas Width="200" Height="100" Margin="10,10,10,10">
<Ellipse Width="200" Height="100">
<Ellipse.Fill>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="Magenta" Offset="0"/>
<GradientStop Color="Blue" Offset="1"/>
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
</Canvas >
</WrapPanel>
</Page>
ここで、GradientStopはいくつでも設定できます。
|
３．３ RadialGradientBrush
|
|
放射グラデーションでの塗りつぶしを行います。
<Rectangle Width="180" Height="136">
<Rectangle.Fill>
<RadialGradientBrush>
<GradientStop Color="Magenta" Offset="0"/>
<GradientStop Color="Blue" Offset="1"/>
</RadialGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Ellipse Width="155" Height="129">
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color="Magenta" Offset="0"/>
<GradientStop Color="Blue" Offset="1"/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
|
３．４ ImageBrush
|
|
ImageBrushでの塗りつぶしを行います。
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<WrapPanel>
<Canvas Width="200" Height="100" Margin="10,10,10,10">
<Rectangle Width="200" Height="100" >
<Rectangle.Fill>
<ImageBrush ImageSource="Dock.jpg" />
</Rectangle.Fill>
</Rectangle>
</Canvas >
<Canvas Width="200" Height="100" Margin="10,10,10,10">
<Ellipse Width="200" Height="100" >
<Ellipse.Fill>
<ImageBrush ImageSource="Dock.jpg" />
</Ellipse.Fill>
</Ellipse>
</Canvas >
</WrapPanel>
</Page>
|
３．５ DrawingBrush
|
|
DrawingBrushでの塗りつぶしを行います。
DrawingBrush として、GeometryDrawing, ImageDrawing, GlyphRunDrawing,
VideoDrawing, DrawingGroupが使用できます。
WPF のブラシの概要では、DrawingGroupの例が掲載されています。
<Rectangle Width="180" Height="136">
<Rectangle.Fill>
<DrawingBrush Viewport="0,0,0.25,0.25" TileMode="Tile">
<DrawingBrush.Drawing>
<DrawingGroup>
<GeometryDrawing
Brush="White">
<GeometryDrawing.Geometry>
<RectangleGeometry
Rect="0,0,100,100" />
</GeometryDrawing.Geometry>
</GeometryDrawing>
<GeometryDrawing>
<GeometryDrawing.Geometry>
<GeometryGroup>
<RectangleGeometry Rect="0,0,50,50" />
<RectangleGeometry Rect="50,50,50,50" />
</GeometryGroup>
</GeometryDrawing.Geometry>
<GeometryDrawing.Brush>
<LinearGradientBrush>
<GradientStop Offset="0.0" Color="Black" />
<GradientStop Offset="1.0" Color="Gray" />
</LinearGradientBrush>
</GeometryDrawing.Brush>
</GeometryDrawing>
</DrawingGroup>
</DrawingBrush.Drawing>
</DrawingBrush>
</Rectangle.Fill>
</Rectangle>
|
３．６ VisualBrush
|
|
VisualBrushでの塗りつぶしを行います。
VisualBrushでは、Visualでオブジェクトを塗りつぶします。Visualには、Button,
MediaElementなど、WPFで描画できるものすべてを扱うことができます。
また、アプリケーションのある部分の内容を別の領域に投影することもできます。これにより、鏡面のような表現が可能になります。
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Canvas Width="500" Height="500" Background="Gray">
<Rectangle Name="RectImage" Width="300" Height="200" Canvas.Left="200">
<Rectangle.Fill>
<ImageBrush ImageSource="Dock.jpg" />
</Rectangle.Fill>
</Rectangle>
<Rectangle Width="300" Height="200" RenderTransformOrigin="0.5,0.5">
<Rectangle.Fill>
<VisualBrush Opacity="0.5" Visual="{Binding ElementName=RectImage}">
</VisualBrush>
</Rectangle.Fill>
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="-1"/>
<SkewTransform AngleX="-32" AngleY="0"/>
<RotateTransform Angle="0"/>
<TranslateTransform X="138" Y="200"/>
</TransformGroup>
</Rectangle.RenderTransform>
<Rectangle.OpacityMask>
<LinearGradientBrush StartPoint="0.5, 0" EndPoint="0.5, 1">
<GradientStop Color="#00000000" Offset="0.0"/>
<GradientStop Color="#33000000" Offset="0.5"/>
<GradientStop Color="#FF000000" Offset="0.75"/>
</LinearGradientBrush>
</Rectangle.OpacityMask>
</Rectangle>
</Canvas>
</Page>
|
４． 画像とエフェクト
|
|
|
４．１ Image
|
|
XAMLプログラミングに対抗して、こちらは店内から。
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Image Source="Starbucks.jpg" Width="300"/>
</Page>
|
４．２ BitmapEffect
|
|
Imageでは、ビットマップエフェクトを使用することができます。
左から右、上から下へ、次のようなビットマップエフェクトです。
オリジナル
BlurBitmapEffect
BevelBitmapEffect
DropShadowBitmapEffect
EmbossBitmapEffect
OuterGlowBitmapEffect
ただし、このビットマップエフェクトを実行するには、アプリケーションが完全信頼でなければなりません。通常のXBAPでは部分信頼であるため、使用できません。実行しようとすると、次のようなエラーになります。
スタートアップ URI: C:\Users\uchukamen\Documents\My Web
Sites\uchukamen.com\WPF\XAML-Brush\BitmapEffect.xaml
アプリケーション ID: file:///C:/Windows/Microsoft.Net/Framework/v3.0/WPF/XamlViewer/XamlViewer_v0300.xbap#XamlViewer_v0300.application,
Version=3.0.0.0, Culture=neutral, PublicKeyToken=c3bce3770c238a49,
processorArchitecture=msil/XamlViewer_v0300.exe,
Version=3.0.0.0, Culture=neutral, PublicKeyToken=c3bce3770c238a49,
processorArchitecture=msil, type=win32
System.Security.SecurityException: 型 'System.Security.Permissions.UIPermission,
mscorlib, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089'
のアクセス許可の要求に失敗しました。
場所 System.Security.CodeAccessSecurityEngine.Check(Object demand,
StackCrawlMark& stackMark, Boolean isPermSet)
・・・・以下略
また、現在のバージョン(.NET Framework 3.5
Beta)では、GPUではなく、CPUによりレンダリングが行われるため、処理が非常に遅くなりますので、使用するのは避けたほうがいいでしょう。
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="Graphics.Window4"
x:Name="Window"
Title="Window4"
Width="640" Height="480">
<WrapPanel>
<Viewbox Margin="10,10,10,10" Width="150">
<Image Source="Dock.jpg" Stretch="Fill">
</Image>
</Viewbox>
<Viewbox Margin="10,10,10,10" Width="150">
<Image Source="Dock.jpg" Stretch="Fill">
<Image.BitmapEffect>
<BlurBitmapEffect Radius="20"/>
</Image.BitmapEffect>
</Image>
</Viewbox>
<Viewbox Margin="10,10,10,10" Width="150">
<Image Source="Dock.jpg" Stretch="Fill">
<Image.BitmapEffect>
<BevelBitmapEffect BevelWidth="50"/>
</Image.BitmapEffect>
</Image>
</Viewbox>
<Viewbox Margin="10,10,10,10" Width="150">
<Image Source="Dock.jpg" Stretch="Fill">
<Image.BitmapEffect>
<DropShadowBitmapEffect ShadowDepth="50"/>
</Image.BitmapEffect>
</Image>
</Viewbox>
<Viewbox Margin="10,10,10,10" Width="150">
<Image Source="Dock.jpg" Stretch="Fill">
<Image.BitmapEffect>
<EmbossBitmapEffect LightAngle="90"/>
</Image.BitmapEffect>
</Image>
</Viewbox>
<Viewbox Margin="10,10,10,10" Width="150">
<Image Source="Dock.jpg" Stretch="Fill">
<Image.BitmapEffect>
<OuterGlowBitmapEffect GlowColor="Cyan" GlowSize="50"/>
</Image.BitmapEffect>
</Image>
</Viewbox>
</WrapPanel>
</Window>
|
５． ビデオ
|
|
ビデオの再生には、MediaElement と MediaPlayer の２つがあります。
|
５．１ MediaElement
|
|
MediaElement 一行で、ビデオを再生することができます。
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
>
<MediaElement Source="Bear.wmv">
</MediaElement>
</Page>
ただし、キャッシュの関係か、Loose XAMLだとうまく表示ができません。
RenderTransformを使用すると、回転やスキューを適用することができます。
<MediaElement Source="C:\Users\Public\Videos\Sample
Videos\Bear.wmv" RenderTransformOrigin="0.5,0.5"
Margin="40.328,127.354,271.338,128.325" >
<MediaElement.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="1" ScaleY="1"/>
<SkewTransform AngleX="-38" AngleY="0"/>
<RotateTransform Angle="-38.31"/>
<TranslateTransform X="0" Y="0"/>
</TransformGroup>
</MediaElement.RenderTransform>
</MediaElement>
|