MAKOTO3.NET Blog

文字は図形と同様に変形することができます。次は、RotateTransformによる回転とScaleTransformによる拡大・縮小のサンプルです。

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

【myxaml.xaml】

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

<TextBlock Canvas.Left="30" Canvas.Top="10" Width="290" TextWrapping="Wrap" FontSize="30" FontFamily="Verdana" FontWeight="Bold">
 Silverlight 1.0
 <TextBlock.Foreground>
   <LinearGradientBrush>
    <GradientStop Color="yellow" Offset="0.0" />
    <GradientStop Color="red" Offset="1.0" />
   </LinearGradientBrush>
 </TextBlock.Foreground>

 <TextBlock.RenderTransform>
  <RotateTransform Angle="30" />
 </TextBlock.RenderTransform>
</TextBlock>

<TextBlock Canvas.Left="10" Canvas.Top="150" Width="290" TextWrapping="Wrap" FontSize="30" FontFamily="Verdana" FontWeight="Bold" Foreground="skyblue">
 Silverlight 1.0
 <TextBlock.RenderTransform>
  <ScaleTransform ScaleX="1.0" ScaleY="4.0" />
 </TextBlock.RenderTransform>
</TextBlock>
</Canvas>

変形の方法は、 変形の基本 で書いたとおりです。指定できる属性も 図形を回転する～RotateTransform  と 図形を拡大・縮小する～ScaleTransform  で記した内容と変わりありません。

次はSkewTransformで文字をゆがめたサンプルです。

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

【myxaml.xaml】

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

<TextBlock Canvas.Left="30" Canvas.Top="110" FontSize="30" FontFamily="Verdana" FontWeight="Bold" Foreground="red">
 Silverlight 1.0
 <TextBlock.RenderTransform>
  <SkewTransform AngleX="-30" AngleY="0" />
 </TextBlock.RenderTransform>
</TextBlock>

<TextBlock Canvas.Left="30" Canvas.Top="160" FontSize="30" FontFamily="Verdana" FontWeight="Bold" Foreground="blue">
 Silverlight 1.0
 <TextBlock.RenderTransform>
  <SkewTransform AngleX="30" AngleY="0" />
 </TextBlock.RenderTransform>
</TextBlock>

</Canvas>

SkewTransformに関しても、指定方法は、 図形を傾ける～SkewTransform と同じです。

最後はTranslateTransformのサンプルです。

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

【myxaml.xaml】

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

<TextBlock Canvas.Left="30" Canvas.Top="110" FontSize="30" FontFamily="Verdana" FontWeight="Bold" Foreground="black">
 Silverlight 1.0
 <TextBlock.RenderTransform>
  <TranslateTransform X="-4" Y="-2" />
 </TextBlock.RenderTransform>
</TextBlock>

<TextBlock Canvas.Left="30" Canvas.Top="110" FontSize="30" FontFamily="Verdana" FontWeight="Bold" Foreground="red">
 Silverlight 1.0
 <TextBlock.RenderTransform>
  <TranslateTransform X="0" Y="0" />
 </TextBlock.RenderTransform>
</TextBlock>

</Canvas>

2つのTextBlockを、TranslateTransformでわずからずらすことで立体的に見せています。指定方法は、 図形を移動する～TranslateTransform  と同じです。

JavaScriptでSilverlight 目次

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