Sử dụng Themes trong WPF

Bạn đang sử dụng WPF và muốn ứng dụng của mình viết ra thật bóng bẩy và đẹp. Nhưng việc thiết kế giao diện WPF sao cho thật đẹp thì rất khó. Cách đơn giản nhất là sử dụng Theme có sẵn ở trên mạng :D

Đầu tiên bạn vào trang Codeplex để download Themes về.

Áp dụng Theme cho toàn bộ chương trình

Bạn copy Theme vào 1 thư mục nào đó trong chương trình. Sau đó mở file App.xaml, bạn thêm vào ResourceDictionary đường dẫn tới theme cần áp dụng

    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Themes/WhistlerBlue.xaml"/>                
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>

Giờ bạn thử kéo 1 button và xem nó thay đổi thế nào.

Chỉnh sửa Theme đã có

Đôi lúc có 1 số chỗ, việc thiết kế sẵn đôi khi không phù hợp với chương trình của bạn. Ví dụ như trong Theme WhistlerBlue, phần định nghĩa style cho button, đã bị ẩn đi phần content nếu là text (Dòng 454)

<TextBlock Panel.ZIndex="1"
 x:Name="DisabledOverlay"
 Text="{TemplateBinding Content}"
 Foreground="#FF969696"
 HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
 VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
 Margin="{TemplateBinding Padding}"
 Visibility="Collapsed"/>

Cách đơn giản nhất là sửa trực tiếp vào file Theme nhưng sẽ ảnh hưởng đến toàn bộ trong chương trình. Cách tốt nhất là bạn kế thừa và viết nó trong Window.Resource

<Style x:Key="template2" BasedOn="{StaticResource _buttonStyleBase}" TargetType="{x:Type Button}">
 <Setter Property="Template">
  <Setter.Value>
   <ControlTemplate TargetType="Button">
    <Grid>
     <Rectangle Fill="{TemplateBinding Property=Background}"></Rectangle>
     <ContentPresenter HorizontalAlignment="Center"
      VerticalAlignment="Center"/>
    </Grid>
   </ControlTemplate>
  </Setter.Value>
 </Setter>
</Style>

Trường hợp bạn muốn áp dụng kiểu button đó cho cửa sổ window hiện hành, bạn thêm dòng(Chú ý template2 chính là tên kiểu mà bạn muốn áp dụng)

<Style TargetType="{x:Type Button}" BasedOn="{StaticResource template2}" />

Bạn có thể download ví dụ ở đây
Chúc bạn thành công