雖然Microsoft Build纔剛過去不久,但咱們在這裏會繼續分享咱們在.NET多平臺應用程序 UI (.NET MAUI) 的持續進展。在此版本中,咱們啓用了動畫和視圖轉換,完成了多個 UI 組件的移植,並對單個項目模板進行了改進。
咱們還發布了第一批涵蓋 .NET MAUI 介紹和基礎方面的預覽文檔:https://docs.microsoft.com/en-us/dotnet/maui/。
async
在 .NET MAUI 中有幾種執行動畫的方法,其中最簡單的方法是使用視圖擴展方法,例如 FadeTo、RotateTo、ScaleTo、TranslateTo 等。在如下示例中,我使用新的 HandlerAttached 事件獲取對每一個綁定到佈局的視圖的引用(請參閱可綁定佈局):ide
<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 中介紹的內容模板來設置控件的樣式。ui
<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 狀態頁面上獲取有關控件、佈局和功能的最新信息。spa
咱們在此版本中取得了進展,將多個 WinUI 項目合併爲一個。 如今,當您建立一個新的maui項目時,您將看到兩個項目:多目標 .NET MAUI 項目和 WinUI 項目。
.net
如今要運行WinUI項目,您就不會對選擇哪一個項目感到困惑了。這是朝着只有一個項目能夠構建並部署到全部支持平臺的最終願景邁進了一步。爲了支持這個功能,你須要在Visual Studio 16.11 Preview 2中安裝這些Project Reunion 0.8 (Preview)擴展。code
在此版本中,咱們啓用了在不添加自定義 NuGet 源的狀況下還原您的項目。只需建立一個新項目並運行它!要獲取全部最新內容,咱們繼續建議運行 maui-check dotnet 工具。
安裝:
$ dotnet tool install -g redth.net.maui.check
如今運行並遵循更新以獲取 .NET 6 Preview 五、平臺 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 上提問。