WPF - Kiểu dáng

Khuôn khổ .NET cung cấp một số chiến lược để cá nhân hóa và tùy chỉnh giao diện của ứng dụng. Kiểu cung cấp cho chúng ta sự linh hoạt để đặt một số thuộc tính của một đối tượng và sử dụng lại các cài đặt cụ thể này trên nhiều đối tượng để có giao diện nhất quán.

Trong kiểu, bạn chỉ có thể đặt các thuộc tính hiện có của một đối tượng như Chiều cao, Chiều rộng, Kích thước phông chữ, v.v.
Chỉ có thể chỉ định hành vi mặc định của điều khiển.
Nhiều thuộc tính có thể được thêm vào một kiểu duy nhất.

Các kiểu được sử dụng để mang lại giao diện hoặc giao diện đồng nhất cho một bộ điều khiển. Các kiểu ngầm định được sử dụng để áp dụng giao diện cho tất cả các điều khiển của một kiểu nhất định và đơn giản hóa ứng dụng. Hãy tưởng tượng ba nút, tất cả chúng phải trông giống nhau, cùng chiều rộng và chiều cao, cùng cỡ chữ, cùng màu nền trước, v.v. Chúng ta có thể đặt tất cả các thuộc tính đó trên chính các phần tử của nút và điều đó vẫn khá ổn cho tất cả các nút. Hãy xem sơ đồ sau.

Nhưng trong các ứng dụng đời thực, thông thường bạn sẽ có rất nhiều ứng dụng trong số này cần phải trông giống hệt nhau. Và tất nhiên, không chỉ các nút, bạn thường muốn các khối văn bản, hộp văn bản và hộp tổ hợp, v.v. của mình trông giống nhau trên ứng dụng của bạn. Chắc chắn, phải có một cách tốt hơn để đạt được điều này và nó được gọi làstyling. Bạn có thể coi kiểu là một cách thuận tiện để áp dụng một tập hợp các giá trị thuộc tính cho nhiều phần tử. Hãy xem sơ đồ sau.

Thí dụ

Hãy lấy một ví dụ đơn giản để hiểu khái niệm này. Bắt đầu bằng cách tạo một dự án WPF mới.

Kéo ba nút từ hộp công cụ vào cửa sổ thiết kế.
Mã XAML sau đây tạo ba nút và khởi tạo chúng với một số thuộc tính.

<Window x:Class = "WPFStyle.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006" 
   xmlns:local = "clr-namespace: WPFStyle" 
   mc:Ignorable = "d" Title = "MainWindow" Height = "350" Width = "604"> 
	
   <StackPanel> 
      <Button Content = "Button1" Height = "30" Width = "80" 
         Foreground = "Blue" FontSize = "12" Margin = "10"/> 
      <Button Content = "Button2" Height = "30" Width = "80" 
         Foreground = "Blue" FontSize = "12" Margin = "10"/> 
      <Button Content = "Button3" Height = "30" Width = "80" 
         Foreground = "Blue" FontSize = "12" Margin = "10"/> 
   </StackPanel> 
	
</Window>

Khi bạn nhìn vào đoạn mã trên, bạn sẽ thấy rằng tất cả các nút chiều cao, chiều rộng, màu nền trước, kích thước phông chữ và thuộc tính lề đều giống nhau. Bây giờ khi đoạn mã trên được biên dịch và thực thi, cửa sổ sau sẽ được hiển thị.

Bây giờ chúng ta hãy xem xét cùng một ví dụ, nhưng lần này, chúng ta sẽ sử dụng style.

<Window x:Class = "XAMLStyle.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:d = "http://schemas.microsoft.com/expression/blend/2008" 
   xmlns:mc = "http://schemas.openxmlformats.org/markup-compatibility/2006"
   xmlns:local = "clr-namespace:XAMLStyle" 
   mc:Ignorable = "d" Title = "MainWindow" Height = "350" Width = "604">
	
   <Window.Resources> 
      <Style x:Key = "myButtonStyle" TargetType = "Button"> 
         <Setter Property = "Height" Value = "30" /> 
         <Setter Property = "Width" Value = "80" /> 
         <Setter Property = "Foreground" Value = "Blue" /> 
         <Setter Property = "FontSize" Value = "12" /> 
         <Setter Property = "Margin" Value = "10" /> 
      </Style> 
   </Window.Resources> 
	
   <StackPanel> 
      <Button Content = "Button1" Style = "{StaticResource myButtonStyle}" /> 
      <Button Content = "Button2" Style = "{StaticResource myButtonStyle}" /> 
      <Button Content = "Button3" Style="{StaticResource myButtonStyle}" /> 
   </StackPanel> 
	
</Window>

Kiểu được xác định trong từ điển tài nguyên và mỗi kiểu có một mã định danh khóa duy nhất và một kiểu đích. Bên trong <style>, bạn có thể thấy rằng nhiều thẻ setter được xác định cho từng thuộc tính sẽ được bao gồm trong kiểu.

Trong ví dụ trên, tất cả các thuộc tính chung của mỗi nút hiện được xác định theo kiểu và sau đó kiểu được gán cho mỗi nút bằng một khóa duy nhất bằng cách đặt thuộc tính kiểu thông qua tiện ích mở rộng đánh dấu StaticResource.

Khi bạn biên dịch và thực thi đoạn mã trên, nó sẽ hiển thị cửa sổ sau (cùng một đầu ra).

Lợi thế của việc làm như thế này là rõ ràng ngay lập tức, chúng ta có thể sử dụng lại phong cách đó ở bất cứ đâu trong phạm vi của nó; và nếu chúng ta cần thay đổi nó, chúng ta chỉ cần thay đổi nó một lần trong định nghĩa kiểu thay vì trên từng phần tử.

Ở cấp độ nào, một phong cách được xác định ngay lập tức sẽ giới hạn phạm vi của phong cách đó. Vì vậy, phạm vi, tức là nơi bạn có thể sử dụng kiểu, phụ thuộc vào nơi bạn đã xác định nó. Phong cách có thể được xác định ở các cấp độ sau:

Sr.No	Cấp độ & Mô tả
1	Mức độ kiểm soát Chỉ có thể áp dụng việc xác định kiểu ở cấp độ điều khiển cho điều khiển cụ thể đó. Dưới đây là một ví dụ về cấp độ điều khiển trong đó nút và TextBlock có kiểu riêng.
2	Mức bố cục Việc xác định một kiểu ở bất kỳ cấp độ bố cục nào sẽ làm cho nó có thể truy cập được bởi bố cục đó và chỉ các phần tử con của nó.
3	Mức cửa sổ Việc xác định một kiểu ở cấp độ cửa sổ có thể làm cho nó có thể truy cập được bởi tất cả các phần tử trên cửa sổ đó.
4	Mức độ ứng dụng Việc xác định một kiểu ở cấp ứng dụng có thể làm cho nó có thể truy cập được trong toàn bộ ứng dụng. Hãy lấy cùng một ví dụ, nhưng ở đây, chúng tôi sẽ đặt các kiểu trong tệp app.xaml để làm cho nó có thể truy cập được trong toàn bộ ứng dụng.