XAML響應式布局設計

概述

XAML是eXtensible Application Markup Language的英文縮寫，相應的中文名稱為可擴展應用程序標記語言，它是微軟公司為構建應用程序用戶界面而創建的一種新的描述性語言。XAML提供了一種便于擴展和定位的語法來定義和程序邏輯分離的用戶界面，而這種實現方式和ASP.NET中的"代碼后置"模型非常類似。XAML是一種解析性的語言，盡管它也可以被編譯。它的優點是簡化編程式上的用戶創建過程，應用時要添加代碼和配置等。

響應式布局的概念是一個頁面適配多個終端及不同分辨率。在針對特定屏幕寬度優化應用 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());
}

7. ViewBox

ViewBox可以根據自身大小放大或縮小它的Content元素，某些情況下它是WPF和UWP平臺的終極響應式設計解決方案，因為WPF/UWP元素都是矢量元素所以大部分元素都可以無損縮放（當然會有像素對不齊的情況），所以偷懶的話就可以使用ViewBox