Mở đầu

Cũng từ lâu lắm rồi mình chưa viết bất cứ chủ đề nào liên quan đến những tiện ích về sự màu mè trình bày phần mềm giao diện sao cho đẹp.Hôm nay mình viết bài này để tổng hợp lại những thứ để giúp bạn có một giao diện WPF đẹp mà không phải tốn nhiều công sức, đồng thời qua đó giải thích các phương pháp dùng và nhược điểm của việc màu mè.

Material Design In XAML Toolkit

 Image 519f71d5 628e 4219 a430 7a4f70ab6997

Công cụ này là công cụ nếu ai đó làm đẹp phần mềm có lẽ đã phải sử dụng qua rất nhiều, nó giúp tiết kiệm thời gian thiết kế mã của một lập trình viên làm backend mà ít quan tâm về giao diện.

Về cơ bản thì bạn chỉ cần đưa them vào là cửa sổ có giao diện đẹp lung linh như mơ.Đơn giản là các tác giả đã tốn khá nhiều công sức bỏ ra để viết và hoàn thiện nên mới được như vậy.

Để làm được điều này bạn chỉ việc tải gói về :

PM> Install-Package MaterialDesignThemes

 Image 94456dc5 f696 45cb 8ad2 ede2f9ab9185

Sau đó công việc tiếp theo đơn giản chỉ là import bộ thư viện vào Resources và cuối cùng là thiết kế với Theo các them lựa chọn bên trên là bạn sẽ có ngay một giao diện tuyệt vời.Ở đây mình chỉ làm demo nên có lẽ sẽ không đẹp được, đơn giản vì mình cũng không thích việc màu mè cho lắm, lát nữa mình sẽ giải thích ở cuối bài chi tiết.Với các tiện ích tương tự hoặc tuỳ chỉnh theo ý muốn đều sẽ có các phần nhw vậy.

<Window x:Class="WPFSample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WPFSample"
        mc:Ignorable="d"
        xmlns:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks"
        xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
        TextElement.FontWeight="Regular"
        TextElement.FontSize="13"
        TextOptions.TextFormattingMode="Ideal"
        TextOptions.TextRenderingMode="Auto"
        Background="{DynamicResource MaterialDesignPaper}"
        FontFamily="{DynamicResource MaterialDesignFont}"
       Width="200"
        Height="200"
       >
    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/materialdesigntheme.light.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/materialdesigntheme.button.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/materialdesigntheme.defaults.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>
    <Grid >
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Button x:Name="PagerPreviousButton" Margin="10,0,0,0"  Height="30" Padding="10, 0">
            <Button.ContentTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="Previous" Margin="0,0,5,0"/>
                        <!--<iconPacks:BoxIcons Kind="RegularChevronLeftCircle"/>-->
                    </StackPanel>
                </DataTemplate>
            </Button.ContentTemplate>
        </Button>
        <Button Grid.Row="1" Style="{StaticResource MaterialDesignFlatDarkBgButton}" FontSize="13"
                x:Name="PropCopyPasteRowButton" ToolTip="Copy this Shared Parameter as a ta
                b delimited line of text to manually paste into a text file" Margin="30,30,30,3">
            <Button.ContentTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <!--<iconPacks:BoxIcons Kind="RegularExit"/>-->
                        <TextBlock Text="Copy PARAM" Margin="7,0,0,0"/>
                    </StackPanel>
                </DataTemplate>
            </Button.ContentTemplate>
        </Button>
    </Grid>
</Window>

Và đây là kết quả với hai cái nút vừa tạo, trông có vẻ ổn ổn.

 Image c2759468 26b0 4fba b4c4 c87e713c3139

MahaApps

Nếu bạn là một người thích sự tinh tế và không quá quan trọng cứng nhắc quá nhiều về giao diện phải chuyển động quá nhiều thì đây là một tiện ích khá tuyệt vời.MahaApps là một giao diện thiết kế không quá xuất sắc nhưng đủ để làm tốt các công việc hằng ngày.

 Image 2d1a542e 2040 4413 a14a f7b4a1584d1d

Công việc của bạn sẽ lặp lại tương tự như tiện ích đầu tiên bằng việc cài đặt nuget trước:

PM> Install-Package MahApps.Metro -Pre

 Image c04201c6 bd0d 4b13 8ec5 734997180714

Một thiết kế giao diện đơn giản

<Window x:Class="MainWindow"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             Height="200"
             Width="200"
             >
    <Window.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <!-- MahApps.Metro resource dictionaries. Make sure that all file names are Case Sensitive! -->
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
                <!-- Theme setting -->
                <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Themes/Light.Blue.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Button Content="OK" Height="40" Width="100" Style="{StaticResource MahApps.Styles.ToggleButton.WindowCommands}"/>
        <Button Grid.Row="1" Height="40" Width="100" Content="Cancel" Style="{StaticResource MahApps.Styles.Button}"/>
    </Grid>
