Cách điều chỉnh thích ứng giao diện người dùng ứng dụng trên các màn hình khác nhau trên W10

Question

Tôi sắp bắt đầu chuyển ứng dụng WP8.1 sang W10 và có vẻ như tôi sẽ biến nó thành Ứng dụng Windows phổ biến. Bây giờ, tôi tốt như đối với mã back-end, vì tôi sẽ có thể sử dụng lại 90% các lớp của tôi (Models, ViewModels, và hầu hết các lớp trợ giúp của tôi, các phương thức mở rộng và các trình biến đổi).

Vấn đề là dành cho giao diện người dùng: Tôi hiểu rằng tôi sẽ phải thiết kế ứng dụng cho các màn hình và khẩu độ khác nhau và tôi không biết cách thực sự thực hiện điều đó trong mã. Ý tôi là, đối với quy mô giao diện người dùng, tôi biết tôi có thể sử dụng VisualStateManager và AdaptiveTriggers để tự thiết lập thuộc tính của các phần tử giao diện người dùng mà tôi muốn điều chỉnh trên mọi độ phân giải màn hình hoặc tôi có thể sử dụng một số trình chuyển đổi.

Ý của tôi là: phương pháp nào tốt nhất để toàn bộ giao diện người dùng thích nghi với các độ phân giải khác nhau?

Đây là một ví dụ:

Như bạn có thể thấy: mô hình định vị toàn thay đổi cùng giao diện người dùng khi trên màn hình khác nhau. Trên điện thoại, chúng tôi có trang liên hệ bao gồm toàn bộ giao diện người dùng, trong khi trên máy tính bảng và PC, chúng tôi có trang liên hệ chỉ là một phần nhỏ của giao diện người dùng và các trang tổng hợp được chuyển sang một bảng điều khiển khác ở bên phải. Ngoài ra, nhiều phần tử giao diện người dùng được sắp xếp lại hoàn toàn. Và dĩ nhiên, một số mã back-end ở cấp chế độ xem cũng sẽ thay đổi.

Bây giờ, tôi tự hỏi cách tiếp cận tốt nhất để làm điều này.

Tôi có nên:

• Có một tập tin XAML đơn (cho mỗi trang) với rất nhiều VisualStates và các công cụ, và cố gắng sắp xếp lại giao diện người dùng cho mọi độ phân giải màn hình

• Có dự án khác nhau với một dự án được chia sẻ (như với các ứng dụng phổ dụng W8.1), để tôi có thể tập trung vào giao diện người dùng trên mọi thiết bị cụ thể? Đây là cách tiếp cận tôi thấy thoải mái hơn, vì tôi có thể thiết kế các yếu tố giao diện người dùng cụ thể cho nền tảng mà không gặp vấn đề gì. Tuy nhiên, tôi không hiểu làm thế nào để thực sự tạo ra một dự án được chia sẻ và các dự án khác nhau cho từng loại thiết bị trong VS2015.

• Sử dụng cách tiếp cận đó với các trang XAML khác chia sẻ cùng một tệp mã sau (thậm chí tôi không biết cách triển khai điều này và cách triển khai các phần mã cụ thể phía sau nền tảng).

• Một số phương pháp khác

Ý tôi là, tôi chắc chắn rằng tôi không phải là W8.1/nhà phát triển WP8.1 chỉ gặp rắc rối ở đây, có một số loại lời khuyên tôi có thể sử dụng không? Tôi đã xem tất cả các MVA video về phát triển W10, nhưng họ đã không nhận được vào các chi tiết thực hiện ở đó.

Cảm ơn bạn đã giúp đỡ của bạn

Sergio

Answer 1

Hai ảnh chụp màn hình này không nhất thiết phải khác nhau, nếu bạn xem sử dụng SplitView Control và RelativePanel Control.

Xem this //build talk để biết thêm thông tin.

Answer 2

Nó thực sự phụ thuộc vào dự án của bạn. Nếu một giao diện người dùng không thay đổi quá mạnh, tôi chắc chắn sẽ sử dụng AdaptiveTriggers. Bạn có thể làm rất nhiều với XAML rất ít. Kiểm tra của Microsoft mẫu mã nếu bạn chưa sẵn sàng: https://github.com/Microsoft/Windows-universal-samples/tree/master/xaml_responsivetechniques

Nếu nó đang thay đổi đáng kể, bạn có thể làm điều đó với AdaptiveTriggers, nhưng đây có thể dễ dàng hơn để có nhiều file XAML. Một cách mới để làm điều này trong Win10 là sử dụng DeviceFamily.Về cơ bản, chỉ cần tạo một thư mục có tên là "DeviceFamily-Mobile" và gắn một khung nhìn XAML với cùng tên tệp trong đó. Thông tin thêm: http://sharpgis.net/post/2015/04/01/Creating-DeviceFamily-specific-layouts-in-a-Universal-App