Let's say you have the following HTML:
<div class="outer">
Some text
<p>Some more text</p>
<div class="inner">
Yet more text <span>and even more text</span>
</div>
</div>
If I apply the following CSS:
.outer {
color: blue;
}
Then all of the text in that html will be blue - all of the divs inside the .outer
div will inherit the property, no matter how far they're nested in.
Can I do something similar in Xamarin.Forms? Or if I have a bunch of Labels inside a StackLayout, for example, do I have to style every. single. label...?
What I chose to do was create a static styling class then apply the style either within the XAML itself or to the control in the constructor if it was applicable.That way you have the control to individually style items or have a standard style for a reusable control.
StyleClass
public static class AppStyling
{
public static readonly Style Style_Page_Standard = new Style(typeof(Page))
{
Setters =
{
new Setter {Property = Xamarin.Forms.Page.BackgroundColorProperty, Value = AppStyling.Color_GlobalBackground},
new Setter {Property = Xamarin.Forms.Page.PaddingProperty, Value = AppStyling.Padding_StandardPage},
}
};
public static readonly Style Style_Button_Standard = new Style(typeof(Button))
{
Setters =
{
new Setter {Property = Xamarin.Forms.Button.BackgroundColorProperty, Value = AppStyling.Color_ButtonBackground},
new Setter {Property = Xamarin.Forms.Button.TextColorProperty, Value = AppStyling.Color_ButtonText},
new Setter {Property = Xamarin.Forms.Button.FontSizeProperty, Value = AppStyling.Font_Button},
new Setter {Property = Xamarin.Forms.Button.BorderColorProperty, Value = AppStyling.Color_ButtonBorder},
new Setter {Property = Xamarin.Forms.Button.BorderRadiusProperty, Value = AppStyling.Radius_StandardButtonCorner},
new Setter {Property = Xamarin.Forms.Button.BorderWidthProperty, Value = 3},
}
};
}
Implementation on Control
public Custom_Button()
{
this.Style = AppStyling.Style_Button_Standard;
}
Implementation in XAML
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MyNameSpace.Views.MyContentPage"
xmlns:styling="clr-namespace:MyNameSpace.Styling;assembly=MyNameSpace"
Title="MyContentPageTitle"
Style="{x:Static styling:AppStyling.Style_Page_Standard}">
There are also Global Resource declarations to look into in the Xamarin docs.
https://developer.xamarin.com/guides/xamarin-forms/user-interface/styles/application/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With