Modern UI For WPF Thiết Kế Giao diện Modern Win8 Với Thư Viện Nguồn Mở

Modern UI For WPF Thiết Kế Giao diện Modern Win8 Với Thư Viện Nguồn Mở

2:46 AM

Ở phần trước tôi đã giới thiệu sơ qua cách hình thành một Modern UI căng bản cho ứng dụng WPF, bài tiếp theo này tôi sẽ hướng dẫn chi tiết để chúng ta có một GUI đẹp mắt và chuyên nghiệp hơn. Đồng thời tôt cũng nói về cách thêm mới và dùng Extensions trong bộ công cụ Visual Studio(VS).




Mục đích cần nắm trong bài này là:



- Cách thêm và dùng một Extensions mà ở đây sẽ là Modern UI For WPF Extension
- Cách tạo một ứng dụng với Modern UI có chức năng cơ bản như thay đổi Theme và các trang hiển thị
- Biết cách Costum theme cho cá nhân custom.

I> Thêm Modern UI For WPF Extension
Extension là một công cụ giúp chúng ta tải về một Eample để tham khảo hoặc một Template cho việc Design hay một Add-On... Chúng ta tiến tải về một số Template của Modern UI như sau: Mở VS và vào menu TOOL -> Extensions and Updates




[caption id="" align="aligncenter" width="399"]Phạm Tuân Chọn Extension and ...[/caption]

Một hợp thoại hiện ra ta chọn mục Online để tiến hành quét, Nhập vào khung Search từ "modern ui", vô số các Extensions hiện ra để chúng ta Download và cài đặt(VS sẽ tự động cài đặt và Add vào bảng New Project) hãy chọn Modern UI For WPF Templates và Download sau đó chọn Install


Phạm Tuân Đến đây chúng ta đã xong phần Template chuẩn bị cho Project Modern UI.


II> Tạo một Project với tùy chọn cơ bản


Tiếp đến chúng te sẽ new một Project, chú ý rằng hãy chọn như hình dưới để thấy được Template vừa mới Install


tuanphamdg
Có hai tùy chọn cho Project Modern UI, bạn có thể chọn một trong hai, tôi sẽ chọn mục thứ hai WPF Navigation Application vì nó đầy đủ nhất. OK bây giờ bạn thử Run ứng dụng của mình xem sao.



Việc tiếp theo là thử thêm một trang hiển thị vào MainWindow, Chọn Project -> Add -> New Item khi hộp thoại mở ra chọn mục Modern UI for WPF từ bảng bênh trái, ở  bảng giữ chọn Tamplate nào bạn muốn, tôi chọn List Page và đặt tên là ListPage1.xaml.



Tiến hành Add trang này vào MainWindow bằng cách trỏ đường dẫn đến trang này tại thẻ Link, chú ý thuộc tính ContentSource, là đường dẫn đến trang mà bạn muốn gọi đầu tiên; LogoData là hình mặt cười trên GUI và nó được Draw bằng Path.




[code language="xml"]
<mui:ModernWindow x:Class="ModernUIs.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="mui" IsTitleVisible="True"
LogoData="F1 M 24.9015,43.0378L 25.0963,43.4298C 26.1685,49.5853 31.5377,54.2651 38,54.2651C 44.4623,54.2651 49.8315,49.5854 50.9037,43.4299L 51.0985,43.0379C 51.0985,40.7643 52.6921,39.2955 54.9656,39.2955C 56.9428,39.2955 58.1863,41.1792 58.5833,43.0379C 57.6384,52.7654 47.9756,61.75 38,61.75C 28.0244,61.75 18.3616,52.7654 17.4167,43.0378C 17.8137,41.1792 19.0572,39.2954 21.0344,39.2954C 23.3079,39.2954 24.9015,40.7643 24.9015,43.0378 Z M 26.7727,20.5833C 29.8731,20.5833 32.3864,23.0966 32.3864,26.197C 32.3864,29.2973 29.8731,31.8106 26.7727,31.8106C 23.6724,31.8106 21.1591,29.2973 21.1591,26.197C 21.1591,23.0966 23.6724,20.5833 26.7727,20.5833 Z M 49.2273,20.5833C 52.3276,20.5833 54.8409,23.0966 54.8409,26.197C 54.8409,29.2973 52.3276,31.8106 49.2273,31.8106C 46.127,31.8106 43.6136,29.2973 43.6136,26.197C 43.6136,23.0966 46.127,20.5833 49.2273,20.5833 Z"
ContentSource="/ListPage1.xaml">

