Windows 10移動設備的UWP UI設計

Question

我正在使用Windows 10移動應用程序。如果我爲5'設備設計UI，它在5.2'設備上看起來不太好。同樣在不同屏幕尺寸的模擬器上顯示UI搞砸了。有沒有解決這個問題？或者我必須爲每種屏幕尺寸設計它？

Answer 1

關鍵在於UWP，您可以爲每個屏幕尺寸一次設計。這只是您使用的自適應設計（HTML/CSS或XAML）。但是你必須使用正確的控制和設置。

有關如何設計各種尺寸的指導可在the MSDN design page找到。 用XAML創建動態佈局，see this article。您可以使用各種面板類型來執行佈局（see this article）。但是如果你真的想要構建一個響應式UI（或者以各種尺寸大幅改變它），RelativePanel就是你的朋友。

Answer 2

通常，請避免爲您的控件固定寬度/高度。使用網格佈局，您可以設置列/行並將您的控件放置在每個單元格內。這是適當調整您的界面的第一個級別。此外，如果您想根據屏幕分辨率調整佈局（參見https://channel9.msdn.com/Series/A-Developers-Guide-to-Windows-10/07）以獲取更多信息，UWP將提供AdaptiveTriggers。最後但並非最不重要的，請查看https://developer.microsoft.com/en-us/windows/design上的設計& UI文檔。