Fermer

juillet 1, 2025

Utilisation du balisage C # pour créer des interfaces graphiques dans .net Maui

Utilisation du balisage C # pour créer des interfaces graphiques dans .net Maui


Le balisage C # peut simplifier la création d’interfaces en utilisant C # via le chaînage des méthodes d’extension.

Dans cet article, je vous guiderai sur l’utilisation du balisage C # pour simplifier la création d’interface graphique avec C # en utilisant .net Maui au lieu du code XAML, grâce à la boîte à outils communautaire .net Maui. Commençons!

Qu’est-ce que C # Marquage et comment l’installer dans votre projet?

Avez-vous déjà voulu créer des interfaces .net Maui avec le code C #, mais le code résultant est très complexe et emmêlé? Pour aider à ce problème, l’équipe derrière la boîte à outils communautaire .net Maui a créé un ensemble de méthodes et de classes d’aide appelés C # Marquagequi simplifie la création d’interfaces graphiques à l’aide du code C # au lieu du code XAML.

L’installation du balisage C # est très simple en suivant ces étapes:

  1. Installer le CommunityToolkit.Maui.Markup Package NuGet.
  2. Accédez au fichier Mauiprogram.cs et ajoutez le UseMauiCommunityToolkitMarkup() Méthode, comme indiqué ci-dessous:
public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .UseMauiCommunityToolkitMarkup()
            ...
}

Avec cela, vous êtes prêt à créer votre première interface graphique à l’aide du balisage C #.

Simplification du code avec le balisage C #

Pour voir le marquage C # en action, commençons par créer un nouveau ContentPage classe du projet appelé MarkupPage.cs. Maintenant, supposons que vous souhaitiez convertir le code XAML suivant en son équivalent C #:

<Grid HorizontalOptions="Center" RowDefinitions="0.333*,0.333*,0.333*">

    <Label
        Grid.Row="0"
        FontSize="16"
        Text="Text 1"
        TextColor="#333"
        VerticalOptions="Center" />

    <Label
        Grid.Row="1"
        FontSize="16"
        Text="Text2"
        TextColor="#333"
        VerticalOptions="Center" />

    <Label
        Grid.Row="2"
        FontSize="16"
        Text="Text 3"
        TextColor="#333"
        VerticalOptions="Center" />
</Grid>

Le résultat de la conversion en code C # serait le suivant:

public class MarkupPage : ContentPage
{
    public MarkupPage()
    {
        var label1 = new Label
        {
            VerticalOptions = LayoutOptions.Center,
            FontSize = 16,
            Text = "Text 1",
            TextColor = Color.FromArgb("#333")
        };

        var label2 = new Label
        {
            VerticalOptions = LayoutOptions.Center,
            FontSize = 16,
            Text = "Text 2",
            TextColor = Color.FromArgb("#333")
        };

        var label3 = new Label
        {
            VerticalOptions = LayoutOptions.Center,
            FontSize = 16,
            Text = "Text 3",
            TextColor = Color.FromArgb("#333")
        };

        var grid = new Grid
        {                
            HorizontalOptions = LayoutOptions.Center,         
            RowDefinitions =
            {
                new RowDefinition { Height = new GridLength(0.333, GridUnitType.Star) },
                new RowDefinition { Height = new GridLength(0.3333, GridUnitType.Star) },
                new RowDefinition { Height = new GridLength(0.333, GridUnitType.Star) }
            }                
        };

        grid.Add(label1, 0, 0);
        grid.Add(label2, 0, 1);
        grid.Add(label3, 0, 2);

        Content = grid;            
    }
}

Il est important de noter qu’il n’est pas nécessaire d’utiliser le balisage C # pour créer des interfaces graphiques avec C # comme je vous l’ai déjà montré, bien que l’utilisation fournit des utilitaires pour simplifier le code et le rendre plus compact.

Par exemple, si vous visitez la section sur Extensions de grille Dans la documentation, vous verrez que la boîte à outils offre diverses façons de créer les mêmes fonctionnalités de manière plus simple.

L’une de ces façons est l’utilisation du Define méthode, qui fait partie du Columns et Rows classes. Cette méthode prend, dans l’une de ses surcharges, un params ReadOnlySpan Tapez avec un GridLength générique, ce qui signifie que nous pouvons créer toutes les lignes et colonnes en utilisant les termes Auto, Star, Stars(starValue)et toute valeur absolue qui définit une largeur ou une hauteur.

Avec les connaissances ci-dessus, nous pourrions simplifier la création de la grille comme suit:

var grid = new Grid
{                
    HorizontalOptions = LayoutOptions.Center,                   
    RowDefinitions = Rows.Define(Stars(0.333), Stars(0.3333), Stars(0.333))
};

Un autre ensemble de méthodes très utiles peut être trouvée dans le Extensions d’élémentqui sont une collection de méthodes d’extension pour configurer des propriétés telles que le rembourrage, les effets, les attributs de police, les ressources dynamiques, le texte, la couleur du texte, etc.

