Hướng dẫn sử dụng Windows Phone 8: Tạo nút tùy chỉnh trong Expression Blend-I

Hướng dẫn sử dụng Windows Phone 8: Tạo nút tùy chỉnh trong Expression Blend-I
Hướng dẫn sử dụng Windows Phone 8: Tạo nút tùy chỉnh trong Expression Blend-I

Video: Hướng dẫn sử dụng Windows Phone 8: Tạo nút tùy chỉnh trong Expression Blend-I

Video: Hướng dẫn sử dụng Windows Phone 8: Tạo nút tùy chỉnh trong Expression Blend-I
Video: [Học lập trình Windows Phone] - Bài 6: Navigation trong Windows 7 - YouTube 2024, Tháng tư
Anonim

Sau khi tìm hiểu về cách tạo và triển khai một ứng dụng trong phiên bản Silverlight của các công cụ CTP, như một phần của loạt bài hướng dẫn Windows Phone này, chúng ta chuyển sang Expression Blend. Expression Blend là một hệ thống soạn thảo cho các nhà thiết kế chuyên nghiệp để xây dựng trải nghiệm người dùng nhắm mục tiêu nền tảng.NET 3.0 + và cụ thể hơn là WPF hoặc Windows Presentation Foundation.

Nói chung, các điều khiển Silverlight có một logic riêng biệt từ hình ảnh trực quan của chúng bằng cách sử dụng các mẫu. A ControlTemplate xác định cấu trúc trực quan và hành vi trực quan của điều khiển. Bạn có thể tùy chỉnh giao diện của hầu hết các điều khiển bằng cách sửa đổi mặc định của chúng ControlTemplate cài đặt. Điều này cho phép bạn thay đổi diện mạo của điều khiển mà không thay đổi chức năng của nó. Ví dụ: bạn có thể làm cho các nút trong vòng ứng dụng của bạn thay vì hình vuông mặc định, nhưng nút sẽ vẫn tăng Nhấp chuột biến cố.

Trong hướng dẫn này, bạn mở dự án Visual Studio mà bạn đã tạo trong bài tập trước đó trong Expression Blend và thay thế ControlTemplate của nút để thay đổi giao diện của nó. Bởi vì bạn tạo ra một ControlTemplate trong XAML, bạn có thể thay đổi diện mạo của điều khiển mà không cần viết bất kỳ mã nào.

1. Mở Microsoft Visual Studio 2010 Express cho Windows Phone
1. Mở Microsoft Visual Studio 2010 Express cho Windows Phone

2. Nếu bạn đã hoàn thành các bước trong bài tập trước, bạn có thể tiếp tục với giải pháp mà bạn đã tạo cho bài tập đó.

3. Mở giải pháp hiện tại trong Expression Blend. Để thực hiện việc này từ Visual Studio, nhấp chuột phải MainPage.xaml trong Solution Explorer, và sau đó chọn Open in Expression Blend. Nếu tùy chọn này không khả dụng- lý do rất có thể là phiên bản Expression Blend hiện tại của bạn không hỗ trợ kiểu dự án cần thiết - hãy làm theo các bước tiếp theo để tạo một dự án tạm thời mà bạn có thể chỉnh sửa bằng cách sử dụng Expression Blend

4. Mở Microsoft Expression Blend

5. Tạo một dự án ứng dụng mới để tạm thời giữ tài sản thiết kế của bạn. Để thực hiện việc này, hãy mở Tập tin và sau đó chọn Dự án mới

6. Trong Dự án mới hộp thoại, chọn Silverlight loại dự án và sau đó chọn Ứng dụng Silverlight 3 bản mẫu. Đặt tên thành DesignHelloPhone, chọn một vị trí phù hợp và giữ ngôn ngữ Visual C #, sau đó bấm được.

Image
Image

7. Trong Visual Studio, nhấp đúp App.xaml trong Solution Explorer để mở tệp này trong trình chỉnh sửa. Bây giờ, mở XAML xem, và sau đó chọn và sao chép toàn bộ Application.Resources phần vào clipboard

8. Mở lại Expression Blend, mở rộng DesignHelloPhone dự án trong Dự án bảng điều khiển và nhấp đúp App.xaml để mở tập tin

9. Chỉ vào Chế độ xem tài liệu hiện hoạt bên trong Lượt xem menu và chọn Chế độ xem XAML.

10. Tìm Application.Resources trong tệp này - nó phải trống - và sau đó dán nội dung của khay nhớ tạm để thay thế nó.

11. Bây giờ, tìm phần trong văn bản mới được chèn vào được phân định bằng chú thích “ ***** LISTBOX / LISTBOXITEM MẪU ***** ”; nó chứa các kiểu không tương thích với một dự án Silverlight 3. Xóa toàn bộ phần giữa dấu phân cách bắt đầu và kết thúc.

Image
Image

12.Bây giờ xác định vị trí Ứng dụng phần tử ở đầu tệp và chèn một khai báo vùng tên mới để tham chiếu Hệ thống không gian tên trong mscorlib lắp ráp, như hình dưới đây.

xmlns:system='clr-namespace:System;assembly=mscorlib' > # FF1F1F1F Đen ?> var13 ->

13. Bây giờ lưu thay đổi App.xaml trong Expression Blend.

14. Tiếp theo, mở Visual Studio lần nữa và mở MainPage.xaml tệp trong chế độ xem XAML. Sau đó, chọn và sao chép Lưới phần tử có tên LayoutRoot bao gồm cả con của nó vào clipboard.

15. Quay lại Blendion Expression, mở MainPage.xaml tệp trong chế độ xem XAML, sau đó dán nội dung của khay nhớ tạm để thay thế trống LayoutRootLưới trong tệp này.

16. Trong MainPage.xaml tập tin, xác định vị trí gốc Kiểm soát người dùng và thay đổi giá trị của Chiều cao gán cho 800Chiều rộng gán cho 480.

17. Quay lại Visual Studio, nhấp chuột phải MainPage.xaml.cs trong Solution Explorer và chọn Xem mã. Sau đó, sao chép ClickMeButton_Click xử lý sự kiện vào clipboard.

18. Cuối cùng, quay trở lại Expression Blend, mở rộng MainPage.xaml nút trong Dự án bảng điều khiển, nhấp đúp vào MainPage.xaml.cs để mở tệp trong trình chỉnh sửa và dán mã trong khay nhớ tạm vào Trang chính lớp học.

Bây giờ chúng tôi đã nhân rộng thành công dự án của mình thành sự pha trộn biểu thức. Để tạo một thiết kế cho nút tùy chỉnh, vui lòng đọc hướng dẫn tiếp theo sẽ được xuất bản vào ngày mai.

Đề xuất: