WPF: XAML (P3)

Trong các ví dụ trước, tôi đã trình bày cho các bạn thấy, các thành phần cốt lõi để phát triển một ứng dụng WPF, cách xây dựng một WPF Application, và sử dụng đối tượng Window trong WPF Application. Tuy nhiên dễ dàng nhận thấy rằng, đoạn code trên đã hòa trộn 2 phần rất khác biệt của một ứng dụng vào nhau, đó là phần thể hiện giao diện “Presentation”,trong khai báo các controls và thuộc tính và phần tác nghiệp “Behavior”, trong event. Điều đó làm cho việc thiết kế giao diện trở nên khó khăn. Hơn nữa sẽ khó để phân tách giữa việc thiết kế giao diện và xây dựng nghiệp vụ.

Phần này, tôi giới thiệu các sử dụng XAML trong WPF để thay thế ứng dụng mà tôi đã viết trong các bài trước, bằng việc phân tách giữa thiết kế giao diện và thực thi các events.

XAML (Extensible Application Markup Language) là một ngôn ngữ dựa trên XML được dùng cho việc tạo và khởi tạo các đối tượng .NET. Nó được sử dụng trong WPF như là một thành phần để mô tả giao diện UI cho ứng dụng.

Dưới đây là các bước để thay thế ứng dụng WPF trước đó sử dụng XAML

1. Tạo mới một VS 2008 project sử dụng WPF Application template

 

2. Thiết kế Window và Button trong XAML (Window1.xaml)

<Window x:Class="MyFirstXAMLWpfApp.Window1"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Title="Hello Windows Presentation Foundation!">

    <Button

        x:Name="button"       

        Click="button_Click">Submit</Button>

</Window>

3. Viết code cho Event trong .cs file

public partial class Window1 : Window

   {

       public Window1()

       {

           InitializeComponent();

       }

       private void btnSubmit_Click(object sender, RoutedEventArgs e)

       {

           MessageBox.Show("Bạn vừa click vào Submit button!");

       }

   }

5. Bấm F5 để test. Các bạn sẽ thấy kết quả thể hiện không khác ví dụ trước.

Tuy nhiên chúng ta sẽ thay đổi chút ít trong App.xaml để so sánh với đoạn code trong ví dụ trước

6. Xóa StartupUri="Window1.xaml" và thay vào đó là Startup="app_Startup":

<Application x:Class="MyFirstXAMLWpfApp.App"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Startup="app_Startup">

    <Application.Resources>

    </Application.Resources>

</Application>

7. Viết code cho app_Startup trong App.xaml.cs

public partial class App : Application

   {

       void app_Startup(object sender, StartupEventArgs e)

       {

           Window window = new Window1();

           window.Show();

       }

   }

8. Bấm F5 để chạy

Chúng ta có thể dễ dàng để so sánh 2 WPF Project sử dụng Code và Markup