De plus, le Extensions de textrage vous permettez de positionner rapidement les éléments tout au long des dispositions. La combinaison de plusieurs méthodes d’extension nous permet d’utiliser un chaînage de méthode pour recréer des contrôles de type étiquette de manière simplifiée:

var label1 = new Label()
    .FontSize(16)
    .TextColor(Color.FromArgb("#333"))
    .Text("Text 1")
    .CenterVertical();

var label2 = new Label()
    .FontSize(16)
    .TextColor(Color.FromArgb("#333"))
    .Text("Text 2")
    .CenterVertical();

var label3 = new Label()
    .FontSize(16)
    .TextColor(Color.FromArgb("#333"))
    .Text("Text 3")
    .CenterVertical();

Le résultat de l’exécution de l’application est le suivant:

Une application simple créée à l'aide de C # Marquage

Liaison des données à l’aide du balisage C #

Un autre ensemble de méthodes utiles est ceux qui vous aident à effectuer la liaison des données. Par exemple, supposons que vous ayez une vue comme celle suivante:

<Border
    Background="LightBlue"
    HeightRequest="500"
    StrokeShape="RoundRectangle 12"
    WidthRequest="250">
    <Grid HorizontalOptions="Center" RowDefinitions="*,*,*,*">
        <Entry
            Grid.Row="0"
            FontSize="16"
            HorizontalTextAlignment="Center"
            Text="{Binding Number1}"
            TextColor="#333"
            VerticalOptions="Center" />

        <Entry
            Grid.Row="1"
            FontSize="16"
            HorizontalTextAlignment="Center"
            Text="{Binding Number2}"
            TextColor="#333"
            VerticalOptions="Center" />

        <Entry
            Grid.Row="2"
            FontSize="16"
            HorizontalTextAlignment="Center"
            Text="{Binding Result}"
            TextColor="#333"
            VerticalOptions="Center" />

        <Button
            Grid.Row="3"
            Command="{Binding AddNumbersCommand}"
            FontSize="16"
            Text="Calculate"
            TextColor="#333"
            VerticalOptions="Center" />
    </Grid>
</Border>

Le code ci-dessus est lié au modèle de vue suivant:

public partial class MainViewModel : ObservableObject
{
    [ObservableProperty]
    int number1 = 25;
    [ObservableProperty]
    int number2 = 25;
    [ObservableProperty]
    int result = 50;

    [RelayCommand]
    public void AddNumbers()
    {
        Result = Number1 + Number2;
    }
}

Maintenant, la conversion du code XAML en code C # en utilisant le balisage C # pour la création d’objets résulte des éléments suivants:

public MarkupPage()
{            
    var viewModel = new MainViewModel();
    var entry1 = new Entry()
        .FontSize(16)
        .TextCenterHorizontal()
        .TextColor(Color.FromArgb("#333"))
        .CenterVertical();
    entry1.SetBinding(Entry.TextProperty, new Binding(nameof(MainViewModel.Number1), source: viewModel));                        

    var entry2 = new Entry()
        .FontSize(16)
        .TextCenterHorizontal()
        .TextColor(Color.FromArgb("#333"))
        .CenterVertical();
    entry2.SetBinding(Entry.TextProperty, new Binding(nameof(MainViewModel.Number2), source: viewModel));                        

    var entryResult = new Entry()
        .FontSize(16)
        .TextCenterHorizontal()
        .TextColor(Color.FromArgb("#333"))
        .CenterVertical();
    entryResult.SetBinding(Entry.TextProperty, new Binding(nameof(MainViewModel.Result), source: viewModel));                        

    var calculateButton = new Button()
        .FontSize(16)
        .Text("Calculate")
        .TextColor(Color.FromArgb("#333"))
        .CenterVertical();
    calculateButton.SetBinding(Button.CommandProperty, new Binding(nameof(MainViewModel.AddNumbersCommand), source: viewModel));                        

    var grid = new Grid
    {
        HorizontalOptions = LayoutOptions.Center,
        RowDefinitions = Rows.Define(Star, Star, Star, Star)
    };

    grid.Children.Add(entry1);
    Grid.SetRow(entry1, 0);

    grid.Children.Add(entry2);
    Grid.SetRow(entry2, 1);

    grid.Children.Add(entryResult);
    Grid.SetRow(entryResult, 2);

    grid.Children.Add(calculateButton);
    Grid.SetRow(calculateButton, 3);

    var border = new Border()
    {
        StrokeShape = new RoundRectangle { CornerRadius = 12 },
        Content = grid
    }
    .BackgroundColor(Colors.LightBlue)
    .Height(500)
    .Width(250);

    Content = new StackLayout()
    {
        Children = { border }                
    }
    .CenterVertical()
    .CenterHorizontal();

    BindingContext = viewModel;
}

