[UWP]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：

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 Docs

原文出處：https://www.cnblogs.com/dino623/p/responsive-layouts-with-xaml.html