<mui:ModernWindow.MenuLinkGroups>
<mui:LinkGroup DisplayName="welcome">
<mui:LinkGroup.Links>
<mui:Link DisplayName="Cuộc sống" Source="/ListPage1.xaml" />
</mui:LinkGroup.Links>
</mui:LinkGroup>
<mui:LinkGroup DisplayName="settings" GroupKey="settings">
<mui:LinkGroup.Links>
<mui:Link DisplayName="software" Source="/Pages/SettingsPage.xaml" />
</mui:LinkGroup.Links>
</mui:LinkGroup>
</mui:ModernWindow.MenuLinkGroups>

<mui:ModernWindow.TitleLinks>
<mui:Link DisplayName="settings" Source="/Pages/SettingsPage.xaml" />
<mui:Link DisplayName="help" Source="http://mui.codeplex.com" />
</mui:ModernWindow.TitleLinks>
</mui:ModernWindow>
[/code]

Kết quả tôi nhận được


III> Costum Theme


Sau đây là bảng Theme resources đang được sử dụng, chúng ta sẽ thay đổi theo ý mình về màu sắc cho các Control nhưng phải tuân thủ theo Key sau đây, chú ý khi modify Resource phải đúng kiểu dữ liệu.























































































































































































































































































































































































































































































































































































































