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
Thứ Ba, 26 tháng 5, 2015
Tiếp theo phần Material Design trước, tôi gửi đến các bạn một Resource được xem là hiệu ứng cốt lõi trong ngôn ngữ thiết kế của Google
Trong Material Design tất cả các lớp đều được đổ bóng, cấp độ màu và hiệu ứng đổ bóng phụ thuộc vào sự hài hòa của lớp đó trong tổng thể App.
Hiệu ứng đổ bóng này luôn có một nguyên tắc định sẵn nếu bạn không muốn phá vỡ ngôn ngữ thiết kế này bạn cần giữ cho các thông số đúng như đã được đề cập.
Các quy tắc thiết kế này đã được cộng đồng Designer đánh giá cao về mặt thẩm mỹ vì thế các bạn không cần phải nghi ngờ về các sự ràng buộc này.
Sau đây là nguyên mẫu các thông số và cấp độ đỏ bóng được mang lên WPF
Lưu ý: rằng trong bộ MaterialDesignInXamlToolkit đã có sẵn bộ source này. Sau đây là cách dùng và mẫu tham khảo.
Chúc các bạn thành công!
Phạm Tuân
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ư đang “trôi nổi” lên nhau. 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. Nếu đang sử dụng Android L ắt hẳn các bạn sẽ thấy thích thú với ngôn ngữ thiết kế mới này, hôm nay tôi sẽ giới thiệu đến các bạn bộ thư viện giúp chúng ta mang ngôn ngữ Design này lên Windows nói chung và ứng dụng WPF nói riêng.
I> Material Design là gì?
Chúng ta có thể tưởng tượng các ứng dụng được xây dựng dựa trên ngôn ngữ Material Design giống như một tập hợp gồm nhiều tờ giấy chồng lên 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. Các hiệu ứng đổ bóng của tờ này lên tờ khác cũng được mô tả cụ thể và quy tắc 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. Lưu ý rằng các tờ giấy khác hoàn toàn với một hộp giấy vì thế các lớp phải có độ mỏng nhất định và không biến thành hình khối 3-D.
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, không bóng loáng kiểu 3-D và hiệu ứng ánh sáng phản chiếu. 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.
II> Một ứng dụng Material Design tiêu chuẩn
- Sử dụng các màu nổi bật, thường có một mảng màu chủ đạo nằm ở cạnh trên ứng dụng
- Các biểu tượng phẳng, đơn giản nhưng dễ hiểu
- Menu, nút nhấn, chữ viết… có nhiều khoảng cách trắng nên trông thoáng đãng
- Có các hiệu ứng chuyển động tự nhiên, mượt mà, có tâm điểm và luôn có một nguyên tắc.
- Các button sẽ có cảm giác nổi lên trên các bề mặt khác và icon không cầu kỳ.
- Toàn bộ một ứng dụng luôn có một gam màu chủ đạo, nổi bật.
III> Mang Material Design lên WPF
Tại sao tôi không mang ngôn ngữ này lên Winform - bởi vì khả năng tùy biến của Winform quá kém và chúng ta bị hạn chế sự sáng tạo cũng như việc custom khá khó khăn. Dưới đây là một ứng dụng WPF dùng màu và các cách đổ bóng cũng như hiệu ứng được GG quy định.
Các bạn có thể tải về toàn bộ thư viện tại đây
Hoặc các bạn có thể tải về từ Nuget hai DLL sau
- MaterialDesignColors: chứa các mẫu Color do Google cung cấp tại đây, chúng ta chỉ việc chọn màu ưng ý.
Install-Package MaterialDesignColors
- MaterialDesignThemes: chứa các Template và style
Install-Package MaterialDesignThemes
Để biết cách sử dụng tôi sẽ hướng dẫn làm một Project cơ bản như sau.
- Tạo một project WPF Application và tiến hành Reference hai thư viện trên.
- Config để sử dụng được các Resource trong bộ thư viện trên với các lưu ý sau.
+ Chúng ta chỉ nên reference đến Resource nào mà mình muốn sử dụng, không nên reference tất cả.Lưu ý rằng các Color của Material Design có dạng
+ Sử dụng MergedDictionaries để gộp các Key dictionary có thể bị trùng
vì vậy bạn sẽ không thể dùng trực tiếp màu này cho các đối tượng như sau bởi Background nhận một thông số là SolidColorBrush
Thay vào đó chúng ta sẽ tạo riêng cho mình các resource tương ứng và refer đến màu của thư viện
App.xml
Như thế chúng ta đã xong phần refer đến bộ màu của Material Design, tiếp theo là khai báo bộ Style/Template.
App.xaml
MainWindow
Kết quả:
Tải về source tại đây, chúc các bạn thành công!
WPF vượt trội hơn Winform về khoản Drawing, trong đó đặc biệt WPF hỗ trợ đồ họa rất tốt vì nó tương tác trực tiếp đến GPU. Hôm nay chúng ta sẽ hiểu cơ bản về các thành phần đi kèm phục vụ xử lý 3D trong WPF.
I> Tổng Quan
Nội dung đồ họa 3-D trong WPF được gói gọn trong một phần tử là Viewport3D , nó được hiểu như một khung cửa mà ở đó các đối tượng 3-D được load lên và cho ta thấy lần lượt cáchình chiếu của đối tượng. Nếu là 2-D, Viewport3D được hiểu như là một Canvas, Grid, StackPanel...
Trong không gian 3-D chúng ta có hệ trục tọa độ gồm Oxyz, tâm O nằm ở vị trí trung tâm của Viewport3D trong khi tâm O trong không gian 2-D chúng ở góc TRÁI-TRÊN.
Ngoài ra một Camera là không thể thiếu trong khái niệm không gian 3-D. Camera mặc định được đặt trong Viewport3D ngay trên trục Oz+.
Sau Camera, Model3D là hết sức quan trọng vì đó chứa thứ mà bạn sẽ thấy, hiện nay WPF hỗ trợ một mô hình 3D hình học với tên gọi là GeometryModel3D.
- GeometryModel3D.Geometry thể hiện một đối tượng 3-D hoàn chỉnh là MeshGeometry3D; trong đó MeshGeometry3D chứa tập các Point3D, khi nối các điểm này lại ta có một mô hình 3-D.
- GeometryModel3D.Material thể hiện vật liệu của MeshGeometry3D.
Phần làm cho mô hình 3-D trở nên thật hơn đó là ĐÈN bởi vì nó góp phần tạo ra hiệu ứng bóng, mờ, sáng-tối, độ phản chiếu, độ sâu...
Translation. giúp chúng ta có thể xoay khối mô hình 3-D trong không gian 3 chiều, translation có thể được thay đổi lúc RealTime để điều khiển như điều khiển một cánh tay Robot 3D.
Sau đây là cấu trúc một cửa sổ Viewport3D
II> Demo
Các bạn có thể tải về một số Demo để tham khảo tại đây, dùng chuột TRÁI hoặc chuột PHẢI để xoay đối tượng.
Ở bài viết sau tôi sẽ hướng dẫn các bạn cách để điều khiển một chú Robot như thế này
Cảm ơn các bạn đã quan tâm, mọi thắc mắc xin để lại Comment
Phạm Tuân WPF
10 lý do tại sao nói WPF tốt hơn so với Windows Forms
Cùng một bản design gồm: 1 Label, 1 TextBox và 2 Button; nhưng để xem bạn phải tốn bao nhiêu dòng code
- Winform
Private Sub InitializeComponent()
{
Me.Label1 = New System.Windows.Forms.Label()
Me.txtFilmName = New System.Windows.Forms.TextBox()
Me.btnOK = New System.Windows.Forms.Button()
Me.btnCancel = New System.Windows.Forms.Button()
Me.GroupBox1 = New System.Windows.Forms.GroupBox()
Me.GroupBox1.SuspendLayout()
Me.SuspendLayout()
//
//Label1
//
Me.Label1.AutoSize = True
Me.Label1.Location = New System.Drawing.Point(20, 23)
Me.Label1.Name = "Label1"
Me.Label1.Size = New System.Drawing.Size(81, 13)
Me.Label1.TabIndex = 0
Me.Label1.Text = "Type film name:"
//
//txtFilmName
//
Me.txtFilmName.Location = New System.Drawing.Point(107, 20)
Me.txtFilmName.Name = "txtFilmName"
Me.txtFilmName.Size = New System.Drawing.Size(100, 20)
Me.txtFilmName.TabIndex = 1
//
//btnOK
//
Me.btnOK.Location = New System.Drawing.Point(57, 88)
Me.btnOK.Name = "btnOK"
Me.btnOK.Size = New System.Drawing.Size(75, 23)
Me.btnOK.TabIndex = 2
Me.btnOK.Text = "OK"
Me.btnOK.UseVisualStyleBackColor = True
//
//btnCancel
//
Me.btnCancel.Location = New System.Drawing.Point(144, 88)
Me.btnCancel.Name = "btnCancel"
Me.btnCancel.Size = New System.Drawing.Size(75, 23)
Me.btnCancel.TabIndex = 3
Me.btnCancel.Text = "Cancel"
Me.btnCancel.UseVisualStyleBackColor = True
//
//GroupBox1
//
Me.GroupBox1.Controls.Add(Me.txtFilmName)
Me.GroupBox1.Controls.Add(Me.Label1)
Me.GroupBox1.Location = New System.Drawing.Point(22, 15)
Me.GroupBox1.Name = "GroupBox1"
Me.GroupBox1.Size = New System.Drawing.Size(230, 56)
Me.GroupBox1.TabIndex = 4
Me.GroupBox1.TabStop = False
//
//frmFilm
//
Me.AutoScaleDimensions = New System.Drawing.SizeF(6.0!, 13.0!)
Me.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font
Me.ClientSize = New System.Drawing.Size(276, 135)
Me.Controls.Add(Me.GroupBox1)
Me.Controls.Add(Me.btnCancel)
Me.Controls.Add(Me.btnOK)
Me.Name = "frmFilm"
Me.Text = "Films"
Me.GroupBox1.ResumeLayout(False)
Me.GroupBox1.PerformLayout()
Me.ResumeLayout(False)
}
- WPF
* Các bạn có thể thấy sự tương đồng giữa WPF và các layout của nền tảng khác
- Android
- Windows Phone
- Web
 | The table element was not designed to be a layout tool. |
|---|
1) Về phương diện tiếp cận và design
Khi bạn đã quen với việc thiết kế Web, bạn sẽ học WPF rất dễ, hoàn thành bản design nhanh chóng và chuẩn xác tuyệt đối so với việc dùng chuột ở Winform(code để design thì rất chậm)
- Winform
Kéo control và change thuộc tính
- WPF
Nếu bạn có khả năng gõ 10 ngón thì nó sẽ phát huy tác dụng triệt để
2) Khả năng tương thích về kích thước và vị trí neo
Khi bạn design và sau đó là code, bạn sẽ thấy, khi dùng WPF bạn sẽ ít phải canh chỉnh hơn. Winform dễ bị lệch vị trí hơn WPF
- Winform: là định vị tuyệt đối
Có thể thấy, các Button sẽ luôn ở ngay vị trí đó theo Ox, Oy và sẽ không tự động canh chỉnh khi khung chính thay đổi.
- WPF: là định vị tương đối
Nếu bạn có định hướng tốt khi design, Screen của WPF sẽ cho ta một sự linh hoạt nhất định cho các kích thước màn hình cũng như sự thay đổi về số control chen nhau. Có thể bạn sẽ thấy định vị tuyệt đối là nhanh hơn nhưng bạn nhầm to khi quy mô dự án là không nhỏ; chưa kể hiện nay kích thước màn hình là rất đa dạng.
WPF sẽ cho ta sự tương thích như các website hiện nay - có nhiều cách hiển thị cho nhiều thiết bị
3) WPF cho phép phát triển thành một website nhanh chóng
Khi bạn có một ứng dụng WPF, việc bạn nghĩ nó sẽ được phát triển trên nền web là hoàn toàn khả thi vì WPF dùng chung bộ thư viện với Silverlight
-> Ngoài ra: Một ứng dụng WPF lại cho ta cách thể hiện như một WebBrowser - tức load các Page lên trang chính(hình trên)
4) WPF cho phép Custom style, nhanh chóng, dễ dàng
Một button khác hình chữ nhật là rất khó làm với Winform, nhưng WPF thì button có thể là hình chữ THẬP, các button sẽ có cùng một kiểu nếu được Apply cùng style.
Style trong WPF có phần giống CSS của website. Điều này khó mà đạt được với Winform.
5) WPF là tương lai của .NET application
Tại sao tôi nói vậy, sau đây là 3 vấn đề
- Cộng đồng quốc tế đang chuyển sang WPF thay cho Winform
Trên đây là thống kê từ trang StackOverflow, số lượng câu hỏi về WPF là gần gấp đôi Winform - điều đó nói lên rằng chúng ta đang dần chú ý hơn WPF.
- Microsoft tin vào WPF
Dưới đây là hai ứng dụng khá quen thuộc, là cột móc của WPF và Winform. Tại sao?
Vì VS 2010 được xây dựng hoàn toàn bằng WPF, bạn có tin không!
- Tốc độ, đơn giản
Cuối cùng, WPF thật sự nhanh chóng, đơn giản và hoàn hảo đến thời điểm hiện tại. Một khi bạn vượt qua một số trở ngại trong học tập bạn sẽ thấy nó hay đến mức nào. Bạn sẽ không phải loay hoay với những thứ quá tầm thường.
6) WPF cho phép Binding dữ liệu cực đỉnh.
Khi tương tác nhiều với Data, WPF là rất mạnh cho việc Binding Data. Bạn sẽ thấy đơn giản hơn nhiều khi Show data lên View.
Để binding data cho GridView trong Winform và WPF bạn cần làm gì? Load data:
private void Window_Loaded(object sender, RoutedEventArgs e)
{
// create a connection to Top Trumps database
String cs = ConfigurationManager.ConnectionStrings["csMovies"].ConnectionString;
SqlConnection cn = new SqlConnection(cs);
try
{
// create a new dataset
DataSet ds = new DataSet();
// open the connection (not strictly necessary, as the
// data adapter will do this when you use it anyway)
cn.Open();
// fill data tables
SqlDataAdapter daMoviess = new SqlDataAdapter();
daMoviess.SelectCommand =
new SqlCommand("SELECT * FROM tblMovies WHERE PackId=1", cn);
daMoviess.Fill(ds, "Movies");
// now set the data context for the entire window
this.DataContext = ds;
}
catch (Exception ex)
{
MessageBox.Show(ex.Message);
}
finally
{
// close the connection whether went wrong or not
cn.Close();
}
}
Và WPF binding thế nào
7) Đơn giản trong quản lý và thiết kế Control
Khi tôi làm việc với WPF trong thời gian dài và tiếp cận Winform tôi thấy rằng thật sự khó khăn hơn cho việc Design và quản lý các control Document Outline
Các control được tổ chức dạng cây
8) Triggers
Một trong những sự mới mẻ của WPF đó là Triggers - cho phép chúng ta tạo ra các ứng dụng linh hoạt hơn, gần gũi hơn với người dùng. Bạn có để ý thấy một TextBox yêu cầu nhập số nhưng bạn nhập chữ nó sẽ cảnh báo ngay lập tức - với WinForm bạn làm được nhưng tốn nhiều time hơn, thiếu linh động và khó cho sự thay đổi sau này, đặc biệt rất trực quan.
- TextBox có Background màu hồng khi rê chuột vào.
Chỉ cần bao nhiêu đây code
9) Hoạt họa và chuyển động trong WPF
Nếu có yêu cầu làm một vài Slide PowerPoint bằng .NET application, bạn sẽ làm thế nào với các chuyển động trong PowerPoint, Nếu dùng Winform bạn sẽ dùng timer chạy để set vị trí, và cần bao nhiêu timer cho 20 đối tượng... chỉ bao nhiêu đấy thôi bạn sẽ thấy khó khăn.
- Tôi có ví dụ sau: các button dùng để control một hình tròn. Start để hình tròn chạy
- Điều tôi phải làm là
Không cần code C# thấy không. Ngoài ra bạn cũng có thể làm phim hoạt hình với WPF, SlideShow ảnh ...
10) Drawing và 3D
Windows Forms không cho Draw hay 3D. WPF cho phép thế điều đó rất tốt.
- Xoay đối tượng
- Load một file 3D vẽ bằng 3DMAX
Và còn nhiều hơn những thứ hay ho khác ở WPF
Đăng ký:
Nhận xét (Atom)