Fixes

src/Fabulous.Maui/Compatibility/Views/Controls/Border.fs → src/Fabulous.Maui/Compatibility/Views/Controls/CompatBorder.fs

@@ -11,7 +11,7 @@ type IFabCompatBorder =
     inherit IFabCompatView
     inherit IBorder
 
-module Border =
+module CompatBorder =
     let WidgetKey = CompatWidgets.register<Border>()
 
     let Stroke = Attributes.defineBindableAppTheme<Brush> Border.StrokeProperty
@@ -75,91 +75,91 @@ module Border =
         Attributes.defineBindableWithEquality<Thickness> Border.PaddingProperty
 
 [<AutoOpen>]
-module BorderBuilders =
+module CompatBorderBuilders =
     type Fabulous.Maui.View with
 
         /// <summary>Border is a container control that draws a border, background, or both, around another control. A Border can only contain one child object. If you want to put a border around multiple objects, wrap them in a container object such as a layout</summary>
         /// <param name="light">The color of the stroke in the light theme.</param>
         /// <param name="dark">The color of the stroke in the dark theme.</param>
-        static member inline Border(content: WidgetBuilder<'msg, #IView>, light: Brush, ?dark: Brush) =
+        static member inline CompatBorder(content: WidgetBuilder<'msg, #IView>, light: Brush, ?dark: Brush) =
             WidgetBuilder<'msg, IFabCompatBorder>(
-                Border.WidgetKey,
+                CompatBorder.WidgetKey,
                 AttributesBundle(
                     StackList.two(
-                        Border.Stroke.WithValue(AppTheme.create light dark),
+                        CompatBorder.Stroke.WithValue(AppTheme.create light dark),
                         // By spec we need to set StrokeShape to Rectangle
-                        Border.StrokeShape.WithValue(Rectangle())
+                        CompatBorder.StrokeShape.WithValue(Rectangle())
                     ),
-                    ValueSome [| Border.Content.WithValue(content.Compile()) |],
+                    ValueSome [| CompatBorder.Content.WithValue(content.Compile()) |],
                     ValueNone
                 )
             )
 
         /// <summary>Border is a container control that draws a border, background, or both, around another control. A Border can only contain one child object. If you want to put a border around multiple objects, wrap them in a container object such as a layout</summary>
         /// <param name="stroke">The stroke brush widget</param>
-        static member inline Border(content: WidgetBuilder<'msg, #IView>, stroke: WidgetBuilder<'msg, #IFabCompatBrush>) =
+        static member inline CompatBorder(content: WidgetBuilder<'msg, #IView>, stroke: WidgetBuilder<'msg, #IFabCompatBrush>) =
             WidgetBuilder<'msg, IFabCompatBorder>(
-                Border.WidgetKey,
+                CompatBorder.WidgetKey,
                 AttributesBundle(
                     // By spec we need to set StrokeShape to Rectangle
-                    StackList.one(Border.StrokeShape.WithValue(Rectangle())),
+                    StackList.one(CompatBorder.StrokeShape.WithValue(Rectangle())),
                     ValueSome
-                        [| Border.Content.WithValue(content.Compile())
-                           Border.StrokeWidget.WithValue(stroke.Compile()) |],
+                        [| CompatBorder.Content.WithValue(content.Compile())
+                           CompatBorder.StrokeWidget.WithValue(stroke.Compile()) |],
                     ValueNone
                 )
             )
 
 [<Extension>]
-type BorderModifiers =
+type CompatBorderModifiers =
 
     [<Extension>]
     static member inline strokeShape(this: WidgetBuilder<'msg, #IFabCompatBorder>, content: string) =
-        this.AddScalar(Border.StrokeShapeString.WithValue(content))
+        this.AddScalar(CompatBorder.StrokeShapeString.WithValue(content))
 
     [<Extension>]
     static member inline strokeShape(this: WidgetBuilder<'msg, #IFabCompatBorder>, content: WidgetBuilder<'msg, #IFabCompatShape>) =
-        this.AddWidget(Border.StrokeShapeWidget.WithValue(content.Compile()))
+        this.AddWidget(CompatBorder.StrokeShapeWidget.WithValue(content.Compile()))
 
     [<Extension>]
     static member inline strokeThickness(this: WidgetBuilder<'msg, #IFabCompatBorder>, value: float) =
-        this.AddScalar(Border.StrokeThickness.WithValue(value))
+        this.AddScalar(CompatBorder.StrokeThickness.WithValue(value))
 
     [<Extension>]
     static member inline strokeDashArray(this: WidgetBuilder<'msg, #IFabCompatBorder>, value: string) =
-        this.AddScalar(Border.StrokeDashArrayString.WithValue(value))
+        this.AddScalar(CompatBorder.StrokeDashArrayString.WithValue(value))
 
     [<Extension>]
     static member inline strokeDashArray(this: WidgetBuilder<'msg, #IFabCompatShape>, value: float list) =
-        this.AddScalar(Border.StrokeDashArrayList.WithValue(value))
+        this.AddScalar(CompatBorder.StrokeDashArrayList.WithValue(value))
 
     [<Extension>]
     static member inline strokeDashOffset(this: WidgetBuilder<'msg, #IFabCompatBorder>, value: float) =
-        this.AddScalar(Border.StrokeDashOffset.WithValue(value))
+        this.AddScalar(CompatBorder.StrokeDashOffset.WithValue(value))
 
     [<Extension>]
     static member inline strokeLineCap(this: WidgetBuilder<'msg, #IFabCompatBorder>, value: PenLineCap) =
-        this.AddScalar(Border.StrokeLineCap.WithValue(value))
+        this.AddScalar(CompatBorder.StrokeLineCap.WithValue(value))
 
     [<Extension>]
     static member inline strokeLineJoin(this: WidgetBuilder<'msg, #IFabCompatBorder>, value: PenLineJoin) =
-        this.AddScalar(Border.StrokeLineJoin.WithValue(value))
+        this.AddScalar(CompatBorder.StrokeLineJoin.WithValue(value))
 
     [<Extension>]
     static member inline strokeMiterLimit(this: WidgetBuilder<'msg, #IFabCompatBorder>, value: float) =
-        this.AddScalar(Border.StrokeMiterLimit.WithValue(value))
+        this.AddScalar(CompatBorder.StrokeMiterLimit.WithValue(value))
 
     [<Extension>]
     static member inline padding(this: WidgetBuilder<'msg, #IFabCompatBorder>, value: Thickness) =
-        this.AddScalar(Border.Padding.WithValue(value))
+        this.AddScalar(CompatBorder.Padding.WithValue(value))
 
     [<Extension>]
     static member inline padding(this: WidgetBuilder<'msg, #IFabCompatBorder>, value: float) =
-        BorderModifiers.padding(this, Thickness(value))
+        CompatBorderModifiers.padding(this, Thickness(value))
 
     [<Extension>]
     static member inline padding(this: WidgetBuilder<'msg, #IFabCompatBorder>, left: float, top: float, right: float, bottom: float) =
-        BorderModifiers.padding(this, Thickness(left, top, right, bottom))
+        CompatBorderModifiers.padding(this, Thickness(left, top, right, bottom))
 
     /// <summary>Link a ViewRef to access the direct Border control instance</summary>
     [<Extension>]

src/Fabulous.Maui/Compatibility/Views/Layouts/CompatContentView.fs

@@ -18,7 +18,7 @@ module CompatContentView =
 module CompatContentViewBuilders =
     type Fabulous.Maui.View with
 
-        static member inline ContentView(content: WidgetBuilder<'msg, #IView>) =
+        static member inline CompatContentView(content: WidgetBuilder<'msg, #IView>) =
             WidgetHelpers.buildWidgets<'msg, IFabCompatContentView> CompatContentView.WidgetKey [| CompatContentView.Content.WithValue(content.Compile()) |]
 
 [<Extension>]

src/Fabulous.Maui/Core/Views/Controls/Image.fs

@@ -22,20 +22,22 @@ module Image =
 [<AutoOpen>]
 module ImageBuilders =
     type Fabulous.Maui.View with
-
         static member inline Image(file: string) =
             WidgetBuilder<'msg, IFabImage>(Image.WidgetKey, ImageSourcePart.Source.WithValue(FabFileImageSource(file)))
+
+        static member inline Image(file: string, aspect: Aspect) =
+            WidgetBuilder<'msg, IFabImage>(
+                Image.WidgetKey,
+                ImageSourcePart.Source.WithValue(FabFileImageSource(file)),
+                Image.Aspect.WithValue(aspect)
+            )
 
 [<Extension>]
 type ImageModifiers =
     [<Extension>]
     static member isAnimationPlaying(this: WidgetBuilder<'msg, #IFabImage>, value: bool) =
         this.AddScalar(Image.IsAnimationPlaying.WithValue(value))
 
-    [<Extension>]
-    static member aspect(this: WidgetBuilder<'msg, #IFabImage>, value: Aspect) =
-        this.AddScalar(Image.Aspect.WithValue(value))
-
     [<Extension>]
     static member isOpaque(this: WidgetBuilder<'msg, #IFabImage>, value: bool) =
         this.AddScalar(Image.IsOpaque.WithValue(value))

src/Fabulous.Maui/Core/Views/Controls/Partials/_ButtonStroke.fs

@@ -22,8 +22,8 @@ type ButtonStrokeModifiers =
         this.AddScalar(ButtonStroke.CornerRadius.WithValue(value))
 
     [<Extension>]
-    static member strokeColor(this: WidgetBuilder<'msg, #IFabButtonStroke>, value: Color) =
-        this.AddScalar(ButtonStroke.StrokeColor.WithValue(value))
+    static member strokeColor(this: WidgetBuilder<'msg, #IFabButtonStroke>, value: FabColor) =
+        this.AddScalar(ButtonStroke.StrokeColor.WithValue(value.ToMauiColor()))
 
     [<Extension>]
     static member strokeThickness(this: WidgetBuilder<'msg, #IFabButtonStroke>, value: float) =

src/Fabulous.Maui/Core/Views/Controls/Partials/_TextStyle.fs

@@ -24,3 +24,9 @@ type TextStyleModifiers =
     [<Extension>]
     static member inline textColor(this: WidgetBuilder<'msg, #IFabTextStyle>, value: Microsoft.Maui.Graphics.Color) =
         this.AddScalar(TextStyle.TextColor.WithValue(value))
+
+[<Extension>]
+type TextStyleExtraModifiers =
+    [<Extension>]
+    static member inline textColor(this: WidgetBuilder<'msg, #IFabTextStyle>, value: FabColor) =
+        this.textColor(value.ToMauiColor())

src/Fabulous.Maui/Core/Views/Layouts/Partials/_BorderStroke.fs

@@ -1,7 +1,16 @@
 namespace Fabulous.Maui
 
+open System.Runtime.CompilerServices
+open Fabulous
+open Microsoft.Maui.Graphics
 open Microsoft.Maui.Handlers.Defaults
 
 module BorderStroke =
     let Shape =
         Attributes.defineMauiProperty "Shape" BorderStrokeDefaults.Shape (fun (target: IFabBorderStroke) -> target.SetShape)
+
+[<Extension>]
+type BorderStrokeModifiers =
+    [<Extension>]
+    static member shape(this: WidgetBuilder<'msg, #IFabBorderStroke>, shape: IShape) =
+        this.AddScalar(BorderStroke.Shape.WithValue(shape))

src/Fabulous.Maui/Core/Views/Layouts/Partials/_Stroke.fs

@@ -1,5 +1,8 @@
 namespace Fabulous.Maui
 
+open System.Runtime.CompilerServices
+open Fabulous
+open Microsoft.Maui.Graphics
 open Microsoft.Maui.Handlers.Defaults
 
 module Stroke =
@@ -23,3 +26,39 @@ module Stroke =
 
     let StrokeMiterLimit =
         Attributes.defineMauiProperty "StrokeMiterLimit" StrokeDefaults.StrokeMiterLimit (fun (target: IFabStroke) -> target.SetStrokeMiterLimit)
+
+[<Extension>]
+type StrokeModifiers =
+    [<Extension>]
+    static member stroke(this: WidgetBuilder<'msg, #IFabStroke>, value: Paint) =
+        this.AddScalar(Stroke.Stroke.WithValue(value))
+
+    [<Extension>]
+    static member strokeThickness(this: WidgetBuilder<'msg, #IFabStroke>, value: float) =
+        this.AddScalar(Stroke.StrokeThickness.WithValue(value))
+
+    [<Extension>]
+    static member strokeLineCap(this: WidgetBuilder<'msg, #IFabStroke>, value: LineCap) =
+        this.AddScalar(Stroke.StrokeLineCap.WithValue(value))
+
+    [<Extension>]
+    static member strokeLineJoin(this: WidgetBuilder<'msg, #IFabStroke>, value: LineJoin) =
+        this.AddScalar(Stroke.StrokeLineJoin.WithValue(value))
+
+    [<Extension>]
+    static member strokeDashPattern(this: WidgetBuilder<'msg, #IFabStroke>, value: float list) =
+        this.AddScalar(Stroke.StrokeDashPattern.WithValue(value |> List.map float32 |> List.toArray))
+
+    [<Extension>]
+    static member strokeDashOffset(this: WidgetBuilder<'msg, #IFabStroke>, value: float) =
+        this.AddScalar(Stroke.StrokeDashOffset.WithValue(float32 value))
+
+    [<Extension>]
+    static member strokeMiterLimit(this: WidgetBuilder<'msg, #IFabStroke>, value: float) =
+        this.AddScalar(Stroke.StrokeMiterLimit.WithValue(float32 value))
+
+[<Extension>]
+type StrokeExtraModifiers =
+    [<Extension>]
+    static member stroke(this: WidgetBuilder<'msg, #IFabStroke>, value: FabColor) =
+        this.stroke(SolidPaint(value.ToMauiColor()))

src/Fabulous.Maui/Core/Views/Partials/_View.fs

@@ -170,6 +170,12 @@ type ViewExtraModifiers =
     static member inline centerVertical(this: WidgetBuilder<'msg, #IFabView>) =
         this.verticalLayoutAlignment(LayoutAlignment.Center)
 
+    [<Extension>]
+    static member inline center(this: WidgetBuilder<'msg, #IFabView>) =
+        this
+            .centerHorizontal()
+            .centerVertical()
+
     [<Extension>]
     static member inline alignStartHorizontal(this: WidgetBuilder<'msg, #IFabView>) =
         this.horizontalLayoutAlignment(LayoutAlignment.Start)
@@ -201,5 +207,9 @@ type ViewExtraModifiers =
                 .AddScalar(View'.Height.WithValue(h))
 
     [<Extension>]
-    static member background(this: WidgetBuilder<'msg, #IFabView>, value: Color) =
-        this.AddScalar(View'.Background.WithValue(SolidPaint(value)))
+    static member inline background(this: WidgetBuilder<'msg, #IFabView>, value: Color) =
+        this.background(SolidPaint(value))
+
+    [<Extension>]
+    static member inline background(this: WidgetBuilder<'msg, #IFabView>, value: FabColor) =
+        this.background(value.ToMauiColor())

src/Fabulous.Maui/Core/Widgets.fs

@@ -63,8 +63,3 @@ module Widgets =
 
     let register<'T when 'T :> FabElement and 'T: (new: unit -> 'T)> () =
         registerWithAdditionalSetup<'T>(fun _ _ -> ())
-
-[<Extension>]
-type FabElementExtensions =
-    [<Extension>]
-    static member inline style(this: WidgetBuilder<'msg, #IFabElement>, fn: WidgetBuilder<'msg, #IFabElement> -> WidgetBuilder<'msg, #IFabElement>) = fn this

src/Fabulous.Maui/Fabulous.Maui.fsproj

@@ -156,7 +156,7 @@
     <Compile Include="Compatibility\Views\Controls\IndicatorView.fs" />
     <Compile Include="Compatibility\Views\Controls\_GestureElement.fs" />
     <Compile Include="Compatibility\Views\Controls\Span.fs" />
-    <Compile Include="Compatibility\Views\Controls\Border.fs" />
+    <Compile Include="Compatibility\Views\Controls\CompatBorder.fs" />
     <Compile Include="Compatibility\Views\Controls\ActivityIndicator.fs" />
     <Compile Include="Compatibility\Views\Controls\BoxView.fs" />
     <Compile Include="Compatibility\Views\Controls\_InputView.fs" />
@@ -184,6 +184,7 @@
     <Compile Include="ThemeAwareness.fs" />
     <Compile Include="Program.fs" />
     <Compile Include="AppHostBuilderExtensions.fs" />
+    <Compile Include="Style.fs" />
   </ItemGroup>
   <ItemGroup>
     <ProjectReference Include="..\Fabulous.Maui.Controls\Fabulous.Maui.Controls.csproj" PrivateAssets="all" />

src/Fabulous.Maui/Style.fs

@@ -0,0 +1,11 @@
+namespace Fabulous.Maui
+
+open System.Runtime.CompilerServices
+open Fabulous
+open Microsoft.Maui
+
+[<Extension>]
+type StyleExtensions =
+    [<Extension>]
+    static member inline style(this: WidgetBuilder<'msg, #IElement>, fn: WidgetBuilder<'msg, #IElement> -> WidgetBuilder<'msg, #IElement>) =
+        fn this