雖然Microsoft Build才剛過去不久,但我們在這里會繼續分享我們在.NET多平台應用程序 UI (.NET MAUI) 的持續進展。在此版本中,我們啟用了動畫和視圖轉換,完成了多個 UI 組件的移植,並對單個項目模板進行了改進。
我們還發布了第一批涵蓋 .NET MAUI 介紹和基礎方面的預覽文檔:https://docs.microsoft.com/en-us/dotnet/maui/。
動畫
在 .NET MAUI 中有幾種執行動畫的方法,其中最簡單的方法是使用視圖擴展方法,例如 FadeTo、RotateTo、ScaleTo、TranslateTo 等。在以下示例中,我使用新的 HandlerAttached 事件獲取對每個綁定到布局的視圖的引用(請參閱可綁定布局):
<DataTemplate x:Key="FavouriteTemplate">
<Frame
AttachedHandler="OnAttached"
Opacity="0">
...
</Frame>
<FlexLayout
BindableLayout.ItemTemplate="{StaticResource FavouriteTemplate}"
BindableLayout.ItemsSource="{Binding Favorites}"
>
...
</FlexLayout>
當頁面出現時,我會以略微交錯的方式對視圖進行動畫處理,以創建漂亮的級聯效果。
public partial class FavoritesPage : ContentPage
{
List<Frame> tiles = new List<Frame>();
void OnAttached(object sender, EventArgs e)
{
Frame f = (Frame)sender;
tiles.Add(f);
}
protected override async void OnAppearing()
{
base.OnAppearing();
await Task.Delay(300);
TransitionIn();
}
async void TransitionIn()
{
foreach (var item in tiles)
{
item.FadeTo(1, 800);
await Task.Delay(50);
}
}
}
如需更完整的視圖動畫編排,請查看自定義動畫文檔,該文檔演示了添加多個可以並行運行的子動畫。
您可以從 GitHub 上的 WeatherTwentyOne 項目查看和運行此示例的源代碼。
用戶界面組件
在此版本中,幾個控件現在已將所有屬性和事件從 Xamarin.Forms 的渲染器體系結構移植到處理程序,包括 ActivityIndicator、CheckBox、Image 和 Stepper。 在之前的預覽版中,您需要檢查是否移植了控件並從兼容包中為不可用的渲染器注冊渲染器。 在 .NET MAUI Preview 5 中,我們通過更新 UseMauiApp 擴展(請參閱 Startup wiki)為您連接所有控件,無論它們是基於處理程序還是渲染器,使這變得更加容易。
Preview 5 中的另一個新功能是首次引入 Shell,它是一個應用程序容器,可提供 URI 導航和實現彈出菜單,選項卡的快速方法。 首先,將 Shell 作為根元素添加到 App.xaml.cs 中的窗口中。 我遵循的典型模式是將其命名為“AppShell”,但您可以隨意命名。
protected override IWindow CreateWindow(IActivationState activationState)
{
return new Microsoft.Maui.Controls.Window(
new AppShell()
);
}
現在,在您的 AppShell 類中,開始使用代表您希望顯示的導航的類型(FlyoutItem 或 Tab)使用內容填充菜單。 這些不是 UI 控件,而是代表將創建這些 UI 控件的類型。 您可以稍后使用我們將在Preview 6 中介紹的內容模板來設置控件的樣式。
<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:pages="clr-namespace:ControlGallery.Pages"
Title="ControlGallery"
x:Class="ControlGallery.AppShell">
<FlyoutItem Title="Margin and Padding">
<ShellContent Route="marginpadding"
ContentTemplate="{DataTemplate pages:ControlsPage}" />
</FlyoutItem>
<FlyoutItem Title="ActivityIndicator">
<ShellContent Route="activityindicator"
ContentTemplate="{DataTemplate pages:ActivityIndicatorPage}" />
</FlyoutItem>
...
</Shell>
在我們的 .NET MAUI 狀態頁面上獲取有關控件、布局和功能的最新信息。
單個項目模板更新
我們在此版本中取得了進展,將多個 WinUI 項目合並為一個。 現在,當您創建一個新的maui項目時,您將看到兩個項目:多目標 .NET MAUI 項目和 WinUI 項目。
現在要運行WinUI項目,您就不會對選擇哪個項目感到困惑了。這是朝着只有一個項目可以構建並部署到所有支持平台的最終願景邁進了一步。為了支持這個功能,你需要在Visual Studio 16.11 Preview 2中安裝這些Project Reunion 0.8 (Preview)擴展。
.NET MAUI 預覽版 5 入門
在此版本中,我們啟用了在不添加自定義 NuGet 源的情況下還原您的項目。只需創建一個新項目並運行它!要獲取所有最新內容,我們繼續建議運行 maui-check dotnet 工具。
安裝:
$ dotnet tool install -g redth.net.maui.check
現在運行並遵循更新以獲取 .NET 6 Preview 5、平台 SDK、.NET MAUI、項目模板,甚至檢查您的環境是否存在第三方依賴項。
$ maui-check
如果您希望自己一步一步來,您可以按照這些說明單獨安裝所有內容。
安裝后,您就可以基於Preview 5 模板創建新應用程序了。
$ dotnet new maui -n MauiFive
在 Visual Studio 16.11 Preview 1 中打開您的新 MauiFive.sln 並運行您選擇的平台!
注意:如果您之前安裝了 .NET 6 Preview 4(直接或通過安裝 .NET MAUI),那么您可能會在安裝和運行 .NET 6
Preview 5 時遇到問題。有關如何修復的說明,請參閱 .NET 6 已知問題安裝。
渴望嘗試Visual Studio 2022 Preview1嗎?開始探索移動平台使用安卓模擬器或者遠程iOS設備,或連接Mac主機。確保禁用XAML熱重載以避免類型錯誤,或堅持使用Visual Studio 2019版本16.11 Preview 2.2。
在未來,Project Reunion擴展將支持Visual Studio 2022,你將能夠使用Windows上的所有平台。
如果你已經有了 .NET MAUI項目,想要遷移到Preview 5,我建議你創建一個像上面那樣的新項目,並將你的文件復制到多目標項目中,這樣你就可以避免協調WinUI項目的麻煩。
有關使用.NET MAUI的更多信息,請參考我們新的文檔網站。
歡迎反饋
請讓我們知道您使用.NET MAUI Preview 5創建新的應用程序的經驗,通過在dotnet/ MAUI GitHub上與我們合作。
要了解未來版本中將要發布的內容,請訪問我們的產品路線圖。
有任何技術問題,請在 Microsoft Q&A 上提問。