Personnalisation et intégration de Telerik Slider dans .NET MAUI

Découvrez comment vous pouvez utiliser le nouveau contrôle Telerik .NET MAUI Slider pour l’adapter à vos propres applications mobiles.

Dans cet article, je vais vous parler du récemment lancé Curseur .NET MAUI contrôle de Progress Telerik, qui permettra aux utilisateurs de vos applications de sélectionner facilement des valeurs. Commençons !

Ajout du contrôle Telerik Slider pour .NET MAUI

La première chose à faire pour utiliser le contrôle Telerik Slider dans un projet est d’installer les contrôles en suivant les guide d’installation officiel.

Dans mon cas, je vais suivre le chemin des packages NuGet locaux et ajouter le package NuGet à mon projet. Une fois que vous avez fait cela, allez dans MauiProgram.cs fichier et ajoutez l’invocation au UseTelerik méthode:

using Telerik.Maui.Controls.Compatibility;

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

Ensuite, vous pouvez accéder à la page sur laquelle vous souhaitez utiliser le contrôle et l’ajouter sous sa forme la plus simple possible :

<ContentPage...>
    <telerik:RadSlider x:Name="slider">
    ...
<ContentPage/>    

Enfin, pour éviter les problèmes de références, ajoutez l’espace de noms pointant vers les contrôles Telerik comme indiqué ci-dessous :

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

Lors de l’exécution de l’application, nous pourrons voir le contrôle Slider à l’écran montrant ses fonctionnalités de base, que nous améliorerons tout au long de cet article :

Maintenant que vous savez comment ajouter le composant à une page XAML, intégrons quelques Sliders dans un exemple d’application très simple. Tout d’abord, le code XAML sera le suivant :

<VerticalStackLayout
    HorizontalOptions="Center"
    Spacing="20"
    VerticalOptions="Center">
    <Label
        FontAttributes="Bold"
        FontSize="24"
        HorizontalOptions="Center"
        Text="BMI Calculator"
        TextColor="White" />
    <Frame
        Padding="20"
        BackgroundColor="White"
        CornerRadius="10"
        HasShadow="True"
        WidthRequest="300">
        <VerticalStackLayout Spacing="15">
            <Label
                FontSize="18"
                Text="Height (cm)"
                TextColor="#666" />
            <telerik:RadSlider
                x:Name="heightSlider"/>
            <Label
                FontSize="18"
                Text="Weight (kg)"
                TextColor="#666" />
            <telerik:RadSlider
                x:Name="weightSlider"/>
            <Button
                Padding="10"
                BackgroundColor="#007aff"
                CornerRadius="5"
                HorizontalOptions="Center"
                Text="Calculate BMI"
                TextColor="White" />
        </VerticalStackLayout>
    </Frame>

    <Label
        x:Name="resultLabel"
        FontSize="18"
        HorizontalOptions="Center"
        HorizontalTextAlignment="Center"
        Text="Your BMI will be displayed here."
        TextColor="White" />
</VerticalStackLayout>

Le résultat de l’exécution de l’application avec le code ci-dessus est le suivant :

Maintenant que nous disposons d’une application prête à présenter l’utilisation des Sliders dans un cas pratique, voyons comment les personnaliser.

Apprendre à connaître les parties du contrôle de curseur Telerik .NET MAUI

Il faut savoir que le contrôle Telerik Slider est hautement personnalisable. Pour votre référence sur les parties qui composent le contrôle Slider, je vous laisse avec une image de la documentation Telerik qui montre son anatomie :

Voyons maintenant comment personnaliser les éléments qui composent le contrôle.

Travailler avec des valeurs de curseur

L’une des premières choses que vous souhaitez faire avec un contrôle Slider est sûrement de définir une valeur maximale et minimale pour la barre de défilement, ainsi que pour la valeur Slider.

Ceci est facile à réaliser en utilisant le Minimum, Maximum et Value propriétés, avec la valeur du Value la propriété étant celle que nous utiliserons pour effectuer une opération.

