locked
windows 10 UWP中,如何让布局、字体等适应各个分辨率? RRS feed

  • 问题

  • 请问在布局中,是不是只有Grid才会自动适应宽度(StackPanel 可以通过HorizontalAlignment 这个不知道算不算)?这样在StackPanel 中放置了TextBlock,如果想要实现自动换行的效果,如果确定需要固定的宽度大小?另外,像图片还有字体这些,似乎不能使用百分比,这样如果要适配各个分辨率,只能通过计算实现吗?

    2015年11月1日 14:35

答案

  • (1) 幾乎所有的容器都會自適應寬度的, 對於一個畫面元素的大小, 影響因素非常的多: 如
    本身設定的 Width, Height, Margin, HorizontalAlignment, VerticalAlignment,
    上層容器的 Padding (如果有的話) 等等

    (2)TextBlock 換行, 只要透過其 TextWrapping 屬性就可以了, 但要注意的是上層容器是 StackPanel 的狀況可能會造成寬度一直延伸而不換行的情形.

    (3) 字體大小, 其實就不用擔心了, 因為 UWP 天生就會自動處理在不同螢幕大小, 不同分辨率下的狀況.

    (4) 關於圖片, 請參考 图像和 ImageBrush  , 按像素密度缩放的指南 , 快速入门:使用文件或图像资源 (XAML)

    (5) 其他部分可以參考 通用 Windows 平台 (UWP) 应用指南 中的  UI 和通用输入

    (6) 台灣的 Techdays 2015 有堂課和此議題相關, 也可以參考 可適性使用者經驗 (Adaptive UX) 實作: 利用 XAML 最佳化 Universal Windows Apps 之技巧


    在現實生活中,你和誰在一起的確很重要,甚至能改變你的成長軌跡,決定你的人生成敗。 和什麼樣的人在一起,就會有什麼樣的人生。 和勤奮的人在一起,你不會懶惰; 和積極的人在一起,你不會消沈; 與智者同行,你會不同凡響; 與高人為伍,你能登上巔峰。


    • 已编辑 Bill ChungMVP 2015年11月1日 21:41
    • 已标记为答案 rio_cn 2015年11月2日 13:07
    2015年11月1日 21:41

全部回复

  • (1) 幾乎所有的容器都會自適應寬度的, 對於一個畫面元素的大小, 影響因素非常的多: 如
    本身設定的 Width, Height, Margin, HorizontalAlignment, VerticalAlignment,
    上層容器的 Padding (如果有的話) 等等

    (2)TextBlock 換行, 只要透過其 TextWrapping 屬性就可以了, 但要注意的是上層容器是 StackPanel 的狀況可能會造成寬度一直延伸而不換行的情形.

    (3) 字體大小, 其實就不用擔心了, 因為 UWP 天生就會自動處理在不同螢幕大小, 不同分辨率下的狀況.

    (4) 關於圖片, 請參考 图像和 ImageBrush  , 按像素密度缩放的指南 , 快速入门:使用文件或图像资源 (XAML)

    (5) 其他部分可以參考 通用 Windows 平台 (UWP) 应用指南 中的  UI 和通用输入

    (6) 台灣的 Techdays 2015 有堂課和此議題相關, 也可以參考 可適性使用者經驗 (Adaptive UX) 實作: 利用 XAML 最佳化 Universal Windows Apps 之技巧


    在現實生活中,你和誰在一起的確很重要,甚至能改變你的成長軌跡,決定你的人生成敗。 和什麼樣的人在一起,就會有什麼樣的人生。 和勤奮的人在一起,你不會懶惰; 和積極的人在一起,你不會消沈; 與智者同行,你會不同凡響; 與高人為伍,你能登上巔峰。


    • 已编辑 Bill ChungMVP 2015年11月1日 21:41
    • 已标记为答案 rio_cn 2015年11月2日 13:07
    2015年11月1日 21:41
  • 非常感谢,您的回答中

    (1)可能我表达的不对,我说的适应是指针对屏幕宽度,例如我在ListView 的Item中放置了StackPanel ,默认似乎并不自动适应,它的宽度是根据它里面的内容来确定的,除非设置HorizontalAlignment;

    (2)TextWrapping 设置了之后,受到它上层StackPanel 的影响,因为我的StackPanel 设置了HorizontalAlignment=stretch,原因是我在ListView的Item中通过StackPanel来布局,我希望让StackPanel宽度占满屏幕,请问能给我个正确实现的例子吗?

    (3)我在模拟器中看到,4inch的设备跟6inch的设备,在设置了FontSize=X之后,看起来好像不一样大,差别不是很明显,我再确认一下是不是真的存在这个问题

    其他非常感谢

    2015年11月1日 23:51
  • 一般我個人習慣上很少用 StackPanel 布局, 如在第一個回答所說, StackPanel 由於延伸的問題會有影響, 建議多用 Grid


    在現實生活中,你和誰在一起的確很重要,甚至能改變你的成長軌跡,決定你的人生成敗。 和什麼樣的人在一起,就會有什麼樣的人生。 和勤奮的人在一起,你不會懶惰; 和積極的人在一起,你不會消沈; 與智者同行,你會不同凡響; 與高人為伍,你能登上巔峰。

    2015年11月2日 12:00