{"id":33359,"date":"2021-06-17T12:17:54","date_gmt":"2021-06-17T19:17:54","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/dotnet\/?p=33359"},"modified":"2021-06-21T14:53:39","modified_gmt":"2021-06-21T21:53:39","slug":"announcing-net-maui-preview-5","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/dotnet\/announcing-net-maui-preview-5\/","title":{"rendered":"Announcing .NET MAUI Preview 5"},"content":{"rendered":"

While we are still recovering from Microsoft Build and .NET 6 Preview 4<\/a>, we are here to share our continued progress with .NET Multi-platform App UI (.NET MAUI) with .NET 6 Preview 5<\/a>. In this release we have enabled animations and view transformations, completed the porting of several UI components, and introduced improvements to the single project templates.<\/p>\n

We have also published our first batch of preview documentation covering introductory and foundational aspects of .NET MAUI: https:\/\/docs.microsoft.com\/dotnet\/maui\/<\/a>.<\/p>\n

\"Image<\/a><\/p>\n

Animations<\/h2>\n

There are a few ways to perform animation<\/a> in .NET MAUI, the easiest of which is using view extension methods<\/a> such as FadeTo<\/code>, RotateTo<\/code>, ScaleTo<\/code>, TranslateTo<\/code>, and more. In the following example I grab a reference to each view bound to the layout (see bindable layouts<\/a>) using the new HandlerAttached<\/code><\/a> event:<\/p>\n

<DataTemplate x:Key=\"FavouriteTemplate\">\r\n    <Frame\r\n        AttachedHandler=\"OnAttached\"\r\n        Opacity=\"0\">\r\n        ...\r\n    <\/Frame>\r\n<\/DataTemplate><\/code><\/pre>\n
<FlexLayout\r\n    BindableLayout.ItemTemplate=\"{StaticResource FavouriteTemplate}\"\r\n    BindableLayout.ItemsSource=\"{Binding Favorites}\"\r\n    >\r\n    ...\r\n<\/FlexLayout><\/code><\/pre>\n
When the page appears I then animate the views in with a slight stagger to create the beautiful cascade effect.<\/p>\n
public partial class FavoritesPage : ContentPage\r\n{\r\n    List<Frame> tiles = new List<Frame>();\r\n\r\n    void OnAttached(object sender, EventArgs e)\r\n    {\r\n\r\n        Frame f = (Frame)sender;\r\n        tiles.Add(f);\r\n    }\r\n\r\n    protected override async void OnAppearing()\r\n    {\r\n        base.OnAppearing();\r\n\r\n        await Task.Delay(300);\r\n        TransitionIn();\r\n    }\r\n\r\n    async void TransitionIn()\r\n    {\r\n        foreach (var item in tiles)\r\n        {\r\n            item.FadeTo(1, 800);\r\n            await Task.Delay(50);\r\n        }\r\n    }    \r\n}<\/code><\/pre>\n
For more complete orchestration of view animations, check out the Custom Animation documentation<\/a> which demonstrates adding multiple child animations that can run parallel.<\/p>\n
You can view and run the source for this example from the WeatherTwentyOne project on GitHub<\/a>.<\/p>\n
UI Components<\/h2>\n
In this release several controls now have all properties and events ported to handlers from the renderer architecture of Xamarin.Forms, including ActivityIndicator<\/code>, CheckBox<\/code>, Image<\/code>, and Stepper<\/code>. In previous previews you would need to check if a control was ported and register renderers from the compatibility package for those unavailable. In .NET MAUI Preview 5 we have made this much easier by updating the UseMauiApp<\/code> extension (see the Startup wiki<\/a>) to wire up all the controls for you, whether they are based on handlers or renderers.<\/p>\n
\"Image<\/a><\/p>\n
Also new in preview 5 is the first introduction of Shell<\/code><\/a>, an application container that provides URI navigation and a quick way to implement flyout menus and tabs. To get started add Shell<\/code> as the root element to your window in the App.xaml.cs<\/code>. The typical pattern I follow is naming it “AppShell”, though you can name it as you wish.<\/p>\n
protected override IWindow CreateWindow(IActivationState activationState)\r\n{\r\n    return new Microsoft.Maui.Controls.Window(\r\n        new AppShell()\r\n    );\r\n}<\/code><\/pre>\n
Now in your AppShell class start populating the menu with content using the type that represents the navigation you wish to display, either FlyoutItem<\/code> or Tab<\/code>. These are not UI controls, but rather represent the types that will create those UI controls. You can later style the controls with content templates which we’ll introduce in preview 6.<\/p>\n
<Shell xmlns=\"http:\/\/schemas.microsoft.com\/dotnet\/2021\/maui\" \r\n       xmlns:x=\"http:\/\/schemas.microsoft.com\/winfx\/2009\/xaml\"\r\n       xmlns:pages=\"clr-namespace:ControlGallery.Pages\"\r\n       Title=\"ControlGallery\"\r\n       x:Class=\"ControlGallery.AppShell\">\r\n\r\n    <FlyoutItem Title=\"Margin and Padding\">\r\n        <ShellContent Route=\"marginpadding\" \r\n                      ContentTemplate=\"{DataTemplate pages:ControlsPage}\" \/>\r\n    <\/FlyoutItem>\r\n\r\n    <FlyoutItem Title=\"ActivityIndicator\">\r\n        <ShellContent Route=\"activityindicator\" \r\n                      ContentTemplate=\"{DataTemplate pages:ActivityIndicatorPage}\" \/>\r\n    <\/FlyoutItem>\r\n\r\n    ...\r\n\r\n<\/Shell><\/code><\/pre>\n
\"Image<\/a><\/p>\n
Get the very latest information about controls, layouts, and features on our .NET MAUI status page<\/a>.<\/p>\n
Single Project Templates Updates<\/h2>\n
We have made progress in this release consolidating the multiple WinUI projects into one. Now when you dotnet new maui<\/code> a project you’ll see two projects: the multi-targeted .NET MAUI project, and the WinUI project.<\/p>\n
\"visual<\/p>\n
Now to run the WinUI project you’ll have no confusion about which project to choose. This is one step closer to the final vision of having just one project that can build and deploy to all supported platforms. In order to support this, you’ll need to install these Project Reunion 0.8 (Preview) extensions for Visual Studio 16.11 Preview 2.<\/p>\n