[Windows 10] Adaptive UI: 因應不同螢幕大小,動態改變畫面呈現方式 (使用 RelativePanel & VisualStateManager)


 

Gallo blog 1 v2

本文將介紹 2 種全新的 XAML 作法, 來達到 Windows 10 的 UAP 中 “Adaptive User Interface” 的要求。讓我們的 App 在任何螢幕大小的環境之下,都能適切的調整元件的相對位置、或是動態改變元件的呈現方式。

1. RelativePanel:可決定控制項之間的相對位置

<RelativePanel>
  <TextBox x:Name="textBox" Text="我是一段文字我是一段文字我是一段文字" />
  <Button x:Name="yellowBtn" Background="Yellow" Content="黃色按鈕" RelativePanel.RightOf="textBox" />
  <Button x:Name="blueBtn" Background="Blue" Content="藍色按鈕" RelativePanel.RightOf="textBox" RelativePanel.Below="yellowBtn" />
</RelativePanel>
請注意裡面出現了 RelativePanel.RightOf 以及 RelativePanel.Below,望文生義即可理解,App 會把這 3 個控制項的相對位置確認下來,無論螢幕大小如何改變。亦即:
「”yellowBtn” 將位於 “textBox” 的右邊;而 “blueBtn” 不但位於 “textBox” 的右邊,也會位於 “yellowBtn” 的下方。」

image

 

2. VisualStateManager:可根據螢幕的大小動態改變控制項的呈現方式

<TextBlock x:Name="text" Foreground="Azure" HorizontalAlignment="Center" VerticalAlignment="Center"/> 
<VisualStateManager.VisualStateGroups>
 <VisualStateGroup x:Name="SizeStateGroup">
     <VisualState x:Name="Min">
         <VisualState.StateTriggers>
           <AdaptiveTrigger MinWindowWidth="0" />
         </VisualState.StateTriggers>
         <VisualState.Setters>
           <Setter Target="text.Text" Value="喔喔好窄!!!!!" />
         </VisualState.Setters>
     </VisualState>
     <VisualState x:Name="Middle">
         <VisualState.StateTriggers>
           <AdaptiveTrigger MinWindowWidth="651" />
         </VisualState.StateTriggers>
         <VisualState.Setters>
           <Setter Target="text.Text" Value="寬多了啊!!!!!" />
         </VisualState.Setters>
     </VisualState>
     <VisualState x:Name="Wide">
         <VisualState.StateTriggers>
           <AdaptiveTrigger MinWindowWidth="1000" />
         </VisualState.StateTriggers>
         <VisualState.Setters>
           <Setter Target="text.Text" Value="可…以…躺…下…了!!!!!" />
         </VisualState.Setters>
     </VisualState>
 </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

觀察以上的 XAML,我們只要注意兩點:

  • StateTriggers: 是用來定義一個條件臨界值,當螢幕大小滿足條件時,就會作以下 Setter 所描述的變動。
  • Setter: 可在此改變元件的 attributes,如改為 Horizontal、改變 width 等等;可以同時設定多個 Setters。

以白話文說明以上 XAML 描述:

「若 App 寬度至少為 0 pixel 的話,改變文字為 “喔喔好窄!!!!!”;若寬度至少為 651 的話,改為 “寬多了啊!!!!!”,若寬度至少為 1000 的話,改為”可…以…躺…下…了!!!!!”。」

以下是結果,請觀察寬度及文字的關係:

image

image

image

將以上的 RelativePanelVisualStateManager 綜合使用,就可以作到微軟資深技術主管 Kevin Gallo 在 Mobile World Congress 2015 上的 Demo 效果 (約第 30:00 開始約 3 分鐘):

註:

若要嘗試這些新功能:

  1. 請加入 Windows Insider Program,取得並安裝 Windows 10 Developer Preview.
  2. 取得並安裝 Visual Studio 2015 CTP. (目前版本為 CTP6)
  3. 新專案中即會出現 Windows 10 Universal App 的範本。

同時:

1. 若您在測試過程中遇到問題:

  1. 請先檢視 release notes 以及 known issues with Visual Studio 2015 CTP6,查看是否為已知問題。
  2. 使用 Windows Store 及 Windows Phone Apps 論壇詢問。
  3. 若您發現的確是個 bug,可透過 Windows 10 內建的 Feedback App 來回報協助。

2. 若您對 API 有任何新功能的需求,則可透過 Windows platform developer UserVoice site 來建議,這網站會在 BUILD 2015 前持續更新,反應最新的 API 功能。

延伸閱讀:

Guide to Windows universal apps: https://msdn.microsoft.com/library/windows/apps/xaml/dn894631.aspx 

Comments (0)

Skip to main content