Merge pull request #13 from edgarfgp/Implement-Style-widgets

TimLariviere · Nov 27, 2021 · 7fb08aa · 7fb08aa
2 parents 678879f + 7acfec1
commit 7fb08aa
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 5 deletions.
diff --git a/samples/Xamarin.Forms/CounterApp/CounterApp/App.fs b/samples/Xamarin.Forms/CounterApp/CounterApp/App.fs
@@ -41,6 +41,12 @@ module App =
     let init () =
         initModel (), []
 
+    let createStyleFor<'T when 'T :> BindableObject> setters =
+        let style = Style(typeof<'T>)
+        for property, value in setters do
+            style.Setters.Add(Setter(Property = property, Value = value))
+        style
+
     let update msg model =
         match msg with
         | Increment -> { model with Count = model.Count + model.Step }, []
@@ -57,10 +63,17 @@ module App =
                     Label(string model.Count)
                         .automationId("CountLabel")
                         .centerTextHorizontal()
+                        .style (
+                            createStyleFor [ Label.TextColorProperty, box Color.Green
+                                             Label.FontSizeProperty, box 24. ]
+                        )
 
                     Button("Increment", Increment)
+                        .style(
+                            createStyleFor [ Button.BackgroundColorProperty, box Color.Green
+                                             Button.TextColorProperty, box Color.White ]
+                            )
                         .automationId("IncrementButton")
-                        .textColor(Color.Red)
 
                     Button("Decrement", Decrement)
                         .automationId("DecrementButton")
@@ -93,4 +106,4 @@ module App =
             )
         )
 
-    let program = Program.statefulApplicationWithCmdMsg init update view mapCmdMsgToCmd
+    let program = Program.statefulApplicationWithCmdMsg init update view mapCmdMsgToCmd
diff --git a/src/Fabulous.XamarinForms/WidgetExtensions.fs b/src/Fabulous.XamarinForms/WidgetExtensions.fs
@@ -84,7 +84,11 @@ type AdditionalViewExtensions =
     [<Extension>]
     static member inline centerTextHorizontal(this: Label<_>) =
         this.AddScalarAttribute(Label.HorizontalTextAlignment.WithValue(TextAlignment.Center))
-
+
+    [<Extension>]
+    static member inline style(this: #IViewWidgetBuilder<'msg>, style: Xamarin.Forms.Style) =
+        this.AddScalarAttribute(NavigableElement.Style.WithValue(style))
+
     [<Extension>]
     static member inline centerTextVertical(this: Label<_>) =
         this.AddScalarAttribute(Label.VerticalTextAlignment.WithValue(TextAlignment.Center))

diff --git a/src/Fabulous.XamarinForms/Xamarin.Forms.Core.Attributes.fs b/src/Fabulous.XamarinForms/Xamarin.Forms.Core.Attributes.fs
@@ -3,7 +3,6 @@
 open Fabulous
 open Fabulous.XamarinForms
 open Xamarin.Forms
-open System.Collections.Generic
 
 module Application =
     let MainPage = Attributes.defineWidget ViewNode.getViewNode "Application_MainPage" (fun target -> (target :?> Xamarin.Forms.Application).MainPage) (fun target value -> (target :?> Xamarin.Forms.Application).MainPage <- unbox value)
@@ -42,6 +41,9 @@ module VisualElement =
     let Width = Attributes.defineBindable<float> Xamarin.Forms.VisualElement.WidthRequestProperty
     let IsVisible = Attributes.defineBindable<bool> Xamarin.Forms.VisualElement.IsVisibleProperty
 
+module NavigableElement =
+    let Style = Attributes.defineBindable<Style> Xamarin.Forms.NavigableElement.StyleProperty
+
 module View =
     let HorizontalOptions = Attributes.defineBindable<LayoutOptions> Xamarin.Forms.View.HorizontalOptionsProperty
     let VerticalOptions = Attributes.defineBindable<LayoutOptions> Xamarin.Forms.View.VerticalOptionsProperty
@@ -150,4 +152,4 @@ module ViewCell =
     let View = Attributes.defineWidget ViewNode.getViewNode "ViewCell_View" (fun target -> (target :?> Xamarin.Forms.ViewCell).View) (fun target value -> (target :?> Xamarin.Forms.ViewCell).View <- unbox value)
 
 module MultiPageOfPage =
-    let Children = Attributes.defineWidgetCollection ViewNode.getViewNode "MultiPageOfPage" (fun target -> (target :?> Xamarin.Forms.MultiPage<Xamarin.Forms.Page>).Children)
+    let Children = Attributes.defineWidgetCollection ViewNode.getViewNode "MultiPageOfPage" (fun target -> (target :?> Xamarin.Forms.MultiPage<Xamarin.Forms.Page>).Children)