[UWP]XAML中的響應式佈局技術_ZenDei技術網路在線

響應式佈局的概念是一個頁面適配多個終端及不同解析度。在針對特定屏幕寬度優化應用 UI 時，我們將此稱為創建響應式設計。WPF設計之初響應式設計的概念並不流行，那時候大部分網頁設計師都按著寬度960像素的標準設計。到了UWP誕生的時候響應式佈局已經很流行了，所以UWP提供了很多響應式佈局的技術，這篇文 ...

響應式佈局的概念是一個頁面適配多個終端及不同解析度。在針對特定屏幕寬度優化應用 UI 時，我們將此稱為創建響應式設計。WPF設計之初響應式設計的概念並不流行，那時候大部分網頁設計師都按著寬度960像素的標準設計。到了UWP誕生的時候響應式佈局已經很流行了，所以UWP提供了很多響應式佈局的技術，這篇文章簡單總結了一些響應式佈局常用的技術，更完整的內容請看文章最後給出的參考網站。

1. 傳統的XAML如何適配不同解析度

所謂的傳統，是指在響應式設計沒流行前XAML就已經存在的應對不同解析度的技術，畢竟桌面客戶端常常也調整窗體的大小，有些人還同時使用兩個不同解析度的屏幕。以我的經驗來說以下這些做法可以使UI有效應對解析度改變：

使用相對定位代替決定定位
使用*和Auto代替具體尺寸（除了間距）
使用WrapPanel代替StackPanel
不要忘記使用ScrollViewer

不同的DPI設定、不同的本地化字元串長度都可能使整個頁面佈局亂掉。而且和網頁不同，WPF窗體預設沒有提供ScrollViewer，所以千萬不能忘記。在桌面客戶端合理使用以上技術可以避免客戶投訴。但UWP主打跨平臺，它需要更先進（或者說，更激進）的技術。

2. 響應式設計技術

微軟的官方文檔介紹了UWP中響應式設計常用的6個技術，包括重新定位、調整大小、重新排列、顯示/隱藏、替換和重新構建，具體可見以下網站：

響應式設計技術 - UWP apps Microsoft Docs

3. AdaptiveTrigger

AdaptiveTrigger是UWP中一種最常用的響應式佈局技術。VisualStateManager用於管理UI的視覺狀態，可以在UI上設置多個視覺狀態，然後用VisualStateManager.GoToState在這些狀態間切換，瞭解自定義控制項的開發者對這點應該都不陌生。UWP提供了AdaptiveTrigger這個狀態觸發器，它以MinWindowWidth和MinWindowHeight未條件，根據頁面寬度或高度進入設定好的不同狀態（通常來說只使用MinWindowWidth，同時使用Height和Width做條件很容易產生混亂，而且大部分情況下響應式佈局都會使用垂直滾動條所以對高度不關心。）在下麵的示例中StackPanel預設使用垂直排列，當頁面的寬度超過720像素時改為水平排列。

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState>
                <VisualState.StateTriggers>
                    <!--VisualState to be triggered when window width is >=720 effective pixels.-->
                    <AdaptiveTrigger MinWindowWidth="720" />
                </VisualState.StateTriggers>

                <VisualState.Setters>
                    <Setter Target="myPanel.Orientation"
                            Value="Horizontal" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <StackPanel x:Name="myPanel"
                Orientation="Vertical">
        <TextBlock Text="This is a block of text. It is text block 1. "
                   Style="{ThemeResource BodyTextBlockStyle}" />
        <TextBlock Text="This is a block of text. It is text block 2. "
                   Style="{ThemeResource BodyTextBlockStyle}" />
        <TextBlock Text="This is a block of text. It is text block 3. "
                   Style="{ThemeResource BodyTextBlockStyle}" />
    </StackPanel>
</Grid>

使用AdaptiveTrigger可以做到前一節中提到的UWP中響應式設計常用的6個技術，除了UWP自帶的AdaptiveTrigger，也可以自定義StateTriggerBase，這將在下一篇文章中介紹。

4. NavigationView

UWP中部分控制項已經實現了響應式行為，最典型的就是NavigationView。可以使用 PaneDisplayMode 屬性配置不同的導航樣式或顯示模式。預設情況下，PaneDisplayMode 設置為 Auto。在 Auto 模式下，導航視圖會進行自適應，在視窗狹窄時為 LeftMinimal，接下來為 LeftCompact，隨後在視窗變寬時為 Left。

XAML Controls Gallery就是一個很好的結合NavigationView的響應式佈局示例：

5. 定製佈局

如果AdaptiveTrigger需要設置的屬性太多，倒不如直接切換UI，最簡單的做法是整個顯示/隱藏，例如這樣：

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup>
            <VisualState>
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="720" />
                </VisualState.StateTriggers>

                <VisualState.Setters>
                    <Setter Target="NormalView.Visibility"
                            Value="Collapsed" />
                    <Setter Target="LargelView.Visibility"
                            Value="Visible" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Grid x:Name="NormalView">
        <!--some xmal-->
    </Grid>
    <Grid x:Name="LargelView"
          Visibility="Collapsed">
        <!--some xmal-->
    </Grid>
</Grid>

這種時候MVVM的優勢就體現出來了，因為VIEW和VIEWMODEL解耦了，VIEW隨便換，而且整個UI顯示隱藏說不定比多個小模塊獨自改變性能更好。說到性能，UWP的很多場景都為已經死了多年的WindowsWobile考慮了性能，更不用說現在的桌面平臺，所以做UWP不需要太過介意性能，尤其是已經在WPF上培養出小心翼翼的習慣的開發者，UWP的性能問題等真的出現了再說。

除了使用顯示隱藏，UWP還可以使用限定符名稱指定CodeBehind對應的XAML文件，這有點像是自適應應用的話題。使用格式如下：

[pageName] .DeviceFamily- [qualifierString] .xaml

如果要用在文件夾，格式如下：

DeviceFamily- [qualifierString]

要更靈活些，可以根據條件跳轉到不同的頁面：

if (Windows.System.Profile.AnalyticsInfo.VersionInfo.DeviceFamily == "Windows.Tablet")
{
    rootFrame.Navigate(typeof(MainPage_Tablet), e.Arguments);
}
else
{
    rootFrame.Navigate(typeof(MainPage), e.Arguments);
}

雖然示例代碼這樣寫，其實現在除了桌面幾乎沒有其它平臺了，所以大部分情況下還是根據當前尺寸跳轉。

6. compact size

正如前面所說，既然已經不需要其它平臺，那UWP的響應式佈局大部分情況都是為了應對尺寸問題，Windows UI Library還提供了一個緊湊的主題用於小尺寸UI（需要安裝Microsoft.UI.Xaml的Nuget包）：

<Page.Resources>
    <ResourceDictionary Source="ms-appx:///Microsoft.UI.Xaml/DensityStyles/Compact.xaml" />
</Page.Resources>

private void Standard_Checked(object sender, RoutedEventArgs e)
{
    ContentFrame.Navigate(typeof(SampleStandardSizingPage), null, new SuppressNavigationTransitionInfo());
}

private void Compact_Checked(object sender, RoutedEventArgs e)
{
    ContentFrame.Navigate(typeof(SampleCompactSizingPage), null, new SuppressNavigationTransitionInfo());
}