Xây dựng giao diện WPF bằng code C#

Xây dựng giao diện bằng code C#

 

Ở phần trước, mình có đưa ra 1 ví dụ. Trong đó, mình làm giao diện bằng công cụ thiết kế trực quan của visual studio (kéo thả các control trên cửa sổ design). Hôm nay, mình sẽ trình bày 1 tí về việc làm lại giao diện này nhưng không dùng công cụ thiết kế trực quan của visual studio nữa. Mà mình sẽ code trực tiếp bằng C#. Nếu bạn nào đã từng code trực tiếp để thiết kế giao diện bên Windows Form thì sẽ dễ dàng code trực tiếp bên WPF.

 

Đây còn là phương pháp để sinh Control khi đang chạy chương trình (run-time).

 

1.      Cách tạo giao diện bằng code C#

 

Khi tạo 1 form mới bằng visual studio, code C# sẽ được tự sinh trong file code-behind như sau:

 

namespace DesignFormByCode

{

    /// <summary>

    /// Interaction logic for Window1.xaml

    /// </summary>

    public partial class Window1 : Window

    {

        public Window1()

        {

            InitializeComponent();

        }

    }

}

 

Ghi chú: mình đặt tên project là DesignFormByCode nên nó đặt thành namespace luôn. Và visual studio cũng đặt tên mặc định cho form mới là Window1 trùng với tên file.

 

Window1( ) chính là phương thức thiết lập của lớp Window1. Và theo định nghĩa thì phương thức thiết lập là phương thức tự động gọi khi đối tượng được tạo. Vậy code giao diện của mình sẽ được ở phương thức này là hợp lý nhất và sẽ viết sau dòng InitializeComponent();

 

a.      Cách tạo 1 control trong form

B1.  Khai báo control (để control đó có thể dùng cho toàn form thì khai báo trong lớp form.)

B2.  Cấp phát control

B3.  Cài đặt các thông số control (dài, rộng, lề…)

B4.  Sau đó gán control đó cho thuộc tính Content của form

 

          Ví dụ: tạo 1 button

 

namespace DesignFormByCode

{

    /// <summary>

    /// Interaction logic for Window1.xaml

    /// </summary>

    public partial class Window1 : Window

    {

        Button button1; //khai báo

        public Window1()

        {

            InitializeComponent();

button1 = new Button();  //cấp phát

button1.Content = “Nút”; //cài nội dung (text)

this.Content = button1; //gán button1 vào form

        }

    }

}

 

Chạy thử ta được :

 

image

 

Để Control có vị trí và độ dài, rộng theo mong muốn, ta phải cài đặt các thuộc tính của Control đó. Cách đơn giản là cài đặt trực tiếp.

Ví dụ như ta muốn quy định độ rộng, ta gán vào thuộc tính Width.

 

namespace Buttondongian

{

    /// <summary>

    /// Interaction logic for Window1.xaml

    /// </summary>

    public partial class Window1 : Window

    {

        Button button1;

        public Window1()

        {

            InitializeComponent();

            button1 = new Button();

            button1.Content = “Nút”;

            button1.Width = 50; //rộng 50

            this.Content = button1;

        }

    }

}

Chạy thử ta được:

 

image

 

Dù resize form nhưng Button vẫn giữ nguyên độ rộng là 50.

 

image

 

Để chỉnh vị trí, chúng ta chỉnh trên thuộc tính Margin. Cách gán vào Margin:

Ta không thể thực hiện lệnh gán như sau để quy định button1 cách lề trái 50.

 

button1.Margin.Left = 50; //Lỗi

 

Mà thay vào đó chúng ta dùng 1 đối tượng Thickness. Thickness có các thuộc tính: Left, Right, Top, Bottom để canh lề.

            Thickness thick = new Thickness();

            thick.Left = 50;

            button1.Margin = thick;

Ta thử chạy trên đoạn code:

namespace Buttondongian

{

    /// <summary>

    /// Interaction logic for Window1.xaml

    /// </summary>

    public partial class Window1 : Window

    {

        Button button1;

        public Window1()

        {

            InitializeComponent();

            button1 = new Button();

            button1.Content = “Nút”;

Thickness thick = new Thickness();

            thick.Left = 50;

            button1.Margin = thick;

            this.Content = button1;

        }

    }

}

 

image

 

Và cho dù resize form thì:

 

image

 

Chúng ta cũng có thể tận dụng các phương thức thiết lập của lớp Thickness để code gọn hơn như sau:

 

namespace Buttondongian

{

    /// <summary>

    /// Interaction logic for Window1.xaml

    /// </summary>

    public partial class Window1 : Window

    {

        Button button1;

        public Window1()

        {

            InitializeComponent();

            button1 = new Button();

            button1.Content = “Nút”;

            button1.Margin = new Thickness(50,0,0,0);

            this.Content = button1;

        }

    }

}

Ngoài ra để chọn chính xác các anchor, chúng ta có thể chỉnh trong thuộc tính VerticalAlignment và HorizontalAlignment.

 

b.      Thủ thuật cài event đơn giản (snippet)

B1.  Truy xuất event

B2.  Toán tử +=

B3.  Nhấn Tab 2 lần

Ví dụ: Nhấp 2 lần vào 1 button thì đổi màu button đó.

Chúng ta sử dụng ví dụ trước:

namespace Buttondongian

{

    /// <summary>

    /// Interaction logic for Window1.xaml

    /// </summary>

    public partial class Window1 :Window

    {

        Button button1;

        public Window1()

        {

            InitializeComponent();

            button1 = new Button();

            button1.Content = “Nút”;

            this.Content = button1;

        }

    }

}

Sau đó truy xuất event nhấp chuột 2 lần là MouseDoubleClick của button1 như hình sau.

 

image

 

Sau đó += :

 

image

 

Ở đây nhấn Tab, sẽ có thêm đoạn code được chèn vào như sau:

 

image 

 

Phần code được bôi đen đó chính là tên hàm mà ta muốn event xảy ra sẽ gọi. Nếu hàm ta muốn gán đã định nghĩa từ trước rồi thì ta sửa lại tên hàm cho đúng. Còn chưa có thì Tab thêm lần nữa, môi trường sẽ tự sinh đoạn mẫu hàm bên dưới

        void button1_MouseDoubleClick(object sender, MouseButtonEventArgs e)

        {

            throw new NotImplementedException();

        }

Lúc này, ta xóa bỏ đoạn code throw bên trong hàm và viết tiếp code xử lý . Ví dụ ta muốn button vừa nhấn đó đổi thành màu hồng thì:

        void button1_MouseDoubleClick(object sender, MouseButtonEventArgs e)

        {

            ((Button)sender).Background = Brushes.Pink;

        }

Ở đoạn code trên việc ép kiểu Button cho sender để hàm mang ý nghĩa tổng quát hơn thay vì chỉ cần dùng button1 gọi là đủ.

Chạy thử chương trình:

 

image

One response to “Xây dựng giao diện WPF bằng code C#

Trả lời

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Đăng xuất /  Thay đổi )

Google photo

Bạn đang bình luận bằng tài khoản Google Đăng xuất /  Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Đăng xuất /  Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Đăng xuất /  Thay đổi )

Connecting to %s