Style là gì ? Dùng để làm gì ?
Khi chung ta thiết kế một website hẳn chúng ta đã quen thuộc với CSS là nơi chứa định dạng cho web. Một định dạng trong file chứa CSS có thể áp dụng lặp lại nhiều lần cho các thẻ.
Style trong WPF cũng được kế thừa từ tư tưởng đó nó chứa các định dạng cho các điều khiển hay Layout…
Chúng ta tưởng tượng nếu phải thiết kế một form có chứa 3 hay nhiều hơn nữa các TextBox có font chữ là Times New Roman cỡ là 12, in đậm… sẽ được viết tương tự như sau :<o:p></o:p>
<o:p></o:p>
|
<StackPanel Orientation="Vertical">
<TextBox FontFamily="Times New Roman" FontSize="12" FontWeight="Bold">Text box 1</TextBox>
<TextBox FontFamily="Times New Roman" FontSize="12" FontWeight="Bold">Text box 2</TextBox>
<TextBox FontFamily="Times New Roman" FontSize="12" FontWeight="Bold">Text box 3</TextBox>
</StackPanel><o:p></o:p>
|
Nếu như chúng ta có thể có lưu lại các định dạng này và đặt tên mà khi chung ta muốn áp dụng cho một TextBox chỉ chọn, đặt kiểu định dạng là tên đã đặt và đó gọi là Style, code sẽ tương tự như sau :
<o:p></o:p>
|
<Window.Resources>
<!--Khai bao style trong phan tai nguyen cua window-->
<Style x:Key="styleTextBox" TargetType="TextBox">
<Setter Property="FontFamily" Value="Times New Roman"/>
<Setter Property="FontSize" Value="12"/>
<Setter Property="FontWeight" Value="Bold"/>
</Style>
</Window.Resources>
<StackPanel Orientation="Vertical">
<TextBox Style="{StaticResource styleTextBox}">Textbox 1</TextBox>
<TextBox Style="{StaticResource styleTextBox}">Textbox 2</TextBox>
<TextBox Style="{StaticResource styleTextBox}">Textbox 3</TextBox>
</StackPanel>
|
Kết quả của hai đoạn mã lệnh trên đều là :
<o:p>
</o:p>
Vậy Style là một tập hợp những thuộc tính và giá trị của chúng giúp định dạng các điều khiển.
Với Style ta thấy việc viết code trơ nên ngắn, gọn hơn, không phải copy lại nhiều lần và Style cũng giúp bạn đồng nhất định dạng của các điều khiển một cách dễ dàng. Đặc biệt Sytle giúp sửa đổi, bảo trì ứng dụng một cách tốt hơn. Như ở ví dụ trên bạn cần sửa lại các TextBox này có cỡ trữ là 14, với cách thông thường bạn cần sửa tại 3 vị trí còn với Style chúng ta chỉ cần sửa 1 ví trí dù cho có bao nhiêu TexBox đi chăng nữa.
Cách đưa Style vào trong ứng dụng
Tạm thời vấn đề của chúng ta là làm sao để có thể khai báo và sử dụng được Style còn trong Style có thể làm được những gì sẽ được trình bày ở phần sau.
Cách 1 : Khai bao ngay tại cửa sổ sẽ dùng Style đó
Như trong ví dụ trên bạn thấy Style TextBox đã được khai báo ngay trong phân khai báo tài nguyên của chính window chứa Style đó.
Như chúng ta đã thấy để khai báo tài nguyên của window chúng ta khai báo trong cặp lệnh :
|
<Window.Resources>
<!—Các tài nguyên của cửa sổ-->
</Window.Resources><o:p></o:p>
|
Để khai báo một Style chúng ta dùng cặp lệnh khai bão Style :
<o:p></o:p>
|
<Style>
<!—…....-->
</Style><o:p></o:p>
|
Vậy là các bạn đã có thể khai báo được các Style là tài nguyên của cửa sổ.
Cách 2 : Khai bao các Style có thể sử dụng được cho cả ứng dụng trong phân tài nguyên của ứng dụng
Để khai báo tài nguyên cho cả ứng dụng chúng ta dùng cặp lệnh sau trong file app.xaml
<o:p></o:p>
|
<Application.Resources>
<!—Các tài nguyên của ứng dụng-->
</Application.Resources><o:p></o:p>
|
Chúng ta sẽ khai báo các Style trong phân này để có thể sự dụng chúng trong cả ứng dụng.
Cú pháp khai báo Style
Như chúng ta đã thấy ở ví dụ ban đầu để khai báo một Style chúng ta dùng cặp thẻ
|
<Style x:Key="styleTextBox" TargetType="TextBox">
<!—Noi dung cua Style-->
</Style><o:p></o:p>
|
Trong đó:
x:Key="styleTextBox" để cho biết tên của Style này là styleTextBox.
TargetType="TextBox" để cho biết Style này được ạp dụng cho điều khiển TextBox hoặc có thể gán TargetType="{x:Type TextBox}" cũng có ý nghĩa tương tự.
Thuộc tính TargetType là giúp xác định đối tượng được áp dụng Style. Thuộc tính này có thể không cần khai báo.
Thuộc tính này thì x:Key có thể không cần khai báo. Trong trường hợp không khai báo thì tất cả các điều khiển được chỉ định trong TargetType trong phạm vị anh hưởng đều tự động áp dung Style.
Ngoài ra chúng ta có thể sự dụng thuộc tính BasedOn để cho biết là Style đang triển khai được kế thừa từ một Style nào đó ví dụ sau khai báo Style mới được kế thừa từ Style styleTextBox:
|
<Style BasedOn="{StaticResource styleTextBox}">
</Style><o:p></o:p>
|
Cách ạp dụng Style cho một điều khiển
Để áp dụng một Style cho một điều khiển như bạn đã thấy ở ví dụ bạn đầu chúng ta thông qua thuộc tính Style của điều khiển ví dụ để áp dụng Style có tên styleTextbox đã được khai báo cho một TextBox ta có đoạn code sau :
|
<TextBox Style="{StaticResource styleTextBox}">Textbox 1</TextBox><o:p></o:p>
|
Nếu như các bạn có các tên Style giống nhau ở các mức window, ứng dụng… thì khi áp đặt Style đó cho một điều khiển nó sẽ áp dụng Style từ cục bộ cho đến toàn cục – từ của các Layout sau đó là window và rồi đến của ứng dụng.
Nội dung trong Style
Vấn đề cuối cùng mà chúng ta quan tâm đó là chúng ta có thể thiết đặt những gì bên trong một Style.
Setter - Thiết đặt các thuộc tính.
Để thiết đặt giá trị cho thuộc tính chúng ta dùng thẻ Setter.
<o:p></o:p>
|
<Style x:Key="styleTextBox" TargetType="TextBox">
<!—Thiết đặt thuộc tính cỡ chữ = 12-->
<Setter Property="FontSize" Value="12"/>
<!—Các bạn có thể thiết đặt các thuộc tính khác-->
</Style><o:p></o:p>
|
Trigger – Giúp bạn theo rõi các hành động
Khi bạn viết các Style bạn có thể định nghĩa răng cứ khi chuột di chuyển vào thì màu chữ đổi thành đỏ và khi chuột đi ra lại bình thường một các rất đơn giản với Trigger. Dưới đây là đoạn khai báo Style có chứa Trigger để minh họa:
|
<Style x:Key="styleTextBox" TargetType="TextBox">
<Setter Property="FontFamily" Value="Times New Roman"/>
<Setter Property="FontSize" Value="12"/>
<Setter Property="FontWeight" Value="Bold"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Foreground" Value="Red"/>
</Trigger>
</Style.Triggers>
</Style><o:p></o:p>
|
Khi chuột di truyển qua mục TextBox nào thì màu của TextBox đó sẽ chuyển thành màu đỏ như ở hình dưới đây.
<o:p>
</o:p>
<o:p></o:p>Như các bạn thấy để định nghĩa các trigger ta thêm thẻ <Style.Triggers> vào trong Style và sau đó là định nghĩa các trigger mỗi trigger dùng cho một “sự kiện” quy định trong thuộc tính Property nếu giá trị đúng quy định của thuộc tính Value thì các thiết đặt trong đó sẽ được áp dụng.
Trong ví dụ trên ta dùng Trigger kiểm tra IsMouseOver nếu giá trị bằng true thì thiết đặt màu chữ là màu đỏ.
Ngoài ra chúng ta có thể tạo ra các MultiTrigger để kiểm tra đồng thời một lúc không phải là một hành động ví dụ cho phép càn có cả chuột di truyển qua lại điều khiện lại đang phải Enable thì mới thực hiện
<o:p></o:p>
|
<Style x:Key="styleTextBox" TargetType="TextBox">
<Setter Property="FontFamily" Value="Times New Roman"/>
<Setter Property="FontSize" Value="12"/>
<Setter Property="FontWeight" Value="Bold"/>
<Style.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True"/>
<Condition Property="IsEnabled" Value="True" />
</MultiTrigger.Conditions>
<Setter Property="Foreground" Value="Red"/>
</MultiTrigger>
</Style.Triggers>
</Style><o:p></o:p>
|
Ngoài ra còn có DataTrigger – Theo rõi dữ liệu, EventTriger – Theo rõi sự kiện.
Ngoài ra các bạn có thể khai báo Style danh riêng cho các thẻ Layout trong phân tài nguyên của thẻ đó.
Hy vọng bài viết của tôi sẽ giúp các bạn tìm hiểu và vận dụng được thêm một điểm mạnh nữa của WPF.
____________________________________________________________<o:p></o:p>
Lê Công Thành
Khoa Công nghệ thông tin – Đại học sư phạm kỹ thuật Hưng Yên
Mobile : 0904464538
Email : thanhlct@gmail.com<o:p></o:p>
