Bagikan melalui


Cara: Membuat Dekorasi Teks

Objek TextDecoration adalah ornamentasi visual yang dapat Anda tambahkan ke teks. Ada empat jenis dekorasi teks: garis bawah, garis besar, coretan, dan garis besar. Contoh berikut menunjukkan lokasi dekorasi teks relatif terhadap teks.

Diagram of text decoration types

Untuk menambahkan dekorasi teks ke teks, buat TextDecoration objek dan ubah propertinya. Location Gunakan properti untuk menentukan tempat dekorasi teks muncul, seperti garis bawah. Pen Gunakan properti untuk menentukan tampilan dekorasi teks, seperti isian solid atau warna gradien. Jika Anda tidak menentukan nilai untuk Pen properti , dekorasi default ke warna yang sama dengan teks. Setelah Anda menentukan TextDecoration objek, tambahkan ke TextDecorations kumpulan objek teks yang diinginkan.

Contoh berikut menunjukkan dekorasi teks yang telah ditata dengan sikat gradien linier dan pena putus-putus.

Text decoration with linear gradient underline

Objek Hyperlink adalah elemen konten alur tingkat sebaris yang memungkinkan Anda menghosting hyperlink dalam konten alur. Secara default, Hyperlink menggunakan TextDecoration objek untuk menampilkan garis bawah. TextDecoration objek dapat berkinerja intensif untuk membuat instans, terutama jika Anda memiliki banyak Hyperlink objek. Jika Anda menggunakan elemen secara Hyperlink ekstensif, Anda mungkin ingin mempertimbangkan untuk menampilkan garis bawah hanya saat memicu peristiwa, seperti MouseEnter peristiwa.

Dalam contoh berikut, garis bawah untuk tautan "MSN Saya" bersifat dinamis—hanya muncul saat MouseEnter peristiwa dipicu.

Hyperlinks displaying TextDecorations

Untuk informasi selengkapnya, lihat Menentukan Apakah Hyperlink digaris bawahi.

Contoh

Dalam contoh kode berikut, dekorasi teks garis bawah menggunakan nilai font default.

// 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.
Private Sub SetDefaultStrikethrough()
    ' Set the underline decoration directly to the text block.
    TextBlock1.TextDecorations = TextDecorations.Strikethrough
End Sub
<!-- Use the default font values for the strikethrough text decoration. -->
<TextBlock
  TextDecorations="Strikethrough"
  FontSize="36" >
  The quick red fox
</TextBlock>

Dalam contoh kode berikut, dekorasi teks garis bawah dibuat dengan kuas warna solid untuk pena.

// 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.
Private Sub SetRedUnderline()
    ' Create an underline text decoration. Default is underline.
    Dim myUnderline As 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.
    Dim myCollection As New TextDecorationCollection()
    myCollection.Add(myUnderline)
    TextBlock2.TextDecorations = myCollection
End Sub
<!-- Use a Red pen for the underline text decoration -->
<TextBlock
  FontSize="36" >
  jumps over
  <TextBlock.TextDecorations>
    <TextDecorationCollection>
      <TextDecoration 
        PenThicknessUnit="FontRecommended">
        <TextDecoration.Pen>
          <Pen Brush="Red" Thickness="1" />
        </TextDecoration.Pen>
      </TextDecoration>
    </TextDecorationCollection>
  </TextBlock.TextDecorations>
</TextBlock>

Dalam contoh kode berikut, dekorasi teks garis bawah dibuat dengan sikat gradien linier untuk pena putus-putus.

// 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.
Private Sub SetLinearGradientUnderline()
    ' Create an underline text decoration. Default is underline.
    Dim myUnderline As New TextDecoration()

    ' Create a linear gradient pen for the text decoration.
    Dim myPen As 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.
    Dim myCollection As New TextDecorationCollection()
    myCollection.Add(myUnderline)
    TextBlock3.TextDecorations = myCollection
End Sub
<!-- 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>

Baca juga