L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2025 !
Simplifier les choix des utilisateurs avec .NET MAUI ToggleButton
Découvrez comment utiliser l’interface utilisateur Telerik pour .NET MAUI ToggleButton pour ajouter des états de bascule clairs et simples dans votre application .NET MAUI.
Dans cet article, je vais vous dire ce que vous devez savoir pour travailler avec Progress récemment lancé. Interface utilisateur Telerik pour .NET MAUI Contrôle ToggleButton dans vos applications .NET MAUI. Ce contrôle permettra à vos utilisateurs de choisir entre les états basculés ou non basculés d’une manière visuelle très simple. Faisons connaissance!
Mise en place du projet initial
Pour utiliser le Bouton à bascule .NET MAUI contrôle dans vos applications, vous pouvez suivre les guide d’installation dans la documentation Telerik. Dans mon cas, comme j’ai opté pour l’option d’installation du package NuGet, je vais les ajouter au projet et exécuter le UseTelerik méthode dans MauiProgram.cscomme on le voit ci-dessous :
public static class MauiProgram
{
public static MauiApp CreateMauiApp()
{
var builder = MauiApp.CreateBuilder();
builder
.UseTelerik()
...
}
}
Pour rendre cet exemple plus amusant, j’ai créé un exemple de page interagissant avec le Unsplash service, où vous pouvez vous inscrire en tant que développeur en quelques minutes seulement. Le code pour le MainPage.xaml ça ressemble à ça :
<Grid BackgroundColor="#373740">
<Grid.RowDefinitions>
<RowDefinition Height=".7*" />
<RowDefinition Height=".15*" />
<RowDefinition Height=".15*" />
</Grid.RowDefinitions>
<Frame Margin="15" CornerRadius="15">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height=".8*" />
<RowDefinition Height=".2*" />
</Grid.RowDefinitions>
<Image
x:Name="PhotoImage"
Grid.RowSpan="2"
Aspect="AspectFit" />
<Grid
Grid.Row="1"
BackgroundColor="Black"
Opacity=".7">
<Label
x:Name="PhotoDescription"
Margin="10"
TextColor="White" />
</Grid>
</Grid>
</Frame>
<VerticalStackLayout Grid.Row="1" Margin="15">
<Label
FontAttributes="Bold"
FontSize="15"
Text="Image Options"
TextColor="White" />
<HorizontalStackLayout Margin="0,15,0,0" Spacing="25">
</HorizontalStackLayout>
</VerticalStackLayout>
<Button
Grid.Row="2"
Margin="15"
Clicked="Button_Clicked"
Text="Get Cool Image" />
</Grid>
Pour interagir avec le service Unsplash, il existe heureusement un package NuGet que nous pouvons installer et qui contient toutes les fonctionnalités nécessaires pour passer des appels au service. Vous pouvez le rechercher comme UnsplashSharp par Thomas Sébastien Jensen.
Une fois que vous avez installé le package NuGet, vous devez ajouter le code suivant au fichier MainPage.xaml.cs déposer:
public partial class MainPage : ContentPage
{
public Photo Photo { get; set; }
public MainPage()
{
InitializeComponent();
}
protected override async void OnAppearing()
{
await GeneratePhotoAsync("nature");
}
public async Task GeneratePhotoAsync(params string[] searchTerms)
{
string terms = string.Empty;
if (searchTerms != null)
{
foreach (var term in searchTerms)
{
terms += term;
terms += ",";
}
terms = terms.Substring(0, terms.Length - 1);
}
var client = new UnsplashSharp.UnsplashService("Your Unsplash Access Key");
var photos = await client.GetRandomPhotosAsync(1);
Photo = photos[0];
PhotoImage.Source = ImageSource.FromUri(new Uri(Photo.Urls.Regular));
PhotoDescription.Text = Photo.Description;
}
private async void Button_Clicked(object sender, EventArgs e)
{
await GeneratePhotoAsync("nature");
}
}
J’ai simplifié le code autant que possible pour le garder simple, mais vous pouvez ajouter vos propres ViewModels si vous décidez d’étendre l’exercice. Lorsque vous démarrez le projet avec les modifications ci-dessus, vous verrez une jolie page qui vous permet d’obtenir des photographies de la nature en appuyant sur le bouton :
Comme vous pouvez le voir, j’ai laissé un espace pour placer certaines options qui détermineront le type de photographies à interroger, un excellent cas d’utilisation pour l’utilisation d’un ToggleButton.
Ajout du contrôle ToggleButton au projet
Pour utiliser le contrôle ToggleButton dans votre application, vous devez ajouter l’espace de noms suivant à la page XAML :
<ContentPage ...
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui">
Disons que, dans le cadre de l’application, nous souhaitons donner à l’utilisateur la première option pour obtenir uniquement des photos carrées. Comme deuxième option, nous souhaitons que l’utilisateur puisse décider de désactiver ou non le filtre de contenu, qui sera activé par défaut.
Pour y parvenir, nous allons créer une paire de ToggleButtons dans leur forme la plus simple :
<HorizontalStackLayout Margin="0,15,0,0" Spacing="25">
<telerik:RadToggleButton
x:Name="squareOnlyOption"
Content="Square photos"
HeightRequest="50"
WidthRequest="100" />
<telerik:RadToggleButton
x:Name="safeContentOption"
Content="Safe content"
HeightRequest="50"
VerticalOptions="Center"
WidthRequest="100" IsToggled="True"/>
</HorizontalStackLayout>
Dans le code ci-dessus, vous pouvez voir que nous avons créé un RadToggleButton contrôle, attribuant une chaîne de texte comme contenu. De même, dans le deuxième ToggleButton, nous avons indiqué que la valeur du IsToggled la propriété est vraie, ce qui provoque le rendu suivant :
Vous pouvez appuyer sur chacun des ToggleButtons ci-dessus, ce qui les fera être sélectionnés et désélectionnés, affichant leur état.
Personnaliser un ToggleButton
Lorsque vous utilisez le contrôle ToggleButton, vous souhaiterez sûrement personnaliser ses propriétés pour modifier la couleur d’arrière-plan, la couleur du texte, entre autres valeurs. Il existe plusieurs propriétés qui vous permettront d’atteindre cet objectif :
- Arrière-plan et Couleur d’arrière-plan: Pour changer la couleur d’arrière-plan
- BordureBrosse et Couleur de la bordure: Pour changer la couleur de la bordure
- Épaisseur de la bordure: Pour modifier l’épaisseur de la ligne de bordure
- Rayon de coin: Pour spécifier l’arrondi des coins de la bordure
- Rembourrage: Pour ajouter un remplissage au contrôle
Si le contenu est une chaîne de texte comme dans l’exemple de la section précédente, vous pouvez appliquer les propriétés suivantes :
- Couleur du texte: Pour changer la couleur du texte lorsque le contenu est une chaîne
- Alignement du texte horizontal: Pour spécifier l’alignement horizontal
- Alignement du texte vertical: Pour spécifier l’alignement vertical
- Famille de polices: Pour attribuer une famille de polices
- Taille de police: Pour modifier la taille de la police
- Attributs de police: Pour modifier les attributs de la police
Modifions quelques propriétés dans les ToggleButtons de notre exemple comme suit :
<VerticalStackLayout Grid.Row="1" Margin="15">
<Label
FontAttributes="Bold"
FontSize="15"
Text="Image Options"
TextColor="White" />
<HorizontalStackLayout Margin="0,15,0,0" Spacing="25">
<telerik:RadToggleButton
x:Name="squareOnlyOption"
BorderBrush="White"
BorderThickness="3"
Content="Square photos"
CornerRadius="50"
HeightRequest="50"
TextColor="White"
WidthRequest="150">
<telerik:RadToggleButton.Background>
<LinearGradientBrush>
<GradientStopCollection>
<GradientStop Offset="0" Color="#EB5E4B" />
<GradientStop Offset="0.5" Color="#C02E98" />
<GradientStop Offset="1" Color="#9919D0" />
</GradientStopCollection>
</LinearGradientBrush>
</telerik:RadToggleButton.Background>
</telerik:RadToggleButton>
<telerik:RadToggleButton
x:Name="safeContentOption"
BorderBrush="White"
BorderThickness="3"
Content="Safe content"
CornerRadius="50"
HeightRequest="50"
IsToggled="True"
TextColor="White"
WidthRequest="150">
<telerik:RadToggleButton.Background>
<LinearGradientBrush>
<GradientStopCollection>
<GradientStop Offset="0" Color="#EB5E4B" />
<GradientStop Offset="0.5" Color="#C02E98" />
<GradientStop Offset="1" Color="#9919D0" />
</GradientStopCollection>
</LinearGradientBrush>
</telerik:RadToggleButton.Background>
</telerik:RadToggleButton>
</HorizontalStackLayout>
</VerticalStackLayout>
Avec cela, nous obtenons le résultat suivant :
À partir de l’exemple ci-dessus, vous pouvez remarquer deux choses : premièrement, qu’en modifiant certaines propriétés, vous pouvez obtenir des résultats surprenants, et deuxièmement, que même si des propriétés similaires ont été appliquées au deuxième ToggleButton, il semble que l’arrière-plan n’ait pas changé. Cela se produit parce que les propriétés affectent le Normal état du contrôle, c’est-à-dire un état non activé.
Une autre façon de personnaliser un ToggleButton consiste à modifier le ContentTemplate propriété pour attribuer différents modèles en fonction de l’état basculé. Un exemple de ceci consiste à appliquer un style de commutateur marche/arrêt au contrôle, comme dans l’exemple suivant :
<telerik:RadToggleButton
x:Name="squareOnlyOption"
Padding="0"
Background="Transparent"
Content="Square photos"
HeightRequest="50"
WidthRequest="120">
<telerik:RadToggleButton.ContentTemplate>
<DataTemplate>
<Border StrokeShape="RoundRectangle 25" Stroke="LightSalmon">
<Grid
Padding="10,0,0,0"
Background="White"
ColumnDefinitions=".3*,.7*">
<Ellipse HeightRequest="40" WidthRequest="40">
<Ellipse.Fill>
<LinearGradientBrush>
<GradientStopCollection>
<GradientStop Offset="0" Color="Red" />
<GradientStop Offset="1" Color="Salmon" />
</GradientStopCollection>
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Label
Grid.Column="1"
FontSize="20"
HorizontalOptions="Center"
Text="OFF"
TextColor="Gray"
VerticalOptions="Center" />
<Grid.Shadow>
<Shadow
Brush="Black"
Opacity="0.8"
Radius="40"
Offset="20,20" />
</Grid.Shadow>
</Grid>
</Border>
</DataTemplate>
</telerik:RadToggleButton.ContentTemplate>
</telerik:RadToggleButton>
Le code ci-dessus nous permet d’appliquer une conception personnalisée au contrôle, comme le montre l’image suivante :
Voyons maintenant comment modifier les valeurs de propriété d’un ToggleButton via Visual States.
Modification des états visuels d’un ToggleButton
Dans un exemple de la section précédente, vous avez vu que l’arrière-plan dégradé a été appliqué au ToggleButton lorsque son état est sélectionné. Idéalement, nous appliquerions la couleur du dégradé lorsque le contrôle est sélectionné, et un contrôle plus grisâtre lorsqu’il est désélectionné.
Pour atteindre cet objectif, nous utiliserons Visual States. Vous pouvez trouver tous les états visuels disponibles dans un ToggleButton dans le documentation officielle.
Dans notre exemple, nous allons ajouter un dictionnaire de ressources au niveau de la page pour modifier le style des champs à partir d’un seul endroit, indiquant que nous souhaitons appliquer un Background différent en fonction du Normal et Toggled déclare ce qui suit :
<ContentPage ...>
<ContentPage.Resources>
<LinearGradientBrush x:Key="ToggledStateGradient">
<GradientStopCollection>
<GradientStop Offset="0" Color="#EB5E4B" />
<GradientStop Offset="0.5" Color="#C02E98" />
<GradientStop Offset="1" Color="#9919D0" />
</GradientStopCollection>
</LinearGradientBrush>
<LinearGradientBrush x:Key="UnToggledStateGradient">
<GradientStopCollection>
<GradientStop Offset="0" Color="#A9A9A9" />
<GradientStop Offset="0.5" Color="#BEBEBE" />
<GradientStop Offset="1" Color="#D3D3D3" />
</GradientStopCollection>
</LinearGradientBrush>
<Style TargetType="telerik:RadToggleButton">
<Setter Property="FontAttributes" Value="Bold" />
<Setter Property="TextColor" Value="White" />
<Setter Property="BorderBrush" Value="White" />
<Setter Property="BorderThickness" Value="3" />
<Setter Property="CornerRadius" Value="50" />
<Setter Property="HeightRequest" Value="50" />
<Setter Property="WidthRequest" Value="150" />
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup Name="CommonStates">
<VisualState Name="Normal">
<VisualState.Setters>
<Setter Property="Background" Value="{StaticResource UnToggledStateGradient}" />
</VisualState.Setters>
</VisualState>
<VisualState Name="Toggled">
<VisualState.Setters>
<Setter Property="Background" Value="{StaticResource ToggledStateGradient}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
</ContentPage.Resources>
...
<HorizontalStackLayout Margin="0,15,0,0" Spacing="25">
<telerik:RadToggleButton x:Name="squareOnlyOption" Content="Square photos" />
<telerik:RadToggleButton x:Name="safeContentOption" Content="Safe content" IsToggled="True"/>
</HorizontalStackLayout>
...
</ContentPage>
Avec cela, nous atteignons l’objectif de montrer à l’utilisateur de manière simple et rapide l’état de chaque ToggleButton :
Vous pouvez trouver une liste de tous les états visuels qui peuvent être remplacés dans le documentation officielle.
États du ToggleButton
Dans les exercices précédents, vous avez appris à modifier l’apparence visuelle des éléments, et vous avez même vu comment attribuer un état actif à un ToggleButton via le IsToggled propriété, qui, soit dit en passant, est une propriété pouvant être liée (ce qui signifie que nous pouvons lier via des liaisons).
Le IsToggled La propriété est celle qui vous permettra de savoir si un contrôle ToggleButton est actif ou non, dans le but d’utiliser sa valeur pour effectuer des opérations basées sur cet état.
Par exemple, dans notre cas, nous allons modifier le GeneratePhotoAsync méthode pour déterminer si les ToggleButtons sont actifs ou non, et invoquez l’API avec les valeurs respectives comme suit :
public async Task GeneratePhotoAsync(params string[] searchTerms)
{
var squarePhotos = squareOnlyOption.IsToggled == true;
var safeContent = (bool)safeContentOption.IsToggled;
string terms = string.Empty;
if (searchTerms != null)
{
foreach (var term in searchTerms)
{
terms += term;
terms += ",";
}
terms = terms.Substring(0, terms.Length - 1);
}
var client = new UnsplashSharp.UnsplashService("Your Unsplash Access Key");
var orientation = squarePhotos ? UnsplashSharp.Models.Enums.Orientation.Squarish : (UnsplashSharp.Models.Enums.Orientation.All);
var contentFilter = safeContent ? UnsplashSharp.Models.Enums.ContentFilter.Low : (UnsplashSharp.Models.Enums.ContentFilter.High);
var photos = await client.GetRandomPhotosAsync(1, orientation: orientation, contentFilter: contentFilter);
Photo = photos[0];
PhotoImage.Source = ImageSource.FromUri(new Uri(Photo.Urls.Regular));
PhotoDescription.Text = Photo.Description;
}
Avec la modification ci-dessus, nous pouvons appliquer le filtre pour obtenir des images carrées comme indiqué ci-dessous :
Dans le code ci-dessus, vous avez vu que nous devons effectuer une conversion du IsToggled évaluer la propriété comme suit :
var squarePhotos = squareOnlyOption.IsToggled == true;
En effet, le contrôle ToggleButton peut également avoir un état indéterminé ou nul dans son état. IsToggled propriété. Pour activer cette fonctionnalité et permettre à l’utilisateur de sélectionner un état indéterminé, nous devons modifier le IsThreeState propriété comme suit :
<telerik:RadToggleButton
x:Name="squareOnlyOption"
Padding="0"
Background="Transparent"
Content="Square photos"
HeightRequest="50"
WidthRequest="120" IsThreeState="True">
Événements et commandes d’un ToggleButton
Une autre chose utile à savoir sur le contrôle ToggleButton est qu’il contient les événements IsToggledChanged, Clicked, Pressed et Released.
Le IsToggledChanged L’événement est déclenché lorsqu’un changement se produit dans le IsToggled propriété. Le Pressed l’événement se déclenche lorsque le bouton est enfoncé, et Released se déclenche dès que la commande n’est plus enfoncée. Enfin, le Clicked l’événement est déclenché entre le Pressed et Released événements, tant que le pointeur vers le haut se trouve dans les limites du contrôle.
Pour les utiliser, nous pouvons le faire de la manière suivante dans le code XAML :
<telerik:RadToggleButton
x:Name="squareOnlyOption"
Clicked="squareOnlyOption_Clicked"
Content="Square photos"
IsToggledChanged="squareOnlyOption_IsToggledChanged"
Pressed="squareOnlyOption_Pressed"
Released="squareOnlyOption_Released" />
Dans le code derrière, nous aurons quelque chose comme ceci :
private void squareOnlyOption_IsToggledChanged(object sender, Telerik.Maui.Controls.ValueChangedEventArgs<bool?> e)
{
DisplayAlert("Toggled", "Square Only Option Toggled", "OK");
}
private void squareOnlyOption_Clicked(object sender, EventArgs e)
{
DisplayAlert("Clicked", "Square Only Option Clicked", "OK");
}
private void squareOnlyOption_Pressed(object sender, EventArgs e)
{
DisplayAlert("Pressed", "Square Only Option Pressed", "OK");
}
private void squareOnlyOption_Released(object sender, EventArgs e)
{
DisplayAlert("Released", "Square Only Option Released", "OK");
}
Enfin, nous avons également le Command et CommandParameter propriétés au cas où nous travaillerions avec ViewModels.
Conclusion
Dans cet article, vous avez appris à utiliser et à personnaliser le contrôle Telerik .NET MAUI ToggleButton, pour permettre aux utilisateurs de sélectionner et de désélectionner facilement des options dans vos applications. Maintenant que vous possédez ces connaissances, créez des expériences inoubliables dans vos applications pour vos utilisateurs !
Source link