Là một phần của loạt bài hướng dẫn Windows Phone của chúng tôi, bây giờ chúng ta sẽ tìm hiểu cách tạo các phần tử giao diện người dùng cho HelloPhone ứng dụng. Ứng dụng rất đơn giản. Khi hoàn thành, giao diện người dùng ứng dụng sẽ chứa chú thích, hộp văn bản và nút.
Để sử dụng ứng dụng, bạn nhập một số văn bản vào hộp văn bản và sau đó, khi bạn nhấp vào nút, ứng dụng sẽ hiển thị một biểu ngữ có văn bản mà bạn đã nhập. Nó sẽ trông giống như hình dưới đây.
1 trong Solution Explorer, nhấn đúp chuột MainPage.xaml để mở tệp này trong trình thiết kế.
Nhà thiết kế cung cấp hai chế độ xem riêng biệt để chỉnh sửa các tệp XAML, Thiết kế và XAML lượt xem. Trong chế độ Thiết kế, bạn có thiết kế mô phỏng, nơi bạn có thể kéo và thả các điều khiển từ hộp công cụ, cũng như chọn, thay đổi kích thước, di chuyển và đặt thuộc tính cho các điều khiển hiện có. Trong chế độ XAML, bạn có trình chỉnh sửa đánh dấu cho phép bạn chỉnh sửa mã XAML trong trang. Bạn có thể làm việc với một trong hai chế độ. Bạn cũng có một chế độ chia nhỏ, với cửa sổ trình soạn thảo hiển thị cả hai lượt xem cùng một lúc.
2. Trong nhiệm vụ này, chúng tôi chủ yếu tập trung khi chỉnh sửa XAML theo cách thủ công. Khi phần mã hóa được thực hiện, bạn có thể quay lại chế độ xem thiết kế để xem kết quả. Bạn cũng có thể có chế độ xem XAML toàn màn hình.
3. Trong đánh dấu XAML được tạo bởi mẫu ứng dụng Windows Phone mặc định, hãy định vị Lưới phần tử vùng chứa có tên LayoutRoot. Mục đích của nó là sắp xếp các yếu tố trên trang. Bên trong RowDefinition thuộc tính, chèn một hàng bổ sung giữa hai hàng hiện có và đặt giá trị của nó Chiều cao tài sản để Tự động. Hàng này sẽ sớm bao gồm một hộp văn bản và một nút.
4. Gốc Lưới phần tử cũng chứa một số phần tử lồng nhau với mỗi phần tử được gán cho một hàng khác của lưới ngoài bằng cách xác định Grid.Row bất động sản. Bây giờ, tìm phần tử Grid có tên TitleGrid và Đặt thuộc tính văn bản của phần tử khối văn bản đầu tiên bên trong lưới bên trong thành” Windows Phone 7 Series”. Tương tự Xin chào điện thoại được thêm vào khối văn bản tiếp theo.
5. Bây giờ, Tìm Lưới phần tử có tên ContentGrid, gán nó vào hàng 1, ban đầu thường trống rỗng và dán đánh dấu XAML sau vào phần tử này.
6. Để hoàn thành thiết kế của trang, hãy thêm hàng thứ ba để chứa biểu ngữ có thông báo được người dùng nhập. Để tạo hàng này, hãy chèn đánh dấu XAML sau ngay trước thẻ kết thúc của lưới ngoài.
7. Nhấp vào Thiết kế xem và kiểm tra bố cục các điều khiển trên trang.
Trong hướng dẫn tiếp theo của chúng ta, chúng ta sẽ học cách “Xử lý sự kiện từ giao diện người dùng”.
