. net Maui preview 5 function Preview

Time:2021-9-28

Although Microsoft build has just passed, we will continue to share our continuous progress in. Net multi platform application UI (. Net Maui). In this release, we have enabled animation and view transformation, completed the migration of multiple UI components, and improved a single project template.
We also released the first batch of preview documents covering the introduction and fundamentals of. Net Maui: https://docs.microsoft.com/en-us/dotnet/maui/ 。
. net Maui preview 5 function Preview

animation

There are several ways to perform animation in. Net Maui. The simplest way is to use view extension methods, such as fadeto, rotateto, scaleto, translateto, and so on. In the following example, I use the new handlerattached event to get a reference to each view bound to a layout (see bindable layouts):

<DataTemplate x:Key="FavouriteTemplate">
    <Frame
        AttachedHandler="OnAttached"
        Opacity="0">
        ...
</Frame>

<FlexLayout
BindableLayout.ItemTemplate="{StaticResource FavouriteTemplate}"
BindableLayout.ItemsSource="{Binding Favorites}"
 >
...
</FlexLayout>

When the page appears, I will animate the view in a slightly staggered way to create a beautiful cascade effect.

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);
   }
}    
}

For a more complete view animation orchestration, review the custom animation document, which demonstrates adding multiple sub animations that can run in parallel.
You can view and run the source code for this example from the weathertweetyone project on GitHub.

user interface component

In this release, several controls have now migrated all properties and events from the renderer architecture of xamarin. Forms to handlers, including activityindicator, checkbox, image, and stepper. In previous previews, you needed to check whether controls were migrated and register renderers for unavailable renderers from compatibility packages. In. Net Maui preview 5, we make this easier by updating the usemauiapp extension (see startup wiki) to connect all the controls for you, whether they are based on a handler or renderer.
. net Maui preview 5 function Preview

Another new feature in preview 5 is the first introduction of shell, which is an application container that provides URI navigation and a quick way to implement pop-up menus and tabs. First, add the shell as the root element to the window in app.xaml.cs. The typical pattern I follow is to name it “appshell”, but you can name it as you like.

protected override IWindow CreateWindow(IActivationState activationState)
{
    return new Microsoft.Maui.Controls.Window(
        new AppShell()
    );
}

Now, in your appshell class, start populating the menu with content using the type that represents the navigation you want to display (flyoutitem or tab). These are not UI controls, but represent the type of UI controls that will be created. You can set the style of the control later using the content template we will introduce in 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 preview 5 function Preview

Get the latest information about controls, layouts, and functionality on our. Net Maui status page.

Single project template update

We have made progress in this release by merging multiple winui projects into one. Now, when you create a new Maui project, you will see two projects: the multi-target. Net Maui project and the winui project.
. net Maui preview 5 function Preview

Now to run the winui project, you won’t be confused about which project to choose. This is a step towards the ultimate vision that only one project can be built and deployed to all support platforms. To support this feature, you need to install these project reunion 0.8 (Preview) extensions in Visual Studio 16.11 preview 2.

  • Project reunion extension
  • Single item msix packaging tool (Preview)

Getting started with. Net Maui preview 5

In this release, we have enabled restoring your project without adding a custom nuget source. Just create a new project and run it! To get all the latest content, we continue to recommend running the Maui check dotnet tool.
Installation:

$ dotnet tool install -g redth.net.maui.check

Now run and follow the update to get. Net 6 preview 5, Platform SDK,. Net Maui, project templates, and even check your environment for third-party dependencies.

$ maui-check

If you want to do it step by step, you can follow these instructions to install everything separately.
After installation, you can create a new application based on the preview 5 template.

$ dotnet new maui -n MauiFive

Open your new mauifive.sln in Visual Studio 16.11 Preview 1 and run the platform you selected!

Note: if you have previously installed. Net 6 preview 4 (directly or by installing. Net Maui), you may be installing and running. Net 6
There was a problem with preview 5. For instructions on how to repair, see. Net 6 known problem installations.

Eager to try visual studio 2022 preview1? Start exploring mobile platforms, using Android emulators or remote IOS devices, or connecting to MAC hosts. Make sure to disable XAML hot overloading to avoid type errors, or stick to visual studio 2019 version 16.11 preview 2.2.
In the future, the project reunion extension will support visual studio 2022, and you will be able to use all platforms on windows.
If you already have a. Net Maui project and want to migrate to preview 5, I suggest you create a new project like the above and copy your files to the multi-target project, so that you can avoid the trouble of coordinating winui projects.
For more information about using. Net Maui, please refer to our new documentation website.

Welcome feedback

Please let us know your experience in creating new applications using. Net Maui preview 5 by working with us on dotnet / Maui GitHub.
To learn what will be released in future releases, please visit our product roadmap.
If you have any technical questions, please ask them on Microsoft Q & A.