basquang™ on clouds

July 12, 2009

WPF: XAML (P3)

Filed under: WPF — basquang @ 12:29 PM

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

image 

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

Advertisements

3 Comments »

  1. Anh Quang ơi, xem giúp em lỗi này với
    em sửa cái Startup=”app_Startup” rồi và viết event app_Startup
    Nhưng khi chạy thì nó báo lỗi: Cannot locate resource ‘app_Startup’.
    Em xem lại thì cái event app_statup trong App.xaml.cs chưa được sử dụng.

    Comment by Pham Dinh — May 22, 2012 @ 12:01 AM | Reply

  2. Kiểm tra lại cẩn thận thôi…

    Comment by basquang — May 22, 2012 @ 8:41 AM | Reply

    • Em cứ tưởng thay Window1.xaml thành app_Startup không ah!
      Ai ngờ StartupUri –> Startup nữa 🙂
      Giơ ok rồi. thank nhé!

      Comment by Pahm Dinh — May 24, 2012 @ 8:34 PM | Reply


RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at WordPress.com.

%d bloggers like this: