Explorer le bouton modèle Telerik .NET MAUI

L’interface utilisateur Telerik pour .NET MAUI TemplatedButton vous offre un contrôle détaillé sur le style des boutons de votre application, y compris quatre états de contrôle.

Dans cet article, nous explorerons l’un des derniers boutons de Progress Telerik pour .NET MAUI, le Bouton modèle .NET MAUI. Ce bouton nous permet de personnaliser un bouton autant que nous le souhaitons pour l’adapter parfaitement au design que nous souhaitons mettre en œuvre. Vérifions-le !

Utilisation de la forme la plus basique de .NET MAUI TemplatedButton

Pour utiliser le contrôle .NET MAUI TemplatedButton, vous devez ajouter la référence au Telerik Contrôles .NET MAUI Package NuGet, comme vous pouvez le voir dans le documentation. Une fois la référence ajoutée, vous devez appeler le UseTelerik méthode dans MauiProgram.cs:

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseTelerik()
            ...
    }
}

Ensuite, vous devez accéder à la page sur laquelle vous souhaitez utiliser TemplatedButton et ajouter l’espace de noms correspondant :

<ContentPage ...
             xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui">
            ...            
</ContentPage>

Une fois l’espace de noms prêt, vous pouvez maintenant utiliser le contrôle TemplatedButton, qui, dans sa forme la plus basique, est utilisé comme ceci :

    <VerticalStackLayout HorizontalOptions="Center">
        <telerik:RadTemplatedButton
            x:Name="templatedButton"
            Content="Demo App"
            HeightRequest="100"
            WidthRequest="250" />
    </VerticalStackLayout>

Lorsque vous démarrez l’application avec ce code, vous verrez le contrôle dans sa forme la plus simple :

Peut-être qu’à ce stade, vous ne voyez pas beaucoup de différence par rapport à un bouton .NET MAUI standard, examinons donc les différentes façons de manipuler le contenu du TemplatedButton.

Options de personnalisation par défaut pour un TemplatedButton

Le contrôle TemplatedButton dispose de plusieurs options de personnalisation par défaut que nous verrons ensuite.

Propriétés de personnalisation du TemplatedButton

Les propriétés d’un TemplatedButton sont les suivantes :

• Arrière-plan et Couleur d’arrière-plan: Permet de spécifier la couleur de fond du champ.
• BordureBrosse et Couleur de la bordure: Permet de spécifier la couleur de la bordure du champ.
• Épaisseur de la bordure: Permet de préciser l’épaisseur de la bordure du champ.
• Rayon de coin: Permet de spécifier un arrondi du contour du champ.
• Rembourrage: Vous permet de spécifier le remplissage dans le contrôle.
• Couleur du texte: Permet de spécifier une couleur pour le texte du contrôle.

L’exemple suivant montre comment utiliser certaines de ces propriétés dans le contrôle :

<telerik:RadTemplatedButton
    x:Name="templatedButton9"
    BorderBrush="LightBlue"
    BorderThickness="3"
    Content="Demo App"
    CornerRadius="8"
    HeightRequest="100"
    TextColor="White"
    WidthRequest="250">
    <telerik:RadTemplatedButton.Background>
        <LinearGradientBrush>
            <GradientStop Offset="0.1" Color="SteelBlue" />
            <GradientStop Offset="1" Color="Navy" />
        </LinearGradientBrush>
    </telerik:RadTemplatedButton.Background>
</telerik:RadTemplatedButton>

La configuration ci-dessus entraîne le rendu du TemplatedButton comme suit :

Il est important de noter qu’il est également possible d’ajouter ces propriétés à un dictionnaire de ressources pour appliquer un style avec les mêmes propriétés à plusieurs TemplatedButtons, comme indiqué ci-dessous :

<Style x:Key="CustomTemplatedButtonStyle" TargetType="telerik:RadTemplatedButton">
    <Setter Property="BorderBrush" Value="LightBlue" />
    <Setter Property="BorderThickness" Value="3" />        
    <Setter Property="CornerRadius" Value="8" />        
    <Setter Property="TextColor" Value="White" />        
    <Setter Property="Background">
        <Setter.Value>
            <LinearGradientBrush>
                <GradientStop Offset="0.1" Color="SteelBlue" />
                <GradientStop Offset="1" Color="Navy" />
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
</Style>

