Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Xamarin.Forms - Nested Styling Inheritance Like CSS?

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...?

like image 789
jbyrd Avatar asked Oct 17 '25 17:10

jbyrd


1 Answers

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/

like image 177
ClintL Avatar answered Oct 19 '25 07:10

ClintL



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!