如何在 IOS 中删除选择器边框

Question

我正在尝试添加带有背景图像的选择器，因此我使用了相对布局并在相对布局中添加了图像和选择器。 我的问题是我在 IOS 环境中有一个边框，而我在 android 设备中有一个底线。 我在 Normal Entry 中遇到了这个问题并解决了，但我在 picker 中使用了相同的场景不起作用。

这是代码

<RelativeLayout Margin="0,0,0,0"
                                    Padding="0,0,0,0"
                                    >
                        <Image Source="input_mobile_code_brown.png"
                               x:Name="img"

                               RelativeLayout.XConstraint =
                    "{ConstraintExpression Type=RelativeToParent,
                         Property=Width,
                         Factor=0,
                         Constant=0}"
                RelativeLayout.YConstraint =
                    "{ConstraintExpression Type=RelativeToParent,
                         Property=Height,
                         Factor=0,
                         Constant=0}"
                                  RelativeLayout.WidthConstraint =
                    "{ConstraintExpression Type=RelativeToParent,

                         Property=Width,
                         Factor=1,
                         Constant=0}"
               RelativeLayout.HeightConstraint =
                    "{ConstraintExpression Type=RelativeToParent,

                         Property=Height,
                         Factor=1,
                         Constant=0}"
                               />
                        <Picker BackgroundColor="Transparent"
                                x:Name="picker" 
                                Margin="10,0,0,0"

                RelativeLayout.XConstraint =
                    "{ConstraintExpression Type=RelativeToParent,
                         Property=Width,
                         Factor=0,
                         Constant=0}"
                RelativeLayout.YConstraint =
                    "{ConstraintExpression Type=RelativeToParent,
                         Property=Height,
                         Factor=0,
                         Constant=0}"
                RelativeLayout.WidthConstraint =
                    "{ConstraintExpression Type=RelativeToView,
                         ElementName=img,
                         Property=Width,
                         Factor=1,
                         Constant=0}"
               RelativeLayout.HeightConstraint =
                    "{ConstraintExpression Type=RelativeToView,
                         ElementName=img,
                         Property=Height,
                         Factor=1,
                         Constant=0}"
            />
                    </RelativeLayout>

• 这是结果

我需要从 IOS 中删除默认边框

所以我在 IOS 中做了一个 customRenderer

protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
{
    base.OnElementChanged(e);
    var view = e.NewElement as CustomPicker;
    this.Control.BorderStyle=  UITextBorderStyle.None;
}

但是IOS中的边框还是没有去掉

Answer 1

预期答案是

<local:CustomPicker x:Name="modePicker" ...

 public class BorderlessPickerRenderer : PickerRenderer
 {
    public static void Init() { }
    protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
    {
        base.OnElementChanged(e);
        if (e.OldElement == null)
        {
            Control.Background = null;

            var layoutParams = new MarginLayoutParams(Control.LayoutParameters);
            layoutParams.SetMargins(0, 0, 0, 0);
            LayoutParameters = layoutParams;
            Control.LayoutParameters = layoutParams;
            Control.SetPadding(0, 0, 0, 0);
            SetPadding(0, 0, 0, 0);
        }
    }
}

上面的渲染器适用于 Android

对于 iOS -

protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        base.OnElementPropertyChanged(sender, e);

        Control.Layer.BorderWidth = 0;
        Control.BorderStyle = UITextBorderStyle.None;
    }

对于 UWP -

protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
    {
        base.OnElementChanged(e);

        if (Control != null)
        {
            Control.BorderThickness = new Windows.UI.Xaml.Thickness(0);
            Control.Margin = new Windows.UI.Xaml.Thickness(0);
            Control.Padding = new Windows.UI.Xaml.Thickness(0);
        }
    }

Answer 2

你可以做类似的事情。 适用于 IOS 和 Android。

 <Frame BorderColor="White" WidthRequest="1" IsClippedToBounds="false" HasShadow="false"> <Picker HeightRequest="40" Title="Choose One" /> </Frame>

在您的选择器旁边放置一个任何背景颜色的框架。 这将隐藏选择器周围的边框。 我的恰好是白色的，效果很好。

Answer 3

您只需要像这样在 xaml 中将Picker修改为CustomPicker ：

<local:CustomPicker BackgroundColor="Transparent" .../>

然后它会工作得很好。

Answer 4

一个选项是“隐藏”选择器显示按钮，并使用您可以更轻松地设置样式的选项。

<Picker Grid.Row="0" Grid.Column="1" x:Name="DayPicker" Title="" 
HeightRequest="0" WidthRequest="0"     
ItemsSource="{Binding TheDates}" 
ItemDisplayBinding="{Binding text}" SelectedIndexChanged="OnSelectedDateChangeClicket" IsVisible="false">
</Picker>

例如，使用按钮代替

<Button Grid.Row="0" Grid.Column="1" Text="{Binding CurrentDayText}" 
TextColor="White" FontAttributes="Bold" FontSize="16" 
HorizontalOptions="Center" Clicked="OnDateChangeClicket" />

在代码中，我可以显示选择器的选择

void OnDateChangeClicket(object sender, EventArgs e)
{
    DayPicker.Focus();
}