En utilisant le style ci-dessus, nous obtiendrons le même bouton mais de manière plus simplifiée :

<telerik:RadTemplatedButton
    x:Name="templatedButton9"
    Content="Demo App"
    Style="{StaticResource CustomTemplatedButtonStyle}"
    HeightRequest="100"
    WidthRequest="250" />

Voyons maintenant comment modifier l’effet Ripple du contrôle.

Appliquer un effet d’entraînement

Il est possible de manipuler l’effet Ripple d’un TemplatedButton via le RippleColor et RippleMode propriétés. Le premier nous permettra de spécifier une couleur différente pour l’effet Ripple, tandis que le second nous permettra de manipuler le comportement à travers les valeurs suivantes :

• Impulsion (par défaut) : un effet d’ondulation est produit lorsque le bouton est enfoncé, qui s’estompe immédiatement.
• Prise: Un effet d’ondulation est produit lorsque le bouton est enfoncé. Si le bouton est maintenu enfoncé, l’effet est également conservé.
• Aucun: Aucun effet d’ondulation n’est produit.

Vous trouverez ci-dessous un exemple avec les propriétés ci-dessus modifiées :

<telerik:RadTemplatedButton
    x:Name="templatedButton"
    telerik:RadEffects.RippleColor="LightPink"
    telerik:RadEffects.RippleMode="Hold"
    Content="Demo App"
    HeightRequest="100"
    WidthRequest="250" />

Le code ci-dessus donne le contrôle suivant, que j’ai maintenu enfoncé :

Vous pouvez voir que l’effet Ripple est maintenu en raison de la Hold valeur de la RippleMode propriété.

Différentes façons de configurer le contenu

Maintenant que nous avons analysé les propriétés qui permettent la personnalisation via différentes propriétés, analysons comment nous pouvons modifier le ControlTemplate d’un TemplatedButton, qui est la structure visuelle du contrôle.

Spécifier que le contenu est une chaîne

La manière la plus simple de personnaliser un TemplatedButton consiste à attribuer une chaîne de texte comme contenu du contrôle. C’est ce que nous avons fait dans les exemples précédents, en attribuant la chaîne Application de démonstration au Content propriété. Cette façon d’attribuer du contenu entraîne l’affichage d’une étiquette comme ControlTemplate du contrôle tant que le ContentTemplate la propriété n’est pas spécifiée, comme nous le verrons plus tard.

Spécifier que le contenu est un objet

Une manière très similaire de spécifier des informations consiste à attribuer un objet au Content propriété, ce qui entraînera la ToString méthode de l’objet à appeler afin que son résultat soit affiché sous forme de Label dans le contrôle. Par exemple, supposons que nous ayons le modèle suivant :

public class Person
{
    public string FirstName { get; set; }
    public string LastName { get; set; }

    public override string ToString()
    {
        return $"My name is {FirstName} {LastName}";
    }
}

Nous pouvons l’initialiser et l’utiliser comme suit :

<ContentPage ...>
    <ContentPage.Resources>
        ...
        <local:Person
            x:Key="name"
            FirstName="Héctor"
            LastName="Pérez" />
    </ContentPage.Resources>
    
    <VerticalStackLayout HorizontalOptions="Center" Spacing="10">
        <telerik:RadTemplatedButton
            x:Name="templatedButton4"
            Content="{StaticResource name}"
            HeightRequest="100"
            WidthRequest="250" />
    </VerticalStackLayout>

Cela affichera le contenu du ToString méthode comme suit :

Voyons maintenant comment modifier le ContentTemplate propriété pour personnaliser le contrôle en fonction de nos besoins.

Spécification d’un ContentTemplate comme contenu du TemplatedButton

L’une des façons de tirer le meilleur parti du contrôle TemplatedButton consiste à personnaliser le ContentTemplate propriété. Cela nous permet de créer des boutons inhabituels qui s’adaptent mieux à l’identité d’une application, qui peut être aussi complexe que nécessaire.

