Xamarin.Forms Borderly Picker

Merhabalar, Xamarin.Forms’da uygulama geliştirirken ekranda picker göstermem gerekiyordu ve picker Android ve iOS platformlarında farklı tasarımlara sahip. Ben picker’ı android’de iOS’da olduğu gibi göstermek istiyorum ve bunun için Custom Renderer yazmam gerekiyordu. Bunu yaparken şöyle bir yol izledim.

İlk olarak portable katmanda CustomMyPicker adında bir class açtım ve bu class’ı Picker’dan inherit ettim.

public class CustomMyPicker : Picker
    {
    }

Daha sonra Android katmanına giderek orada da CustomPickerRenderer adında bir class oluşturup şu kodları yazdım;

public class CustomPickerRenderer : PickerRenderer
    {
        CustomMyPicker element;

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

            element = (CustomMyPicker)this.Element;

            if (Control != null)
            {
                Control.Background = AddBorderToPicker();
            }

        }

        public LayerDrawable AddBorderToPicker()
        {
            ShapeDrawable pickerBorder = new ShapeDrawable();
            pickerBorder.Paint.Color = Android.Graphics.Color.Gray;
            pickerBorder.SetPadding(10, 10, 10, 10);
            pickerBorder.Paint.SetStyle(Paint.Style.Stroke);
            pickerBorder.Paint.StrokeWidth = 5;

            Drawable[] layers = { pickerBorder };
            LayerDrawable layerDrawable = new LayerDrawable(layers);
            layerDrawable.SetLayerInset(0, 0, 0, 0, 0);

            return layerDrawable;
        }
    }

iOS katmanına giderek orada da CustomPickerRenderer class’ı açtım. iOS katmanında yapılacak herhangi bir değişiklik yok aslında o yüzden şu kodu yazdım;

public class CustomPickerRenderer : PickerRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
        {
            base.OnElementChanged(e);

            var element = (CustomMyPicker)this.Element;
        }
    }

Şimdi oluşturduğumuz CustomPicker’ı nasıl sayfa içerisinde kullanıldığını göstereceğim ve ilk olarak nerede olduğunu tanıtmamız gerekir bunun için;

xmlns:custom="clr-namespace:CustomPicker.CustomRenderers"

Ekliyorum ve daha sonra ekrana picker’ımı ekliyorum.

<StackLayout Margin="10">
        <custom:CustomMyPicker Title="Xamarin"
                               TitleColor="Black"
                               VerticalOptions="CenterAndExpand"
                               HorizontalOptions="Fill"
                               FontAttributes="Bold">
            <custom:CustomMyPicker.Items>
                <x:String>Custom</x:String>
                <x:String>Renderer</x:String>
            </custom:CustomMyPicker.Items>
        </custom:CustomMyPicker>
    </StackLayout>

Ekran Görüntüsü;

Soru ve görüşlerinizi e-mail veya yorum olarak belirtebilirsiniz.