響應(yīng)式布局的概念是一個(gè)頁面適配多個(gè)終端及不同分辨率。在針對(duì)特定屏幕寬度優(yōu)化應(yīng)用 UI 時(shí)，我們將此稱為創(chuàng)建響應(yīng)式設(shè)計(jì)。WPF設(shè)計(jì)之初響應(yīng)式設(shè)計(jì)的概念并不流行，那時(shí)候大部分網(wǎng)頁設(shè)計(jì)師都按著寬度960像素的標(biāo)準(zhǔn)設(shè)計(jì)。到了UWP誕生的時(shí)候響應(yīng)式布局已經(jīng)很流行了，所以UWP提供了很多響應(yīng)式布局的技術(shù)，這篇文章簡(jiǎn)單總結(jié)了一些響應(yīng)式布局常用的技術(shù)，更完整的內(nèi)容請(qǐng)看文章最后給出的參考網(wǎng)站。

創(chuàng)新互聯(lián)建站是一家集網(wǎng)站建設(shè),鄂州企業(yè)網(wǎng)站建設(shè),鄂州品牌網(wǎng)站建設(shè),網(wǎng)站定制,鄂州網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,鄂州網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

1. 傳統(tǒng)的XAML如何適配不同分辨率

所謂的傳統(tǒng)，是指在響應(yīng)式設(shè)計(jì)沒流行前XAML就已經(jīng)存在的應(yīng)對(duì)不同分辨率的技術(shù)，畢竟桌面客戶端常常也調(diào)整窗體的大小，有些人還同時(shí)使用兩個(gè)不同分辨率的屏幕。以我的經(jīng)驗(yàn)來說以下這些做法可以使UI有效應(yīng)對(duì)分辨率改變：

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

不同的DPI設(shè)定、不同的本地化字符串長(zhǎng)度都可能使整個(gè)頁面布局亂掉。而且和網(wǎng)頁不同，WPF窗體默認(rèn)沒有提供ScrollViewer，所以千萬不能忘記。在桌面客戶端合理使用以上技術(shù)可以避免客戶投訴。但UWP主打跨平臺(tái)，它需要更先進(jìn)（或者說，更激進(jìn)）的技術(shù)。

2. 響應(yīng)式設(shè)計(jì)技術(shù)

微軟的官方文檔介紹了UWP中響應(yīng)式設(shè)計(jì)常用的6個(gè)技術(shù)，包括重新定位、調(diào)整大小、重新排列、顯示/隱藏、替換和重新構(gòu)建，具體可見以下網(wǎng)站：

響應(yīng)式設(shè)計(jì)技術(shù) - UWP apps Microsoft Docs

3. AdaptiveTrigger

AdaptiveTrigger是UWP中一種最常用的響應(yīng)式布局技術(shù)。VisualStateManager用于管理UI的視覺狀態(tài)，可以在UI上設(shè)置多個(gè)視覺狀態(tài)，然后用VisualStateManager.GoToState在這些狀態(tài)間切換，了解自定義控件的開發(fā)者對(duì)這點(diǎn)應(yīng)該都不陌生。UWP提供了AdaptiveTrigger這個(gè)狀態(tài)觸發(fā)器，它以MinWindowWidth和MinWindowHeight未條件，根據(jù)頁面寬度或高度進(jìn)入設(shè)定好的不同狀態(tài)（通常來說只使用MinWindowWidth，同時(shí)使用Height和Width做條件很容易產(chǎn)生混亂，而且大部分情況下響應(yīng)式布局都會(huì)使用垂直滾動(dòng)條所以對(duì)高度不關(guān)心。）在下面的示例中StackPanel默認(rèn)使用垂直排列，當(dāng)頁面的寬度超過720像素時(shí)改為水平排列。

<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可以做到前一節(jié)中提到的UWP中響應(yīng)式設(shè)計(jì)常用的6個(gè)技術(shù)，除了UWP自帶的AdaptiveTrigger，也可以自定義StateTriggerBase，這將在下一篇文章中介紹。

4. NavigationView

UWP中部分控件已經(jīng)實(shí)現(xiàn)了響應(yīng)式行為， 最典型的就是NavigationView?？梢允褂?PaneDisplayMode 屬性配置不同的導(dǎo)航樣式或顯示模式。默認(rèn)情況下，PaneDisplayMode 設(shè)置為 Auto。在 Auto 模式下，導(dǎo)航視圖會(huì)進(jìn)行自適應(yīng)，在窗口狹窄時(shí)為 LeftMinimal，接下來為 LeftCompact，隨后在窗口變寬時(shí)為 Left。

XAML Controls Gallery就是一個(gè)很好的結(jié)合NavigationView的響應(yīng)式布局示例：

5. 定制布局

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

<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>

這種時(shí)候MVVM的優(yōu)勢(shì)就體現(xiàn)出來了，因?yàn)閂IEW和VIEWMODEL解耦了，VIEW隨便換，而且整個(gè)UI顯示隱藏說不定比多個(gè)小模塊獨(dú)自改變性能更好。說到性能，UWP的很多場(chǎng)景都為已經(jīng)死了多年的WindowsWobile考慮了性能，更不用說現(xiàn)在的桌面平臺(tái)，所以做UWP不需要太過介意性能，尤其是已經(jīng)在WPF上培養(yǎng)出小心翼翼的習(xí)慣的開發(fā)者，UWP的性能問題等真的出現(xiàn)了再說。

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

[pageName] .DeviceFamily- [qualifierString] .xaml

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

DeviceFamily- [qualifierString]

要更靈活些，可以根據(jù)條件跳轉(zhuǎn)到不同的頁面：

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

雖然示例代碼這樣寫，其實(shí)現(xiàn)在除了桌面幾乎沒有其它平臺(tái)了，所以大部分情況下還是根據(jù)當(dāng)前尺寸跳轉(zhuǎn)。

6. compact size

正如前面所說，既然已經(jīng)不需要其它平臺(tái)，那UWP的響應(yīng)式布局大部分情況都是為了應(yīng)對(duì)尺寸問題，Windows UI Library還提供了一個(gè)緊湊的主題用于小尺寸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可以根據(jù)自身大小放大或縮小它的Content元素，某些情況下它是WPF和UWP平臺(tái)的終極響應(yīng)式設(shè)計(jì)解決方案，因?yàn)閃PF/UWP元素都是矢量元素所以大部分元素都可以無損縮放（當(dāng)然會(huì)有像素對(duì)不齊的情況），所以偷懶的話就可以使用ViewBox：

8. 參考

采用 XAML 的響應(yīng)式布局 - UWP apps Microsoft Docs

響應(yīng)式設(shè)計(jì)技術(shù) - UWP apps Microsoft Docs

響應(yīng)式設(shè)計(jì)的屏幕大小和斷點(diǎn) - UWP apps Microsoft Docs

導(dǎo)航視圖 - UWP apps Microsoft Docs

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

本文名稱：[UWP]XAML中的響應(yīng)式布局技術(shù)-創(chuàng)新互聯(lián)
本文路徑：http://www.rwnh.cn/article0/cehoio.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、服務(wù)器托管、網(wǎng)站排名、網(wǎng)站維護(hù)、電子商務(wù)、品牌網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)