La version R3 2020 apporte le contrôle ComboBox tant attendu à notre Telerik UI for Xamarin suite qui vous permet de présenter à vos utilisateurs une liste d'options parmi lesquelles choisir dans un moyen convivial et pratique grâce à une liste déroulante. RadComboBox pour Xamarin est livré avec un ensemble de fonctionnalités avancées: édition, recherche, sélection unique et multiple, modèles personnalisés et API de style flexible, pour n'en nommer que quelques-uns.
Dans ce billet de blog, je vais vous présenter les principales fonctionnalités du contrôle Telerik Xamarin ComboBox. Commençons!
Liaison de données
Premièrement, nous devons alimenter la ComboBox avec quelques données, afin qu'elle affiche correctement les options disponibles pour l'utilisateur final. Vous pouvez définir des éléments statiques sur le ItemsSource du contrôle ou le lier à un objet complexe à l'aide de la propriété DisplayMemberPath . Jetons un coup d'œil à l'exemple rapide suivant montrant des voitures dans une application Rent a Car.
Créez un exemple de classe de voiture:
public class Car
{
public string Modèle { get ; set ; }
public chaîne CarLogo { get ; set ; }
}
Ajoutez une classe ViewModel avec une collection d'objets Car:
public class ViewModel
{
public ViewModel () [19659018] {
this .Cars = new ObservableCollection ()
{
new Car { Model = "Ford" CarLogo = "ford1.png" },
new Car {Model = "Citroen" , CarLogo = "citr.png" },
new Car {Model = "VW" CarLogo = "vw1.png" },
new Car {Model = "Mazda" CarLogo = "mazda.png" },
nouveau Car {Model = "Honda" CarLogo = "honda.png" }, [19659018] nouvelle Voiture {Modèle = "Renault" CarLogo = "ren1.png" },
nouvelle Voiture { Model = "BMW" CarLogo = "bmw.png" },
new Car {Model = "Mercedes" , CarLogo = "merc.png" },
new Car {Model = "Audi" CarLogo = "audi.png" },
new Car {Model = "Opel" CarLogo = "opel.png" }
} ;
}
public ObservableCollection Cars { get ; set ; }
}
Passons à la partie UI – ajoutez une instance RadComboBox, liez son I temsSource et définissez DisplayMemberPath de sorte que les noms des voitures soient affichés:
< telerikInput: RadComboBox x: Name = "comboBox"
ItemsSource = "{Binding Cars}"
[19659134] DisplayMemberPath = "Model" />
C'est tout ce dont vous avez besoin pour inclure le contrôle RadComboBox à votre page. Vérifiez ci-dessous le résultat sur un émulateur iOS:
< telerikInput: RadComboBox x: Name = "comboBox"
ItemsSource = [19659047] "{Binding Cars}"
DisplayMemberPath = "Model"
IsEditable = "True"
SearchMode = "Contains"
SearchTextPath = "Model" />
< telerikInput: RadComboBox x: Name = "comboBox"
ItemsSource = "{Binding Cars}"
DisplayMemberPath = "Model"
IsEditable = "True"
SearchTextPath = "Model"
SelectionMode = "Multiple"
SelectedItems = "{Binding SelectedCars}" /> [19659142] Les images ci-dessous montrent RadComboBox avec sélection multiple dans et hors focus:
< Color x: Key = "ComboBoxBackgroundColor" > # F7F7F7 </ Color >
< Style x: Key = "ComboBoxStyle" TargetType = "telerikInput: RadComboBox" > [19659010] < Setter Propriété = "CornerRadius" Value = "12, 12, 0, 0" /> [19659018] < Setter Property = "DropDownBackgroundColor" Value = "# F8F8F8" />
< Setter Property = "DropDownBorderThickness" Value = "0, 0, 0, 1" />
< Setter Propriété = "DropDownBorderColor" Value = "# D9D9D9" /> [19659018] < Setter Property = "BorderColor" Value = "# D9D9D9" />
< Setter Propriété = "FocusedBorderColor" Value = "# D9D9D9" />
< Setter Propriété = "BorderThickness" Value = "0, 0, 0, 1" />
</ Style ]>
< Style x: Key = "ComboBoxButtonStyle" TargetType = "Button" >
< Setter Property = "HeightRequest" >
< Setter.Value >
< OnPlatform x: TypeArguments = "x: Double" >
< On Platform [19659015] = "UWP, Android" > 50 </ On >
< On Platform = "iOS "> 34 </ On >
</ OnPlatform >
</ Setter.Value >
</ Setter >
</ Style >
Ensuite, mettez à jour la définition de la ComboBox, elle inclut désormais les modèles modifiés:
<[19659014] telerikInput: RadComboBox x: Name = "comboBox"
ItemsSource = "{Binding Cars}"
DisplayMemberPath ] = "Make"
IsEditable = "True"
SearchTextPath = "Make"
SelectionMode [19659015] = "Multiple" [19659018] Placeholder = "Sélectionnez un modèle"
SelectedItems = "{Binding SelectedCars}"
BackgroundColor = [19659047] "{StaticResource ComboBoxBackgroundColor}"
Style = "{StaticResource ComboBoxStyle}"
ClearButtonStyle = "ComboStyleButton}" {StaticResource "ComboBoxStyle}" ]>
< telerikInput: RadComboBox.ItemTemplate >
< DataTemplate >
< StackLayout Padding = "16, 15, 0, 15"
Orientation = "Horizontal"
BackgroundColor = "# F8F8F8 ">
< Image Source [19659015] = "{Binding CarLogo}"
HorizontalOptions = "Center"
VerticalOptions = "Center"
[19659438] HeightRequest = "20"
WidthRequest = "20"
Margin = "0, 0, 10, 0" />
< Label Text = "{Binding Model}"
FontSize [19659015] = "14"
VerticalTextAlignment = "Center"
VerticalOptions = "Center"
TextColor = "Noir" /> [19659018] </ StackLayout >
</ DataTemplate >
</ telerikInput: RadComboBox.ItemTemplate >
< telerikInput: RadComboBox.SelectedItemTemplate >
< DataTemplate >
< StackLayout Padding = "16, 15, 0, 15"
Orientation = "Horizontal"
BackgroundColor = "# ">
< Image Source = " {Binding CarLogo} "
HorizontalOptions = " Centre "
VerticalOptions = "Centre"
HeightRequest = [19659047] "20"
WidthRequest = "20"
Margin = "0, 0, 10, 0 " />
< Label Text = " {Binding Model} "
FontSize = " 14 "
VerticalTextAlignment = " Center "
VerticalOptions = " Center "
TextColor = " Noir " />
</ StackLayout >
</ DataTemplate >
</ telerikInput: RadComboBox.SelectedItemTemplate >
< telerikInput: RadComboBox.TokenTe mplate >
< DataTemplate >
< telerikPrimitives: RadBorder BackgroundColor = "# A9E8F1"
] CornerRadius = "15"
Margin = "2" >
< StackLayout Orientation = "Horizontal"
Marge = "3" >
< Libellé Texte = "{Binding Model}"
TextColor = "Black"
VerticalTextAlignment = "Center"
Marge = "2" FontSize = "14" /> [19659018] < Label FontFamily = "{StaticResource IconsFontFamily}"
Text = "" FontSize ] = "10"
VerticalTextAlignment = "Center"
TextColor = "Black"
Marge [19659015] = "2" >
< Label.GestureRecognizers >
< TapGestureRecognizer Tapped = [19659047] "TapGestureRecognizer_Tapped" />
</ Label.GestureRecognizers >
</ Label >
</ StackLayout >
</ telerikPrimitives: RadBorder >
</ DataTemplate >
</ telerikInput: RadComboBox.TokenTemplate >
</ telerikInput: RadComboBox >
Ajoutez le gestionnaire d'événements TapGestureRecognizer_Tapped dans le code derrière:
private void TapGestureRecognizer_Tapped (, [196590014] objet [196590014]) System.EventArgs e)
{
var closeLabel = sender as Label;
if (closeLabel! = null )
{
var item = closeLabel.BindingContext as Car;
if (item! = null )
{
this .comboBox.SelectedItems.Remove (élément);
}
} [19659026]}
La courte capture d'écran ci-dessous montre le résultat sur l'émulateur iOS:
N'oubliez pas de consulter les différentes démos du contrôle dans notre SDK Sample Browser et dans Telerik UI for Xamarin Demos application.
Si vous n'avez pas encore essayé la suite Telerik UI for Xamarin prenez-la Faites un essai avec un essai gratuit de 30 jours offrant toutes les fonctionnalités et commandes à votre disposition à un coût nul. De plus, vous pouvez récupérer le code source de nos applications de démonstration Xamarin et les essayer! Assurez-vous de consulter également notre guide technique pour les développeurs Xamarin !
Bon codage avec nos commandes!
Source link