Візуалізація тексту в WPF

У цій статті ми обговоримо чому інколи у WPF текст візуалізується досить розмито, як вдалося вирішити цю проблему та, як ви можете самі контролювати візуалізацію тексту.

Як уже згадано в цій серії уроків, WPF власноруч виконує набагато більше ніж інші фреймворки інтерфейсу користувача, як от WinForms, що для ьілтшості завдань використовує API Windows. Це добре помітно на прикладі візуалізації тексту: WinForms використовує GDI API із Windows, а WPF має свою власну реалізацію візуалізації тексту, для того, щоб краще підтримувати анімацї та бути незалежним від пристрою.

На жаль, це призводить до того, що текст відображається дещо розмито, особливо при малому розмірі тексту. Свого часу це була досить велика проблема для WPF-програмістів. Однак, на щастя, Microsoft додали чимало покращень візуалізації тексту в WPF, випустивши версію 4.0 для .NET framework. Це значить, що якщо ви використовуватимете цю або пізнішу версію, то ваш текст, як правило, відображатиметься майже ідеально.

Керування візуалізацією тексту

Із виходом .NET framework 4.0, Microsoft вирішили надати програмістам більше контролю над візуалізацією тексту, представивши клас TextOptions, що містить властивості TextFormattingMode та TextRenderingMode. Вони дозволяють вам вибрати тип візуалізації та форматування тексту на рівні елементу керування. Це легше пояснити на прикладі. Тож подивіться на код та скріншот нижче, де показано, як ви можете вплинути на візуалізацію тексту, використовуючи ці властивості.

Режим форматування тексту

Використовуючи властивість 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 дає можливість вибрати алгоритм антиелайзингу для візуалізації тексту. Вона дає найкращий ефект у поєднанні зі значенням 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>

Як ви бачите, отриманий текст досить сильно відрізняється, в залежності від вибраного режиму. Однак слід змінювати його лише за особливих обставин.