共用方式為


從 Xamarin.Forms 變更版面配置行為

在執行升級的 .NET 多平臺應用程式 UI (.NET MAUI) 應用程式時,您可能會注意到配置行為不同。 其中有些是版面配置間距值變更的結果。 如需詳細資訊,請參閱 Xamarin.Forms 的預設值變更。

下表顯示 Xamarin.Forms 和 .NET MAUI 版面配置之間的其他行為變更:

版面配置 Xamarin.Forms .NET MAUI 建議
全部 在某些情況下,不接受重設大小要求。 會接受重設大小要求。
Grid 您可以從 XAML 推斷資料列和資料列。 數據行和數據列必須明確宣告。 新增 ColumnDefinitionsRowDefinitions
HorizontalStackLayout *AndExpand 沒有作用。
RelativeLayout 需要相容性命名空間。 Grid請改用 ,或為相容性命名空間新增 xmlns
StackLayout 子系可以在堆疊方向填滿空間。 子系會堆疊並超出可用空間。 如果您需要子檢視來填滿空間,請變更為 Grid
VerticalStackLayout *AndExpand 沒有作用。

.NET MAUI 控制件通常會遵守明確的大小要求。 如果您要求控件寬度為 200 個裝置獨立單位,則 .NET MAUI 會讓該控件寬 200 個單位,即使控件的容器只有 100 個單位寬。

Xamarin.Forms 的預設版面配置值變更

Xamarin.Forms 會針對某些屬性值使用任意預設值,例如填補、邊界和間距。 .NET MAUI 會將這些任意屬性值變更為零。

若要在未設定明確值的專案中保留 Xamarin.Forms 預設值,請將隱含樣式新增至您的專案。 如需隱含樣式的詳細資訊,請參閱 隱含樣式

注意

.NET MAUI 專案範本包含資源字典,可為大部分控件提供預設樣式。 建議您透過修改或繼承這些 資源字典,在應用程式中採用類似的方法。

下表列出 Xamarin.Forms 與 .NET MAUI 之間已變更的版面配置屬性值:

屬性 Xamarin.Forms 值 .NET MAUI 值
Grid.ColumnSpacing 6 0
Grid.RowSpacing 6 0
StackLayout.Spacing 6 0

下列樣式會保留 Xamarin.Forms 預設值:

<!-- Forms defaults -->
<Style TargetType="Grid">
    <Setter Property="ColumnSpacing" Value="6"/>
    <Setter Property="RowSpacing" Value="6"/>
</Style>
<Style TargetType="StackLayout">
    <Setter Property="Spacing" Value="6"/>
</Style>
<Style TargetType="Frame">
    <Setter Property="Padding" Value="{OnPlatform 20,iOS=19}"/>
</Style>

Frame

Frame 已在 .NET MAUI 中取代為 Border。 不過,隨附於從 Xamarin.Forms 輕鬆移轉。 .NET MAUI 版面配置可正確測量FramePadding所有平臺,而 Xamarin.Forms 跨平臺有一些差異。 這可能會導致您的應用程式在 .NET MAUI 中看起來不相同。 如果您使用預設值,上述範例會說明此情況。

方格

Xamarin.Forms 與 .NET MAUI 之間行為的最大變更 Grid 是網格線不會自動為您新增遺漏的數據列和數據行。 例如,在 Xamarin.Forms 中,您可以將控件新增至 , Grid 而不指定其數據列行為:

<Grid>
    <Label Text="Hello"/>
    <Label Grid.Row="1" Text="World"/>
</Grid>

在 Xamarin.Forms 中,儘管未宣告 Grid 包含兩個數據列,但系統會自動為您新增第二個數據列。 .NET MAUI 不會這麼做。 相反地,您必須使用 屬性明確指定 中的GridRowDefinitions資料列數目。

重要

根據預設,.NET MAUI 會 Grid 建立具有一個資料行和一個資料列的 。 因此,如果這是您的意圖,就不需要設定 ColumnDefinitionsRowDefinitions 屬性。

在 Xamarin.Forms 中,當 Label 位於其 ColumnDefinition 寬度設定為 Auto的數據行時,會隱含發生換行符和尾端截斷等換行符。 在 .NET MAUI 中,在此案例中,換行符不會隱含發生,因為數據行會延伸超過畫面的寬度以容納子系的內容。 如果您想要 Label 將 包裝在 邊緣, Grid 您應該將適當的 ColumnDefinition 設定為 * 或 值。

StackLayout

.NET MAUI 中的堆棧配置與StackLayoutVerticalStackLayoutHorizontalStackLayoutStackLayout Xamarin.Forms 中的 有數個差異。

主要差異在於 .NET MAUI 堆疊配置非常簡單。 它們會以單一方向堆棧子檢視,直到它們全部堆疊為止。 它們會持續到最後一個子系已堆疊,即使這會將它們帶出堆棧方向的可用空間。 因此,.NET MAUI 堆疊配置會以特定方向排列控件。 它們不會細分一個空間。 這與 Xamarin.Forms StackLayout完全不同,它會根據情況和任何 *AndExpand 配置選項的存在,例如 FillAndExpandCenterAndExpand,變更其版面配置行為。 Xamarin.Forms StackLayout 有時會細分空間,並擴充至其容器邊緣或停止。 在其他情況下,它會擴充到其容器之外。

.NET MAUI HorizontalStackLayoutVerticalStackLayout中的新堆疊配置無法辨識配置 *AndExpand 選項。 如果他們遇到具有這類配置選項的子系,他們只會將其 AndExpand 視為不存在。 例如,FillAndExpand 會成為 Fill。 不過,為了簡化從 Xamarin.Forms 移轉,.NET MAUI StackLayout 會接受 *AndExpand 版面配置選項,不過它們已標示為過時。 若要避免使用過時成員的警告,您應該將使用 *AndExpand 版面配置選項的版面配置轉換為適當的版面配置類型。 可以達成如下:

  1. 如果您的版面配置是 以外的 StackLayout任何專案,請移除 的所有用法 AndExpand。 就像在 Xamarin.Forms 中一樣,在 .NET MAUI 中,版 AndExpand 面配置選項不會影響 以外的 StackLayout任何配置。

  2. 拿掉與堆疊方向正交的任何 AndExpand 屬性。 例如,如果您有 StackLayoutOrientation Vertical,且其子系具有 HorizontalAligment="CenterAndExpand" - 該版面配置選項沒有作用,而且可以移除。

  3. 如果您在上有任何剩餘AndExpand的屬性,則應該將該屬性轉換成 GridStackLayoutStackLayout Grid設計為細分空間,並提供 Xamarin.Forms 中提供的版面配置AndExpand。 下列範例顯示使用 屬性的 AndExpand Xamarin.FormsStackLayout

    <StackLayout>
        <Label Text="Hello world!"/>
        <Image VerticalOptions="FillAndExpand" Source="dotnetbot.png"/>
    </StackLayout>
    

    這可以轉換成 Grid .NET MAUI 中的 :

    <Grid RowDefinitions="Auto, *">
        <Label Text="Hello world!"/>
        <Image Grid.Row="1" Source="dotnetbot.png"/>
    </Grid>
    

    執行此轉換時,在中StackLayout標示AndExpand的任何項目都應該位於其本身的數據列或資料列中,其大小*Grid

重要

StackLayout 繼續其堆疊方向,直到其內容用盡為止。 它不會沿著該軸細分其容器。 如果您要將內容限制為方向的限制空間,您應該使用另一個版面配置,例如 Grid

RelativeLayout

RelativeLayout不建議在 .NET MAUI 中使用 。 請改為盡可能使用 Grid

如果您絕對需要 RelativeLayout,可以在命名空間中找到 Microsoft.Maui.Controls.Compatibility

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:compat="clr-namespace:Microsoft.Maui.Controls.Compatibility;assembly=Microsoft.Maui.Controls"
             x:Class="MyMauiApp.MyPage"
             Title="MyPage">
    <compat:RelativeLayout>
        <!-- Your code goes here -->
    </compat:RelativeLayout>
</ContentPage>

ScrollView

雖然 ScrollView 通常不被視為版面配置,但它可以視為配置,因為它用來捲動其子內容。 在 Xamarin.Forms 中, ScrollView 堆疊時不會一致運作。 其大小下限有一些任意限制,部分取決於其內容,有時會壓縮,讓其他專案以不一致且有時出人意料的方式放入頁面內 StackLayout

在 .NET MAUI 中,除非另有限制,否則會 ScrollView 擴充為它想要的大小。 這表示,在可以無限擴充的 VerticalStackLayout中, ScrollView 將會擴充到其完整內容高度,而且不會捲動。 如果您是 Xamarin.Forms 使用者,此行為可能會造成混淆。