Đây là hướng dẫn thứ 11 như là một phần của loạt bài hướng dẫn Windows Phone. Trong tác vụ này, bạn sẽ tạo một bảng phân cảnh trong Expression Blend để tạo hiệu ứng văn bản trong biểu ngữ bất cứ khi nào nút được nhấn.
1. Mở không gian làm việc hoạt động cho vùng làm việc hoạt ảnh. bên trong Cửa sổ menu, trỏ tới Không gian làm việc và chọn Hoạt ảnh. Lưu ý rằng điều này sắp xếp lại các cửa sổ để tối đa hóa không gian có sẵn để chỉnh sửa dòng thời gian.
2. Nếu cần, thoát khỏi vùng chỉnh sửa của mẫu điều khiển nút. Để thực hiện việc này, hãy nhấp vào Phạm vi lên nút bên cạnh FancyButton (Mẫu Nút) yếu tố trong Đối tượng và Dòng thời gian để hiển thị cây phần tử của trang.
3. Bây giờ, trong Đối tượng và Dòng thời gian bảng điều khiển, nhấp Mới để tạo bảng phân cảnh. Đây là nút có gắn dấu + và nằm ở góc trên bên phải của bảng điều khiển.
4. Trong Tạo tài nguyên bảng phân cảnh hộp thoại, đặt Tên đến AnimateBanner và nhấp được.
5. Để tạo các khung hình chính trong hoạt ảnh, hãy nhấp vào BannerTextBlock phần tử trong cây phần tử của Đối tượng và Dòng thời gian để chọn nó.
6. Bây giờ, bấm và kéo vị trí hiện tại của playhead dòng thời gian để bù đắp 1 thứ hai.
7. Tiếp theo, chuyển sang Tính chất bảng điều khiển, mở rộng Biến đổi và chọn Tỉ lệ biến đổi. X giá trị thuộc tính là -1. Biến đổi này phản chiếu phần tử dọc trục ngang của nó.
9. Bây giờ, thay đổi playhead thời gian để bù đắp 2 giây.
10. Chuyển sang Tính chất bảng điều khiển, mở rộng Biến đổi và chọn Tỉ lệ biến đổi. Thay đổi giá trị của X tài sản trở lại 1 để khôi phục phần tử về trạng thái ban đầu của nó. Lưu ý rằng khung chính thứ hai xuất hiện trong dòng thời gian của bảng phân cảnh vì sự thay đổi này.
11. Để kiểm tra hoạt ảnh trong trình thiết kế, bạn cần thêm một số văn bản vào biểu ngữ. Đầu tiên, nhấp vào vòng tròn màu đỏ ở bên trái của AnimateBanner tên bảng phân cảnh ở góc trên bên trái của bảng điều khiển để tắt ghi tạm thời - bạn không muốn văn bản được thêm vào để trở thành một phần của hoạt ảnh.
12. Bây giờ, nhấp chuột phải vào BannerTextBlock yếu tố trên bề mặt thiết kế và chọn Chỉnh sửa văn bản. Nhập văn bản phù hợp cho biểu ngữ và nhấn ĐI VÀO.
13. Để kiểm tra hoạt ảnh, nhấn nút Chơi bên trên dòng thời gian. Lưu ý cách văn bản trong biểu ngữ xoay theo chiều ngang về trục giữa của nó và cách chuyển động đồng đều trong suốt chu kỳ hoạt ảnh.
14. Chọn khung hình đầu tiên bằng cách nhấp vào bên trong biểu tượng hình tròn màu xám trong dòng thời gian. Lưu ý rằng khi bạn chọn một khung, khung nhìn thiết kế sẽ cập nhật để hiển thị trạng thái của các phần tử giao diện người dùng khi chúng xuất hiện trong khung đó, trong trường hợp này, văn bản biểu ngữ xuất hiện được nhân đôi. Bây giờ, trong Tính chất bảng điều khiển, dưới Nới lỏng loại, đảm bảo rằng EasingFunction được chọn, mở rộng danh sách thả xuống để hiển thị danh sách các chức năng có sẵn, sau đó chọn Cubic Out chức năng. Chức năng nới lỏng đặc biệt này làm cho quá trình chuyển đổi giảm tốc độ khi nó tiếp cận khung chính.
15. Lặp lại quy trình trong bước trước để cấu hình chức năng nới lỏng cho khung phím thứ hai. Lần này chọn InOut khối chức năng để làm cho quá trình chuyển đổi bắt đầu với tốc độ chậm, tăng tốc dần dần và cuối cùng giảm tốc độ của nó khi nó tiếp cận khung kết thúc.
16. Để kiểm tra hiệu ứng của các chức năng nới lỏng trên hình động, bấm Chơi phía trên dòng thời gian. Làm thế nào biểu ngữ bắt đầu xoay vòng với tốc độ cao, sau đó chậm lại khi văn bản xuất hiện được nhân đôi, sau đó chọn lại tốc độ và cuối cùng sẽ chậm lại một lần nữa để trở về vị trí ban đầu.
17. Bây giờ thiết kế giao diện người dùng hoàn tất, bước tiếp theo là sao chép XAML đã cập nhật trở lại dự án chính.
- Đầu tiên, trong Expression Blend, nhấp vào tab XAML ở cạnh bên phải của cửa sổ hoặc trong Lượt xem thực đơn
- Điểm đến Chế độ xem tài liệu hiện hoạt và chọn Chế độ xem XAML Điều này đưa bạn đến chế độ xem XAML của MainPage.xaml tài liệu.
- Tiếp theo, chọn và sao chép các con của thư mục gốc Kiểm soát người dùng phần tử vào khay nhớ tạm. Điều này bao gồm UserControl.Resources phần và Lưới phần tử có tênLayoutRoot nhưng không phải Kiểm soát người dùng chính yếu tố.
18. Bây giờ, trong Visual Studio, mở MainPage.xaml tài liệu trong chế độ xem XAML và thay thế toàn bộ nội dung con của thư mục gốc điều hướng: PhoneApplicationPage phần tử với văn bản trong clipboard đảm bảo rằng phần tử gốc chính nó vẫn không thay đổi.
19. Như một bước cuối cùng, trong MainPage.xaml tập tin, xác định vị trí UserControl.Resources bắt đầu và kết thúc các thẻ và thay thế chúng bằng navigation: PhoneApplicationPage.Resources thẻ.
20. Bấm CTRL + S để lưu MainPage.xaml tập tin.
21. Cho đến nay, bạn đã tạo ra một bảng phân cảnh hoạt hình cho văn bản biểu ngữ, nhưng nó chỉ tồn tại như một tài nguyên không được sử dụng trong dự án.Để phát hoạt ảnh, bạn cần kích hoạt bảng phân cảnh để phản hồi sự kiện, trong trường hợp này, bất cứ khi nào Nhấp vào đây nút được nhấn. Để mở Nhấp chuột xử lý sự kiện cho nút này:
- Đi đến Thiết kế quan điểm của MainPage.xaml tập tin
- Nhấp đúp vào nút trên bề mặt thiết kế để mở tệp mã-đằng sau
- Định vị con trỏ trên trình xử lý sự kiện
22. Để cập nhật trình xử lý sự kiện để phát hoạt ảnh, hãy chèn đoạn mã sau vào không gian “in đậm” ngay trước dấu ngoặc kết thúc.
private void ClickMeButton_Click(object sender, RoutedEventArgs e) { BannerTextBlock.Text = MessageTextBox.Text; MessageTextBox.Text = String.Empty; this.AnimateBanner.Begin(); }
