MAKOTO3.NET Blog

文字の色は<TextBlock>のForeground属性で指定できます。次は、赤にする例です。

<TextBlock Foreground="red">Silverlight<TextBlock>

また、次のようにブラシを使うこともできます。

<TextBlock>
Silverlight
  <TextBlock.Foreground>
   <SolidColorBrush Color="navy"/>
  </TextBlock.Foreground>
<TextBlock>

上記ではSolidColorBrushを使っていますが、もちろんグラデーションブラシ(LinearGradientBrushとRadialGradientBrush)やイメージブラシ(ImageBrush)、ビデオブラシ(VideoBrush)を使って文字を塗りつぶすこともできます。ここでは、その例を紹介します。

最初はSolidColorBrushとImageBrushを使った例です。

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

【myxaml.xaml】

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

 <TextBlock Canvas.Left="10" Canvas.Top="10" Width="290" TextWrapping="Wrap" FontSize="60" FontFamily="Verdana" FontWeight="Bold">
Silverlight 1.0
  <TextBlock.Foreground>
   <SolidColorBrush Color="navy"/>
  </TextBlock.Foreground>
 </TextBlock>

 <TextBlock Canvas.Left="10" Canvas.Top="150" Width="290" TextWrapping="Wrap" FontSize="60" FontFamily="Verdana" FontWeight="Bold">
Silverlight 1.0
  <TextBlock.Foreground>
   <ImageBrush ImageSource="fab01.jpg"/>
  </TextBlock.Foreground>
 </TextBlock>

</Canvas>

内部を塗りつぶすブラシの使い方は、図形の場合とほぼ同じです。図形だと<～.Fill>～</～.Fill>のあいだにブラシを指定しますが、文字だと<TextBlock.Foreground>～</TextBlock.Foreground>のあいだに指定する点が異なるだけです。

次はグラデーションで塗りつぶした例です。

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

【myxaml.xaml】

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

<TextBlock Canvas.Left="10" Canvas.Top="10" Width="290" TextWrapping="Wrap" FontSize="60" FontFamily="Verdana" FontWeight="Bold">
 Silverlight 1.0
  <TextBlock.Foreground>
   <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>
 </TextBlock.Foreground>
</TextBlock>

<TextBlock Canvas.Left="10" Canvas.Top="150" Width="290" TextWrapping="Wrap" FontSize="60" FontFamily="Verdana" FontWeight="Bold">
 Silverlight 1.0
 <TextBlock.Foreground>
   <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>
 </TextBlock.Foreground>
</TextBlock>

</Canvas>

上がLinearGradientBrush、下がRadialGradientBrushの例となっています。なお、上記サンプルでは文字が自動的に折り返されて2行で表示されていますが、2行全体に1つのグラデーションが表示されるのではなく、各行ごとにそれぞれグラデーションが設定されていることが確認できます。

最後はビデオブラシ(VideoBrush)の例です。

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

【myxaml.xaml】

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <MediaElement x:Name="myMediaElement"
  Source="../silverlight0043/bear.wmv"
  Opacity="0" IsMuted="True" />

 <TextBlock Canvas.Left="0" Canvas.Top="80" Width="300" TextWrapping="Wrap" FontSize="100" FontFamily="Verdana" FontWeight="Bold" Text="BEAR">
  <TextBlock.Foreground>
   <VideoBrush SourceName="myMediaElement" />
  </TextBlock.Foreground>
 </TextBlock>
</Canvas>

文字の場合も、 動画で塗りつぶすVideoBrush  で書いたことがそのままあてはまります。念のため繰り返すと、事前に<MediaElemet>で動画を指定してOpacityを0にし、透明にします。そして、その動画にx:Nameで名前を付けて、<VideoBrush>のSourceName属性でその名前を指定してやるだけです。

JavaScriptでSilverlight 目次

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