Trang trí Text trong WPF

Trong bài viết này, chúng ta sẽ thảo luận tại sao text đôi khi được trang trí mờ hơn với WPF, làm thế nào cái này được cố định và làm thế nào để bạn tự điều khiển việc trang trí text.

Như đã đề cập trong hướng dẫn này, WPF làm được nhiều thứ hơn trên chính nó khi so sánh với những framework về giao diện khác như WinForms, nó sẽ dùng Windows API cho rất nhiều thứ. Điều này cũng rõ ràng khi đề cập đến việc trang thí text - WinForms sử dụng GDI API từ Windows, trong khi WPF có cách thực thi việc trang trí của riêng nó, cũng như hỗ trợ hình ảnh động tốt hơn khi độc lập với thiết bị.

Không may, điều này dẫn tới việc text có thể được trang trí mờ hơn 1 chút, đặc biệt khi sử dụng font nhỏ. Điều này đôi khi đúng là 1 vấn đề lớn đối với những người lập trình WPF, nhưng may thay Microsoft đã có rất nhiều cải thiện trong cơ chế trang trí text của WPF ở .NET framework phiên bản 4.0. Có nghĩa là nếu chúng ta đang sử dụng phiên bản này hoặc cao hơn, text của bạn sẽ hầu như hoàn hảo như các điểm ảnh.

Điều khiển việc trang trí text

Với framework 4.0, Microsoft cũng quyết định trao thêm nhiều điều khiển trang trí text cho lập trình viên, bằng việc giới thiệu lớp TextOptions với các thuộc tính TextFormattingMode và TextRenderingMode. Điều này cho phép bạn quyết định riêng biệt text nào nên được định dạng và trang trí ở cấp control. Để chắc chắn tốt nhất nên minh họa với 1 ví dụ, vì vậy hãy xem xét đoạn mã và màn hình chụp bên dưới để thấy bạn có thể tác động đến trang trí text với những thuộc tính ra sao.

TextFormattingMode

Sử dụng thuộc tính TextFormatingMode, bạn quyết định thuật toán nào nên được dùng khi định dạng text. Bạn có thể chọn giữa Ideal (giá trị mặc định) và Display. Thông thường bạn sẽ muốn thuộc tính này không động đến, khi đó thiết lập Ideal sẽ là tốt nhất cho hầu hết các trường hợp, nhưng trong những trường hợp bạn cần trang trí những text rất nhỏ, thiệt lập Display thỉnh thoảng có thể mạng lại kết quả tốt hơn. Sau đây là 1 ví dụ để bạn có thể thấy sự khác biệt (mặc dù nó rất khó thấy):

<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

Thuộc tính TextRenderingMode trao cho bạn quyền điều khiển thuật toán chống răng cưa nào được sử dụng khi trang trí text. Nó có ảnh hưởng lớp nhất khi kết hợp với thiết lập Display của thuộc tính TextFormattingMode, chúng ta sẽ sử dụng điều này trong ví dụ sau để minh họa những khác biệt:

<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>

Như bạn thấy, kết quả khác khá nhiều qua các cách nó hiển thị, bạn chủ yếu nên thay đổi điều này trong một số trường hợp đặc biệt.