BoldDesk®Customer service software offering ticketing, live chat, and omnichannel support, starting at $49/mo. for 10 agents. Try it for free.
Grettings,
I have a SfTextInputLayout with hint and .Net Maui Picker inside of it. see below xaml
<sf:SfTextInputLayout Hint="SDI"
CharMaxLength="14" VerticalOptions="Start">
<Picker WidthRequest="100"
/>
</sf:SfTextInputLayout>
I am trying to populate the picker control with items the user will select. I want to be able to tell which item the user selected and then do something according to the item selected. If possible I would like to populate the picker in the Xaml. Thanks !
Hi Ron Rex,
Thank you for reaching out us. We have reviewed you
queries based on you update. You can achieve the desired functionality with the
.NET MAUI Picker inside an SfTextInputLayout by populating the Picker items in
XAML and handling the selection in the code-behind or ViewModel. Below is an
example to guide you:
XAML Code:
|
// XAML <sf:SfTextInputLayout Hint="View Model" CharMaxLength="14" VerticalOptions="Start"> <Picker WidthRequest="100" ItemsSource="{Binding Options}" SelectedItem="{Binding SelectedOption}" Title="Select an Option"/> </sf:SfTextInputLayout>
//Code behind public MainPage() { InitializeComponent(); BindingContext = new MyViewModel(this); }
|
ViewModel:
In the ViewModel, you can define the Options collection and the SelectedOption property:
|
//View Model public class MyViewModel : INotifyPropertyChanged { public event PropertyChangedEventHandler PropertyChanged; private readonly Page _page;
private List<string> _options; public List<string> Options { get => _options; set { _options = value; OnPropertyChanged(nameof(Options)); } }
private string _selectedOption; public string SelectedOption { get => _selectedOption; set { if (_selectedOption != value) { _selectedOption = value; OnPropertyChanged(nameof(SelectedOption)); // Perform action based on the selected option OnOptionSelected(_selectedOption); } } }
public MyViewModel(Page page) { _page = page; // Populate the picker with items Options = new List<string> { "Option 1", "Option 2", "Option 3" }; }
private async void OnOptionSelected(string selectedOption) { // Add your logic here based on the selected option await _page.DisplayAlert("Selected Item", $"You selected: {selectedOption}", "OK"); }
protected void OnPropertyChanged(string propertyName) { PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); } } |
Binding in Code-Behind (if not using MVVM):
If you prefer to handle this in the code-behind instead of using a ViewModel, you can populate and handle selection directly:
|
//XAML <sf:SfTextInputLayout Hint="Code Behind" CharMaxLength="14" VerticalOptions="Start"> <Picker WidthRequest="100" SelectedIndexChanged="Picker_SelectedIndexChanged" Title="Select an Option"> <Picker.ItemsSource> <x:Array Type="{x:Type x:String}"> <x:String>Option 1</x:String> <x:String>Option 2</x:String> <x:String>Option 3</x:String> </x:Array> </Picker.ItemsSource> </Picker> </sf:SfTextInputLayout>
//Code behind private async void Picker_SelectedIndexChanged(object sender, EventArgs e) { // Add your logic here based on the selected option var picker = sender as Picker; if (picker != null ) { string selectedItem = picker.SelectedItem.ToString(); await DisplayAlert("Selected Item", $"You selected: {selectedItem}", "OK"); } } |
For reference, we have created a sample demonstrating the two suggested methods. Kindly review the sample and let us know your thoughts. Please let us know if the provided suggestions help resolve your query. Don't hesitate to contact us if you have any further concerns or questions.
Regards,
Hariharan C.
