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

変換によって、アプリケーション内のテキストの表示が変更される可能性があります。 次の例では、さまざまな種類のレンダリング変換を使用して、TextBlock コントロール内のテキストの表示に影響を与えます。

例

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

を使用して回転しています。

次のコード例では、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>

次の例は、x 軸に沿って 150% にスケーリングされたテキストの 2 行目と、y 軸に沿って 150% スケールされた 3 行目のテキストを示しています。

次のコード例では、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 は、シャドウ効果を提供するための豊富な機能セットを提供します。 詳細については、「シャドウを使用してテキストを作成する 」を参照してください。

こちらも参照ください

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