ピッカーの下線バーに色を付けることは可能ですか？

Question

Xamarinフォームのピッカー（写真）の下線を変更することはできますか？素晴らしい検証エラーを出そうとしています。

すてきなデザインをするための他のトリックはありますか？

<Label HorizontalOptions="Fill" 
     VerticalOptions="Center" 
     HorizontalTextAlignment="End" 
     Text="*" 
     TextColor="Red" 
     x:Name="lbldocid" 
     Grid.Column="0" 
     Grid.Row="3" 
     IsVisible="false"/> 
<Label Grid.Row="3" 
     Grid.Column="1" 
     x:Name="lbldocumentid" 
     Text="Document id: " 
     WidthRequest="100" 
     HorizontalOptions="Fill" 
     VerticalOptions="Center" 
     HorizontalTextAlignment="End"/> 
<StackLayout x:Name="sldocid" 
      Padding="1" 
      Margin="20,0,20,0" 
      Orientation="Vertical" 
      Grid.Row="3" 
      Grid.Column="2"> 
    <Picker x:Name="pickerdocid" 
      BackgroundColor="#fafafa" 
      HorizontalOptions="Fill"/> 
    <Label x:Name="lbldociderror" 
      Margin="5,0,0,0" 
      IsVisible="false" 
      TextColor="White" 
      FontSize="12" 
      Text="You need to select documentid."/> 
</StackLayout> 

写真：説明するために多くの詳細があります picker

Answer 1

直接コードを付加することは良い答えはありませんが、あなたは以下の私のコードを参照することができます...

<Grid Margin="0,100,0,0" > 
     <Grid.RowDefinitions> 
      <RowDefinition Height="50"/> 
      <RowDefinition Height="*"/> 
      <RowDefinition Height="*"/> 
     </Grid.RowDefinitions> 

     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="30"/> 
      <ColumnDefinition Width="30"/> 
      <ColumnDefinition Width="*"/> 
     </Grid.ColumnDefinitions> 

     <Label HorizontalTextAlignment="Center" 
       VerticalTextAlignment="Center" 
       Text="*" 
       TextColor="Red" 
       x:Name="lbldocid" 
       Grid.Column="0" /> 
     <Label Grid.Column="1" 
       x:Name="lbldocumentid" 
       HorizontalTextAlignment="Center" 
       VerticalTextAlignment="Center" 
       Text="ID" /> 


     <Grid x:Name="sldocid" 
       RowSpacing="0" 
       BackgroundColor="Red" 
       Padding="1" 
       Margin="0,0,10,0" 
       Grid.Column="2"> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="2*"/> 
       <RowDefinition Height="0.5"/> 
       <RowDefinition Height="*"/> 
      </Grid.RowDefinitions> 


      <Picker x:Name="pickerdocid" 
        BackgroundColor="White" 
        Grid.Row="0" > 
       <Picker.ItemsSource> 
        <x:Array Type="{x:Type x:String}"> 
         <x:String>Baboon</x:String> 
         <x:String>Capuchin Monkey</x:String> 
         <x:String>Blue Monkey</x:String> 
         <x:String>Squirrel Monkey</x:String> 
         <x:String>Golden Lion Tamarin</x:String> 
         <x:String>Howler Monkey</x:String> 
         <x:String>Japanese Macaque</x:String> 
        </x:Array> 
       </Picker.ItemsSource> 
      </Picker> 
      <Label BackgroundColor="Gray" Grid.Row="1"/> 
      <Label x:Name="lbldociderror" 
        Margin="0,5,0,0" 
        VerticalTextAlignment="End" 
        Grid.Row="2" 
        BackgroundColor="Red" 
        TextColor="White" 
        FontSize="8" 
        Text="You need to select documentid."/> 
     </Grid> 

    </Grid> 

ピッカーの境界線を削除するには、別の台紙にPickRendererを使用してください

Android：

[assembly: ExportRenderer(typeof(Picker), typeof(CustomPickerRenderer))] 
namespace FormsApp.Droid 
{ 
class CustomPickerRenderer : PickerRenderer 
{ 
    protected override void OnElementChanged(ElementChangedEventArgs<Picker> e) 
    { 
     base.OnElementChanged(e); 
     if (Control != null) 
     { 
      GradientDrawable gd = new GradientDrawable(); 
      gd.SetStroke(0, Android.Graphics.Color.Transparent); 
      Control.SetBackground(gd); 
     } 
    } 
} 
} 

のiOS：

[assembly: ExportRenderer(typeof(Picker), typeof(CustomPickerRender))] 
namespace FormsApp.iOS 
{ 
class CustomPickerRender :PickerRenderer 
{ 
    protected override void OnElementChanged(ElementChangedEventArgs<Picker> e) 
    { 
     base.OnElementChanged(e); 
     var view = e.NewElement as Picker; 
     this.Control.BorderStyle = UITextBorderStyle.None; 
    } 
} 
} 

テスト

のiOS：

アンドロイド：