C# Programming

WPFWPFでBrushを使う

開発環境: Visual Studio 2008 

1.目的

WPFのBrushは、GDI+ とはずいぶん違います。ここでは、WPF の Brush を中心にどのようなことができるのか確認します。

2.参考書

(1) XAMLプログラミング
(2) WPF のブラシの概要

3.Brush

WPFでは、6種類の Brush があります。

Brushの種類 説明
SolidColorBrush 単色での塗りつぶし
LinearGradientBrush 線形グラデーションでの塗りつぶし
RadialGradientBrush 放射グラデーションでの塗りつぶし
ImageBrush 画像での塗りつぶし
DrawingBrush Drawingでの塗りつぶし
VisualBrush Visualでの塗りつぶし

WPFでは、6種類の Brush があります。

3.1 SolidColorBrush

SolidColorBrushでの塗りつぶしを行います。

XAML

<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>

3.2 LinearGradientBrush

線形グラデーションでの塗りつぶしを行います。

XAML

<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はいくつでも設定できます。

3.3 RadialGradientBrush

放射グラデーションでの塗りつぶしを行います。

XAML

<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>

3.4 ImageBrush

ImageBrushでの塗りつぶしを行います。

XAML

<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>

3.5 DrawingBrush

DrawingBrushでの塗りつぶしを行います。
DrawingBrush として、GeometryDrawing, ImageDrawing, GlyphRunDrawing, VideoDrawing, DrawingGroupが使用できます。

WPF のブラシの概要では、DrawingGroupの例が掲載されています。

Graphics Brush

<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>

3.6 VisualBrush

VisualBrushでの塗りつぶしを行います。
VisualBrushでは、Visualでオブジェクトを塗りつぶします。Visualには、Button, MediaElementなど、WPFで描画できるものすべてを扱うことができます。

また、アプリケーションのある部分の内容を別の領域に投影することもできます。これにより、鏡面のような表現が可能になります。

XAML

<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>

4. 画像とエフェクト

 

4.1 Image

XAMLプログラミングに対抗して、こちらは店内から。

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>

4.2 BitmapEffect

Imageでは、ビットマップエフェクトを使用することができます。

XAML

左から右、上から下へ、次のようなビットマップエフェクトです。

オリジナル
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>

5. ビデオ

ビデオの再生には、MediaElement と MediaPlayer の2つがあります。

5.1 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を使用すると、回転やスキューを適用することができます。

WPF Video

<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>