Ci-dessous, nous modifions les propriétés susmentionnées pour mieux correspondre aux valeurs d’un calculateur d’indice de masse corporelle, en plus d’ajouter un gestionnaire d’événements appelé CalculateBMI_Clicked au bouton pour effectuer le calcul de l’indice de masse corporelle :

...
<telerik:RadSlider
    x:Name="heightSlider"
    Maximum="250"
    Minimum="50"
    Value="178" />
    ...
<telerik:RadSlider
    x:Name="weightSlider"
    Maximum="150"
    Minimum="30"
    Value="68" />
<Button
    Padding="10"
    BackgroundColor="#007aff"
    Clicked="CalculateBMI_Clicked"
    CornerRadius="5"
    HorizontalOptions="Center"
    Text="Calculate BMI"
    TextColor="White" />
...

Une fois les propriétés définies, modifions le code derrière pour travailler avec le Value propriété des Sliders comme suit :

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
    }

    private void CalculateBMI_Clicked(object sender, EventArgs e)
    {
        CalculateBMI();
    }

    private void CalculateBMI()
    {
        
        double heightInMeters = heightSlider.Value / 100; 
        double weightInKg = weightSlider.Value;

        
        double bmi = weightInKg / (heightInMeters * heightInMeters);

        
        string category;
        if (bmi < 18.5)
        {
            category = "Underweight";
        }
        else if (bmi >= 18.5 && bmi < 24.9)
        {
            category = "Normal weight";
        }
        else if (bmi >= 25 && bmi < 29.9)
        {
            category = "Overweight";
        }
        else
        {
            category = "Obese";
        }

        
        resultLabel.Text = $"Your BMI is {bmi:F2}.\n Category: {category}";
    }
}

Avec les modifications apportées, en lançant l’application et en appuyant sur le bouton, on obtiendra le résultat dans un champ Label :

Voyons maintenant comment personnaliser l’apparence des Sliders.

Modifier l’apparence et le comportement du pouce

Le pouce (le curseur de valeur du curseur) du curseur Telerik .NET MAUI peut être modifié via le ThumbFill et ThumbStyle propriétés.

Le ThumbFill La propriété vous permet de modifier rapidement la Fill du contrôle à une couleur unie, tandis que ThumbStyle permet une plus grande personnalisation en vous permettant de modifier le Fill, Stroke et StrokeThickness grâce à l’utilisation d’un style comme le montre l’exemple suivant :

<ContentPage.Resources>
    <Style x:Key="CustomThumbStyle" TargetType="telerik:SliderThumb">
        <Setter Property="Fill" Value="Salmon" />
        <Setter Property="Stroke" Value="DarkRed" />
        <Setter Property="StrokeThickness" Value="5" />
    </Style>
</ContentPage.Resources>

<VerticalStackLayout
    HorizontalOptions="Center"
    Spacing="20"
    VerticalOptions="Center">
    ...
        <telerik:RadSlider
            ThumbFill="DarkRed" .../>
            ...
        <telerik:RadSlider ...
            ThumbStyle="{StaticResource CustomThumbStyle}"/>
</VerticalStackLayout>    

Lors de l’exécution du code ci-dessus, nous pouvons voir les Sliders modifiés avec les valeurs appliquées :

Une autre personnalisation que nous pouvons appliquer au pouce consiste à spécifier le mode glisser. Cette propriété nous permet d’indiquer comment nous allons permettre à l’utilisateur de sélectionner une position sur la piste, en pouvant spécifier les valeurs suivantes :

• Thumb: Si le pouce est déplacé, il se déplacera le long de la piste.
• Free: Si l’utilisateur appuie sur n’importe quelle position de la piste, le pouce se déplacera vers cette position.
• Disabled: Le pouce ne bougera pas et sa position sera fixe.

Ajustement des styles et du comportement du Backtrack et du Range Track

Sur la dernière image, vous avez pu voir que nous avons modifié la couleur du pouce. Cependant, les couleurs de la barre de défilement n’ont pas de couleur correspondante, nous devons donc les modifier.

