Một ứng dụng WPF nho nhỏ.

Ứng dụng này sẽ hiển thị cửa sổ ban đầu như sau:

Và kết quả hiển thị sau khi nhấn nút Xem thông tin:

Một ứng dụng khá đơn giản phải không các bạn. Ban đầu các bạn sẽ thấy nó có vẻ giống với giao diện của một Window Form bình thường. Quả thật, đúng vậy! WPF là thế hệ tiếp theo của Window Form nhưng khả năng hỗ trợ của nó thì rất lớn. Ban đầu, tôi sẽ cho các bạn những cái nhìn ban đầu về WPF cho những bạn đã quen với lập trình với Window Form không bị quá bỡ ngỡ khi lập trình với WPF, đặc biệt, điều tôi muốn các bạn quan tâm ở đây ở mức cơ bản đó là lập trình với XAML (các bài sau tôi sẽ giới thiệu thêm cho các bạn về nó Open-mouthed).
WPF được hỗ trợ từ phiên bản Visual Studio 2008, trong phần trình bày của tôi, tôi sử dụng phiên bản Visual Studio 2010 beta 2 (nếu bạn nào sử dụng Visual Studio 2008 thì có thể liên lạc với mình để mình hướng dẫn bạn thực hiện trên phiên bản đó nhé).
Sau đây là các bước thực hiện:
Đầu tiên, các bạn mở Visual Studio | Visual C# (tôi chọn lập trình bằng C#, bạn cũng có thể chọn lập trình với ngôn ngữ khác bằng cách chọn Other Languages) | WPF Application | Đặt tên cho solution | OK.

Xong các bước thủ tục tạo Solution ban đầu, sau đây ta sẽ đi vào chi tiết phần chính. Các bạn mở file MainWindow.xaml và gõ mã sau:


<Window x:Class=”FirstWPFApp.MainWindow”
        xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation
        xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml
        Title=”Hello everyone” Height=”237″ Width=”296″>
    <Grid Height=”203″>
        <Label Content=”Họ đệm:” Height=”30″ HorizontalAlignment=”Left” Margin=”10,15,0,0″ Name=”label1″ VerticalAlignment=”Top” Width=”60″ Focusable=”False”/>
        <Label Content=”Tên:” Height=”30″ HorizontalAlignment=”Left” Margin=”10,50,0,0″ Name=”label2″ VerticalAlignment=”Top” Width=”60″ Focusable=”False” />
        <TextBox Height=”30″ HorizontalAlignment=”Left” Margin=”76,12,0,0″ Name=”Th_Ho_dem” VerticalAlignment=”Top” Width=”174″ />
        <TextBox Height=”30″ HorizontalAlignment=”Left” Margin=”76,50,0,0″ Name=”Th_Ten” VerticalAlignment=”Top” Width=”75″ />
        <Label Content=”Giới tính:” Focusable=”False” Height=”30″ HorizontalAlignment=”Left” Margin=”12,86,0,0″ Name=”label3″ VerticalAlignment=”Top” Width=”60″ />
        <RadioButton Content=”Nam” Height=”17″ HorizontalAlignment=”Left” Margin=”76,91,0,0″ Name=”Th_Gt_nam” VerticalAlignment=”Top” Width=”49″ />
        <RadioButton Content=”Nữ” Height=”17″ HorizontalAlignment=”Left” Margin=”155,91,0,0″ Name=”Th_Gt_nu” VerticalAlignment=”Top” Width=”49″ />
        <Label Content=”Quê quán:” Focusable=”False” Height=”30″ HorizontalAlignment=”Left” Margin=”10,122,0,0″ Name=”label4″ VerticalAlignment=”Top” Width=”70″ />
        <ComboBox Height=”23″ HorizontalAlignment=”Left” Margin=”76,122,0,0″ Name=”Th_Que_quan” VerticalAlignment=”Top” Width=”120″>
            <ComboBoxItem>Hà Nội</ComboBoxItem>
            <ComboBoxItem>Sài Gòn</ComboBoxItem>
            <ComboBoxItem>Bình Định</ComboBoxItem>
            <ComboBoxItem>Huế</ComboBoxItem>
            <ComboBoxItem>Đà Lạt</ComboBoxItem>
            <ComboBoxItem>Vũng tàu</ComboBoxItem>
        </ComboBox>
        <Button Content=”Xem thông tin” Height=”23″ HorizontalAlignment=”Left” Margin=”12,166,0,0″ Name=”Th_Xem_thong_tin” VerticalAlignment=”Top” Width=”103″ Click=”Th_Xem_thong_tin_Click” />
        <Button Content=”Reset” Height=”23″ HorizontalAlignment=”Left” Margin=”155,166,0,0″ Name=”Th_Reset” VerticalAlignment=”Top” Width=”103″ Click=”Th_Reset_Click” />
    </Grid>
</Window>


Sau đó, các bạn gán các phương thức xử lý cho sự kiện Click cho 2 button Xem thông tin và Reset. Các bạn mở file MainWindow.xaml.cs trong file MainWindow.xaml tương ứng và gõ vào mã sau:

               
private void Th_Xem_thong_tin_Click(object sender, RoutedEventArgs e)
        {
            string strMessage, strHoTen, strTitle;
            strHoTen = Th_Ho_dem.Text + ” ” + Th_Ten.Text;
            if (Th_Gt_nam.IsChecked == true)
                strTitle = “Mr.”;
            else
                strTitle = “Ms/Mrs.”;
            strMessage = “Xin chào ” + strTitle + ” ” + strHoTen;
            if(Th_Que_quan.SelectedIndex >= 0)
                strMessage += “\n Quê quán: ” + Th_Que_quan.Text;
            MessageBox.Show(strMessage);
        }

        private void Th_Reset_Click(object sender, RoutedEventArgs e)
        {
            Th_Ho_dem.Text = “”;
            Th_Ten.Text = “”;
            Th_Gt_nam.IsChecked = true;
            Th_Gt_nu.IsChecked = false;
            Th_Que_quan.SelectedIndex = 0;
        }


Xong, các bạn F5 để chạy ứng dụng và xem kết quả có giống với ví dụ không nha Wink. Chúc các bạn thành công.

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