การจัดรูปแบบข้อความใน TextBlock


105

ฉันจะจัดรูปแบบข้อความภายในตัวTextBlockควบคุมในแอปพลิเคชัน WPF ของฉันได้อย่างไร

เช่นฉันต้องการใช้คำบางคำที่เป็นตัวหนาคำอื่น ๆ เป็นตัวเอียงและบางคำก็มีสีต่างกันเช่นตัวอย่างนี้:

ใส่คำอธิบายภาพที่นี่

เหตุผลที่อยู่เบื้องหลังคำถามของฉันคือปัญหาที่แท้จริงนี้:

lblcolorfrom.Content = "Colour From: " + colourChange.ElementAt(3).Value.ToUpper();

ฉันต้องการให้ส่วนที่สองของสตริงเป็นตัวหนาและฉันรู้ว่าฉันสามารถใช้การควบคุมสองแบบ (ป้ายกำกับ, บล็อกข้อความ ฯลฯ ) แต่ฉันไม่ต้องการเนื่องจากมีการใช้การควบคุมจำนวนมากอยู่แล้ว

คำตอบ:


142

คุณต้องใช้Inlines:

<TextBlock.Inlines>
    <Run FontWeight="Bold" FontSize="14" Text="This is WPF TextBlock Example. " />
    <Run FontStyle="Italic" Foreground="Red" Text="This is red text. " />
</TextBlock.Inlines>

มีผลผูกพัน:

<TextBlock.Inlines>
    <Run FontWeight="Bold" FontSize="14" Text="{Binding BoldText}" />
    <Run FontStyle="Italic" Foreground="Red" Text="{Binding ItalicText}" />
</TextBlock.Inlines>

คุณยังสามารถผูกคุณสมบัติอื่น ๆ :

<TextBlock.Inlines>
    <Run FontWeight="{Binding Weight}"
         FontSize="{Binding Size}"
         Text="{Binding LineOne}" />
    <Run FontStyle="{Binding Style}"
         Foreground="Binding Colour}"
         Text="{Binding LineTwo}" />
</TextBlock.Inlines>

คุณสามารถผูกผ่านตัวแปลงได้หากคุณมีตัวหนาเป็นบูลีน (พูด)


98

คุณสามารถทำได้ใน XAML อย่างง่ายดายพอ:

<TextBlock>
  Hello <Bold>my</Bold> faithful <Underline>computer</Underline>.<Italic>You rock!</Italic>
</TextBlock>

วิเศษมาก! ฉันไม่รู้เลยว่า XAML สนับสนุนโครงสร้างดังกล่าว
Allon Guralnek

6
สิ่งนี้รองรับการผูกไหม
Arsen Mkrtchyan

11
@ArsenMkrt วิธีการ: <TextBlock FontWeight = "Bold" Text = "{Binding Budget}" />
Aetherix

2
@Aetherix ฉันไม่สามารถทำงานได้ ฉันใช้สิ่งนี้จาก qqbenq: <TextBlock> การชำระคืนรายเดือนของ <Bold> £ </Bold> <Run FontWeight = "Bold" Text = "{Binding MonthlyPayment}" /> </TextBlock>
Gail Foad

49

มีหลายที่มีInlineองค์ประกอบที่สามารถช่วยให้คุณสำหรับการจัดรูปแบบที่ง่ายที่สุดในตัวเลือกที่คุณสามารถใช้Bold, ItalicและUnderline:

<TextBlock>
    Sample text with <Bold>bold</Bold>, <Italic>italic</Italic> and <Underline>underlined</Underline> words.
</TextBlock>

ใส่คำอธิบายภาพที่นี่

ฉันคิดว่ามันเป็นมูลค่า noting ว่าองค์ประกอบเหล่านั้นในความเป็นจริงเพียง shorthands สำหรับSpanองค์ประกอบที่มีคุณสมบัติต่างๆที่กำหนด (เช่น: สำหรับBoldการFontWeightตั้งค่าคุณสมบัติFontWeights.Bold)

สิ่งนี้นำเราไปสู่ตัวเลือกถัดไปของเรา: Spanองค์ประกอบดังกล่าว

คุณสามารถบรรลุเอฟเฟกต์เดียวกันกับองค์ประกอบนี้ด้านบน แต่คุณจะได้รับความเป็นไปได้มากขึ้น คุณสามารถตั้งค่า (ในหมู่คนอื่น ๆ ) ForegroundหรือBackgroundคุณสมบัติ:

<TextBlock>
    Sample text with <Span FontWeight="Bold">bold</Span>, <Span FontStyle="Italic">italic</Span> and <Span TextDecorations="Underline">underlined</Span> words. <Span Foreground="Blue">Coloring</Span> <Span Foreground="Red">is</Span> <Span Background="Cyan">also</Span> <Span Foreground="Silver">possible</Span>.
</TextBlock>

ใส่คำอธิบายภาพที่นี่

Spanองค์ประกอบก็อาจจะมีองค์ประกอบอื่น ๆ เช่นนี้

<TextBlock>
    <Span FontStyle="Italic">Italic <Span Background="Yellow">text</Span> with some <Span Foreground="Blue">coloring</Span>.</Span>
</TextBlock>

ใส่คำอธิบายภาพที่นี่