Avant de faire cela, il est important que vous sachiez que le contrôle Slider a le OriginValue propriété, qui indique la position initiale de la piste de distance et qui est affectée par défaut à la Minimum valeur du retour en arrière. Il est utile de modifier cette propriété lorsque nous devons afficher des nombres négatifs sur le curseur, mais que nous voulons que la valeur d’origine reste 0.

Nous pouvons modifier les couleurs à la fois du backtrack (la ligne le long de laquelle le pouce se déplace) et de la range track (la ligne entre le OriginValue et Value). Nous pouvons le faire avec le BackTrackThickness et BackTrackColor propriétés pour modifier le retour en arrière, ainsi que les RangeTrackFill propriété pour modifier la piste de plage.

Si nous voulons plus de personnalisation, nous pouvons utiliser le BackTrackStyle et RangeTrackStyle propriétés qui nous permettent d’utiliser un style personnalisé. Ci-dessous, je vous montre un exemple d’utilisation avec les deux approches :

<ContentPage.Resources>
    ...
    <Style x:Key="CustomBackTrackStyle" TargetType="telerik:RadBorder">
        <Setter Property="BorderColor" Value="#333" />
        <Setter Property="BackgroundColor" Value="#D1D1D2" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="CornerRadius" Value="4" />
        <Setter Property="HeightRequest" Value="8" />
    </Style>
    <Style x:Key="CustomRangeTrackStyle" TargetType="telerik:SliderRangeTrack">
        <Setter Property="Stroke" Value="DarkRed" />
        <Setter Property="CornerRadius" Value="4" />
        <Setter Property="StrokeThickness" Value="1" />
        <Setter Property="TrackThickness" Value="8" />
        <Setter Property="Fill" Value="Salmon" />
    </Style>
</ContentPage.Resources>
 <VerticalStackLayout ...>
    <telerik:RadSlider
        BackTrackColor="#FFE6E2"
        BackTrackThickness="3"
        RangeTrackFill="#650003"
        .../>
    ...
    <telerik:RadSlider
        BackTrackStyle="{StaticResource CustomBackTrackStyle}"        
        RangeTrackStyle="{StaticResource CustomRangeTrackStyle}"
        .../>
    ...

</VerticalStackLayout>     

En appliquant les modifications ci-dessus, nous constatons que les couleurs sont plus uniformes dans tout le curseur, comme indiqué ci-dessous :

Voyons ensuite comment ajouter des indicateurs visuels aux curseurs.

Sans aucun doute, l’ajout de références visuelles permettant aux utilisateurs de reconnaître les valeurs d’un Slider dès qu’ils le voient est quelque chose que vous souhaiterez faire dans vos applications. Voyons comment les ajouter ci-dessous.

Ajout et réglage des graduations du curseur .NET MAUI

Pour ajouter des graduations au curseur, il suffit d’ajuster le TickStep propriété en premier, ce qui nous permet d’attribuer un intervalle de valeurs pour afficher une coche. D’un autre côté, le TicksPlacement La propriété spécifie où les graduations apparaîtront, les valeurs valides étant None, Start, Center et End.

Voici un exemple illustrant l’utilisation de graduations dans un contrôle Slider :

<telerik:RadSlider
    TickStep="20"
    TicksPlacement="Start"
    .../>

Lors de l’exécution du changement ci-dessus, nous pouvons voir les graduations positionnées au-dessus du curseur, car nous avons spécifié TicksPlacement comme Startainsi qu’une séparation entre les ticks de 20 unités, en raison de la TickStep propriété.

Si nous souhaitons personnaliser l’apparence des ticks, le plus simple est de créer un DataTemplate pour le TickTemplate propriété, qui nous permet de créer pratiquement n’importe quelle forme que nous voulons, comme indiqué ci-dessous :

 <ContentPage...>
    <ContentPage.Resources>
        ...
        <DataTemplate x:Key="GrayTickTemplate">
            <Rectangle
                Fill="#E0E0E0"
                HeightRequest="10"
                WidthRequest="2" />
        </DataTemplate>
    </ContentPage.Resources>
    <VerticalStackLayout...>
        ...
        <telerik:RadSlider
            TickStep="20"
            TickTemplate="{StaticResource GrayTickTemplate}"
            TicksPlacement="Start"
            .../>
    </VerticalStackLayout>
</ContentPage>

Le résultat de l’exécution du code ci-dessus peut être vu dans l’image suivante :

Il existe d’autres propriétés du contrôle Telerik Slider qui nous permettent une plus grande personnalisation du contrôle. D’abord, InRangeTickColor nous permet de spécifier une couleur pour les ticks positionnés entre les OriginValue et Valuealors que OutOrRangeTickColor nous permet de définir la couleur des autres ticks. De plus, le TickThickness et TickLength les propriétés nous permettent de définir une largeur et une hauteur pour les ticks.

Il est également possible d’attribuer des styles au InRangeTickStyle et OutOfRangeTickStyle propriétés pour définir l’apparence des curseurs. Ci-dessous, je vous montre un exemple d’utilisation des deux approches :

 <ContentPage...>
    <ContentPage.Resources>
        ...
        <Style x:Key="CustomInRangeTickStyle" TargetType="telerik:RadBorder">
            <Setter Property="BackgroundColor" Value="#DAC4FB" />
            <Setter Property="WidthRequest" Value="2" />
            <Setter Property="HeightRequest" Value="2" />
        </Style>
        <Style x:Key="CustomOutOfRangeTickStyle" TargetType="telerik:RadBorder">
            <Setter Property="BackgroundColor" Value="#6708EF" />
            <Setter Property="WidthRequest" Value="2" />
            <Setter Property="HeightRequest" Value="2" />
        </Style>
    </ContentPage.Resources>
    <VerticalStackLayout...>
        ...
        <telerik:RadSlider            
            InRangeTickColor="#650003"            
            OutOfRangeTickColor="Salmon"                        
            TickLength="10"
            TickStep="20"
            TickThickness="1"
            TicksPlacement="Start"
            .../>
            ...
        <telerik:RadSlider                      
            InRangeTickStyle="{StaticResource CustomInRangeTickStyle}"           
            OutOfRangeTickStyle="{StaticResource CustomOutOfRangeTickStyle}"           
            TickStep="10"
            TicksPlacement="Center"
            .../>
    </VerticalStackLayout>
</ContentPage>

En exécutant le code ci-dessus, vous pouvez voir que nous pouvons réaliser une conception totalement différente de la conception initiale :

Voyons maintenant comment ajouter des étiquettes aux curseurs.

Ajout d’étiquettes aux curseurs Telerik .NET MAUI

Un deuxième indicateur visuel que nous pouvons ajouter aux curseurs sont les étiquettes. Nous avons le LabelStep propriété pour indiquer l’intervalle dans lequel ils apparaîtront, et le LabelsPlacement propriété pour définir la position à travers les valeurs None, Start et End.

D’autre part, si nous devons formater les valeurs entières qui apparaissent par défaut, pour les changer en chaînes de texte, symboles, etc., nous pouvons utiliser l’option StringFormat propriété, ou le StringConverter propriété liée à une ressource statique du DictionaryStringConverter tapez avec les valeurs à montrer à l’utilisateur.

Enfin, pour modifier le Label pour changer, par exemple, la taille, la police, la couleur et d’autres propriétés d’un contrôle Label, nous pouvons le faire via le DataTemplate propriété. Ci-dessous, je vous montre un exemple d’étiquettes ajoutées aux contrôles Slider :

 <ContentPage...>
    <ContentPage.Resources>
        ...
        <telerik:DictionaryStringConverter x:Key="LowMidHighConverter">
            <telerik:DictionaryStringConverterItem Key="{x:Double 30}" Value="Min" />
            <telerik:DictionaryStringConverterItem Key="{x:Double 90}" Value="Min" />
            <telerik:DictionaryStringConverterItem Key="{x:Double 150}" Value="Max" />
        </telerik:DictionaryStringConverter>
        <DataTemplate x:Key="CustomLabelTemplate">
            <Label
                FontAttributes="Bold"
                FontSize="16"
                Text="{Binding}"
                TextColor="#674BB2" />
        </DataTemplate>
    </ContentPage.Resources>
    <VerticalStackLayout...>
        ...
        <telerik:RadSlider                        
            LabelStep="50"
            LabelTemplate="{StaticResource CustomLabelTemplate}"
            LabelsPlacement="End"            
            StringFormat="{}{0} cm"
            ... />
        ...
        <telerik:RadSlider
            LabelStep="60"
            LabelsPlacement="Start"            
            StringConverter="{StaticResource LowMidHighConverter}"
            .../>
    </VerticalStackLayout>
