Học WPF 4 trong một tuần – Ngày 1: Bắt đầu (Getting Started)

Đây là bài viết đầu tiên trong loạt bài viết về WPF (Windows Presentation Foundation) phiên bản 4, đi kèm cùng bộ visual studio 2010. Mục tiêu của bài viết đề ra là trong một tuần ngắn ngủi chúng ta có thể nắm bắt được những khái niệm quan trọng đến những vấn đề phức tạp. Tôi hy vọng tôi cũng như các bạn có thể nắm bắt một công nghệ mới thật nhanh trên cơ sở những kiến thức nền tảng về C# đã có.

Nôi dung trong khuôn khổ ngày đầu tiên của chúng như sau:

- Giới thiệu về WPF (Windows Presentation Foundation).

-  Cài đặt công cụ phát triển (install the development tools).

- Tìm hiểu các khái niệm cơ bản của WPF (Learn the basic concepts of WPF).

- Tạo một ứng dụng WPF đầu tiên (Create your first WPF application).

- Tìm hiểu WPF đã thay đổi thể nào trong công cụ phát triển (Learn how WPF changed the development workflow).

Còn chờ gì nữa. Chúng ta bắt đầu….

1. Giới thiệu về Windows Presentation Foundation

a. Giới thiệu khái quát.

- WPF (Windows Presentation Foundation) của Microsoft là thế hệ tiếp theo của giao diện khung người dùng (User Interface Framework) để tạo ra các ứng dụng với trải nghiệm người dùng phong phú. Nó là một phần trong .Net 3.0 và các phiên bản cao hơn.

- WPF UI(User Interface) kết hợp ứng dụng đồ họa 2D, 3D, văn bản và multimedia vào trong khuôn khổ duy nhất. Nó là vector cơ sở để diễn hoạt và tăng tốc phần cứng của các card đồ họa hiện đại. Điều này làm cho giao diện người dùng nhanh hơn. Tạo khả năng mở rộng và độ phân giải độc lập.

- Hình minh họa dưới đây cung cấp cho bạn một một khái quát về các tính năng mới của WPF.

b. Tách bề ngoài và sự vận hành:

WPF phân biệt sự xuất hiện của một giao diện người dùng từ hành vi của nó. Giao diện thường được thường được quy định trong ngôn ngữ đánh dấu ứng dụng (XAML – eXtensible Application Markup Language), các sự kiện được thực hiện nhờ ngôn ngữ lập trình như C# hay Visual Basic. Hai bộ phận được kết nối với nhau bởi databinding, các sự kiện và lệnh. Việc tách biệt giữa giao diện và cách thức xử lý các sự kiện của chương trình mang lại những lợi ích như:

- Giao diện và hành vi (các xử lý của chương trình) được liên kết với nhau.

- Các nhà thiết kế (Designers) và các nhà phát triển (Developers) có thể làm việc với mô hình riêng biệt.

- Công cụ thiết kế đồ họa có thể làm trên các tài liệu XML đơn giản thay vì phải phân tích code.

c. Thành phần phong phú

Các Control trong WPF là rất tuyệt vời, bạn có thể xác định gần như bất kỳ các control và nội dung khác nhau. Mặc dù rất linh hoạt trong những thiết kế âm thanh cho các nhà thiết kế, đây là một tính năng rất mạnh mẽ nếu bạn sử dụng tích hợp. Đặt một hình ảnh vào button để tạo ra một image button, hoặc đặt một danh sách các video vào danh sách để chọn một tập tin video…

<Button>

               <StackPanel Orientation="Horizontal">

                              <Image Source="speaker.png" Stretch="Uniform"/>

                             <TextBlock Text="Play Sound" />

               </StackPanel>

</Button>

d. Tùy biến nâng cao (Highly Customizable)

Do sự tách biệt nghiêm ngặt giữa giao diện và hành vi, nên bạn có thể dễ dàng thay đổi giao diện điều khiển. Các khái niệm về các style, skin controls gần giống như CSS trong HTML. Các Template cho cho phép bạn thay thế giao diện của các control một cách sinh động và bắt mắt hơn.

Ví dụ sau đây là một button mặc định và một button tùy chỉnh trong WPF.

