Blog chia sẽ kinh nghiệm lập trình và Technical VN. Nơi mà các bạn có thể học tập và tham khảo về những công nghệ mới nhất hiện nay về .NET

Hiển thị các bài đăng có nhãn Metro. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn Metro. Hiển thị tất cả bài đăng

Chủ Nhật, 15 tháng 3, 2015

WPF - Xây Dựng Ứng Dụng WPF Metro Với Thư Viện MahApps.Metro

On 14:37 by Tuan Pham in , , , ,    No comments

Chào các bạn, hôm nay tôi sẽ giới thiệu đến mọi người về một thư viện khác giúp chúng ta xây dựng một ứng dụng WPF với giao diện mang đậm phong cách thiết kế của Window 8 đó là giao diện Metro.






I> Tiếp cận


MahApps.Metro là một dự án được Paul Jenkins bắt đầu phát triển vào năm 2011, nhầm mang một giao diện người dùng Metro-style vào ứng dụng WPF. Kể từ đó nó được phát triển và nhận được nhiều đóng góp từ cộng đồng nguồn mở cho đến bây giờ. Đây là một dự án vì cộng đồng, do cộng đồng - không ai trong số họ được trả tiền để làm điều này, song sản phẩm mà học tạo ra thật sự đã thay đổi được nhiều thứ.


Vậy bạn có thể tải về bộ thư viện này ở đâu? Cách đơn giản nhất là dùng NuGet




[code language="c"]
Install-Package MahApps.Metro
[/code]

Hoặc có thể tải trọn bộ mã nguồn tại Github, mời các bạn xem qua một số hình ảnh






II> Ứng dụng mẫu


Trước tiên chúng ta cần tạo một project WPF và add reference các thư viện cần thiết, hãy bắt đầu với NuGet nếu bạn cảm thấy bối rối về việc tải và add reference


Xong phần add DLLs chúng ta tiến hành tải về phần Resource của thư viện này(bạn có thể tải hoặc không tùy thích nhưng để hiểu nó làm việc thể nào thì đừng bỏ qua bước này) như hình sau.


Tool -> NuGet Package Panager -> Manage NuGet Packages For Solution


Chọn và tải về MahApps.Metro.Resource; đừng quên mục "Include Prerelease:



Hoặc bạn không thể tải resource như cách trên thì có thể dùng NuGet




[code language="c"]
Install-Package MahApps.Metro -Pre
[/code]

Chạy ứng dụng xem điều gì đã sảy ra và tiếp tục sửa nội dung các file XAML, mở file "MainWindow.xaml" thêm namespace của MahApps.Metro vào trong thẻ <Window ...>




[code language="csharp"]
xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
// Hoặc
xmlns:Controls="http://metro.mahapps.com/winfx/xaml/controls"
[/code]

Tiếp theo thay thẻ Window bằng thẻ của MahApps, file hoàn thiện sẽ là như sau nhưng đừng có coppy hết vào ứng dụng của bạn mà quên đổi namespace "x:Class="WpfApplication1.MainWindow"




[code language="xml"]
<Controls:MetroWindow x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
Title="MainWindow"
Height="350"
Width="525">

<!-- Tiếp tục code tại đây -->

</Controls:MetroWindow>
[/code]

Mở tiếp file MainWindow.xaml.cs và thay đổi lớp kế thừa của MainWindow




[code language="csharp"]
// using statements...
using MahApps.Metro.Controls

public partial class MainWindow : MetroWindow
{
public MainWindow()
{
InitializeComponent();
}
}
[/code]

Tạm thời đã xong về cơ bản, để đẹp hơn chúng ta dùng Resource của MahApps, mở file App.xaml lên và thêm ResourceDistionary




[code language="xml"]
<Application <!--........--> >
<!--Phần cần thêm-->
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colors.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Blue.xaml" />
<ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />
<ResourceDictionary Source="Resources/Icons.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
<!--Phần cần thêm-->
</Application>
[/code]

Kết quả,

Để thêm một vài lệnh lên trên Titlebar chúng ta mở file MainWindow.xaml và thêm đoạn code dưới đây vào ngay sau thẻ <Controls:MetroWindow ... > thêm vào đây... </Controls:MetroWindow>




[code language="xml"]
<Controls:MetroWindow ... >
<Controls:MetroWindow.RightWindowCommands>
<Controls:WindowCommands>
<Button Content="Cài đặt" />
<Button>
<StackPanel Orientation="Horizontal">
<Rectangle Width="20" Height="20"
Fill="{Binding RelativeSource={RelativeSource AncestorType=Button},
Path=Foreground}">
<Rectangle.OpacityMask>
<VisualBrush Stretch="Fill"
Visual="{StaticResource appbar_windowsphone}" />
</Rectangle.OpacityMask>
</Rectangle>
<TextBlock Margin="4 0 0 0"
VerticalAlignment="Center"
Text="Phạm Tuân" />
</StackPanel>
</Button>
</Controls:WindowCommands>
</Controls:MetroWindow.RightWindowCommands>

<Grid>
</Grid>
</Controls:MetroWindow>
[/code]

Thế là xong, mời các bạn tải về tham khảo tại đây và đọc thêm tại đây
Phạm Tuân

Thứ Bảy, 27 tháng 12, 2014

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

On 02:46 by Tuan Pham in , , , , , ,    No comments

Ở 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

Đăng ký: Bài đăng (Atom)