方法 : テキストに変換を適用する

更新 : 2007 年 11 月

変換を適用して、アプリケーションでのテキストの表示を変更できます。次の例では、異なる種類の描画変換を使用して、TextBlock コントロール内のテキストの表示を変更します。

使用例

指定した点を中心として、2 次元の x-y 平面上で回転したテキストの例を次に示します。

90 度回転したテキストの例

次のコード例では、RotateTransform を使用してテキストを回転します。Angle の値を 90 にすると、要素が時計回りに 90 度回転します。

<!-- Rotate the text 90 degrees using a RotateTransform. -->
<TextBlock FontFamily="Arial Black" FontSize="64" Foreground="Moccasin" Margin ="80, 10, 0, 0">
  Text Transforms
  <TextBlock.RenderTransform>
    <RotateTransform Angle="90" />
  </TextBlock.RenderTransform>
</TextBlock>

テキストの 2 行目を x 軸に沿って 150% 拡大し、3 行目を y 軸に沿って 150% 拡大した例を次に示します。

拡大したテキストの例

次のコード例では、ScaleTransform を使用してテキストを元のサイズから拡大します。

<!-- Scale the text using a ScaleTransform. -->
<TextBlock
  Name="textblockScaleMaster" 
  FontSize="32"
  Foreground="SteelBlue"
  Text="Scaled Text"
  Margin="100, 0, 0, 0"
  Grid.Column="0" Grid.Row="0">
</TextBlock>
<TextBlock
  FontSize="32"
  FontWeight="Bold" 
  Foreground="SteelBlue"
  Text="{Binding Path=Text, ElementName=textblockScaleMaster}"
  Margin="100, 0, 0, 0"
  Grid.Column="0" Grid.Row="1">
  <TextBlock.RenderTransform>
    <ScaleTransform ScaleX="1.5" ScaleY="1.0" />
  </TextBlock.RenderTransform>
</TextBlock>
<TextBlock
  FontSize="32"
  FontWeight="Bold" 
  Foreground="SteelBlue"
  Text="{Binding Path=Text, ElementName=textblockScaleMaster}"
  Margin="100, 0, 0, 0"
  Grid.Column="0" Grid.Row="2">
  <TextBlock.RenderTransform>
    <ScaleTransform ScaleX="1.0" ScaleY="1.5" />
  </TextBlock.RenderTransform>
</TextBlock>

メモ :
テキストの拡大は、テキストのフォント サイズを大きくする操作と同一ではありません。フォント サイズは、異なるサイズで最適な解像度を得るために、各サイズが個別に計算されます。一方、拡大したテキストでは、元のサイズのテキストの縦横比が維持されます。

x 軸に沿って傾斜させたテキストの例を次に示します。

傾斜させたテキストの例

次のコード例では、SkewTransform を使用してテキストを傾斜させます。傾斜とは、座標空間を不均等に拡大する変換のことで、シアとも呼ばれます。この例では、2 つのテキスト文字列を x 座標に沿って –30 度または 30 度傾斜させています。

<!-- Skew the text using a SkewTransform. -->
<TextBlock
  Name="textblockSkewMaster" 
  FontSize="32"
  FontWeight="Bold" 
  Foreground="Maroon"
  Text="Skewed Text"
  Margin="125, 0, 0, 0"
  Grid.Column="0" Grid.Row="0">
  <TextBlock.RenderTransform>
    <SkewTransform AngleX="-30" AngleY="0" />
  </TextBlock.RenderTransform>
</TextBlock>
<TextBlock
  FontSize="32"
  FontWeight="Bold" 
  Foreground="Maroon"
  Text="{Binding Path=Text, ElementName=textblockSkewMaster}"
  Margin="100, 0, 0, 0"
  Grid.Column="0" Grid.Row="1">
  <TextBlock.RenderTransform>
    <SkewTransform AngleX="30" AngleY="0" />
  </TextBlock.RenderTransform>
</TextBlock>

x 軸および y 軸に沿って平行移動させたテキストの例を次に示します。

平行移動させたテキストの例

TranslateTransform を使用してテキストをオフセットするコード例を次に示します。この例では、主要なテキストの下のわずかにオフセットされたテキストのコピーにより、シャドウ効果が作成されます。

<!-- Skew the text using a TranslateTransform. -->
<TextBlock
  FontSize="32"
  FontWeight="Bold" 
  Foreground="Black"
  Text="{Binding Path=Text, ElementName=textblockTranslateMaster}"
  Margin="100, 0, 0, 0"
  Grid.Column="0" Grid.Row="0">
  <TextBlock.RenderTransform>
    <TranslateTransform X="2" Y="2" />
  </TextBlock.RenderTransform>
</TextBlock>
<TextBlock
  Name="textblockTranslateMaster" 
  FontSize="32"
  FontWeight="Bold" 
  Foreground="Coral"
  Text="Translated Text"
  Margin="100, 0, 0, 0"
  Grid.Column="0" Grid.Row="0"/>

メモ :
DropShadowBitmapEffect は、シャドウ効果を実現する豊富な機能群を備えています。詳細については、「方法 : 影付きテキストを作成する」を参照してください。

参照

処理手順

方法 : アニメーションをテキストに適用する