Par exemple, supposons que vous deviez ajouter une ombre sombre à vos boutons. En personnalisant le ContentTemplate propriété, nous pouvons ajouter deux rectangles et une étiquette pour atteindre cet objectif :

<telerik:RadTemplatedButton
    x:Name="templatedButton2"
    Padding="0"
    Background="Transparent"
    HeightRequest="100"
    WidthRequest="250">
    <telerik:RadTemplatedButton.ContentTemplate>
        <DataTemplate>
            <Grid>
                <RoundRectangle
                    Margin="10,10,0,0"
                    CornerRadius="8"
                    Fill="#085E7D" />
                <RoundRectangle
                    Margin="0,0,10,10"
                    CornerRadius="8"
                    Fill="#AFE9FD"
                    Stroke="#085E7D"
                    StrokeThickness="2" />
                <Label
                    FontAttributes="Bold"
                    FontSize="20"
                    HorizontalOptions="Center"
                    Text="Click Me!"
                    TextColor="#085E7D"
                    VerticalOptions="Center" />
                <Grid>
                    <RoundRectangle
                        Margin="10,10,0,0"
                        CornerRadius="8"
                        Fill="#800080" />
                    <RoundRectangle
                        Margin="0,0,10,10"
                        CornerRadius="8"
                        Fill="#CDA4DE"
                        Stroke="#800080"
                        StrokeThickness="2" />
                    <Label
                        FontAttributes="Bold"
                        FontSize="20"
                        HorizontalOptions="Center"
                        Text="Click Me!"
                        TextColor="#800080"
                        VerticalOptions="Center" />
                </Grid>
            </Grid>
        </DataTemplate>
    </telerik:RadTemplatedButton.ContentTemplate>
</telerik:RadTemplatedButton>

Avec cela, nous obtenons un bouton comme celui de l’image suivante :

Comme vous pouvez le constater, il est très simple de personnaliser un TemplatedButton autant que nous le souhaitons. Voyons maintenant quels événements et commandes sont disponibles dans le contrôle.

Événements et commandes disponibles dans TemplatedButton

Le contrôle TemplatedButton comporte trois événements que nous pouvons utiliser pour effectuer des opérations lorsqu’elles sont déclenchées : Clicked, Pressed et Released.

Le Clicked et Pressed les événements sont très similaires dans la mesure où les deux sont déclenchés dès que la commande est enfoncée d’une manière ou d’une autre. Ces événements peuvent être très utiles pour effectuer certains traitements ou validations avant de réaliser l’exécution d’une opération.

D’un autre côté, le Released L’événement est déclenché une fois que le TemplatedButton a cessé d’être enfoncé. Cet événement pourrait être utile pour certains post-traitements, comme arrêter d’afficher un Loader ou activer/désactiver un autre contrôle.

Dans l’exemple suivant, je montre un TemplatedButton avec les événements ajoutés :

<telerik:RadTemplatedButton
    x:Name="templatedButton6"
    Clicked="templatedButton6_Clicked"
    Content="Demo App"
    HeightRequest="100"
    Pressed="templatedButton_Pressed"
    Released="templatedButton_Released"
    WidthRequest="250" />

Dans le code derrière, nous aurions les gestionnaires d’événements comme suit :

private async void templatedButton_Pressed(object sender, EventArgs e)
{
    await DisplayAlert("Button Pressed", "The button was pressed", "OK");
}

private async void templatedButton_Released(object sender, EventArgs e)
{
    await DisplayAlert("Button Released", "The button was released", "OK");
}

private async void templatedButton6_Clicked(object sender, EventArgs e)
{
    await DisplayAlert("Button Clicked", "The button was clicked", "OK");
}

Dans le cas où vous souhaitez communiquer avec un View Model, nous avons également le Command propriété qui permet d’exécuter une commande lorsque le bouton est cliqué, tandis que le CommandParameter La propriété permet d’envoyer un paramètre supplémentaire à la commande. La définition du Command et CommandParameter les propriétés ressemblent à ceci :

