How to customize Picker in .NetMAUI

Question

Have any body can tell me how to customize Picker in MAUI, like customize: Background color, TextColor of the dropdown of the Picker?

Answer 1

Hello @Anh Xuan Le ,

Usually, you can open the Styles.Xaml under Resources/Styles and change the styles of controls. However, it will only change the styles of entry on the Picker when you set the Backgroundcolor and TextColor. If you want to change the styles of the dropdown, you can customize control using handlers.

On iOS:

using UIKit;// using namespace  

Handler

 Microsoft.Maui.Handlers.PickerHandler.Mapper.AppendToMapping("Custom",(Handler, view) =>  
        {  
#if IOS  
            UIPickerView pickerview = (UIPickerView)Handler.PlatformView.InputView;// get the native control of the dropdown  
            pickerview.BackgroundColor = UIColor.Cyan;// change BackgroundColor  
            pickerview.Delegate = new CustomPickerDelegate(PickerItemList);// invoke UIPickerViewDelegate to change the Text color, PickerItemList is the itemsource of Picker  
  
            var toobar = (UIToolbar)Handler.PlatformView.InputAccessoryView;  
            var donebutton = (UIBarButtonItem)toobar.Items[1];//  get the native control of the done button  
            donebutton.SetTitleTextAttributes(new UIStringAttributes()  
            {  
                BackgroundColor = UIColor.Red,  
                ForegroundColor = UIColor.Brown  
                 
            }, UIControlState.Normal);// change the styles  
#endif  
        });  

UIPickerViewDelegate

public class CustomPickerDelegate : UIPickerViewDelegate  
{  
    List<PickerItem> Items;  
    public CustomPickerDelegate(List<PickerItem> datasource)  
    {  
        Items = datasource;  
    }  
     
    [Export("pickerView:attributedTitleForRow:forComponent:")]  
    public Foundation.NSAttributedString GetAttributedTitle(UIPickerView pickerView, nint row, nint component)  
    {  
        PickerItem item = Items[(int)row];  
        var text = new NSAttributedString(item.ID.ToString(), font: UIFont.SystemFontOfSize(18), foregroundColor: UIColor.Green);  
        return text;  
    }  
}  

public class PickerItem  
{  
    public int ID { get; set; }// ItemDisPlayBinding of Picker  
  
}  

On Android, you can customize the dialog. In addition, may I ask which platform you are using?

Best Regards,
Wenyan Zhang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.