Vous pouvez voir que les liaisons sont appliquées une fois l’objet créé. C # Marquage nous permet de concaténer le Bind Méthode pour créer des liaisons pendant la création d’objets, comme suit:

var viewModel = new MainViewModel();
var entry1 = new Entry()
    .FontSize(16)
    .TextCenterHorizontal()
    .TextColor(Color.FromArgb("#333"))
    .CenterVertical()
    .Bind(Entry.TextProperty,
        source: viewModel,
        getter: static (MainViewModel vm) => vm.Number1,
        setter: static (MainViewModel vm, int value) => vm.Number1 = value);

var entry2 = new Entry()
    .FontSize(16)
    .TextCenterHorizontal()
    .TextColor(Color.FromArgb("#333"))
    .CenterVertical()
    .Bind(Entry.TextProperty,
        source: viewModel,
            getter: static (MainViewModel vm) => vm.Number2,
        setter: static (MainViewModel vm, int value) => vm.Number2 = value);            

var entryResult = new Entry()
    .FontSize(16)
    .TextCenterHorizontal()
    .TextColor(Color.FromArgb("#333"))
    .CenterVertical()
    .Bind(Entry.TextProperty,
        source: viewModel,
        getter: static (MainViewModel vm) => vm.Number2,
        setter: static (MainViewModel vm, int value) => vm.Number2 = value);
entryResult.SetBinding(Entry.TextProperty, new Binding(nameof(MainViewModel.Result), source: viewModel));

Dans le cas de la commande, nous pouvons le lier de manière similaire en utilisant le Bind méthode:

var calculateButton = new Button()
    .FontSize(16)
    .Text("Calculate")
    .TextColor(Color.FromArgb("#333"))
    .CenterVertical()
    .Bind(Button.CommandProperty,
        source: viewModel,
        getter: static (MainViewModel vm) => vm.AddNumbersCommand,
        mode: BindingMode.OneTime);

Maintenant, vous pourriez penser que la création de liaisons semble tout aussi laborieuse que de définir la liaison de la première façon. Cependant, le Bind La méthode contient plusieurs surcharges pour effectuer des opérations telles que la définition des convertisseurs, plusieurs liaisons, des liaisons gestuelles, etc. Par exemple, imaginez que vous avez défini un convertisseur qui renvoie une couleur basée sur une valeur d’entrée:

internal class BackgroundConverter : IValueConverter
{
    public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
    {
        int number = (int)value!;
        if(number < 100)
        {
            return Colors.DarkRed;
        }
        else if (number < 200)
        {
            return Colors.DarkOrange;
        }
        else if (number < 300)
        {
            return Colors.DarkGreen;
        }
        else
        {
            return Colors.DarkBlue;
        }
    }
    ...
}

Si vous vouliez ajouter le convertisseur aux entrées, tout ce que vous avez à faire est d’utiliser le Bind Méthode à nouveau pour se lier au BackgroundColor propriété en utilisant BackgroundConvertercomme suit:

var entry1 = new Entry()
    .FontSize(16)
    .TextCenterHorizontal()
    .TextColor(Color.FromArgb("#333"))
    .CenterVertical()
    .Bind(Entry.TextProperty,
        source: viewModel,
        getter: static (MainViewModel vm) => vm.Number1,
        setter: static (MainViewModel vm, int value) => vm.Number1 = value)
    .Bind(Entry.BackgroundColorProperty,
        source: viewModel,
        path: nameof(MainViewModel.Number1),
        converter: new BackgroundConverter());

Après avoir exécuté l’application ci-dessus, nous obtiendrons la pleine fonctionnalité des liaisons comme indiqué dans l’exemple suivant:

Utilisation de la liaison des données via le balisage C #

Autres méthodes intéressantes utilisant le balisage C #

Les méthodes que je vous ai montrées ci-dessus ne sont qu’une partie de l’ensemble total de méthodes disponibles dans la boîte à outils communautaire. Nous avons des méthodes de travail avec des dispositions disponibles dans AbsoluteLayout Extensions, Extensions de liaison et Extensions Flexlayout.

Vous pouvez également trouver des méthodes d’extension pour travailler avec des thèmes et des ressources dans Extensions DynamicResourceHandler et Extensions de style.

Enfin, des méthodes sont également disponibles pour travailler avec des contrôles Extensions d’image, Extensions de vue d’éléments, Extensions d’étiquette, Extensions d’espace réservé et Extensions de l’élément visuel.

Conclusion

Tout au long de cet article, vous avez vu comment le balisage C # peut simplifier la création d’interfaces en utilisant C # via le chaînage de méthodes d’extension. Vous avez vu des comparaisons entre la création d’UIS à l’aide du code XAML, du code C # standard et de la marque C #, qui vous a donné une meilleure perspective sur son utilisation.

Le meilleur outil 2023 pour ta croissance Instagram !



Source link