XAML響應式布局設計

概述

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

蘭考網(wǎng)站建設公司創(chuàng)新互聯(lián)公司,蘭考網(wǎng)站設計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為蘭考超過千家提供企業(yè)網(wǎng)站建設服務。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站建設要多少錢，請找那個售后服務好的蘭考做網(wǎng)站的公司定做！

響應式布局的概念是一個頁面適配多個終端及不同分辨率。在針對特定屏幕寬度優(yōu)化應用 UI 時，我們將此稱為創(chuàng)建響應式設計。WPF設計之初響應式設計的概念并不流行，那時候大部分網(wǎng)頁設計師都按著寬度960像素的標準設計。到了UWP誕生的時候響應式布局已經(jīng)很流行了，所以UWP提供了很多響應式布局的技術，這篇文章簡單總結了一些響應式布局常用的技術。

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

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

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

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

2. 響應式設計技術

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

XAML響應式布局設計

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

3. AdaptiveTrigger

AdaptiveTrigger是UWP中一種最常用的響應式布局技術。VisualStateManager用于管理UI的視覺狀態(tài)，可以在UI上設置多個視覺狀態(tài)，然后用VisualStateManager.GoToState在這些狀態(tài)間切換，了解自定義控件的開發(fā)者對這點應該都不陌生。UWP提供了AdaptiveTrigger這個狀態(tài)觸發(fā)器，它以MinWindowWidth和MinWindowHeight未條件，根據(jù)頁面寬度或高度進入設定好的不同狀態(tài)（通常來說只使用MinWindowWidth，同時使用Height和Width做條件很容易產(chǎn)生混亂，而且大部分情況下響應式布局都會使用垂直滾動條所以對高度不關心。）在下面的示例中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>

XAML響應式布局設計

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

4. NavigationView

UWP中部分控件已經(jīng)實現(xiàn)了響應式行為， 最典型的就是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的優(yōu)勢就體現(xiàn)出來了，因為VIEW和VIEWMODEL解耦了，VIEW隨便換，而且整個UI顯示隱藏說不定比多個小模塊獨自改變性能更好。說到性能，UWP的很多場景都為已經(jīng)死了多年的WindowsWobile考慮了性能，更不用說現(xiàn)在的桌面平臺，所以做UWP不需要太過介意性能，尤其是已經(jīng)在WPF上培養(yǎng)出小心翼翼的習慣的開發(fā)者，UWP的性能問題等真的出現(xiàn)了再說。

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

[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);
}

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

6. compact size

正如前面所說，既然已經(jīng)不需要其它平臺，那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可以根據(jù)自身大小放大或縮小它的Content元素，某些情況下它是WPF和UWP平臺的終極響應式設計解決方案，因為WPF/UWP元素都是矢量元素所以大部分元素都可以無損縮放（當然會有像素對不齊的情況），所以偷懶的話就可以使用ViewBox

當前題目：XAML響應式布局設計
路徑分享：http://muchs.cn/article10/phdigo.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供營銷型網(wǎng)站建設、網(wǎng)站建設、外貿(mào)網(wǎng)站建設、品牌網(wǎng)站建設、云服務器、品牌網(wǎng)站制作

廣告

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

網(wǎng)站優(yōu)化排名