Установить заполнитель в качестве заголовка при выборе элемента выбора в формах Xamarin

Question

Нужен пользовательский сборщик, в котором заголовок уменьшается в размере после выбора элемента из подборщика, как на изображении. То же самое происходит для MaterialisedEntry, но нужно то же самое для Picker Control

Answer 1

Согласно вашему описанию, я предлагаю вам использовать пользовательский рендер для добавления стрелки для элемента управления Picker, например:

1. Создать имя класса CustomPicker в PL C.

   public class CustomPicker : Picker
   {
   public static readonly BindableProperty ImageProperty =
       BindableProperty.Create(nameof(Image), typeof(string), typeof(CustomPicker), string.Empty);
   
   public string Image
   {
       get { return (string)GetValue(ImageProperty); }
       set { SetValue(ImageProperty, value); }
   }
   }
   

2. Создать имя класса CustomPickerRenderer в Android или ios.

   [assembly: ExportRenderer(typeof(CustomPicker), typeof(CustomPickerRenderer))]
   namespace demo3.Droid
   {
   public class CustomPickerRenderer : PickerRenderer
   {
   CustomPicker element;
   
   protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
   {
       base.OnElementChanged(e);
   
       element = (CustomPicker)this.Element;
   
       if (Control != null && this.Element != null && !string.IsNullOrEmpty(element.Image))
       {
           Control.Background = AddPickerStyles(element.Image);
       }
   }
   
   public LayerDrawable AddPickerStyles(string imagePath)
   {
       //ShapeDrawable border = new ShapeDrawable();
       //         border.Paint.Color = Android.Graphics.Color.Gray;
       //         border.SetPadding(10,10,10,10);
       //         border.Paint.SetStyle(Paint.Style.Stroke);
   
       //Drawable[] layers = { border , GetDrawable(imagePath) };
       Drawable[] layers = { GetDrawable(imagePath) };
       LayerDrawable layerDrawable = new LayerDrawable(layers);
       layerDrawable.SetLayerInset(0, 0, 0, 0, 0);
   
       return layerDrawable;
   }
   
   private BitmapDrawable GetDrawable(string imagePath)
   {
       int resID = Resources.GetIdentifier(imagePath, "drawable", this.Context.PackageName);
       var drawable = ContextCompat.GetDrawable(this.Context, resID);
       var bitmap = ((BitmapDrawable)drawable).Bitmap;
   
       var result = new BitmapDrawable(Resources, Bitmap.CreateScaledBitmap(bitmap, 70, 70, true));
       result.Gravity = Android.Views.GravityFlags.Right;
   
       return result;
   }
   
   }
   }
   

3.Ссылать на этот customPicker в PL C .

 <Frame
            Padding="8"
            BorderColor="Gray"
            CornerRadius="20"
            HasShadow="True"
            IsClippedToBounds="True">
            <StackLayout>
                <Label
                    x:Name="label"
                    FontSize="20"
                    Text="state" />
                <picker:CustomPicker
                    x:Name="picker1"
                    Title="select one item"
                    Image="ic_arrow_drop_down"
                    SelectedIndexChanged="Picker1_SelectedIndexChanged">
                    <picker:CustomPicker.Items>
                        <x:String>1</x:String>
                        <x:String>2</x:String>
                    </picker:CustomPicker.Items>
                </picker:CustomPicker>
            </StackLayout>
        </Frame>

 private void Picker1_SelectedIndexChanged(object sender, EventArgs e)
    {
        var picker = sender as CustomPicker;
        if(picker.SelectedIndex>-1)
        {
            label.FontSize = 10;
        }
    }

Это скриншот:

Answer 2

Xamarin.Forms не позволяет вставлять пользовательское представление (например, ContentView с разметкой стека) в элемент управления Picker). То, что вы могли бы сделать, это использовать Grid, где у вас есть наложение стека на Picker. На основе свойства SelectedItem средства выбора вам необходимо обновить текст метки состояния.

<Grid HorizontalOptions="Center" VerticalOptions="Center">
    <Picker x:Name="picker"
            Title="select a state">
        <Picker.ItemsSource>
            <x:Array Type="{x:Type x:String}">
                <x:String>Colorado</x:String>
                <x:String>California</x:String>
                <x:String>Ohio</x:String>
            </x:Array>
        </Picker.ItemsSource>
    </Picker>

    <StackLayout WidthRequest="300" InputTransparent="True" BackgroundColor="White">
        <Label Text="State" FontSize="10"/>
            <!--Here you would need to bind the Label Text to a property 
                that changes according to the SelectedItem of the picker-->
        <Label Text="Colorado" FontSize="14"/>
    </StackLayout>
</Grid>