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