響應式佈局的概念是一個頁面適配多個終端及不同解析度。在針對特定螢幕寬度優化應用 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：

8. 參考

採用 XAML 的響應式佈局 - UWP apps Microsoft Docs

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

響應式設計的螢幕大小和斷點 - UWP apps Microsoft Docs

導航檢視 - UWP apps Microsoft Docs

AdaptiveTrigger Class (Windows.UI.Xaml) - Windows UWP applications Microsoft D