</Window>

Trông cũng khá ổn đó chứ

 Image 2a84500e c8e7 4a19 88b8 9a1304cac5dc

Ngoài ra bạn còn có thê tải thêm các thư viện làm đẹp như đưa icon của mình vào nút chọn thông qua các tiện tích bổ sung iconPacks.

<Button Grid.Row="1" FontSize="13"
                x:Name="PropCopyPasteRowButton" ToolTip="Copy this Shared Parameter as a ta
                b delimited line of text to manually paste into a text file" Margin="30,30,30,3">
            <Button.ContentTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <iconPacks:BoxIcons Kind="RegularExit"/>
                        <TextBlock Text="Copy PARAM" Margin="7,0,0,0"/>
                    </StackPanel>
                </DataTemplate>
            </Button.ContentTemplate>
        </Button>

 Image 1c3fd84a 286a 40f2 be92 b0b8aa98f80e

Xceed WPF

Xceed có cả bản miễn phí và bản có phí, tất nhiên việc trả phí đã mang lại lợi ích giúp duy trì các nhà phát triển trong công việc, việc đó cũng mang lại cho bạn các tuỳ chỉnh cao cấp hơn mà WPF mặc định rất khó và tốn rất nhiều công sức để làm ra, vì vậy việc mua chất xám của người khác để giảm thiểu thời gian là một việc làm cần thiết.

 Image 9f11f528 af85 4087 8a71 143ff5737fcd

Cách cách thức làm việc và tương tác đều sẽ giống như hai tiện ích trên, sự mạnh mẽ ở tiện ích này liên quan đến tương tác thông minh với người dùng nhiều hơn là tập trung quá vào thiết kế.

Gmui

Gmui là một mã nguồn mở rất hữu ích, nó tương tự như Xceed nhưng việc hỗ trợ đã được dừng lại và ngưng phát trển , bạn có thể tham khảo và nghiên cứu mã nguồn tại ModernUI.

Ở đây, nếu bạn am hiểu về phong cách thiết kế và việc nghiên cứu tuỳ chỉnh thông qua cách viết riêng cho mình là tuyệt vời, mã nguồn này cho phép bạn làm điều đó.

 Image 5be76e30 63ad 4fb6 bf6b d988e9a12dcb

Ngoài ra SyncfusionDev express là hai cái tên khó có thể bỏ qua đối với người dùng chuyên nghiệp có trả phí sử dụng cho mục đích cá nhân hoặc doanh nghiệp.Công cụ hướng đến phần mềm thiết kế phức tạp và tiện lợi.Trước kia mình sử dụng công cụ này để viết trên Windows Form, chúng không những ổn mà còn làm rất nhiều cái hay ho cho người dùng rất tốn công sức để tạo ra.

Hạn chế

Như đã nói ở tiêu đề bài, việc lạm dụng các thư viện đã làm cho phần mềm thiết kế trở nên ì ạch nặng và chập chạp hơn, đôi khi xảy ra một số lỗi không chạy ổn định rất khó hiểu.Ông bà ta trước kia có câu : "Cái nết đánh chết cái đẹp" và phần mềm cũng thế "Cái đẹp đè bẹp cái nết" cái này là mình nói thôi chứ không phải ai nói nha tuy nhiên chỉ là tương đối thôi, việc sử dụng được tức là bạn phải kiểm soát được nó, đừng để nó phình ra.Một ngày nọ đột nhiên dự án dừng lại không rõ nguyên nhân chỉ vì cái giao diện chết tiệt.

Ví dụ về lỗi khó hiểu sau đây sau khi bạn build sản phẩm :

 Image a82bf122 2e6e 4c90 ad46 87ab6eb6082d

Khi đã quyết định sử dụng một tiện ích thì nên chung thuỷ với nó từ đầu đến cuối, đừng vì thấy núi này đẹp hơn mà qua trừ khi bạn chạy lại dự án mới, còn không việc bảo trì và xây dựng lại và lựa chọn tiện ích mới cho dự án cũ là một công việc khó nhằn.Đến lúc này cũng chỉ ước gì thôi lúc trước biết vậy sài giao diện mặc định cho rồi.Nhưng mà giờ thiết kế FontEnd và BackEnd hết rồi thì coi gì nữa.Một tháng sau quay lại nhìn đống code đã là thực sự mệt mỏi :D.

Mở rộng : Nếu bạn là người chỉ sử dụng cho cá nhân thì nên tự thiết kế giao diện thư viện riêng cho mình để dễ bảo trì và nâng cấp.Nếu bạn có tiền và sẵn sàng xây dựng mọi thứ đẹp đẽ thì nên tìm các tiện ích đánh giá cao và bảo trì thường xuyên để sử dụng.

Tham khảo

mahapps http://materialdesigninxaml.net/ syncfusion devexpress