Những Styles vô cùng quan trọng bởi vì chúng cho phép những nhà phát triển kiểm soát phong cách và kiến trúc của những control trong các ứng dụng của họ. Bằng cách sử dụng styles bạn có thể thay đổi sự khai báo style một cách dễ dàng và tất cả các
control trong ứng dụng cũng được cập nhật một cách tự động. Điều này giúp bạn cập nhật các control nhanh hơn là thay đổi từng cái một trong các ứng dụng. (Hơn nữa bạn còn có thể sử dụng nó cho các ứng dụng khác (kế thừa)).
Trong bài này chúng ta sẽ khám phá các nền tảng cơ bản được sử dụng của styles trong Silverlight. Tôi sẽ tiếp tục với những điều phức tạp hơn về style ở Tip of the Day tiếp theo.
Trong Silverlight, styles được khai báo với những control tag <UserControl.Resources> . Nếu bạn muốn thực hiện trên toàn bộ các control thì bạn đặt chúng trong tập tin App.XAML của bạn với những tag <Application.Resources> .
Để minh họa điểm này chúng ta tạo một style cho toàn bộ những gì chúng ta sẽ hiển thị trong TextBlocks xuyên suốt ứng dụng đơn giản của chúng ta:
<Application xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation
xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
x:Class="MyApp.App">
<Application.Resources>
<Style x:Name="TextBoxStyle" TargetType="TextBlock">
<Setter Property="FontFamily" Value="Calibri.ttf#Calibri"></Setter>
<Setter Property="FontSize" Value="16"></Setter>
</Style>
</Application.Resources>
</Application>
Với mã XAML ở trên:
- Style - Khai báo mỗi style với thẻ <Style></Style> trong thẻ <Application.Resources> hay phần <UserControl.Resources> .
- Name – Đặt tên cho style (qua thuộc tính x:Name=””) vì thế chúng ta có thể tham chiếu đến nó từ các control của chúng ta .
- TargetType -Tên của FrameworkElement mà bạn đang hướng đến. Trong trường hợp của chúng ta ở trên, ta đang hướng đến một “TextBlock”.
- Setter
- Mỗi thuộc tính chúng ta muốn gán cho style này được khai báo như một Setter.
Bạn có thể gán nhiều setters trên một style. Thí dụ, FontSize, FontFamily, vv....
Tiếp theo, mã XAML sau đây hiển thị cho bạn biết bằng cách nào tạo nhiều TextBlocks với cùng một style được áp dụng lên nó.
<TextBlock x:Name="myTextBlock" Text="Hello There." Style="{StaticResource TextBoxStyle}"></TextBlock>
<TextBlock x:Name="myTextBlock2" Text="How are you?" Style="{StaticResource TextBoxStyle}"></TextBlock>
<TextBlock x:Name="myTextBlock2" Text="Good thanks!" Style="{StaticResource TextBoxStyle}"></TextBlock>
Cuối cùng, nếu bạn muốn thay đổi font size cho những TextBlocks này, tất cả những gì chúng ta phải làm là chỉ cần thay đổi nó trong style setter đơn giản và nhanh hơn là thay đổi từng TextBlock riêng biệt.
Trước: <Setter Property="FontSize" Value="16"></Setter>
Sau: <Setter Property="FontSize" Value="25"></Setter>
Thank you,
--Mike Snow