‫Chào mừng trở lại.
‫Bây giờ cuối cùng đã đến lúc sử dụng Grid.
‫Và bạn đã thấy cách sử dụng bảng điều khiển ngăn xếp trước đây và bảng điều khiển giá đỡ và những thứ đó ngày nay được xếp chồng lên nhau và gói
‫gọn mọi thứ.
‫Và bây giờ chúng ta sẽ kiểm tra lưới cho phép chúng ta định vị mọi thứ trong một lưới và chúng ta sẽ bắt đầu
‫đơn giản bằng cách sử dụng lưới hai lần hai.
‫Và trước hết, những gì chúng ta cần cho đó là định nghĩa cột và hàng để chúng ta có thể tiếp tục và trong lưới
‫của mình.
‫Vì vậy, hãy chuyển đến tệp ví dụ của bạn và sau đó trong lưới, tạo định nghĩa cột chấm lưới.
‫Và ở đây bạn có thể xác định các cột khác nhau của mình.
‫Vì vậy, trước hết, bạn cần các định nghĩa cột, số nhiều, sau đó bạn có thể tiếp tục và tạo các
‫định nghĩa cột riêng lẻ của mình.
‫Ví dụ: bạn có thể tiếp tục và tạo một tài khoản tại đây.
‫Tôi sẽ đơn giản hóa nó trong một dòng, chỉ như vậy.
‫Và những gì tôi muốn xác định ở đây chỉ đơn giản là chiều rộng và chiều rộng.
‫Tôi có thể, giả sử, đặt nó thành 100 và bây giờ hãy tạo một cột khác, cũng
‫sẽ rộng 100.
‫Bây giờ điều đó vẫn chưa đủ.
‫Chúng ta cũng cần phải có hàng, ngoại trừ chúng ta chỉ muốn có một hàng.
‫Vì vậy, hãy bắt đầu với một hàng duy nhất và tôi sẽ tạo một
‫nút trước tiên và nút này sẽ nói điều gì đó như, Xin chào, và nó phải nằm trong cột chấm lưới số không.
‫Và bây giờ tôi tạo một nút thứ hai, sẽ là lưới, cột một.
‫Bây giờ nếu chúng ta nhìn vào thiết kế của chúng ta bây giờ, chúng ta có thể thấy chúng ta có hai nút.
‫Chào bạn.
‫Hãy chạy mã của chúng tôi chỉ để xem nó trông như thế nào.
‫Nhân tiện, chúng chỉ rộng 100 pixel, như bạn có thể thấy ở đây, vì vậy chiều rộng được giới hạn ở 100 pixel.
‫Vì vậy, nếu bạn thêm tổng giá trị ở đây, thì điều đó sẽ đơn giản sử dụng nó dưới dạng pixel theo chiều rộng.
‫Như bạn có thể thấy ở đây, đó là chiều rộng của một cột.
‫Và tất nhiên, chúng tôi có thể nói rằng chúng tôi có thể đặt thêm một số cột vào đây một cách dễ dàng.
‫Chà, chúng ta có thể làm điều đó và chúng ta sẽ làm điều đó sau này.
‫Nhưng trước khi chúng tôi làm điều đó, tôi muốn cho bạn thấy một điều rất quan trọng.
‫Vì vậy, nếu tôi kéo XAML của mình lên đây ngay bây giờ, nó thực sự hữu ích vì chúng ta sẽ thấy sự khác biệt trực tiếp trong giao diện người dùng
‫của mình.
‫Và tôi muốn thay đổi chiều rộng từ 100 thành tự động.
‫Và như bạn có thể thấy, những gì tự động làm.
‫Nó tự động chỉ lấy chiều rộng được yêu cầu để vừa với tất cả nội dung có bên
‫trong phần tử.
‫Vì vậy, trong trường hợp của chúng tôi, nút có một văn bản được gọi là Hi there, và đó là lượng không gian mà Hi cần hoặc
‫yêu cầu.
‫Và đó cũng là mức độ rộng của nút của chúng ta.
‫Và như bạn có thể thấy, đó là định nghĩa cột đầu tiên.
‫Vì vậy, định nghĩa cột đầu tiên mà nút của chúng tôi với hi đó là cách nút hoặc đó là nút
‫được thay đổi.
‫Như bạn có thể thấy bây giờ nó đã được thay đổi thành 59. 5 pixel.
‫Nếu tôi thêm một số văn bản, một số văn bản khác, bạn có thể thấy nó đang mở rộng nó thành 153. 5 pixel.
‫Vì vậy, bạn có thể dễ dàng tiếp tục và sử dụng tốt tính năng tự động nếu bạn muốn mọi thứ phù hợp chính xác dựa trên
‫dung lượng thực sự cần.
‫Nhưng điều gì sẽ xảy ra nếu tôi muốn tạo các cột có cùng chiều rộng?
‫Tất nhiên, tôi có thể sử dụng các giá trị đầy đủ ở đây hoặc các giá trị cố định ở đây, nhưng tôi cũng có thể sử dụng dấu sao.
‫Và những gì ngôi sao sẽ làm là nó sẽ xảy ra nếu tất cả chúng đều có ngôi sao, nó sẽ nói đơn giản, được
‫rồi, chiếm hết không gian.
‫Và trong trường hợp này, chỉ có không gian trống mà cột cụ thể này có và nó hoàn toàn giống với các
‫cột khác.
‫Vì vậy, có một trọng số bây giờ.
‫Vì vậy, cái này có trọng lượng là một và cái kia cũng có trọng lượng bằng một.
‫Vì vậy, chúng có trọng số như nhau, có nghĩa là chúng có chiều rộng bằng nhau.
‫Nếu chúng ta muốn thay đổi điều đó, giả sử tôi muốn tạo nút thứ hai ở đây, nút thứ
‫hai rộng gấp đôi nút đầu tiên mà tôi có thể sử dụng dấu sao đôi.
‫Vì vậy, bây giờ cái này sẽ rộng gấp đôi cái đầu tiên.
‫Ví dụ: nếu tôi muốn có ba phần năm ở bên trái và 2/5 ở bên phải làm chiều rộng
‫của chúng.
‫Tôi chỉ có thể sử dụng cách tiếp cận này, như bạn có thể thấy ở đây.
‫Vì vậy, ba lần ngôi sao và hai lần ngôi sao.
‫Vì vậy, những gì nó làm, nó thực sự bổ sung tất cả và sau đó chỉ mất nhiều giây so với những gì được thiết lập ở
‫đây.
‫Vì vậy, giả sử chúng ta có ba và hai.
‫Vì vậy, những gì nó làm, nó nói, được rồi, bây giờ tổng cộng là năm.
‫Các đơn vị có sẵn và tôi sẽ lấy 3/5 số đơn vị đó.
‫Bây giờ, bạn thậm chí có thể tiếp tục và làm điều gì đó giống như 100.
‫Vì vậy, bạn có thể thấy cái này mất 100.
‫Và điều này chỉ mất hai.
‫Vì vậy, đó là cách bạn có thể sử dụng chiều rộng.
‫Và điều tương tự cũng xảy ra đối với các đỉnh cao.
‫Vì vậy, bây giờ chúng ta hãy tiếp tục và tạo một định nghĩa hàng.
‫Vì vậy, định nghĩa hàng chấm lưới.
‫Và tại đây, chúng ta có thể tiếp tục và tạo các định nghĩa hàng của chúng ta.
‫Vì vậy, điều đầu tiên, và tôi cũng sẽ giữ cho nó đơn giản, giống như trong một hàng.
‫Và cái này cần một chiều cao.
‫Vì vậy, tôi chỉ nói, được rồi, tôi muốn có chiều cao của ngôi sao.
‫Và bây giờ chúng ta sử dụng điều tương tự một lần nữa cho hàng thứ hai.
‫Và như bạn có thể thấy bây giờ chúng ta có hai hàng.
‫Vì vậy, một ở đây và thứ hai ở dưới cùng.
‫Và như bạn có thể thấy, hàng thứ hai chưa có bất kỳ nội dung nào.
‫Vì vậy, bây giờ chúng ta hãy thay đổi điều đó bằng cách trước hết, hãy đặt nút này ở đây ở phía dưới.
‫Đúng.
‫Và làm thế nào chúng ta có thể làm điều đó?
‫Chà, chúng tôi chỉ đơn giản sử dụng hàng chấm lưới và chúng tôi nói rằng nó ở hàng một.
‫Bây giờ, bạn có thể tự hỏi, tại sao nó lại là một?
‫Tại sao nó không phải là hai?
‫Vâng, như bạn có thể đã biết trong lập trình, chúng ta bắt đầu đếm với số không.
‫Vì vậy, hàng đầu tiên là số 0, hàng thứ hai là một.
‫Vì vậy, bây giờ cao có hàng thứ hai, là hàng một.
‫Bây giờ chúng ta hãy tiếp tục và tạo thêm hai nút và thậm chí có thể đổi tên của chúng thành một cái
‫gì đó có thể nói nhiều hơn về thông tin thực tế của chúng.
‫Vì vậy, tôi sẽ đặt nó vào cột số 0 ở hàng một và cột đó
‫thực sự, tôi sẽ đưa nó về số 0 và cột đó sẽ ở một và thực sự đó sẽ là cột một và hàng 0 như thế nào cái đó.
‫Vì vậy, bây giờ chúng ta có tất cả các nút và cái đó sẽ là một.
‫Cái đó sẽ là nút hai, nút ba và nút bốn.
‫Tuyệt quá.
‫Vì vậy, bây giờ nếu chúng ta bắt đầu điều đó, bạn sẽ thấy điều đó.
‫Chà, nó cũng tính cho chính giao diện người dùng.
‫Vì vậy, một, hai, ba, bốn.
‫Được rồi.
‫Bây giờ là một thử thách nhỏ cho bạn khi bạn đã thấy cách sử dụng các cột và hàng của lưới.
‫Hãy tiếp tục và tạo một lưới ba lần ba ở đây với tám nút.
‫Vì vậy, 1 đến 8 nên là các nút và vị trí thứ chín.
‫Vì vậy, vị trí dưới cùng bên phải hoặc phần tử lưới phải là một khối văn bản.
‫Vì vậy, vui lòng tạm dừng video và cố gắng thực hiện điều đó.
‫Được rồi.
‫Tôi hy vọng bạn đã thử nó.
‫Vì vậy, những gì tôi sẽ làm là tôi sẽ thêm một cột khác bằng cách thêm một định nghĩa cột ở đây, và nó
‫sẽ có chiều rộng bằng nhau và chiều cao bằng nhau.
‫Nó sẽ có chiều cao bằng nhau.
‫Và bây giờ, như bạn có thể thấy, các nút, chúng trông hơi kỳ lạ.
‫Nhưng đó chỉ là vì tôi chưa.
‫Đã thu nhỏ.
‫Vì vậy, bây giờ chúng ta có thể nhìn thấy nó một cách chính xác.
‫Bây giờ chúng tôi có các nút của chúng tôi với số không một và v.v.
‫Vì vậy, tôi sẽ sao chép nút đó ở đây và tôi sẽ đặt nó ở cột hai.
‫Vì vậy Hàng không và cột hai.
‫Tất nhiên, bây giờ bạn có thể tranh luận rằng bắt đầu với hàng và sau đó nhập cột sẽ hợp
‫lý hơn.
‫Chà, bạn có thể làm điều đó, nhưng trong trường hợp của tôi, đó là cách khác.
‫Cuối cùng, điều quan trọng là bạn sử dụng đúng cả hai.
‫Bây giờ chúng ta có ba nút ở trên cùng.
‫Bây giờ chúng ta hãy tiếp tục và tạo hàng thứ hai hoặc hoàn tất hàng thứ hai.
‫Và đó là cột hai.
‫Và tôi sẽ sao chép nó ba lần, thực sự, hai lần là đủ.
‫Và hàng đó sẽ ở vị trí số 0 và hàng thứ hai, vị trí một hoặc cột một.
‫Tất nhiên, bây giờ chúng ta cần thay đổi các giá trị.
‫Vì vậy, một, hai, ba, bốn, năm, sáu, bảy và tám.
‫Và như tôi đã nói, ở dưới cùng bên trái, tôi muốn có một khối văn bản.
‫Vì vậy, khối văn bản có cùng cách tiếp cận với lưới.
‫Bạn cần phải có một cột và một hàng.
‫Vì vậy, tôi chỉ nói đây sẽ là cột hai và lưới hai hàng.
‫Vì vậy, bây giờ chúng ta đang ở dưới cùng, bên trái hoặc dưới cùng ngay bây giờ, chúng ta có thể tiếp tục và cung cấp cho nó một số văn bản.
‫Và tôi sẽ nói một cái gì đó giống như văn bản.
‫Bây giờ bạn có thể nói, ồ, tôi không thích nó.
‫Văn bản ở trên cùng bên trái.
‫Chà, bạn có thể dễ dàng thay đổi điều đó bằng cách nhập một cái gì đó như căn chỉnh theo chiều ngang và sử dụng trung tâm tại đây.
‫Vì vậy, bây giờ nó được căn giữa theo chiều ngang.
‫Hãy phóng to để bạn có thể thấy.
‫Được rồi.
‫Và bây giờ nếu tôi cũng muốn căn giữa theo chiều dọc, tôi chỉ cần sử dụng căn chỉnh theo chiều dọc và tôi cũng sử dụng
‫căn giữa ở đây.
‫Vì vậy, bây giờ như bạn thấy, nút được căn giữa một cách hoàn hảo và chúng tôi thậm chí có thể tiếp
‫tục và thay đổi kích thước phông chữ chỉ vì chúng tôi có thể và hãy làm cho nó lớn hơn một chút như 32.
‫Và bây giờ bạn có thể thấy chúng tôi có một lưới ba lần ba với tám nút và một văn bản.
‫Bây giờ bạn có thể tiếp tục và căn chỉnh tất cả các loại phần tử khác nhau trong cửa sổ của bạn tại đây trong cửa sổ chính và
‫lưới của bạn.
‫Vì vậy, đó là vẻ đẹp của việc sử dụng lưới.
‫Và như bạn đã thấy, bạn có thể xếp chồng lên nhau mọi thứ.
‫Bạn có thể tạo một bảng điều khiển ngăn xếp với nhiều lưới và ngoài ra, bạn có một văn bản ở giữa hoặc một cái gì đó
‫tương tự.
‫Vì vậy, bạn không bị giới hạn sử dụng một phần tử ở đây.
‫Như bạn có thể thấy, chúng ta có thể tiếp tục và giả sử đặt nó vào một bảng điều khiển ngăn xếp.
‫Bảng xếp chồng như vậy.
‫Vì vậy, tôi sẽ kéo lưới.
‫Như bạn có thể thấy bây giờ, nó đang phàn nàn vì ví dụ cửa sổ, cửa sổ chính chỉ biết cái đầu tiên.
‫Vì vậy, nó sẽ chỉ nhìn thấy bảng STACK nếu bây giờ chúng ta kiểm tra sự xuất hiện của chúng ta.
‫Trên thực tế, hãy dừng nó lại để chúng ta có thể thấy bây giờ nó nói đánh dấu không hợp lệ.
‫Vì vậy, nếu chúng ta lấy toàn bộ lưới bên trong bảng điều khiển Ngăn xếp của mình, như bạn có thể thấy, nó ở đó và nó được viết lên.
‫Vì vậy, ở phía dưới có rất nhiều không gian.
‫Vì vậy, ở đây chúng tôi có thể thêm một nút khác, để bạn thấy rằng điều này là có
‫thể và nút này sẽ có chiều cao là 100.
‫Và bây giờ, như bạn có thể thấy, tất cả đều được xếp chồng lên nhau ở trên cùng.
‫Và mặc dù chúng ta có chiều cao này mà tất cả chúng đều có cùng chiều cao, văn bản này cần rất nhiều không gian nên
‫nó bỏ qua điều đó.
‫Vì vậy, kích thước phông chữ quá lớn.
‫Vì vậy, nếu chúng ta quay trở lại 16, nó vẫn còn quá lớn.
‫Nếu bây giờ chúng ta giả sử số 12 thì có vẻ giống hơn.
‫Vì vậy, bất cứ khi nào bạn sử dụng định nghĩa hàng với dấu sao này, bạn phải cẩn thận.
‫Nếu một phần tử cần nhiều không gian hơn có, thì phần tử đó sẽ bị tràn.
‫Được rồi.
‫Vì vậy, đó là hai lưới.
‫Tôi sẽ quay trở lại lưới tiêu chuẩn đẹp mà chúng ta đã có ở đó.
‫Và nói chung, điều mà tôi luôn khuyên bạn sau khi bạn đã nhìn thấy một thứ như vậy và sau khi bạn đã học được điều
‫gì đó như vậy, hãy tiếp tục và chơi với nó.
‫Chỉ cần chơi xung quanh với một số loại yếu tố khác nhau.
‫Bạn đã thấy một số và chúng tôi sẽ xem xét thêm nhiều điều khiển sau này.
‫Vì vậy, những thứ mà chúng tôi đã sử dụng cho đến nay chủ yếu là các nút, bên phải và khối văn bản, nhưng
‫chúng tôi sẽ sử dụng các điều khiển đẹp mắt khác nhau trong các video trong tương lai.
‫Vì vậy, hẹn gặp bạn ở đó.