</ContentPage>

Le code ci-dessus nous permet d’afficher les Labels associés aux Sliders comme suit :

Personnalisation de l’info-bulle du curseur .NET MAUI

Le dernier indicateur visuel du contrôle Slider dont nous parlerons est l’info-bulle qui apparaît lorsque vous faites glisser le pouce du curseur :

Si nous souhaitons personnaliser l’info-bulle, nous pouvons le faire de différentes manières. La première consiste à appliquer un formatage à la chaîne de valeur via le TooltipStringFormat propriété.

De même, nous pouvons appliquer un DataTemplate pour modifier le contenu de l’info-bulle grâce au TooltipContentTemplate propriété. Enfin, si l’on souhaite modifier l’apparence générale de l’info-bulle, nous avons le TooltipControlTemplate propriété disponible, à laquelle nous pouvons appliquer un ControlTemplate pour personnaliser la conception de l’info-bulle. Ci-dessous, je vous montre un exemple de ces propriétés appliquées :

 <ContentPage...>
    <ContentPage.Resources>
        ...
        <DataTemplate x:Key="CustomTooltipTemplate">
            <Grid>
                <Label
                    Margin="5"
                    FontAttributes="Bold"
                    Text="{Binding FormattedValue}"
                    TextColor="{OnPlatform Default='#674BB2',
                                           Android='#ebf2b8',
                                           iOS='#f0b8f2'}" />
            </Grid>
        </DataTemplate>
        <ControlTemplate x:Key="CustomTooltipControlTemplate">
            <telerik:RadBorder Padding="8" CornerRadius="8,0,8,0">
                <telerik:RadBorder.Background>
                    <LinearGradientBrush>
                        <GradientStop Offset="0" Color="#cebef7" />
                        <GradientStop Offset="1" Color="#3d06cf" />
                    </LinearGradientBrush>
                </telerik:RadBorder.Background>
                <Label
                    FontSize="{OnPlatform iOS=13,
                                          MacCatalyst=10}"
                    Text="{Binding FormattedValue}"
                    TextColor="White" />
            </telerik:RadBorder>
        </ControlTemplate>
    </ContentPage.Resources>
    <VerticalStackLayout...>
        ...
        <telerik:RadSlider           
            TooltipContentTemplate="{StaticResource CustomTooltipTemplate}"
            .../>
        ...
        <telerik:RadSlider
            TooltipControlTemplate="{StaticResource CustomTooltipControlTemplate}"
            TooltipStringFormat="{}{0:N2}"
            .../>
    </VerticalStackLayout>
</ContentPage>

Le code ci-dessus modifie les Sliders comme suit :

Événements dans le contrôle de curseur Telerik .NET MAUI

Pour terminer l’article, sachez que vous avez à votre disposition le ValueChanging événement, qui permet de savoir quand le Value la propriété est en cours de modification. Dans notre exemple, nous allons modifier le code des sliders pour ajouter le ValueChanging événement:

<telerik:RadSlider
    ValueChanging="slider_ValueChanging"
    ... />

Dans le code ci-dessous, nous invoquerons simplement la méthode CalculateBMI pour effectuer le calcul :

private void slider_ValueChanging(object sender, Telerik.Maui.ValueChangingEventArgs e)
{
    CalculateBMI();
}

Cela entraînera l’exécution automatique du calcul à chaque fois que le pouce du curseur sera déplacé.

Conclusion

Tout au long de cet article, vous avez pu connaître en profondeur le nouveau contrôle Telerik .NET MAUI Slider pour l’adapter à vos propres applications mobiles. C’est à votre tour de créer des applications fantastiques à l’aide des commandes Telerik !

Essayez l’interface utilisateur Telerik pour .NET MAUI