1. 程式人生 > 其它 >.NET MAUI Preview 5 功能預覽

.NET MAUI Preview 5 功能預覽

雖然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 上提問。