描画と塗りつぶし

SolidColorBrush を使って単色で塗りつぶす

領域を単色で塗りつぶすためには、SolidColorBrush を使います。 XAML は、SolidColorBrush を作成する方法はいくつかあります。

• "Black" や "Gray" のような色の名前を指定する属性構文を使えます。
• 色の３原色（赤、緑、青）の値や、場合によって透過率をあらわす16進表記を属性構文として使えます。 使える形式には以下のものがあります。
  • 6桁表記。#rrggbb という形式であり、rr は赤の値をあらわすための2桁の16進数、 同様に gg は緑の値、bb は青の値をあらわします。 たとえば、#0033FF と記述できます。
  • 8桁表記。6桁表記と同じですが、#aarrggbb という形式で、 アルファ値と呼ばれる透過率をあらわす2桁（aa）が追加されます。 たとえば、#990033FF と記述できます。
• 要素構文を使って SolidColorBrush を明示的に作成し、 Color プロパティに割り当てることができます。

以下の例は、オブジェクトを黒に塗りつぶすいくつかの方法を示しています。

[hide XAML]

<Canvas
    xmlns="http://schemas.microsoft.com/client/2007"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    
  <Ellipse Height="90" Width="90" Canvas.Left="10" Canvas.Top="10"
      Fill="black"/> <!-- SolidColorBrush by color name. -->
      
  <Ellipse Height="90" Width="90" Canvas.Left="110" Canvas.Top="10"
      Fill="#000000"/> <!-- SolidColorBrush by 6-digit hexadecimal notation. -->
      
  <Ellipse Height="90" Width="90" Canvas.Left="10" Canvas.Top="110"
      Fill="#ff000000"/> <!-- SolidColorBrush by 8-digit hexadecimal notation. -->
      
  <Ellipse Height="90" Width="90" Canvas.Left="110" Canvas.Top="110">
    <Ellipse.Fill>
    
      <!-- SolidColorBrush by object element syntax. -->
      <SolidColorBrush Color="Black"/>
    </Ellipse.Fill>
  </Ellipse>
</Canvas>

[hide] [restart]

LinearGradientBrush と RadialGradientBrush を使ったグラデーションによる塗りつぶし

Silverlight は、線状と放射状の両方のグラデーションをサポートしています。 グラデーションは、一つ以上のグラデーションの異なる色を記したグラデーション基準位置（gradient stop）を持ち、 その間を色が遷移します。 ほとんどのグラデーションは、2つの基準位置だけで十分ですが、必要に応じてたくさんの基準位置を追加できます。

• LinearGradientBrush は、線状にグラデーションで塗りつぶします。 デフォルトでは、線は斜め方向になっており、塗りつぶすオブジェクトの左上隅から右下隅に向かって伸縮します。 StartPoint や EndPoint プロパティを使って、 線の基準位置を変更できます。
• RadialGradientBrush は円に沿ってグラデーションで塗りつぶします。 デフォルトでは、円は描画するオブジェクトの中心に位置します。 GradientOrigin、Center、 RadiusX、RadiusY プロパティを設定することで、 グラデーションをカスタマイズできます。

グラデーションブラシに基準位置を追加するには、GradientStop オブジェクトを作成します。 GradientStop の Offset プロパティを 0 から 1 の間に設定することで、グラデーションの相対的な位置を設定できます。 GradientStop の Color は色の名前か16進値を指定します。

以下の例は、LinearGradientBrush と RadialGradientBrush オブジェクトを使って、 4 つの Rectangle（長方形）オブジェクトを塗りつぶしています。

[hide XAML]

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  
  <!-- Linear gradients -->
  <Rectangle Width="140" Height="70" Canvas.Left="10" Canvas.Top="10">
    <Rectangle.Fill>
      <LinearGradientBrush>
        <GradientStop Color="Yellow" Offset="0.0" />
        <GradientStop Color="Red" Offset="0.25" />
        <GradientStop Color="Blue" Offset="0.75" />
        <GradientStop Color="LimeGreen" Offset="1.0" />
      </LinearGradientBrush>
    </Rectangle.Fill>
  </Rectangle>
  
  <Rectangle Width="140" Height="70" Canvas.Left="155" Canvas.Top="10">
    <Rectangle.Fill>
      <LinearGradientBrush  StartPoint="0,0" EndPoint="1,0">
        <GradientStop Color="Yellow" Offset="0.0" />
        <GradientStop Color="Red" Offset="0.25" />
        <GradientStop Color="Blue" Offset="0.75" />
        <GradientStop Color="LimeGreen" Offset="1.0" />
      </LinearGradientBrush>
    </Rectangle.Fill>
  </Rectangle>
  
  <!-- Radial gradients -->
  <Rectangle Width="140" Height="70" Canvas.Left="10" Canvas.Top="110">
    <Rectangle.Fill>
      <RadialGradientBrush>
        <GradientStop Color="Yellow" Offset="0.0" />
        <GradientStop Color="Red" Offset="0.25" />
        <GradientStop Color="Blue" Offset="0.75" />
        <GradientStop Color="LimeGreen" Offset="1.0" />
      </RadialGradientBrush>
    </Rectangle.Fill>
  </Rectangle>
  
  <Rectangle Width="140" Height="70" Canvas.Left="155" Canvas.Top="110">
    <Rectangle.Fill>
      <RadialGradientBrush GradientOrigin="1,0">
        <GradientStop Color="Yellow" Offset="0.0" />
        <GradientStop Color="Red" Offset="0.25" />
        <GradientStop Color="Blue" Offset="0.75" />
        <GradientStop Color="LimeGreen" Offset="1.0" />
      </RadialGradientBrush>
    </Rectangle.Fill>
  </Rectangle>
</Canvas>

[hide] [restart]

図形の Stroke を塗りつぶすためにも、グラデーションが使えます。

以下の図は、前の例において最初の LinearGradientBrush のグラデーション基準位置を強調しています。

ImageBrush を使ってイメージで塗りつぶす

もうひとつのブラシが ImageBrush です。 デフォルトでは、イメージは図形全体に合わせて伸縮されますが、Stretch プロパティを使って ブラシがイメージをどのように扱うかを制御できます。 以下の例は、2 つの ImageBrush オブジェクトで Stretch を変えて 2 つの Rectangle を塗りつぶしています。

[hide XAML]

<Canvas Width="300" Height="300"
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   Background="White">
  
  <Rectangle Height="180" Width="90" Canvas.Left="10" Canvas.Top="10"
      Stroke="Black" StrokeThickness="1">
    <Rectangle.Fill>
      <ImageBrush ImageSource="star.png"/>
    </Rectangle.Fill>
  </Rectangle>
  
  <Rectangle Height="180" Width="90" Canvas.Left="110" Canvas.Top="10"
      Stroke="Black" StrokeThickness="1">
    <Rectangle.Fill>
      <ImageBrush ImageSource="star.png" Stretch="Uniform"/>
    </Rectangle.Fill>
  </Rectangle>
</Canvas>

[hide] [restart]