TextBlock control

TextBlock không phải là 1 control, bởi vì nó không kế thừa từ lớp Control, nhưng nó được sử dụng như bất kỳ control nào khác trên WPF framework, vì vậy chúng ta gọi nó là 1 control để giữ cho mọi thứ đơn giản.

TextBlock Control là một trong những control cơ bản nhất của WPF, nó rất hữu ích. Nó cho phép bạn hiển thị văn bản trên màn hình, giống như một Label, nhưng đơn giản và ít tốn tài nguyên hơn. Một cách hiểu đơn giản là một dạng Label ngắn gọn, 1 dòng text (nhưng có thể bao gồm 1 hình ảnh), trong khi TextBlock hiển thị rất tốt cho chuỗi nhiều dòng, nhưng nó chỉ bao gồm văn bản. Cả Label và TextBlock đều có những ưu điểm riêng, vì vậy tùy vào trường hợp mà sử dụng một cách tối ưu.

Chúng tôi đã dùng TextBlock control trong bài viết "Hello, WFP!", nhưng bây giờ hãy nhìn vào hình thức đơn giản nhất của TextBlock:

<Window x:Class="WpfTutorialSamples.Basic_controls.TextBlockSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="TextBlockSample" Height="100" Width="200">
    <Grid>
		<TextBlock>This is a TextBlock</TextBlock>
    </Grid>
</Window>

Nó thì đơn giản như khi nó xuất hiện nếu bạn đã đọc ở những chương trước của bài hướng dẫn này, và không nên có bất kỳ điều gì mới ở đây. Phần chữ trong TextBlock đơn giản là một lối tắt của việc thiết lập thuộc tính Text của TextBlock.

Trong ví dụ kế tiếp, chúng ta hãy thử một chuỗi ký tự dài hơn để xem cách TextBlock xử lý nó. Tôi cũng đã thêm canh lề một chút để nó trông tốt hơn:

<Window x:Class="WpfTutorialSamples.Basic_controls.TextBlockSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="TextBlockSample" Height="100" Width="200">
    <Grid>
		<TextBlock Margin="10">This is a TextBlock control and it comes with a very long text</TextBlock>
    </Grid>
</Window>

Việc xử lý với chuỗi ký tự dài

Bạn sẽ nhanh chóng nhận ra từ screenshot, TextBlock tuyệt vời ở khả năng xử lý với chuỗi dài và nhiều dòng, nhưng nó sẽ không mặc định làm điều này. Trong trường hợp text quá dài để để hiển thị bên trong window, WPF sẽ hiện thị tất cả các ký tự có thể có và kết thúc.

May mắn thay, có vài cách để xử lý vấn đề này. Trong ví dụ kế tiếp, tôi sẽ cho bạn xem tất cả và sẽ giải thích chúng sau:

<Window x:Class="WpfTutorialSamples.Basic_controls.TextBlockSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="TextBlockSample" Height="200" Width="250">
    <StackPanel>
		<TextBlock Margin="10" Foreground="Red">
			This is a TextBlock control<LineBreak />
			with multiple lines of text.
		</TextBlock>
		<TextBlock Margin="10" TextTrimming="CharacterEllipsis" Foreground="Green">
			This is a TextBlock control with text that may not be rendered completely, which will be indicated with an ellipsis.
		</TextBlock>
		<TextBlock Margin="10" TextWrapping="Wrap" Foreground="Blue">
			This is a TextBlock control with automatically wrapped text, using the TextWrapping property.
		</TextBlock>
	</StackPanel>
</Window>

Ở đây, chúng ta có 3 TextBlock control, mỗi cái một màu sắc khác nhau (sử dụng thuộc tính Foreground) để dễ nhìn hơn. Chúng quản lý nội dung text quá dài theo những cách khách nhau:

Red TextBlock sử dụng thẻ LineBreak để tự tay xuống dòng ở vị trí đã được thiết kế. Việc này cho phép điều khiển vị trí tuyệt đối bạn muốn xuống dòng, nhưng nó không uyển chuyển cho hầu hết các trường hợp. Nếu người dùng làm window lớn hơn, text vẫn sẽ xuống dòng ở vị trí tương tự, mặc dù có đủ không gian để text hiển thị trên 1 dòng.

Green TextBlock sử dụng thuộc tính TextTrimming với giá trị CharacterEllipsis để TextBlock hiển thị (...) khi nó không đủ không gian bên trong control. Đây là cách thông thường để thể hiện rằng có nhìu ký tự ở sau nhưng không đủ khoảng trống để hiển thị. Điều này tuyệt vời khi bạn có một chuỗi quá dài nhưng bạn tuyệt đối không muốn dùng nhiều hơn một dòng. Có một giá trị thay thế cho CharacterEllipsis, bạn có thể sử dụng giá trị WordEllipsis, nó sẽ cắt phần chữ cuối cùng thay vì những ký tự cuối cùng, để phòng trường hợp 1 chữ chỉ hiển thị 1 phần của nó.

Blue TextBlock sử dụng thuộc tính TextWrapping với giá trị Wrap để TextBlock xuống dòng tại điểm mà text không đủ khoảng trống để nhét vào ở dòng trước đó. Trái ngược với TextBlock đầu tiên khi mà bạn tự xác định điểm xuống dòng, ở đây sẽ tự động hoàn toàn và thậm chí tốt hơn: nó cũng tự động canh chỉnh ngay khi TextBlock có nhiều hoặc ít khoảng trống sẵn có hơn.

Đó là tất cả về việc xử lý chuỗi đơn giản của TextBlock. Trong chương tới, chúng ta sẽ xem xét thêm vài chứng năng nâng cao của TextBlock, điều đó cho phép chúng ta tạo text với nhiều kiểu dáng bên trong TextBlock và hơn thế nữa.