- [C#] Viết ứng dụng xem và dò kết quả xổ số kiến thiết miền nam
- [C#] Hướng dẫn viết ứng dụng theo dõi máy in bao nhiêu trang (Monitor Printer)
- [C#] Lấy thông tin cấu hình máy tính xuất ra text file winform
- [C#] Chia sẽ class Install, Uninstall, Start và Stop Services Winform
- [C#] Tìm kiếm tập tin file nhanh chóng trên Winform sử dụng thư viện FastSearchLibrary
- [C#] Giới thiệu thư viện Fluent FTP Awesome dùng để làm việc với FTP
- [C#] Sử dụng thư viện Mini Profiler Integrations ghi log thực hiện các câu lệnh SQL
- [DEVEXPRESS] Thiết kế Dropdown ButtonBarItem trên Form Ribbon
- [C#] Lưu trạng thái các control trên Winform vào Registry Windows
- [C#] Ứng dụng ví dụ Simple Observer Pattern tăng giảm số lượng trên winform
- [C#] Hướng dẫn lấy thời gian thực server time trên winform
- [DEVEXPRESS] Hướng dẫn bật tính năng Scroll Pixcel in Touch trên GridView
- [DEVEXPRESS] Hướng dẫn sử dụng TileBar viết ứng dụng duyệt hình ảnh Winform
- [DEVEXPRESS] Tô màu border TextEdit trên Winform
- [C#] Lấy dữ liệu từ Console Write hiển thị lên textbox Winform
- [C#] Hiển thị Progress bar trên Window Console
- [C#] Di chuyển control Runtime và lưu layout trên winform
- [SQLSERVER] Sử dụng hàm NULL IF
- [C#] Chia sẽ source code mã đi tuần bằng giao diện Winform
- [C#] Flash Window in Taskbar Winform
Hướng dẫn sử dụng Material Design để thiết kế form sử dụng VB.NET
Đầu tiên mình xin giới thiệu Material Design là gì: Material Design là một phong cách thiết kế mới được Google giới thiệu cùng lúc với phiên bản Android 5.0 Lollipop.
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ư: “trôi nổi” lên. 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.
SƠ LƯỢC VỀ MATERIAL DESIGN
Chúng ta có thể tưởng tượng các phần mềm được xây dựng dựa trên Material Design giống như nhiều tờ giấy khác 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. Khi bạn chồng các tờ giấy này lên nhau thì bạn ra được giao diện chung của một ứng dụng. Các hiệu ứng đổ bóng của tờ này lên tờ khác cũng được mô phỏng lại 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.
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. 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.
DƯỚI ĐÂY LÀ GIAO DIỆN FORM MATERIAL DESIGN:
Để thiết kế giao diện form Material Design đầu tiên các bạn imports file dll MaterialSkin.dll , có sẵn trong thư mục của project.
Khi các bạn kéo file MaterialSkin.dll vào thanh toolbox, các bạn sẽ có được các component của Material: tab, button, label....
- Sau đó các bạn cần imports thư viện vào:
Imports MaterialSkin
Imports MaterialSkin.Controls
Imports MaterialSkin.MaterialSkinManager
- Thừa kế form Material cho form mặc định của windows form:
Inherits MaterialForm
- Sau đó các bạn, cần tạo 1 form new(), để cài đặt lại các component trên form
Public Sub New()
' This call is required by the designer.
InitializeComponent()
' Add any initialization after the InitializeComponent() call.
' Initialize MaterialSkinManager
materialSkinManager = materialSkinManager.Instance
materialSkinManager.AddFormToManage(Me)
materialSkinManager.Theme = materialSkinManager.Themes.LIGHT
materialSkinManager.ColorScheme = New ColorScheme(Primary.Indigo500, Primary.Indigo700, Primary.Indigo100, Accent.Pink200, TextShade.WHITE)
End Sub
- Viết sự kiện thay đổi giao diện (change skin)
Private colorSchemeIndex As Integer
Private Sub MaterialRaisedButton1_Click(sender As Object, e As EventArgs) Handles MaterialRaisedButton1.Click
colorSchemeIndex += 1
If colorSchemeIndex > 2 Then
colorSchemeIndex = 0
End If
'These are just example color schemes
Select Case colorSchemeIndex
Case 0
materialSkinManager.ColorScheme = New ColorScheme(Primary.BlueGrey800, Primary.BlueGrey900, Primary.BlueGrey500, Accent.LightBlue200, TextShade.WHITE)
Exit Select
Case 1
materialSkinManager.ColorScheme = New ColorScheme(Primary.Indigo500, Primary.Indigo700, Primary.Indigo100, Accent.Pink200, TextShade.WHITE)
Exit Select
Case 2
materialSkinManager.ColorScheme = New ColorScheme(Primary.Green600, Primary.Green700, Primary.Green200, Accent.Red100, TextShade.WHITE)
Exit Select
End Select
End Sub
- Viết sự kiện thay đổi background
Private Sub MaterialRaisedButton2_Click(sender As Object, e As EventArgs) Handles MaterialRaisedButton2.Click
materialSkinManager.Theme = If(materialSkinManager.Theme = materialSkinManager.Themes.DARK, materialSkinManager.Themes.LIGHT, materialSkinManager.Themes.DARK)
End Sub
THANKS FOR WATCHING !
DOWNLOAD PROJECT MATERIAL DESIGN