WPF - Thiết Kế Giao Diện METRO Win8 Với Thư Viện Mã Nguồn Mở

Chào các bạn, hôm nay tôi sẽ giới thiệu với mọi người về một trong những thư viện mã nguồn mở giúp thiết kế một giao diện Metro - Modern UI trên WPF. Tôi sẽ nói cách đơn giản nhất để cho ra một ứng dụng đẹp mắt và hiện đại.

Thư viện mã nguồn mở tôi sẽ giới thiệu trong nội dung này là  Modern UI for WPF, một thư viện giúp thiết kế một giao diện đơn giản mà hiện đại

[caption id="" align="aligncenter" width="800"] Phạm Tuân[/caption]

Tôi sẽ hướng dẫn các bạn làm một giao diện như trên. Trước tiên chúng ta sẽ phải tạo mới một Project WPF và tải thư viện này về (link ở cuối bài) sau đó add Reference, có cách đơn giản hơn đó là dùng NUGET đa phần là có sẵn trong bộ Visual Studio nếu không chúng ta có thể cài đặt (Chú ý nếu dùng Nuget vẫn phải tạo mới một project trước). Cách dùng như sau; Vào menu TOOL -> Nuget Package Manager  -> Package Manager Console

[caption id="" align="aligncenter" width="500"] Phạm Tuân[/caption]

Trên cửa sổ VS sẽ xuất hiện khung Nuget như bên dưới, chúng ta sẽ dán đoạn code này và nhấn Enter, đợi để Nuget tiến hành tải về gói Package và tự Add Reference cho chúng ta.

[code language="php"]Install-Package ModernUI.WPF[/code]

[caption id="" align="aligncenter" width="483"] Phạm Tuân[/caption]

Thế là xong phần thư viện, khi tạo mới một project chúng ta có sẵn một Window - chúng ta sẽ thay toàn bộ code XAML đang có bằng đoạn XAML sau (Chú ý  x:Class="ModernUI.MainWindow" là như cũ)

[code language="xml"]
<mui:ModernWindow x:Class="ModernUI.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mui="http://firstfloorsoftware.com/ModernUI"
Title="MainWindow" Height="350" Width="525">
</mui:ModernWindow>
[/code]

Ngoài ra còn phải change trong file *.cs, class MainWindow phải kế thừa từ class ModernWindow

[code language="csharp"]
public partial class MainWindow : ModernWindow
{
public MainWindow()
{
InitializeComponent();
}
}
[/code]

Dừng lại ở đó chúng ta chỉ mới có được phần Windows khá đơn giản, tiếp đến thêm đoan code sau vào giữa thẻ  </mui:ModernWindow>

[code language="xml"]
<mui:ModernWindow x:Class="ModernUI.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mui="http://firstfloorsoftware.com/ModernUI"
Title="MainWindow" Height="350" Width="525" ContentSource="UserControl1.xaml">

<!--Phần Link trỏ đến nguồn (UserControl,Page..)-->
<mui:ModernWindow.MenuLinkGroups>
<mui:LinkGroup DisplayName="group 1" >
<mui:LinkGroup.Links>
<mui:Link DisplayName="link 1" Source="UserControl1.xaml"/>
<mui:Link DisplayName="link 2" Source="Page1.xaml"/>
<mui:Link DisplayName="link 3" />
</mui:LinkGroup.Links>
</mui:LinkGroup>
</mui:ModernWindow.MenuLinkGroups>

</mui:ModernWindow>
[/code]

Tiếp tục đến phần Theme, chúng ta mở file App.xaml và thêm đoạn code này vào

[code language="xml"]
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.xaml" />
<ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.Light.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
[/code]

Chú ý thẻ <mui:Link DisplayName="Tên hiển thị" Source="UI_cần_hiển_thị.XAML"/>, và kết quả là

[caption id="" align="aligncenter" width="525"] Phạm Tuân[/caption]

Các bạn có thể tham khảo và download SourceCode, thư viện tại đây, Nuget và dĩ nhiên sẽ cần bộ Icon Ui này
Hãy đón xem phần sau tại đây, tôi sẽ hướng dẫn chi tiết hơn để có một giao diện hoàn thiện như thế này

[caption id="" align="aligncenter" width="556"] Phạm Tuân[/caption]

[caption id="" align="aligncenter" width="556"] Phạm Tuân[/caption]

Chúc các bạn thành công!
Phạm Tuân

---

Chúc các bạn thành công!
PHẠM TUÂN

• Tweet
• Share
• Share
• Share
• Share

Đăng nhập để nhận bài