是否可以给拣货员的下划线一个颜色？

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>

要删除Picker的边框，我们可以在differecnt platfrom上使用PickRenderer

机器人：

[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：

机器人：