Layout Cơ Bản

      Khi các bạn đưa ra ứng dụng trong windows Phone cho người dùng thao tác thì các bạn phải thể hiện các đối tượng vào layout thuộc dạng nào.
    Các bạn sẽ hỏi layout là gì?. Câu trả lời là nó như một loại khung nào đó cho phép các bạn sắp xếp các đối tượng của ứng dụng theo một trình tự nào đó mà mỗi layout có một trình tự riêng. Sau đây là một số dạng Layout.

1. Grid Layout –Sắp xếp các đối tượng  theo dòng và cột
3. Canvas Layout- Sắp xếp các đối tượng theo tọa độ
   
4. Stackpanel Layout– Sắp xếp các đối tượng theo cơ chế stack theo hướng từ trên dưới hoặc từ trái qua (tùy theo orientation)
5. WrapPanel Layout– Sắp xếp các đối tượng theo dòng, khi nào hết chỗ chứa thì xuống dòng.
6. Border Layout– Tạo đường viên bao bọc cho các đối tượng.
7. ScrollView control– tạo Scrollview khi nội dung vượt quá khung chứa.  

Sau đây chúng ta đi khảo sát một số loại Layout.

1) Grid Layout

• Grid sắp xếp các vùng giao diện theo dòng và cột.
• Lợi thế dễ dàng mở rộng nếu cần ta chỉ cần thêm row, và column.
• Phải định nghĩa các dòng và cột trước khi dùng.

Mặc định Grid Layout có một row và một column do đó để thay đổi các bạn xem hình sau.

Grid có 3 row 1 colum

 Các bạn quan sát code 1*, 2*, 3* có nghĩa là chia windows ra thành tất cả 6 phần và vùng định nghĩa rectangle màu đỏ ở dòng số 0, chứa không gian 1/6. Trên dòng số 1 rectangle màu xanh chứa thêm 1 button <Button Content="Đây là Button" Grid.Row="1" Grid.Column="0"
                Margin="108,63.333,0,93" Width="179" ></Button> . Margin là thuộc tính canh lề Left, top...


Trong trường hợp có nhiều row và column thì  khi đưa dữ liệu vào vị trí  colum, row  đầu tiên (0,0) các bạn không nhất thiết phải chỉ rõ row và column nào hãy xem hình sau

Grid có nhiều row và column

2) StackPanel Layout

Sắp xếp các đối tượng theo cơ chế stack theo hướng từ trên xuống dưới hoặc từ trái qua (tùy theo orientation)

Trên hình cho các bạn thấy do hướng là theo chiều đứng  Orientation="Vertical" nếu các bạn đổi Orientation="Horizontal" thì sẽ đưa các object theo phương ngang
3) Cách Viết Event cho đối tượng 
Để viết sự kiện (event) cho đối tượng chúng ta có 2 cách:

•  1 là viết qua các thiết lập thuộc tính trong file XAML xem hình   

• 2 là kết hợp thiết kế qua cửa sổ thiết lập các Properties và Event xem hình

Cách thực hiện theo thứ tự các số trong hình bước đầu phải chọn control cần phát sinh Event và hi muốn phát sinh Event (bước 3) các bạn chỉ cần doubleclick vào Event cần phát sinh khi đó sẽ tự hệ thống tự phát sinh một Event vào file xaml.cs. Y như các bạn đã lập trình với windows thông thường, giả thiết các bạn muốn nhiều đối tượng cùng lắng nghe 1 Event và khi tác động lên control nào thì bạn lại sử lý diệng biệt thì ban làm như sau. Ví dụ trên các ban copy Event bước 3 sau đó paste vào Event cho các control thế là các đã được các control cùng lắng nghe 1 Event.

Khi doubleclick bước 3 sẽ có Event được phát sinh và bạn viết

Khi bạn tác động lên control nào thì sẽ gởi qua sender do đó các bạn tách bóc ra qua tên hoặc containt tùy theo bài toán mà xử lý.

4) Cách Viết đối tượng động và Event  động khi chay App  
Bạn hãy xem thiết kế

Các bạn quay lai trang xaml.cs hồi nẫy phát sinh Event tiềm đến
public MainPage()
      {
         this.InitializeComponent();
       }
và viết thêm
public MainPage()
        {
            this.InitializeComponent();
            this.NavigationCacheMode = NavigationCacheMode.Required;
            Button myButton = new Button();
            myButton.Name = "btnChoKeu";
            myButton.Height = 100;
            myButton.Width = 200;
            myButton.VerticalAlignment =VerticalAlignment.Top;
            myButton.HorizontalAlignment = HorizontalAlignment.Left ;
            myButton.Background = new SolidColorBrush(Windows.UI.Colors.Red  );
            myButton.Content = "Chó Kêu";
            myButton.Click += btnTiengMeo_Click; 
            KieuStack.Children.Add (myButton);
            myButton.Margin = new Thickness(210, 0, 0, 0);
        }
Đoạn code trên 

• Tạo thêm một button có tên là myButton và tên cho ứng dụng là btnChoKeu
• Gắn ứng Event động qua  myButton.Click += btnTiengMeo_Click; 

chạy lên sẽ được hình sau