Ce qu’il faut savoir lors du portage d’un WPF vers .NET MAUI Blazor Hybrid

Votre application WPF peut gagner plus d’utilisateurs si vous la rendez multiplateforme, mais quelle est la meilleure façon de le faire avec .NET MAUI ou Blazor Hybrid ? Voici les étapes à suivre si les résultats montrent Blazor Hybrid.

Dans le post précédent, nous avons examiné nos choix que Microsoft nous donne pour transformer une application WPF en multiplateforme. Nous avons parlé des différences les plus importantes entre WPF et .NET MAUI.

Aujourd’hui, nous allons passer en revue un autre sujet intéressant : comment transformer notre application WPF en une application multiplateforme à l’aide des applications Hybrid Blazor.

Vous pouvez passer ce test simple pour choisir la pile technologique la mieux adaptée à vos besoins :

Alors si votre résultat à ce petit quiz vous mène à Blazor Hybrid, ce post est fait pour vous !

Quelles situations cela pourrait-il être?

• Le premier cas consiste à utiliser une telle approche si nous voulons que notre application ait une interface utilisateur unifiée, pour écrire le code à la fois, mais nous avons besoin de toutes les fonctionnalités du bureau, comme le système d’accès aux fichiers, les paramètres de l’appareil photo, etc.
• Une autre situation est lorsque nous avons déjà porté notre code sur .NET MAUI, mais nous avons besoin d’un composant que l’écosystème Blazor a à offrir, tel que Telerik Pivot ou Telerik ScheduleView, par exemple, ou un autre des composants puissants de Interface utilisateur Telerik pour Blazor.

Scénario 1

Interface utilisateur unifiée

Le meilleur choix ici est de créer un nouveau Application Blazor hybride utilisant des modèles Microsoft VS.

Avec .NET 7, vous pouvez choisir entre WPF Hybrid Blazor ou .NET MAUI Blazor, et celui à choisir dépend du système d’exploitation que vous devez cibler.

Dans cette série, nous nous concentrons sur l’expérience multiplateforme, donc l’application .NET MAUI Hybrid Blazor est notre choix.

Visual Studio crée directement une application Blazor encapsulée dans la structure de projet .NET MAUI.

Scénario 2

Nous avons une excellente application MAUI/WPF, mais nous avons besoin d’un composant que seul l’écosystème Blazor a à offrir.

Par exemple, si vous devez utiliser la fonctionnalité de planification dans .NET MAUI, vous pouvez consulter les riches Interface utilisateur Telerik pour Blazor suite.

Dans ce cas, notre application .NET MAUI est déjà créée et nous devons suivre les étapes ci-dessous pour ajouter la partie Blazor ou vous pouvez à nouveau créer une application MAUI hybride vierge et copier les fichiers nécessaires à partir de là.

1. Ajoutez le SDK Razor, Microsoft.NET.Sdk.Razor à votre projet en modifiant sa première ligne du fichier de projet CSPROJ :

<Project Sdk="Microsoft.NET.Sdk.Razor">  

2. Ajoutez la racine Composant de rasoir pour l’application au projet sur la page Main.razor :

Un composant de rasoir est une page contenant l’interface utilisateur pour vos besoins. C’est l’endroit où écrire votre code lorsque vous travaillez avec Blazor.

3. Ajoutez votre Composants de rasoir aux dossiers de projet nommés Pages et Shared.

Par exemple, le code que je vais utiliser pour ajouter le Scheduler est placé dans le dossier Pages :

@Page "https://www.telerik.com/"
@Using Telerik.Blazor.Components.Scheduler.Models;
 <Telerikscheduler Data="@Appointments" @Bind-Date="@Startdate" Height="600px" @Bind-View="@Currview"
                
                  Allowcreate="True" Allowdelete="True" Allowupdate="True"
                  Confirmdelete="True"
                
                >
    <Schedulerviews>
        <Schedulerdayview Starttime="@Daystart" Endtime="@Dayend" Workdaystart="@Workdaystart" Workdayend="@Workdayend" />
        <Schedulerweekview Starttime="@Daystart" Endtime="@Dayend" Workdaystart="@Workdaystart" Workdayend="@Workdayend" />
        <Schedulermultidayview Starttime="@Daystart" Endtime="@Dayend" Workdaystart="@Workdaystart" Workdayend="@Workdayend" Numberofdays="10" />
        <Schedulermonthview></Schedulermonthview>
        <Schedulertimelineview Starttime="@Daystart" Endtime="@Dayend" Workdaystart="@Workdaystart" Workdayend="@Workdayend" />
    </Schedulerviews>
</Telerikscheduler>
 
@code {
    IEnumerable<Appointment> Appointments = new List<Appointment>();
    public DateTime StartDate { get; set; } = new DateTime(2021, 6, 21);
    public SchedulerView CurrView { get; set; } = SchedulerView.Week;
 
    //the time portions are important
    public DateTime DayStart { get; set; } = new DateTime(2000, 1, 1, 8, 0, 0);
    public DateTime DayEnd { get; set; } = new DateTime(2000, 1, 1, 20, 0, 0);
    public DateTime WorkDayStart { get; set; } = new DateTime(2000, 1, 1, 9, 0, 0);
    public DateTime WorkDayEnd { get; set; } = new DateTime(2000, 1, 1, 17, 0, 0);
 
    protected override void OnInitialized()
    {
        LoadData();
    }
    private void LoadData()
    {
       Appointments = appointmentService.GetAppointments();
    }
}

