תיצוג (rendering) טקסט ב WPF

במאמר הזה נדון בשאלה למה הטקסט לפעמים מתוצג בצורה מטושטשת ב WPF, איך זה תוקן מאוחר יותר ואיך תוכלו לשלוט בעצמכם בתיצוג הטקסט.

כפי שכבר הזכרנו במדריך הזה, WPF עושה הרבה יותר דברים בעצמו בהשוואה לסביבות ממשק משתמש אחרות כמו WinForms, שמשתמש בממשק של חלונות להרבה, הרבה דברים. זה ברור גם כשמדובר בתיצוג טקסט - WinForms משתמש בממשק GDI מחלונות, בעוד ל- WPF יש יישום תיצוג טקסט משלו, כדי לתמוך טוב יותר באנימציות כמו גם באופי הבלתי תלוי בהתקן של WPF.

לרוע המזל, זה הוביל לכך שהטקסט מתוצג באופן מעט מטושטש, במיוחד בגדלי גופן קטנים. זו היתה בעיה די גדולה למתכנתי WPF למשך זמן מה, אך למרבה המזל, מייקרוסופט ביצעה הרבה שיפורים במנוע תיצוג הטקסט של WPF בסביבת .NET בגירסה 4.0. מכאן שאם תשתמשו בגירסה זו או מתקדמת יותר, הטקסט שלכם אמור להיות כמעט מושלם ברמת הפיקסל.

שליטה על תיצוג הטקסט

בסביבת .NET גירסה 4.0, מייקרוסופט החליטה גם לתת למתכנת יותר שליטה על תיצוג הטקסט, על ידי הצגת מחלקת TextOptions עם התכונות TextFormattingMode ו- TextRenderingMode. כך יתאפשר לכם להחליט באופן מדוייק איך הטקסט יעוצב ויתוצג ברמת הפקד. מן הסתם הכי טוב לתאר זאת עם דוגמה, אז בואו ניתן מבט בקוד ובצילומי המסך שלהלן כדי לראות איך תוכלו להשפיע על תיצוג הטקסט עם התכונות הללו.

TextFormattingMode

בעזרת התכונה TextFormattingMode, תוכלו להחליט באיזה אלגוריתם ייעשה שימוש כאשר הטקסט יעוצב. תוכלו לבחור בין Ideal (ברירת המחדל) לבין Display. לרוב תרצו לא לגעת בתכונה הזו, משום שההגדרה Ideal תהיה הטובה ביותר לרוב המצבים, אבל במקרה שתצטרכו לתצג טקסט מאד קטן, ההגדרה Display תשיג לעתים תוצאה טובה יותר. הנה דוגמה להבדל האפשרי (למרות שהוא מאד עדין):

<Window x:Class="WpfTutorialSamples.Control_concepts.TextFormattingModeSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="TextFormattingModeSample" Height="200" Width="400">
    <StackPanel Margin="10">
        <Label TextOptions.TextFormattingMode="Ideal" FontSize="9">TextFormattingMode.Ideal, small text</Label>
        <Label TextOptions.TextFormattingMode="Display" FontSize="9">TextFormattingMode.Display, small text</Label>
        <Label TextOptions.TextFormattingMode="Ideal" FontSize="20">TextFormattingMode.Ideal, large text</Label>
        <Label TextOptions.TextFormattingMode="Display" FontSize="20">TextFormattingMode.Display, large text</Label>
    </StackPanel>
</Window>

TextRenderingMode

התכונה TextRenderingMode נותנת לך לקבוע באיזה אלגוריתם נוגד-קיפול (anti aliasing) ייעשה שימוש כאשר מתצגים טקסט. ההשפעה הכי גדולה שלו תורגש כאשר משלבים אותו עם הגדרת Display של התכונה TextFormattingMode, בה נשתמש בדוגמה הזו כדי להראות את ההבדל:

<Window x:Class="WpfTutorialSamples.Control_concepts.TextRenderingModeSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="TextRenderingModeSample" Height="300" Width="400">
    <StackPanel Margin="10" TextOptions.TextFormattingMode="Display">
        <Label TextOptions.TextRenderingMode="Auto" FontSize="9">TextRenderingMode.Auto, small text</Label>
        <Label TextOptions.TextRenderingMode="Aliased" FontSize="9">TextRenderingMode.Aliased, small text</Label>
        <Label TextOptions.TextRenderingMode="ClearType" FontSize="9">TextRenderingMode.ClearType, small text</Label>
        <Label TextOptions.TextRenderingMode="Grayscale" FontSize="9">TextRenderingMode.Grayscale, small text</Label>
        <Label TextOptions.TextRenderingMode="Auto" FontSize="18">TextRenderingMode.Auto, large text</Label>
        <Label TextOptions.TextRenderingMode="Aliased" FontSize="18">TextRenderingMode.Aliased, large text</Label>
        <Label TextOptions.TextRenderingMode="ClearType" FontSize="18">TextRenderingMode.ClearType, large text</Label>
        <Label TextOptions.TextRenderingMode="Grayscale" FontSize="18">TextRenderingMode.Grayscale, large text</Label>
    </StackPanel>
</Window>

כפי שניתן לראות, הטקסט בתוצאה שונה לא מעט בדרך בה הוא נראה, ושוב, עדיף לשנות את הערך של התכונה הזו בעיקר בנסיבות מיוחדות.