WPF Training - Tìm Hiểu Về Material Design For WPF

Phong cách thiết kế Material Design nhắm đến những đường nét đơn giản, sử dụng nhiều mảng màu đậm nổi bật, các đối tượng đồ họa trong giao diện dường như đang “trôi nổi” lên nhau. Ngoài ra, nó còn bao gồm cả những hiệu ứng chuyển động tự nhiên khi các nút, menu hiện diện trên màn hình. Tất cả đều nhằm mang lại cho người dùng trải nghiệm mới mẻ hơn, thú vị hơn và gần giống đời thực hơn. Nếu đang sử dụng Android L ắt hẳn các bạn sẽ thấy thích thú với ngôn ngữ thiết kế mới này, hôm nay tôi sẽ giới thiệu đến các bạn bộ thư viện giúp chúng ta mang ngôn ngữ Design này lên Windows nói chung và ứng dụng WPF nói riêng.

I> Material Design là gì?

Chúng ta có thể tưởng tượng các ứng dụng được xây dựng dựa trên ngôn ngữ Material Design giống như một tập hợp gồm nhiều tờ giấy chồng lên nhau, mỗi tờ có một màu và bản thân nó tồn tại như một lớp riêng. Các hiệu ứng đổ bóng của tờ này lên tờ khác cũng được mô tả cụ thể và quy tắc trong Material Design. Vì giấy là các đối tượng tự nhiên, có thực ngoài đời nên khi chúng xuất hiện, khi mở ra, khi di chuyển…đều phải có điểm xuất phát và kết thúc, không thể nào đột ngột có mặt và biến mất được. Lưu ý rằng các tờ giấy khác hoàn toàn với một hộp giấy vì thế các lớp phải có độ mỏng nhất định và không biến thành hình khối 3-D.

Ngoài ra, Google còn muốn các ứng dụng Material Design phải thật đơn giản, tinh gọn và không sử dụng các thành phần thừa, không bóng loáng kiểu 3-D và hiệu ứng ánh sáng phản chiếu. Theo hãng, việc xuất hiện của các nút, các menu thừa thải có thể gây rối cho người dùng, nó cũng chiếm không gian của nội dung chính và mọi chuyện sẽ càng tệ hơn khi app chạy trên các thiết bị nhỏ như đồng hồ thông minh.

II> Một ứng dụng Material Design tiêu chuẩn

• Sử dụng các màu nổi bật, thường có một mảng màu chủ đạo nằm ở cạnh trên ứng dụng
• Các biểu tượng phẳng, đơn giản nhưng dễ hiểu
• Menu, nút nhấn, chữ viết… có nhiều khoảng cách trắng nên trông thoáng đãng
• Có các hiệu ứng chuyển động tự nhiên, mượt mà, có tâm điểm và luôn có một nguyên tắc.
• Các button sẽ có cảm giác nổi lên trên các bề mặt khác và icon không cầu kỳ.
• Toàn bộ một ứng dụng luôn có một gam màu chủ đạo, nổi bật.

III> Mang Material Design lên WPF

Tại sao tôi không mang ngôn ngữ này lên Winform - bởi vì khả năng tùy biến của Winform quá kém và chúng ta bị hạn chế sự sáng tạo cũng như việc custom khá khó khăn. Dưới đây là một ứng dụng WPF dùng màu và các cách đổ bóng cũng như hiệu ứng được GG quy định.







Các bạn có thể tải về toàn bộ thư viện tại đây

Hoặc các bạn có thể tải về từ Nuget hai DLL sau

- MaterialDesignColors: chứa các mẫu Color do Google cung cấp tại đây, chúng ta chỉ việc chọn màu ưng ý.


Install-Package MaterialDesignColors


-  MaterialDesignThemes: chứa các Template và style


Install-Package MaterialDesignThemes


Để biết cách sử dụng tôi sẽ hướng dẫn làm một Project cơ bản như sau.
- Tạo một project WPF Application và tiến hành Reference hai thư viện trên.

- Config để sử dụng được các Resource trong bộ thư viện trên với các lưu ý sau.

+ Chúng ta chỉ nên reference đến Resource nào mà mình muốn sử dụng, không nên reference tất cả.

+ Sử dụng MergedDictionaries để gộp các Key dictionary có thể bị trùng

Lưu ý rằng các Color của Material Design có dạng


#80cbc4


vì vậy bạn sẽ không thể dùng trực tiếp màu này cho các đối tượng như sau bởi Background nhận một thông số là SolidColorBrush







Thay vào đó chúng ta sẽ tạo riêng cho mình các resource tương ứng và refer đến màu của thư viện

App.xml




















Như thế chúng ta đã xong phần refer đến bộ màu của Material Design, tiếp theo là khai báo bộ Style/Template.

App.xaml




































MainWindow

















Kết quả:




Tải về source tại đây, chúc các bạn thành công!