The way the UI customization in Xamarin.Forms should be
- Add to nuget
- Test IsCircle and MDCShadowLayer on iOS
- Test Ripple on iOS
- Add iOS Screenshots
BackgroundKit Provides a consistent way for adding Background to your views.
What is supported out of the box:
| Background | Android | iOS |
|---|---|---|
| Elevation | Android.Views.View.Elevation | MDCShadowLayer |
| Gradients | GradientStrokeDrawable | CAGradientLayer |
| Border | GradientStrokeDrawable | CAGradientLayer |
| CornerRadius | GradientStrokeDrawable | CAGradientLayer / Mask when not uniform radius |
| Parent Views | Android | iOS |
|---|---|---|
| MaterialContentView | Android.Views.View | UIView |
| MaterialCard | CardView* | MaterialComponents.Card |
- I used MaterialCardView but there is bug with the RippleEffect and it is not in the codebase yet.
| Android | iOS |
|---|---|
| MaterialVisualElementTracker | MaterialVisualElementTracker |
| MaterialVisualElementTracker | MaterialVisualElementTracker |
| Xamarin.Forms View | Android | iOS |
|---|---|---|
| StackLayout | Yes | Yes |
| AbsoluteLayout | Yes | Yes |
| Grid | Yes | Yes |
| RelativeLayout | Yes | Yes |
| ContentView | Yes | Yes |
| Button | Yes | Yes |
| Entry | Yes | Yes |
| Picker | Yes | Yes |
| Label | Yes | Yes |
| Switch | Yes | Yes |
| BoxView | Yes | Yes |
| ListView | Yes | Yes |
| CollectionView | Yes | Yes |
| BackgroundKit View | Android | iOS |
|---|---|---|
| MaterialCard | Yes | Yes |
| MaterialContentView | Yes | Yes |
| BackgroundKit View | Android | iOS |
|---|---|---|
| MaterialCard | Yes | Yes |
| MaterialContentView | No at the moment | No at the moment |
Initialize the renderer below the Xamarin.Forms.Init
XamarinBackgroundKit.Android.BackgroundKit.Init();Initialize the renderer below the Xamarin.Forms.Init
XamarinBackgroundKit.Android.BackgroundKit.Init();| Property | Type | Description | Why do I need it? |
|---|---|---|---|
Elevation |
double |
The elevation of the Background | It adds shadow to view that depends on the value of elevation |
TranslationZ |
double |
The translation in Z axis of the background (only affects on Android) | In android you need to overlap views without adding shadows. TranslationZ is what you need! |
CornerRadius |
CornerRadius |
The corner radius of the background | Exactly as Thickness. Sets the radius to each corner |
Angle |
double |
The gradient angle of the background | The -360 to 360 angle of the gradient |
GradientType |
GradientType |
The type of gradient of the background | Linear or Radial. Currently Linear is supported only |
Gradients |
IList<GradientStop> |
The gradients that will be used for the background | |
BorderColor |
Color |
The border color of the background | |
BorderWidth |
double |
The border width of the background |
| Property | Type | Description |
|---|---|---|
Background |
Background |
The background of the view |
IsCircle |
bool |
By using this property you do not have to set the same WidthRequest and HeightRequest and manually add the CornerRadius. It measures all the child views and then becomes a circle |
IsCornerRadiusHalfHeight |
bool |
The corner radius will ALWAYS become the half of the height |
Same as MaterialContentView
Background Effect has an attached property in order to add background to your views without the need of a custom renderer!
Everything you need to do is coming from XAML!
<controls:MaterialContentView HeightRequest="60">
<controls:MaterialContentView.Background>
<controls:Background
Angle="0"
BorderColor="Brown"
BorderWidth="4"
CornerRadius="30"
GradientType="Linear">
<controls:Background.Gradients>
<controls:GradientStop Offset="0" Color="Blue" />
<controls:GradientStop Offset="1" Color="DarkRed" />
</controls:Background.Gradients>
</controls:Background>
</controls:MaterialContentView.Background>
<Label Text="Material ContentView with Gradient and Offsets" />
</controls:MaterialContentView><StackLayout
Margin="16"
Padding="16"
HorizontalOptions="FillAndExpand">
<effects:BackgroundEffect.Background>
<controls:Background
Angle="0"
CornerRadius="20"
Elevation="16"
GradientType="Linear">
<controls:Background.Gradients>
<controls:GradientStop Offset="0" Color="Blue" />
<controls:GradientStop Offset="1" Color="DarkRed" />
</controls:Background.Gradients>
</controls:Background>
</effects:BackgroundEffect.Background>
<Label Text="I am inside a stack layout" />
</StackLayout>