e. Quyết định độc lập:

Tất cả các tiêu chuẩn trong WPF là những đơn vị hợp lý – không phải là điểm ảnh. Một đơn vị hợp lý là 1/96 của một inch. Nếu bạn tăng độ phân giải màn hình của bạn, giao diện người dùng vẫn có cùng kích thước. Kể từ khi WPF được xây dựng trên một vector cơ sở thì sự diễn hoạt của nó rất dễ dàng để xây dựng và mở rộng giao diện người dùng.

2. Download và cài đặt công cụ phát triển:

- Microsoft cung cấp 2 công cụ phát triển cho các ứng dụng WPF. Một là Visual Studio dành cho các nhà phát triển (Developers), và Expression Blend dành cho các nhà thiết kế (Designs).

- Trong khi Visual studio là tốt hơn code và chỉnh sửa XAML, nhưng nó lại ít hỗ trợ với đồ họa như gradients, biên tập mẫu, diễn hoạt… Đấy chính là những điểm mà Expression Blend hướng đến. Blend hỗ trợ tốt cho phần đồ họa nhưng nó vẫn còn ít hỗ trợ cho code và biên tập XAML.

Vì vậy, chúng ta cần cả Visual Studio lẫn Expression Blend.

a. Microsoft Studio 2010

Visual studio 2010 là công cụ mới nhất hiện nay cho các nhà phát triển các ứng dụng WPF. Nó bao gồm một thiết kế đồ họa cho WPF kể từ phiên bản Visual studio 2008. Nếu bạn đang sử dụng Visual studio 2005 bạn có thể cài thêm một add-on cho phép bạn phát triển các ứng dụng WPF.

Microsoft cung cấp miễn phí phiên bản Visual studio 2010 express bao gồm thiết kế WPF. Bạn có thể tải về từ địa chỉ sau đây.

Download Microsoft Visual C # 2010 – Express Edition

b. Microsoft Expression Blend 3 + Sketch Flow

Expression Blend là một công cụ để thiết kế, nó là một phần của Express studio, một bộ công cụ mới từ Microsoft đặc biệt tạo ra cho các nhà thiết kế trải nghiệm. Blend bao gồm tất cả các tính năng còn thiếu của thiết kế Visual Studio như styling, khuôn mẫu, diễn hoạt, đồ họa 3D, resources và gradients.

Trong phiên bản mới nhất, nó cũng bao gồm một công cụ tạo mẫu mạnh mẽ được gọi là SketchFlow. Expression Blend có thể mở các file solution được tạo bởi Visual Studio. Bạn có thể tải Expression Blend theo đường link bên dưới.

Download Microsoft Expression Blend 3

c. Những công cụ hữu ích khác.

