MAKOTO3.NET Blog

図形内部をグラデーションで塗りつぶすのが、次の2つのブラシです。

• LinearGradiendBrush……線形のグラデーションを設定します。初期設定では、左上から右下方向へのグラデーションとなります（方向は変更可能）。
• RadialGradientBrush……円形のグラデーションを設定します。

次は線形グラデーションであるLinearGradientBrushのサンプルです。

http://www.makoto3.net/xaml/silverlight0038/index.html

XAMLのソースは次のとおりです。

【myxaml.xaml】

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 <Path StrokeThickness="10" Stroke="#FF0088FF" Data="M70,110 L150,110 150,70 230,150 150,230 150,190 70,190 z">
  <Path.Fill>
   <LinearGradientBrush>
    <GradientStop Color="lime" Offset="0.0" />
    <GradientStop Color="red" Offset="0.25" />
    <GradientStop Color="yellow" Offset="0.5" />
    <GradientStop Color="blue" Offset="0.75" />
    <GradientStop Color="white" Offset="1.0" />
   </LinearGradientBrush>
  </Path.Fill>
 </Path>
</Canvas>

<LinearGradientBrush>～</LinearGradientBrush>のあいだに<GradientStop>タグを使って色の変化するポイントを指定します。Color属性で色、Offset属性で色の位置を0～1の小数点で指定します。

<LinearGradientBrush>にStartPoint属性やEndPoint属性を指定することで、 グラデーションの方向を変えることもできます。たとえば、上記サンプルの<LinearGradientBrush>タグを次のように変更したとします。

   <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">

すると、表示は以下のようになります。

http://www.makoto3.net/xaml/silverlight0039/index.html

円形のグラデーションのサンプルも紹介しましょう。

http://www.makoto3.net/xaml/silverlight0040/index.html

XAMLファイルは次のとおりです。

【myxaml.xaml】

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 <Path StrokeThickness="10" Stroke="#FF0088FF" Data="M70,110 L150,110 150,70 230,150 150,230 150,190 70,190 z">
  <Path.Fill>
   <RadialGradientBrush>
    <GradientStop Color="lime" Offset="0.0" />
    <GradientStop Color="red" Offset="0.25" />
    <GradientStop Color="yellow" Offset="0.5" />
    <GradientStop Color="blue" Offset="0.75" />
    <GradientStop Color="white" Offset="1.0" />
   </RadialGradientBrush>
  </Path.Fill>
 </Path>
</Canvas>

<RadialGradientBrush>～<RadialGradientBrush>のあいだに<GradientStop>タグで色と色が変化するポイントを指定するのは、線形グラデーションとまったく同じです。グラデーションの中心は初期設定では図形の中心となります。

なお、GradientOrigin、Center、RadiusX、RadiusYなどの属性を設定することで、グラデーションの開始位置や方向などをカスタマイズ可能です。たとえば、上記サンプルの<RadialGradientBrush>タグを次のように変更したとします。

   <RadialGradientBrush GradientOrigin="1,1">

すると、表示は次のようになります。

http://www.makoto3.net/xaml/silverlight0041/index.html

各属性の詳細は、Silverlight 1.0 SDKのヘルプに載っていますので、興味のある方は調べてみてください。

JavaScriptでSilverlight 目次

このページは xfy Blog Editor  を利用して作成されました。