มีองค์ประกอบอื่นซึ่งค่อนข้างคล้ายกับเป็นก็จะเรียกว่าSpan ไม่สามารถมีองค์ประกอบแบบอินไลน์อื่น ๆ ในขณะที่สามารถ แต่คุณสามารถได้อย่างง่ายดายผูกตัวแปรที่'s ทรัพย์สิน:RunRunSpanRunText

<TextBlock>
    Username: <Run FontWeight="Bold" Text="{Binding UserName}"/>
</TextBlock>

ใส่คำอธิบายภาพที่นี่

นอกจากนี้คุณสามารถจัดรูปแบบทั้งหมดจากโค้ดด้านหลังได้หากต้องการ:

TextBlock tb = new TextBlock();
tb.Inlines.Add("Sample text with ");
tb.Inlines.Add(new Run("bold") { FontWeight = FontWeights.Bold });
tb.Inlines.Add(", ");
tb.Inlines.Add(new Run("italic ") { FontStyle = FontStyles.Italic });
tb.Inlines.Add("and ");
tb.Inlines.Add(new Run("underlined") { TextDecorations = TextDecorations.Underline });
tb.Inlines.Add("words.");

44

ลองดูตัวอย่างนี้จาก Charles Petzolds Bool Application = Code + markup

//----------------------------------------------
// FormatTheText.cs (c) 2006 by Charles Petzold
//----------------------------------------------
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Documents;

namespace Petzold.FormatTheText
{
    class FormatTheText : Window
    {
        [STAThread]
        public static void Main()
        {
            Application app = new Application();
            app.Run(new FormatTheText());
        }
        public FormatTheText()
        {
            Title = "Format the Text";

            TextBlock txt = new TextBlock();
            txt.FontSize = 32; // 24 points
            txt.Inlines.Add("This is some ");
            txt.Inlines.Add(new Italic(new Run("italic")));
            txt.Inlines.Add(" text, and this is some ");
            txt.Inlines.Add(new Bold(new Run("bold")));
            txt.Inlines.Add(" text, and let's cap it off with some ");
            txt.Inlines.Add(new Bold(new Italic (new Run("bold italic"))));
            txt.Inlines.Add(" text.");
            txt.TextWrapping = TextWrapping.Wrap;

            Content = txt;
        }
    }
}

7

เว็บไซต์ที่ดีพร้อมคำอธิบายที่ดี:

http://www.wpf-tutorial.com/basic-controls/the-textblock-control-inline-formatting/

ที่นี่ผู้เขียนให้ตัวอย่างที่ดีสำหรับสิ่งที่คุณกำลังมองหา! ไซต์โดยรวมเหมาะสำหรับสื่อการวิจัยและครอบคลุมตัวเลือกมากมายที่คุณมีใน WPF

แก้ไข

มีวิธีการต่างๆในการจัดรูปแบบข้อความ สำหรับการจัดรูปแบบพื้นฐาน (ง่ายที่สุดในความคิดของฉัน):

    <TextBlock Margin="10" TextWrapping="Wrap">
                    TextBlock with <Bold>bold</Bold>, <Italic>italic</Italic> and <Underline>underlined</Underline> text.
    </TextBlock>

ตัวอย่างที่ 1 แสดงการจัดรูปแบบพื้นฐานด้วยBold Itallicและข้อความขีดเส้นใต้

ต่อไปนี้รวมถึงวิธี SPAN ด้วยสิ่งนี้คุณจะเน้นข้อความ:

   <TextBlock Margin="10" TextWrapping="Wrap">
                    This <Span FontWeight="Bold">is</Span> a
                    <Span Background="Silver" Foreground="Maroon">TextBlock</Span>
                    with <Span TextDecorations="Underline">several</Span>
                    <Span FontStyle="Italic">Span</Span> elements,
                    <Span Foreground="Blue">
                            using a <Bold>variety</Bold> of <Italic>styles</Italic>
                    </Span>.
   </TextBlock>

ตัวอย่างที่ 2 แสดงฟังก์ชันสแปนและความเป็นไปได้ที่แตกต่างกัน

สำหรับคำอธิบายโดยละเอียดตรวจสอบเว็บไซต์!

ตัวอย่าง


แม้ว่าลิงก์นี้อาจตอบคำถามได้ แต่ควรรวมส่วนสำคัญของคำตอบไว้ที่นี่และระบุลิงก์เพื่อการอ้างอิง คำตอบแบบลิงก์เท่านั้นอาจไม่ถูกต้องหากหน้าที่เชื่อมโยงเปลี่ยนไป - จากรีวิว
Richard Slater

1
@Mogsdad แก้ไขโพสต์เพื่อแสดงตัวอย่างของรหัส
Giellez

@RichardSlater แก้ไขโพสต์เพื่อให้แสดงตัวอย่างของรหัส
Giellez

0

นี่คือทางออกของฉัน ....

    <TextBlock TextWrapping="Wrap" Style="{DynamicResource InstructionStyle}"> 
        <Run Text="This wizard will take you through the purge process in the correct order." FontWeight="Bold"></Run>
        <LineBreak></LineBreak>
        <Run Text="To Begin, select" FontStyle="Italic"></Run>
        <Run x:Name="InstructionSection" Text="'REPLACED AT RUNTIME'" FontWeight="Bold"></Run>
        <Run Text="from the menu." FontStyle="Italic"></Run>
    </TextBlock>

ฉันกำลังเรียนรู้ ... ดังนั้นหากใครมีความรู้เกี่ยวกับวิธีแก้ปัญหาข้างต้นโปรดแบ่งปัน! :)

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.