ResourceTypeLight defaultDark default
ButtonBackgroundBrush#FFFFFFFF#FF333333
ButtonBackgroundHoverBrush#FFDDDDDD#FF3E3E42
ButtonBackgroundPressedBrush{AccentColor}{AccentColor}
ButtonBorderBrush#FFCCCCCC#FF333333
ButtonBorderHoverBrush#FFCCCCCC#FF3E3E42
ButtonBorderPressedBrush{AccentColor}{AccentColor}
ButtonTextBrush#FF333333#FFD1D1D1
ButtonTextDisabledBrush#FFA1A1A1#FF515151
ButtonTextHoverBrush#FF333333#FFD1D1D1
ButtonTextPressedBrush#FFFFFFFF#FFD1D1D1
DataGridBackgroundBrush#00FFFFFF#00FFFFFF
DataGridCellBackgroundBrush#00FFFFFF#00FFFFFF
DataGridCellBackgroundHoverBrush#FFDDDDDD#FF3E3E42
DataGridCellBackgroundSelectedBrush{AccentColor}{AccentColor}
DataGridCellForegroundBrush#FF333333#FFD1D1D1
DataGridCellForegroundHoverBrush#FF333333#FFD1D1D1
DataGridCellForegroundSelectedBrush#FFFFFFFF#FFD1D1D1
DataGridDropSeparatorBrush{AccentColor}{AccentColor}
DataGridForegroundBrush#FF333333#FFD1D1D1
DataGridGridLinesBrush#FFCCCCCC#FF333333
DataGridHeaderBackgroundBrush#00FFFFFF#00FFFFFF
DataGridHeaderBackgroundHoverBrush#FFDDDDDD#FF3E3E42
DataGridHeaderBackgroundPressedBrush{AccentColor}{AccentColor}
DataGridHeaderBackgroundSelectedBrush{AccentColor}{AccentColor}
DataGridHeaderForegroundBrush#FF333333#FFD1D1D1
DataGridHeaderForegroundHoverBrush#FF333333#FFD1D1D1
DataGridHeaderForegroundPressedBrush#FFFFFFFF#FFD1D1D1
DataGridHeaderForegroundSelectedBrush#FFFFFFFF#FFD1D1D1
HyperlinkBrush{AccentColor}{AccentColor}
HyperlinkDisabledBrush#FF919191#FF717171
HyperlinkHoverBrush{AccentColor}{AccentColor}
InputBackgroundBrush#FFFFFFFF#FF333333
InputBackgroundHoverBrush#FFFFFFFF#FF3E3E42
InputBorderBrush#FFCCCCCC#FF333333
InputBorderHoverBrush#FFCCCCCC#FF3E3E42
InputTextBrush#FF333333#FFD1D1D1
InputTextDisabledBrush#FF919191#FF717171
InputTextHoverBrush#FF333333#FFD1D1D1
ItemBackgroundHoverBrush#FFDDDDDD#FF3E3E42
ItemBackgroundSelectedBrush{AccentColor}{AccentColor}
ItemBorderBrush#FFCCCCCC#FF3E3E42
ItemTextBrush#FF333333#FFD1D1D1
ItemTextDisabledBrush#FF919191#FF717171
ItemTextHoverBrush#FF333333#FFD1D1D1
ItemTextSelectedBrush#FFFFFFFF#FFD1D1D1
LinkButtonTextBrush#FF717171#FF717171
LinkButtonTextDisabledBrush#FF919191#FF515151
LinkButtonTextHoverBrush#FF333333#FFD1D1D1
LinkButtonTextPressedBrush#FF919191#FF515151
MenuTextBrush#66000000#FF515151
MenuTextHoverBrush#BB000000#FF919191
MenuTextSelectedBrush#FF333333#FFD1D1D1
ModernButtonBorderBrush#FF919191#FF919191
ModernButtonBorderDisabledBrush#FF919191#FF515151
ModernButtonBorderHoverBrush#FF333333#FFD1D1D1
ModernButtonBorderPressedBrush#FF333333#FFD1D1D1
ModernButtonIconBackgroundPressedBrush{AccentColor}{AccentColor}
ModernButtonIconForegroundPressedBrush#FFFFFFFF#FFD1D1D1
ModernButtonTextBrush#FF333333#FFD1D1D1
ModernButtonTextDisabledBrush#FFA1A1A1#FF515151
ModernButtonTextHoverBrush#FF333333#FFD1D1D1
ModernButtonTextPressedBrush#FF333333#FFD1D1D1
PopupBackgroundBrush#FFFFFFFF#FF252526
ProgressBackgroundBrush#FFDDDDDD#FF333333
ScrollBarBackgroundBrush#00FFFFFF#FF333333
ScrollBarThumbBackgroundBrush#00FFFFFF#00FFFFFF
ScrollBarThumbBackgroundDraggingBrush#FFCCCCCC#00FFFFFF
ScrollBarThumbBackgroundHoverBrush#FFDDDDDD#00FFFFFF
ScrollBarThumbBorderBrush#FFCCCCCC#FF333333
ScrollBarThumbForegroundBrush#00FFFFFF#FF717171
ScrollBarThumbForegroundDraggingBrush#00FFFFFF#FFD1D1D1
ScrollBarThumbForegroundHoverBrush#00FFFFFF#FF919191
SeparatorBackgroundBrush#FFCCCCCC#FF3E3E42
SliderSelectionBackgroundBrush{AccentColor}{AccentColor}
SliderSelectionBorderBrush{AccentColor}{AccentColor}
SliderThumbBackgroundBrush#FFFFFFFF#FF717171
SliderThumbBackgroundDisabledBrush#FFCCCCCC#FF333333
SliderThumbBackgroundDraggingBrush{AccentColor}{AccentColor}
SliderThumbBackgroundHoverBrush#FFDDDDDD#FF919191
SliderThumbBorderBrush#FFCCCCCC#FF717171
SliderThumbBorderDisabledBrush#FFCCCCCC#FF333333
SliderThumbBorderDraggingBrush{AccentColor}{AccentColor}
SliderThumbBorderHoverBrush#FFCCCCCC#FF919191
SliderTickBrush#FF919191#FF717171
SliderTickDisabledBrush#FFCCCCCC#FF333333
SliderTrackBackgroundBrush#FFCCCCCC#FF333333
SliderTrackBorderBrush#FFCCCCCC#FF333333
SubMenuTextBrush#99000000#FF717171
SubMenuTextHoverBrush#66000000#FF515151
SubMenuTextSelectedBrush#FF333333#FFD1D1D1
WindowBackgroundBrush#FFFFFFFF#FF252526
WindowBackgroundColorColor#FFFFFFFF#FF252526
WindowBackgroundContentUIElementRectangleRectangle
WindowBorderBrush{AccentColor}{AccentColor}
WindowBorderActiveBrush{AccentColor}{AccentColor}
WindowHeaderGradientBrushLinearGradientBrush#00FFFFFF
WindowTextBrush#FF333333#FFC1C1C1
WindowTextReadOnlyBrush#FF919191#FF717171

Tôi sẽ thử Costum lại màu nền của thẻ Link thành màu Đỏ cho Theme Light với Key như bảng trên là ItemBackgroundSelected. Tôi mở file App.xaml và thêm vào một dòng.




[code language="xml"]
<Application x:Class="ModernUIs.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
StartupUri="MainWindow.xaml">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.xaml" />
<ResourceDictionary Source="/FirstFloor.ModernUI;component/Assets/ModernUI.Light.xaml"/>
</ResourceDictionary.MergedDictionaries>
<!--Phần tôi thêm vào bênh dưới-->
<SolidColorBrush x:Key="ItemBackgroundSelected" Color="Red" />
<!--Phần tôi thêm vào bênh trên-->
</ResourceDictionary>
</Application.Resources>
</Application>

[/code]

Kết quả tôi có thế này


tuanphamdgChú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

Subscribe to: Post Comments (Atom)