fabulous-dev / Fabulous

Declarative UI framework for cross-platform mobile & desktop apps, using MVU and F# functional programming
https://fabulous.dev
Apache License 2.0
1.13k stars 122 forks source link

WIP: Style support #977

Closed TimLariviere closed 1 year ago

TimLariviere commented 1 year ago

In Xamarin.Forms, it is possible to declare styles that can be applied to either one or more controls of the same type.

<Label>
    <Label.Style>
        <Style TargetType="Label">
            <Setter Property="TextColor" Value="Blue" />
       </Style>
    </Label.Style>
</Label>

I have been trying to add support for it with the following syntax

// Direct style
Label("Hello world")
    .style(
        LabelStyle()
            .textColor(Color.Blue)
    )

// Shared style
let sharedStyle =
    LabelStyle()
        .textColor(Color.Blue)

Label("Hello")
    .style(sharedStyle)

Label("World")
    .style(sharedStyle)

It does work, even if I'm not currently 100% sure the code I wrote is of good quality. For now, it's still quite limited. Also Style doesn't react to changes, so making a dynamic style won't work.

TimLariviere commented 1 year ago

After thinking more about it, adding first-class support to Xamarin.Forms.Style, VisualStateManager and ControlTemplate doesn't make sense in Fabulous. Those features are mostly XAML-specific. Fabulous already takes care of most styling in other ways.

Please read https://docs.fabulous.dev/v2/development/styling-widgets/ to learn how to achieve the same in Fabulous.