# Xamarin.Forms - Customize
###### tags: `xamarin`,`Form`

:::success
* [**youtube** Customizing Xamarin.Forms UI](https://www.youtube.com/watch?v=9_cDTWC8Ksg)
* [xamarin-forms-goodlooking-UI](https://github.com/jsuarezruiz/xamarin-forms-goodlooking-UI)
* [MaterialDesignInXamlToolkit](https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit)
* [UI Kit For Xamarin Forms](https://grialkit.com/screenshots/)
*
:::

### Padding On each plateform
[document](https://docs.microsoft.com/zh-tw/xamarin/xamarin-forms/platform/device)
##### 方法一

switch (Device.RuntimePlatform)
{
    case Device.iOS:
        Page.Padding = new Thickness(10,50);
        break;
    case Device.Android:
    case Device.UWP:
    default:
        Page.Padding = new Thickness(5);
        break;
}

##### 方法二

<ContentPage.Padding>
    <OnPlatform x:TypeArguments="Thickness">
        <On Platform="iOS" Value="0, 20, 0, 0" />
        <On Platform="Android, UWP" Value="0, 0, 0, 0" />
    </OnPlatform>
</ContentPage.Padding>

### Entry - Customize practice
[document](https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/custom-renderer/entry)

step 1. create `MyEntry` under the `project`

namespace customize1
{
    public class MyEntry : Entry
    {
       
    }
}

step 2. use it in `MainPage.xaml`

<ContentPage xmlns:local="clr-namespace:Project;assembly=Project"/>
<local:MyEntry Text="test"/>

step 3. create `MyEntryRenderer.cs` under `Project.iOS`

using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer(typeof(MyEntry), typeof(MyEntryRenderer))]
namespace Project.iOS
{
    public class MyEntryRenderer : EntryRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
        {
            base.OnElementChanged(e);

            if (Control != null)
            {
                // set the customize property to the UITextField here!
                Control.BackgroundColor = UIColor.FromRGB(204, 153, 255);
                Control.BorderStyle = UITextBorderStyle.Line;
            }
        }
    }
}

step 4. create `MyEntryRenderer.cs` under `Project.Android`

using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(MyEntry), typeof(MyEntryRenderer))]
namespace customize1.Droid
{
    public class MyEntryRenderer: EntryRenderer
    {
        public MyEntryRenderer(Context context) : base(context)
        {
        }

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

            if (Control != null)
            {
            // set customize properties here
                Control.SetBackgroundColor(global::Android.Graphics.Color.AliceBlue);
            }
        }
    }
}

### Hard code UI

AddNativeAndroidControl();
AddNativeiOSControl();
AddNativeUWPControl();

private void AddNativeiOSControl(){
#if __IOS__
// iOS-specific code
var v  = Xamarin.Forms.Platform.iOS.LayoutExtensions.ToView(radioGroup);
View.Add(v);
#endif
}

private void AddNativeAndroidControl(){
#if __ANDROID__
// Android-specific code
// ex. radioGroup
var v  = Xamarin.Forms.Platform.Android.LayoutExtensions.ToView(radioGroup);
View.Add(v);
#endif
}