<telerik:RadTemplatedButton
    x:Name="templatedButton7"
    Command="{Binding ButtonClickedCommand}"
    CommandParameter="Héctor"
    Content="Demo App"
    HeightRequest="100"
    WidthRequest="250" />

La définition de la commande doit être définie dans le ViewModel comme dans l’exemple suivant :

public partial class MainViewModel : ObservableObject
{
    [RelayCommand]
    public void ButtonClicked(string data)
    {
        Debug.WriteLine($"Hello {data}");
    }
}

Définir les états visuels

Dans .NET MAUI, il est possible de définir différentes apparences visuelles pour chaque état d’un contrôle. Dans un TemplatedButton, nous avons quatre états visuels possibles :

• Normale: Lorsqu’un bouton n’est pas enfoncé
• Pressé: Lorsqu’un bouton est enfoncé
• Pointeur sur: Disponible uniquement dans les applications de bureau et se produit lorsque nous passons le curseur sur le bouton
• Désactivé: Lorsqu’un bouton est désactivé

Nous pouvons définir les états visuels dans différentes parties de notre code. L’exemple suivant montre comment les définir dans un style à appliquer à plusieurs instances d’un TemplatedButton :

<ContentPage ...>
    <ContentPage.Resources>
        ...
        <Color x:Key="ButtonPrimaryTC">#FFFFFF</Color>
        <Color x:Key="ButtonPrimaryDefaultBG">#7E49FF</Color>
        <Color x:Key="ButtonPrimaryPressedBG">#681EE3</Color>
        <Color x:Key="ButtonPrimaryDisabledBG">#F1F5F9</Color>
        <Color x:Key="ButtonPrimaryDisabledTC">#CBD5E1</Color>

        <Style x:Key="CustomButtonStyle" TargetType="telerik:RadTemplatedButton">
            <Setter Property="VisualStateManager.VisualStateGroups">
                <Setter.Value>
                    <VisualStateGroupList>
                        <VisualStateGroup Name="CommonStates">
                            <VisualState x:Name="Normal">
                                <VisualState.Setters>
                                    <Setter Property="Scale" Value="1" />
                                    <Setter Property="Background" Value="{StaticResource ButtonPrimaryDefaultBG}" />
                                    <Setter Property="TextColor" Value="{StaticResource ButtonPrimaryTC}" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState Name="PointerOver">
                                <VisualState.Setters>
                                    <Setter Property="Background" Value="#E8F5F4" />
                                    <Setter Property="TextColor" Value="#000000" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <VisualState.Setters>
                                    <Setter Property="Scale" Value="0.95" />
                                    <Setter Property="Background" Value="{StaticResource ButtonPrimaryPressedBG}" />
                                    <Setter Property="TextColor" Value="{StaticResource ButtonPrimaryTC}" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <VisualState.Setters>
                                    <Setter Property="TextColor" Value="{StaticResource ButtonPrimaryDisabledTC}" />
                                    <Setter Property="BackgroundColor" Value="{StaticResource ButtonPrimaryDisabledBG}" />
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateGroupList>
                </Setter.Value>
            </Setter>
        </Style>
    </ContentPage.Resources>

    <VerticalStackLayout HorizontalOptions="Center" Spacing="10">
        ...
        <telerik:RadTemplatedButton
            x:Name="templatedButton8"
            Content="Demo App"
            CornerRadius="8"
            HeightRequest="100"
            Style="{StaticResource CustomButtonStyle}"
            WidthRequest="250" />
    </VerticalStackLayout>
</ContentPage>    

Dans l’exemple ci-dessus, les états visuels permettront à un TemplatedButton de changer à la fois la couleur et la taille lorsqu’il est enfoncé, élargissant ainsi les options de personnalisation du contrôle.

Conclusion

Dans cet article, nous avons exploré en détail le contrôle TemplatedButton, ainsi que ses différentes options de personnalisation qui vous permettront de l’ajuster aux exigences de conception de vos applications .NET MAUI.

Essayez ce composant, ainsi que la liste croissante de contrôles disponibles, avec l’essai gratuit de l’interface utilisateur Telerik pour .NET MAUI.

Essayez maintenant