Question

我正在尝试添加一个带有背景图像的选择器，所以我使用了相对布局，并在相对布局中添加了图像和选择器。我的问题是我在IOS的环境中有一个边框，我在Android设备上有一个底线。我在正常输入中遇到了这个问题并解决了但是我在选择器中使用了相同的场景。

这是代码

<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

for 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

你只需要在xaml中将 Picker 修改为 CustomPicker ，如下所示：

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

然后它会运作良好。

Answer 3

您可以执行类似的操作。适用于IOS和Android。

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

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

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();
}

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

4 个答案: