WPF

Material design in XAMLK Toolkit

 

Material design là một trong những thư viện thiết kế giao diện dễ sử dụng trên nhiều nền tảng.

Với Material design chúng ta có thể dễ dàng đưa những ứng dụng máy tính vào cuộc sống, sử dụng ngôn ngữ hiện đại và phổ biến.

Thư viện sử dụng hoàn toàn mã nguồn mở và tương thích với những thư viện phổ biến như MahApps và Dragablz.

Tính năng:

  • Style và điều khiển cho đa số những điều khiển.
  • Nhiều điều khiển bổ sung để hỗ trợ thẩm mĩ và luồng thiết kế material desng.
  • Dễ dàng cấu hình các bảng màu Thiết kế Chất liệu ở cả thiết kế và thời gian chạy.API chuyển tiếp cho các hoạt ảnh GUI dễ dàng xây dựng
  • Hoạt động độc lập, và cũng tương thích với các khuôn khổ WPF phổ biến khác, MahApps và Dragablz
  • MVVM

Hướng dẫn sử dụng

  1. Đầu tiên tạo project sau đó cài đặt MaterialDesignThemes từ
  2. Sửa lại file app.xaml như sau

<?xml version=”1.0″ encoding=”UTF-8″?>
<Application . . .>
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source=”pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml” />
<ResourceDictionary Source=”pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml” />
<ResourceDictionary Source=”pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.DeepPurple.xaml” />
<ResourceDictionary Source=”pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Lime.xaml” />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>

 

Sau đó sửa lại MainWindow.xaml như sau
Edit MainWindow.xaml to following:

<Window . . .
xmlns:materialDesign=”http://materialdesigninxaml.net/winfx/xaml/themes&#8221;
TextElement.Foreground=”{DynamicResource MaterialDesignBody}”
TextElement.FontWeight=”Regular”
TextElement.FontSize=”13″
TextOptions.TextFormattingMode=”Ideal”
TextOptions.TextRenderingMode=”Auto”
Background=”{DynamicResource MaterialDesignPaper}”
FontFamily=”{DynamicResource MaterialDesignFont}”>
<Grid>
<materialDesign:Card Padding=”32″ Margin=”16″>
<TextBlock Style=”{DynamicResource MaterialDesignTitleTextBlock}”>My First Material Design App</TextBlock>
</materialDesign:Card>
</Grid>
</Window>

 

 

 

Advertisements

Trả lời

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Đăng xuất / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Đăng xuất / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Đăng xuất / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Đăng xuất / Thay đổi )

Connecting to %s