How to remove/replace picker dropdown icon from Xamarin Forms UWP?

Question

I am using Xamarin.Forms picker from PCL project but in case of Android and iOS the picker drop-down icon is not available and for UWP picker drop-down icon is available.

I got a solution that adds a picker drop-down image for Android and iOS platform (https://xamgirl.com/picker-with-right-side-icon-in-xamarin-forms/) and I need to use the same logic for UWP as well. So I need to hide the current drop-down icon from UWP picker(ComboBox) and update the icon with the custom image.

I would like to remove the drop-down icon from a picker in UWP As such I followed this post -(Xamarin.Forms UWP - How to hide or change color of Picker / ComboBox dropdown arrow)

I don't want to write any code inside the platform-specific App.xaml file. But I need to remove the icon from custom renderer class, is there any way to do that? Or I need to update that icon with the custom image from custom rendered class.

Answer 1

I don't want to write any code inside the platform-specific App.xaml file. But I need to remove the icon from custom renderer class,

For your requirement, you could make custom render for picker. and find the dropdown icon with visualtreeheler, then set it's Visibility as Collapsed to remove it. Or give it specific graph to change it.

[assembly: ExportRenderer(typeof(Picker), typeof(CustomPickerRender))]
namespace BindablePicker.UWP
{
    public class CustomPickerRender : PickerRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
        {
            base.OnElementChanged(e);

            if (Control != null)
            {
                Control.Loaded += Control_Loaded;

            }
        }

        private void Control_Loaded(object sender, RoutedEventArgs e)
        {
            var dropdown = MyFindChildByName(Control, "DropDownGlyph") as FontIcon;
            dropdown.Glyph = "\xE790";
          //dropdown.Visibility = Visibility.Collapsed;
        }

        public static DependencyObject MyFindChildByName(DependencyObject parant, string ControlName)
        {
            int count = VisualTreeHelper.GetChildrenCount(parant);

            for (int i = 0; i < count; i++)
            {
                var MyChild = VisualTreeHelper.GetChild(parant, i);
                if (MyChild is FrameworkElement && ((FrameworkElement)MyChild).Name == ControlName)
                    return MyChild;

                var FindResult = MyFindChildByName(MyChild, ControlName);
                if (FindResult != null)
                    return FindResult;
            }

            return null;
        }
    }
}

Answer 2

you can use this solution though

<Frame Padding="10">
            <StackLayout>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="80*" />
                        <ColumnDefinition Width="20*" />
                    </Grid.ColumnDefinitions>
                    <Label Grid.Column="0" Text="{Binding Source={x:Reference MyPicker}, Path=SelectedItem.Title}" />
                    <Image Source="downdownpng.png" Grid.Column="1"/>
                </Grid>
                <Picker
                    x:Name="MyPicker"
                    ItemDisplayBinding="{Binding Title}"
                    ItemsSource="{Binding PickerItemSource}" />
                <StackLayout.GestureRecognizers>
                    <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" />
                </StackLayout.GestureRecognizers>
            </StackLayout>
        </Frame>

in your .cs

private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
    {
        MyPicker.Focus();
    }