How To Remove Picker Border In IOS

user_8453946 0
Viewed 5063

I'm trying to add a picker with a background image so I used a relative layout and added both image and picker inside the relative layout. My problem is I have a border in the environment of IOS and I have a bottom line in android device. I faced this problem in Normal Entry and solved but I used the same scenario in picker not working.

Here is the Code

<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>
  • This is the result

enter image description here

I need to remove the default border from IOS

So i made a customRenderer in IOS

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

But still the border not removed in IOS

xamarin xamarin.ios ios
4 Answers

Expected Answer is

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

Above renderer is for Android

for iOS -

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

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

For 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);
        }
    }
user_46093700

You can do something similar to this. Works for IOS and Android.

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

Put a frame of whatever the background color next to your picker is. This will hide the border around the picker. Mine happened to be white and it worked great.

user_39001390

An option is to "hide" picker display button, and use an option that you can style more easily.

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

For example, use a button instead

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

In the code I can then show the choices for the Picker

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