• WPF Inspector
• Snoop (Inspect the Visual Tree of running WPF applications)
• Mole (Data Visualizer for Visual Studio
• XAML Power Toys
• WPF Performance Suite

3. Tài liệu tham khảo WPF 4

a. WPF 4 – Unleashed

Đây là một trong những cuốn sách tốt nhất về WPF 4 của tác giả Adam Nathan. Cuốn sách được in với đầy đủ màu sắc, tất các các mã lệnh đều có cú pháp tô sáng. Nó bao gồm những lời giải thích tốt nhất về phiên bản 3 và bao gồm cả những chương mới về cảm ứng đa điểm, XAML 2009, VSM, cải thiện việc biểu diễn văn bản, và còn nhiều thông tin đáng để chúng ta tìm hiểu. Click vào đây để dowload.

b. Pro WPF in C# 2010

Một cuốn sách nổi tiếng khi viết về lập trình WPF 4 trên ngôn ngữ C#. Nếu thực sự bạn làm được những gì trong cuốn sách này chỉ ra. Bạn thực sự đã đạt đẳng cấp pro trong lập trình WPF.

Cuốn sách được Apress xuất bản tháng 3 năm 2010.

Ngôn ngữ tiếng Anh.

Click vào đây để download.

c. Windows Presentation Foundation – Unleashed

Đây là một cuốn sách tuyệt vời viết về WPF. Nó bao gồm tất cả các chủ đề quan trọng, bao gồm cả lập trình 3D. Tất cả các mã lệnh và cú pháp được tô sáng. Có phần nâng cao phục vụ cho các lập trình viên cao cấp.

Cuốn sách được xuất bản năm 2007, bởi tác giả Adam Nathan

Click vào đây để download.

Trên đây là những cuốn sách hay nhất viết về WPF 4. Nếu bạn thực sự thích lập trình với WPF bạn hãy download và chinh phục nó.

4. Tạo một ứng dụng WPF đơn giản đầu tiên

- Bây giờ bạn hãy mở Visual Studio lên, vào menu File –> New –> Project … Chọn WPF Application. Chọn đường dẫn chứa thư mục project và OK.

Visual Studio 2010 sẽ tạo ra project và tự động thêm một số tập tin cần thiết vào Solution Explorer. Một File App.xaml, một MainWindow.xaml.

Cấu trúc này trông khá giống với Windows Form, ngoại trừ tập tin Window1.designer.cs. Bây giờ nó được khai báo trong tập tin MainWindow.xaml với code ít hơn.

Bây giờ bạn click vào tập tin MainWindow.xaml trong thiết kế WPF và kéo một TextBox và một Button từ Toolbox vào cửa sổ thiết kế (Như hình)

- Bây giờ chúng ta viết code sử lý sự kiện click cho button  vừa kéo vào. Bằng cách chọn sự kiện của nó bên trong cửa sổ Properties (Nhấp vào biểu tượng sét nhỏ màu vàng). DoubleClick vào sự kiện click. Để tạo ra một phương thức trong Codebehind được gọi khi người dùng nhấp chuột vào button.

- Lưu ý: nếu bạn không tìm thấy biểu tượng sét nhỏ màu vàng, bạn phải cài đặt Server Pack 1 cho Visual Studio của mình. Hoặc bạn có thể click đúp vào button để được kết quả tương tự.

Visual studio 2010 sẽ tạo ra một phương thức trong tập tin codebehind để gọi khi button được click. Bạn thử viết một dòng code để khi click button sẽ hiện ra đoạn text mà chúng ta cần hiển thị như đoạn code dưới đây:

private void button1_Click(object sender, RoutedEventArgs e){    textBox1.Text = "Hello Lâm Thanh Cường!";}

- Bây giờ bạn nhấn F5 để chạy chương trình. Bạn sẽ được kết quả tương tự hình bên dưới khi click vào button.

Hãy cảm nhận thành quả đầu tiên của mình!

5. WPF đã làm thay đổi như thế nào trong công việc phát triển

Quy trình thiết kế Trải nghiệm người dùng

a. Trải nghiệm người dùng sẽ trở thành một nhân tố trong chìa khóa thành công.

Trong quá khứ, chúng ta tập trung vào xây dựng sản phẩm và hoàn thành các yêu cầu chức năng của người dùng, khi đó trải nghiệm người dùng được phát triển chậm chạp. Nhưng ngày nay, những người dùng yêu cầu nhiều hơn một sản phẩm chỉ làm việc. Cung cấp các tính năng phù hợp vẫn là điều kiện tiên quyết cho một sản phẩm tốt. Nhưng để biến nó thành một cái gì đó bất thường, bạn cần một trải nghiệm người dùng tốt.

Cung cấp một trải nghiệm người dùng phong phú không phải là một cái gì may mắn. Nó cần được quy hoạch, thiết kế và tích hợp vào sự phát triển của sản phẩm. Thiết kế trải nghiệm người dùng phong phú không chỉ tạo nên giao diện người dùng của bạn bằng một số đồ họa và gradient – khái niệm của nó rộng hơn nhiều. Để tạo ra một kết nối cảm tình của người dùng. Nó làm cho người dùng cảm thấy tốt và thích thú khi sử dụng phần mềm đó.

b. Công cụ mới cho các nhà thiết kế.

Microsoft công bố, cung cấp cho các nhóm phát triển một công cụ mạnh để tạo ra trải nghiệm người dùng phong phú và cần nhiều công cụ hỗ trợ đồ họa hơn Visual Studio. Vì vậy họ quyết định tạo ra một bộ công cụ mới  cho các nhà thiết kế. Đó là bộ công cụ Microsoft Expression bao gồm:

- Expression Blend: được xây dựng để tạo ra các giao diện người dùng trong WPF và Silverlight. Nó xây dựng cầu nối giữa thiết kế và phát triển, nó có thể mở rộng các giải pháp của Visual Studio.

- Expression Design: là một phiên bản nặng ký của Adobe Illustrator để tạo vào chỉnh sửa đồ họa vector.

- Expression Media: được xây dựng để mã hóa, cắt, nối, làm phong phú thêm các file video và tối ưu hóa chúng cho Silverlight stream.

- Expression Web: là một thế hệ kế tiếp của trình soạn thảo HTML và Javascript. Được dùng để thay thế cho FrontPage trước đây.

Đi cùng với chúng là một gói công cụ mạnh mẽ. Hình minh họa sau đây cho thấy một quy trình làm mẫu trong việc tích hợp hình ảnh vector được tạo ra bởi một nhà thiết kế đồ họa trong Adobe Illustrator vào một dự án WPF, đó là một phần của một giải  Visual Studio.

c. Phát triển công việc của một WPF project:

Phát triển một ứng dụng WPF với trải nghiệm người dùng phong phú đòi hỏi kỹ năng nhiều hơn một nhà phân tích chỉ được yêu cầu xác định một danh sách các trường hợp sử dụng, phát triển và thực hiện các phần mềm. Chúng ta phải tìm ra những gì mà người dùng thực sự cần. Điều này có thể được thực hiện bằng cách làm theo một cách tiếp cận với trọng tâm là người dùng.

c.1 Gợi ra những yêu cầu:

Giống như trong bất kỳ loại dự án phần mềm, để biết và tập trung vào mục tiêu phát triển. Bạn nên nói chuyện với các bên liên quan và người sử dụng để tìm hiểu nhu cầu thực sự của họ. Các nhu cầu này cần được tinh chỉnh các tính năng và thể hiện trong các trường hợp sử dụng (trừu tượng) hoặc các kịch bản của người dùng (minh họa). Nhiệm vụ này khá quan trọng và đôi khi phải lặp đi lặp lại và nó được thực hiện bởi các các kỹ sư yêu cầu (requirements engineer).

c.2 Tạo phiên bản dùng thử cho người dùng:

Tạo một mẫu giao diện người dùng là một bước quan trọng sao cho những ý tưởng chia sẽ giữa người dùng và các kỹ sư có thể tạo ra một hiểu biết chung về thiết kế tương tác. Nhiệm vụ này được thực hiện bởi nhà thiết kế tương tác (interaction designer). Nó rất hữu ích để chỉ phát thảo giao diện người dùng, Có nhiều kỹ thuật và công cụ để làm điều này, một trong số đó là:

- Paper Prototype (giấy nguyên mẫu):  sử dụng giấy và bút chì để phát thảo sơ bộ về giao diện người dùng của bạn. Không có các công cụ và cơ sở hạ tầng cần thiết. Mọi người chỉ có thể phác họa ý tưởng của họ trên giấy.

- WireFrames: thường được sử dụng để phác thảo cách bố trí một trang. Nó được gọi là wireframes bởi vì bạn chỉ cần vẽ những phác thảo về các control và hình ảnh. Điều đó có thể được thực hiện bởi các công cụ như PowerPoint hay Viso.

- Expression Blend 3 – Sketch Flow: Sketch Flow là một tính năng mới thú vị để tạo ra các mẫu tương tác trực tiếp trong WPF. Bạn có thể sử dụng tích hợp “Wiggly style” để làm nó trở vắn tắt. Nguyên mẫu này có thể chạy trong một máy phát độc lập và một cơ chế phản hồi thích hợp.

- Interactive Prototype(Tương tác thử nghiệm): đắt tiền nhưng là phương pháp tiếp cận thực tế nhất là tạo ra một thể (tái sử dụng) nguyên mẫu đó là các công việc như các ứng dụng thực tế nhưng với dữ liệu giả.

Nói chung quy trình thiết kế trải nghiệm người dùng là khá rộng. Với góc độ là một developer thì chúng ta chỉ tìm hiểu đến đây là ổn.

Hoàn thành ngày thứ nhất.