Giới thiệu về WPF styles

Nếu bạn đến từ thế giới phát triển cho web, sử dụng HTML và CSS, bạn sẽ nhanh chóng nhận ra rằng XAML giống như HTML: Sử dụng thẻ, bạn xác định bố cục cấu trúc của ứng dụng. Bạn thậm chí có thể làm cho các thành phần của mình trông theo một cách nhất định, bằng cách sử dụng các thuộc tính nội tuyến như Foreground, FontSize, v.v., giống như bạn có thể định kiểu cục bộ các thẻ HTML của mình.

Nhưng điều gì xảy ra khi bạn muốn sử dụng cùng một cỡ chữ và màu chính xác trên ba điều khiển TextBlock khác nhau? Bạn có thể sao chép/dán các thuộc tính mong muốn vào từng thuộc tính, nhưng điều gì xảy ra khi ba điều khiển trở thành 50 điều khiển, trải rộng trên một số cửa sổ? Và điều gì xảy ra khi bạn nhận ra rằng kích thước phông chữ nên là 14 thay vì 12?

WPF giới thiệu về styling, đó là XAML CSS là gì đối với HTML. Sử dụng các style, bạn có thể nhóm một tập các thuộc tính và gán chúng cho các điều khiển cụ thể hoặc tất cả các điều khiển của một loại cụ thể và giống như trong CSS, một style có thể kế thừa từ một style khác.

Ví dụ style cơ bản

Chúng ta sẽ nói nhiều hơn về tất cả các chi tiết, nhưng trong chương giới thiệu này, tôi muốn cho bạn thấy một ví dụ rất cơ bản về cách sử dụng style:

<Window x:Class="WpfTutorialSamples.Styles.SimpleStyleSample"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="SimpleStyleSample" Height="200" Width="250">
    <StackPanel Margin="10">
        <StackPanel.Resources>
            <Style TargetType="TextBlock">
                <Setter Property="Foreground" Value="Gray" />
                <Setter Property="FontSize" Value="24" />
            </Style>
        </StackPanel.Resources>
        <TextBlock>Header 1</TextBlock>
        <TextBlock>Header 2</TextBlock>
        <TextBlock Foreground="Blue">Header 3</TextBlock>
    </StackPanel>
</Window>

Đối với tài nguyên của StackPanel của tôi, tôi xác định Style. Tôi sử dụng thuộc tính TargetType để nói với WPF rằng style này nên được áp dụng cho TẤT CẢ các điều khiển TextBlock trong phạm vi (StackPanel), sau đó tôi thêm hai phần tử Setter vào style. Các phần tử Setter được sử dụng để đặt các thuộc tính cụ thể cho các điều khiển đích, trong trường hợp này là các thuộc tính Foreground và FontSize. Thuộc tính Property cho WPF biết thuộc tính nào chúng ta muốn nhắm mục tiêu và thuộc tính Value xác định giá trị mong muốn.

Lưu ý rằng TextBlock cuối cùng có màu xanh thay vì màu xám. Tôi đã làm điều đó để cho bạn thấy rằng trong khi điều khiển có thể có kiểu dáng từ kiểu được chỉ định, bạn hoàn toàn tự do ghi đè cục bộ này trên điều khiển - các giá trị được xác định trực tiếp trên điều khiển sẽ luôn được ưu tiên hơn các giá trị style.

Tổng kết

WPF styles giúp dễ dàng tạo giao diện cụ thể và sau đó sử dụng nó cho một số điều khiển và trong khi ví dụ đầu tiên này rất cục bộ, tôi sẽ chỉ cho bạn cách tạo global styles trong các chương tiếp theo.