---
# System prepended metadata

title: Xamarin.Forms - Customize
tags: [xamarin, Form]

---

# 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)
##### 方法一
```csharp=
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;
}
```
##### 方法二
```htmlmixed=
<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`
```csharp
namespace customize1
{
    public class MyEntry : Entry
    {
       
    }
}
```
step 2. use it in `MainPage.xaml`
```htmlmixed
<ContentPage xmlns:local="clr-namespace:Project;assembly=Project"/>
<local:MyEntry Text="test"/>
```
step 3. create `MyEntryRenderer.cs` under `Project.iOS`
```csharp=
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`
```csharp=
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
```csharp
AddNativeAndroidControl();
AddNativeiOSControl();
AddNativeUWPControl();
```

```csharp=
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
}
```

