方法 : 文字の装飾を作成する

更新 : 2007 年 11 月

TextDecoration オブジェクトは、テキストに追加できる視覚的な装飾です。文字装飾には、下線、ベースライン、取り消し線、および上線の 4 種類あります。テキストに対する文字装飾の位置を次の例に示します。

文字装飾の種類の例

テキストに文字装飾を追加するには、TextDecoration オブジェクトを作成し、そのプロパティを変更します。下線などの文字装飾を表示する位置を指定するには、Location プロパティを使用します。塗りつぶしの純色やグラデーション カラーなどの文字装飾の外観を指定するには、Pen プロパティを使用します。Pen プロパティに値を指定しない場合、装飾は既定でテキストと同じ色になります。TextDecoration オブジェクトを定義したら、それを目的のテキスト オブジェクトの TextDecorations コレクションに追加します。

線形グラデーション ブラシと破線のペンによってスタイルが設定されている文字装飾の例を次に示します。

線形グラデーション ブラシと破線のペンによってスタイルが設定された下線の例

Hyperlink オブジェクトはインラインレベルのフロー コンテンツ要素であり、これを使用すると、フロー コンテンツ内でハイパーリンクをホストできます。既定では、Hyperlink は、下線を表示するために、TextDecoration オブジェクトを使用します。TextDecoration オブジェクトは、インスタンス化するために、パフォーマンスに大きな負荷をかける可能性があります。特に、多数の Hyperlink オブジェクトを使用する場合には、その傾向が強まります。Hyperlink 要素を広く使用する場合は、MouseEnter イベントのようなイベントが発生したときにだけ下線を表示することを、検討する必要があります。

次の例では、"My MSN" リンクの下線は動的であり、MouseEnter イベントが発生したときにのみ表示されます。

TextDecorations が定義されたハイパーリンク

詳細については、「方法 : ハイパーリンク付き文字装飾を使用する」を参照してください。

使用例

次のコード例では、下線の文字装飾で既定のフォント値が使用されています。

// Use the default font values for the strikethrough text decoration.
private void SetDefaultStrikethrough()
{
    // Set the underline decoration directly to the text block.
    TextBlock1.TextDecorations = TextDecorations.Strikethrough;
}

<!-- Use the default font values for the strikethrough text decoration. -->
<TextBlock
  TextDecorations="Strikethrough"
  FontSize="36" >
  The quick red fox
</TextBlock>

次のコード例では、純色のブラシをペンとして使用した下線の文字装飾が作成されます。

// Use a Red pen for the underline text decoration.
private void SetRedUnderline()
{
    // Create an underline text decoration. Default is underline.
    TextDecoration myUnderline = new TextDecoration();

    // Create a solid color brush pen for the text decoration.
    myUnderline.Pen = new Pen(Brushes.Red, 1);
    myUnderline.PenThicknessUnit = TextDecorationUnit.FontRecommended;

    // Set the underline decoration to a TextDecorationCollection and add it to the text block.
    TextDecorationCollection myCollection = new TextDecorationCollection();
    myCollection.Add(myUnderline);
    TextBlock2.TextDecorations = myCollection;
}

<!-- Use a Red pen for the underline text decoration -->
<TextBlock
  FontSize="36" >
  jumped over
  <TextBlock.TextDecorations>
    <TextDecorationCollection>
      <TextDecoration 
        PenThicknessUnit="FontRecommended">
        <TextDecoration.Pen>
          <Pen Brush="Red" Thickness="1" />
        </TextDecoration.Pen>
      </TextDecoration>
    </TextDecorationCollection>
  </TextBlock.TextDecorations>
</TextBlock>

次のコード例では、破線のペン用の線形グラデーション ブラシによって下線の文字装飾が作成されます。

// Use a linear gradient pen for the underline text decoration.
private void SetLinearGradientUnderline()
{
    // Create an underline text decoration. Default is underline.
    TextDecoration myUnderline = new TextDecoration();

    // Create a linear gradient pen for the text decoration.
    Pen myPen = new Pen();
    myPen.Brush = new LinearGradientBrush(Colors.Yellow, Colors.Red, new Point(0, 0.5), new Point(1, 0.5));
    myPen.Brush.Opacity = 0.5;
    myPen.Thickness = 1.5;
    myPen.DashStyle = DashStyles.Dash;
    myUnderline.Pen = myPen;
    myUnderline.PenThicknessUnit = TextDecorationUnit.FontRecommended;

    // Set the underline decoration to a TextDecorationCollection and add it to the text block.
    TextDecorationCollection myCollection = new TextDecorationCollection();
    myCollection.Add(myUnderline);
    TextBlock3.TextDecorations = myCollection;
}

<!-- Use a linear gradient pen for the underline text decoration. -->
<TextBlock FontSize="36">the lazy brown dog.
  <TextBlock.TextDecorations>
    <TextDecorationCollection>
      <TextDecoration  
        PenThicknessUnit="FontRecommended">
        <TextDecoration.Pen>
          <Pen Thickness="1.5">
            <Pen.Brush>
              <LinearGradientBrush Opacity="0.5"
                StartPoint="0,0.5"  EndPoint="1,0.5">
                <LinearGradientBrush.GradientStops>
                  <GradientStop Color="Yellow" Offset="0" />
                  <GradientStop Color="Red" Offset="1" />
                </LinearGradientBrush.GradientStops>
              </LinearGradientBrush>
            </Pen.Brush>
            <Pen.DashStyle>
              <DashStyle Dashes="2"/>
            </Pen.DashStyle>
          </Pen>
        </TextDecoration.Pen>
      </TextDecoration>
    </TextDecorationCollection>
  </TextBlock.TextDecorations>
</TextBlock>

メモ :
文字装飾の使用の詳細な例については、「TextDecoration のサンプル」を参照してください。

参照

処理手順

方法 : ハイパーリンク付き文字装飾を使用する

参照

TextDecoration

Hyperlink