4. Ajoutez vos ressources Web statiques à un dossier de projet nommé wwwroot (des éléments tels que favicon, polices, etc.).

5. Ajoutez tous les fichiers _Imports.razor facultatifs à votre projet. Cela signifie énumérer ici les bibliothèques supplémentaires que vous utiliserez.

Ici, pour utiliser Telerik UI pour Blazor, le code suivant doit être ajouté :

@using Telerik.Blazor
@using Telerik.Blazor.Components
@using Telerik.FontIcons
@using Telerik.SvgIcons

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MyBlazorApp"
             x:Class="MyBlazorApp.MainPage">

    <BlazorWebView HostPage="wwwroot/index.html">
        <BlazorWebView.RootComponents>
            <RootComponent Selector="#app" ComponentType="{x:Type local:Main}" />
        </BlazorWebView.RootComponents>
    </BlazorWebView>

</ContentPage>

6. Modifiez la méthode CreateMauiApp de votre classe MauiProgram pour enregistrer le BlazorWebView contrôle à utiliser dans votre application.

Pour ce faire, sur l’objet IServiceCollection, appelez la méthode AddMauiBlazorWebView pour ajouter des services d’affichage Web de composants à la collection de services :

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
            });

        builder.Services.AddMauiBlazorWebView();
#if DEBUG
        builder.Services.AddMauiBlazorWebViewDeveloperTools();
#endif
        
        

        return builder.Build();
    }
}

Et lorsque BlazorWebView est ajouté et que votre application .NET MAUI devient une application .NET MAUI Blazor Hybrid, il est temps d’ajouter Telerik ScheduleView. Les étapes pour le faire sont :

1. Ajoutez les bibliothèques Telerik en suivant le lien : Télécharger l’interface utilisateur Telerik pour Blazor

2. Ajoutez les actifs du client Telerik en ajoutant ces deux lignes dans le <head> balise de wwroot/index.html :

<link rel="stylesheet" href="_content/Telerik.UI.for.Blazor/css/kendo-theme-default/all.css" />
<script src="_content/Telerik.UI.for.Blazor/js/telerik-blazor.js" defer></script>

3. Incluez les instructions @using dans le fichier _imports.razor :

@using Telerik.Blazor
@using Telerik.Blazor.Components
@using Telerik.FontIcons
@using Telerik.SvgIcons

4. Ajoutez le TelerikRootComponent dans la page Main.razor :

<TelerikRootComponent>
    <Router AppAssembly="@typeof(Main).Assembly">
        <Found Context="routeData">
            <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
            <FocusOnNavigate RouteData="@routeData" Selector="h1" />
        </Found>
        <NotFound>
            <LayoutView Layout="@typeof(MainLayout)">
                <p role="alert">Sorry, there's nothing at this address.</p>
            </LayoutView>
        </NotFound>
    </Router>
</TelerikRootComponent>

5. Enregistrez les services Telerik en modifiant une fois le CreateMauiApp() méthode:

// register the Telerik services  
builder.Services.AddTelerikBlazor();

Et puis, si vous avez suivi toutes les étapes ci-dessus, vous devriez pouvoir voir l’interface utilisateur Telerik dans le cadre de votre projet .NET MAUI. Le projet .NET MAUI dans mon cas contient également un .NET MAUI ListView à gauche et le BlazorWebView à droite :

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MauiHybridBlazor"
             x:Class="MauiHybridBlazor.MainPage"
             BackgroundColor="{DynamicResource PageBackgroundColor}">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="10"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
      
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="300" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <ProgressBar
            x:Name="isRefreshingControl"
        />
 
        <ListView 
            x:Name="itemListControl"
            Grid.Row="1"
            Margin="10"  
        >
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <HorizontalStackLayout   HorizontalOptions="Center"  VerticalOptions="Center" >
                            <CheckBox Margin="1"    Color="Black"  />
                            <Label Text="{Binding}" VerticalOptions="Center"/>
                        </HorizontalStackLayout>
                    </ViewCell>
 
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

    …........
        <BlazorWebView  Grid.Column="1" Grid.RowSpan="3" x:Name="blazorWebView" HostPage="wwwroot/index.html">
            <BlazorWebView.RootComponents>
                <RootComponent Selector="#app" ComponentType="{x:Type local:Main}" />
            </BlazorWebView.RootComponents>
        </BlazorWebView>
    </Grid>
</ContentPage>

Conclusion

Le monde .NET est plus puissant que jamais et vous pouvez désormais choisir entre les frameworks .NET mobiles, Web et de bureau et les combiner pour mettre en œuvre la meilleure solution pour vos utilisateurs.

Quel que soit votre choix, vous êtes également couvert par l’interface utilisateur Telerik et Telerik DevCraftavec plus de 1 000 composants d’interface utilisateur supplémentaires, des modèles, des thèmes et de nombreuses ressources afin que vous puissiez améliorer votre temps de développement et fournir une excellente interface utilisateur en même temps. Téléchargez-le maintenant et partagez votre expérience avec nous.

Si vous voulez en savoir plus sur Blazor avec .NET MAUI, consultez le nouvel ebook gratuit : Blazor hybride et Web en une seule solution par notre Principal Developer Advocate et Microsoft MVP Ed Charbeneau.