Add ImageButton sample

samples/Gallery/Gallery.fsproj

@@ -49,6 +49,7 @@
     <Compile Include="Styles.fs" />
     <Compile Include="Common.fs" />
     <Compile Include="Samples\TextButton.fs" />
+    <Compile Include="Samples\ImageButton.fs" />
     <Compile Include="Samples\Label.fs" />
     <Compile Include="Samples.fs" />
     <Compile Include="Overview.fs" />

samples/Gallery/Samples.fs

@@ -3,4 +3,4 @@ namespace Gallery
 open Gallery.Samples
 
 module RegisteredSamples =
-    let samples = [ Label.sample; TextButton.sample ]
+    let samples = [ ImageButton.sample; Label.sample; TextButton.sample ]

samples/Gallery/Samples/ImageButton.fs

@@ -0,0 +1,31 @@
+namespace Gallery.Samples
+
+open Gallery
+open Fabulous.Maui
+open Microsoft.Maui
+open Microsoft.Maui.Graphics
+open type Fabulous.Maui.View
+
+module ImageButton =
+    let view () =
+        VStack(spacing = 15.) {
+            Label("Default ImageButton")
+            ImageButton("dotnet_bot.png", ())
+
+            Label("ImageButton with background and width/height")
+
+            ImageButton("dotnet_bot.png", ())
+                .background(SolidPaint(Colors.LightBlue))
+                .width(250.)
+                .height(50.)
+
+            Label("ImageButton with Aspect = Fill")
+            ImageButton("dotnet_bot.png", ()).aspect(Aspect.Fill)
+        }
+
+    let sampleProgram = Helper.createStatelessProgram view
+
+    let sample =
+        { Name = "ImageButton"
+          Description = "A button widget with an image that reacts to touch events"
+          Program = sampleProgram }

src/Fabulous.Maui.Controls/Controls/FabImageButton.cs

@@ -0,0 +1,33 @@
+using Microsoft.Maui;
+using Microsoft.Maui.Handlers.Defaults;
+
+namespace Fabulous.Maui
+{
+    public interface IFabImageButton: IImageButton, IFabButton, IFabImage
+    {
+
+    }
+}
+
+namespace Fabulous.Maui.Controls
+{
+    public class FabImageButton : FabButton, IFabImageButton
+    {
+        private bool _isLoading; // TODO: What is this for?
+
+        public void UpdateIsLoading(bool isLoading)
+        {
+            _isLoading = isLoading;
+        }
+
+        public IImageSource? Source { get; private set; } = ImageSourcePartDefaults.Source;
+        public bool IsAnimationPlaying { get; private set; } = ImageDefaults.IsAnimationPlaying;
+        public Aspect Aspect { get; private set; } = ImageDefaults.Aspect;
+        public bool IsOpaque { get; private set; } = ImageDefaults.IsOpaque;
+
+        public void SetSource(IImageSource? value) => Source = value;
+        public void SetIsAnimationPlaying(bool value) => IsAnimationPlaying = value;
+        public void SetAspect(Aspect value) => Aspect = value;
+        public void SetIsOpaque(bool value) => IsOpaque = value;
+    }
+}

src/Fabulous.Maui.Controls/FabButton.cs → src/Fabulous.Maui.Controls/Controls/Partials/FabButton.cs

@@ -30,7 +30,6 @@ public abstract class FabButton : FabView, IFabButton
         public void Clicked() => OnClicked?.Invoke();
 
 
-
         public void SetPadding(Thickness value) => Padding = value;
         public void SetStrokeColor(Color value) => StrokeColor = value;
         public void SetStrokeThickness(double value) => StrokeThickness = value;

src/Fabulous.Maui.Controls/FabView.cs → src/Fabulous.Maui.Controls/Partials/FabView.cs

@@ -34,7 +34,7 @@ public interface IFabView : IView, IFabElement, IFabTransform
 
 namespace Fabulous.Maui.Controls
 {
-    public class FabView : FabElement, IFabView
+    public abstract class FabView : FabElement, IFabView
     {
         public Rect Frame { get; set; }
         public Size DesiredSize { get; private set; }

src/Fabulous.Maui/AppHostBuilderExtensions.fs

@@ -40,19 +40,26 @@ module FabulousHandlers =
     let register (collection: IMauiHandlersCollection) =
         collection
             .AddMauiControlsHandlers()
-            .AddHandler<FabApplication, ApplicationHandler>()
-            .AddHandler<FabWindow, WindowHandler>()
+
+            // Controls
             .AddHandler<FabLabel, FabLabelHandler>()
-            .AddHandler<FabButton, ButtonHandler>()
-            .AddHandler<FabHorizontalStackLayout, LayoutHandler>()
-            .AddHandler<FabVerticalStackLayout, LayoutHandler>()
-            .AddHandler<FabScrollView, ScrollViewHandler>()
             .AddHandler<FabImage, ImageHandler>()
-            .AddHandler<FabContentView, ContentViewHandler>()
-            .AddHandler<FabSwitch, SwitchHandler>()
+            .AddHandler<FabImageButton, ImageButtonHandler>()
             .AddHandler<FabSlider, SliderHandler>()
+            .AddHandler<FabSwitch, SwitchHandler>()
             .AddHandler<FabTextButton, ButtonHandler>()
+
+            // Layouts
+            .AddHandler<FabBorderView, BorderHandler>()
+            .AddHandler<FabContentView, ContentViewHandler>()
             .AddHandler<FabGridLayout, LayoutHandler>()
+            .AddHandler<FabHorizontalStackLayout, LayoutHandler>()
+            .AddHandler<FabScrollView, ScrollViewHandler>()
+            .AddHandler<FabVerticalStackLayout, LayoutHandler>()
+
+            // Common
+            .AddHandler<FabApplication, ApplicationHandler>()
+            .AddHandler<FabWindow, WindowHandler>()
             .AddHandler<FabNavigationStack, FabNavigationViewHandler>()
         |> ignore
 

src/Fabulous.Maui/Compatibility/Views/Controls/Button.fs → src/Fabulous.Maui/Compatibility/Views/Controls/CompatButton.fs

@@ -12,7 +12,7 @@ type IFabCompatButton =
     inherit IFabCompatView
     inherit IButton
 
-module Button =
+module CompatButton =
     let WidgetKey = CompatWidgets.register<Button>()
 
     let BorderColor = Attributes.defineBindableAppThemeColor Button.BorderColorProperty
@@ -64,49 +64,49 @@ module Button =
         Attributes.defineEventNoArg "Button_Released" (fun target -> (target :?> Button).Released)
 
 [<AutoOpen>]
-module ButtonBuilders =
+module CompatButtonBuilders =
     type Fabulous.Maui.View with
 
-        static member inline Button<'msg>(text: string, onClicked: 'msg) =
-            WidgetBuilder<'msg, IFabCompatButton>(Button.WidgetKey, Button.Text.WithValue(text), Button.Clicked.WithValue(onClicked))
+        static member inline CompatButton<'msg>(text: string, onClicked: 'msg) =
+            WidgetBuilder<'msg, IFabCompatButton>(CompatButton.WidgetKey, CompatButton.Text.WithValue(text), CompatButton.Clicked.WithValue(onClicked))
 
 [<Extension>]
-type ButtonModifiers =
+type CompatButtonModifiers =
     [<Extension>]
     static member inline textColor(this: WidgetBuilder<'msg, #IFabCompatButton>, light: FabColor, ?dark: FabColor) =
-        this.AddScalar(Button.TextColor.WithValue(AppTheme.create light dark))
+        this.AddScalar(CompatButton.TextColor.WithValue(AppTheme.create light dark))
 
     [<Extension>]
     static member inline textTransform(this: WidgetBuilder<'msg, #IFabCompatButton>, value: TextTransform) =
-        this.AddScalar(Button.TextTransform.WithValue(value))
+        this.AddScalar(CompatButton.TextTransform.WithValue(value))
 
     [<Extension>]
     static member inline cornerRadius(this: WidgetBuilder<'msg, #IFabCompatButton>, value: int) =
-        this.AddScalar(Button.CornerRadius.WithValue(value))
+        this.AddScalar(CompatButton.CornerRadius.WithValue(value))
 
     [<Extension>]
     static member inline borderColor(this: WidgetBuilder<'msg, #IFabCompatButton>, light: FabColor, ?dark: FabColor) =
-        this.AddScalar(Button.BorderColor.WithValue(AppTheme.create light dark))
+        this.AddScalar(CompatButton.BorderColor.WithValue(AppTheme.create light dark))
 
     [<Extension>]
     static member inline borderWidth(this: WidgetBuilder<'msg, #IFabCompatButton>, value: float) =
-        this.AddScalar(Button.BorderWidth.WithValue(value))
+        this.AddScalar(CompatButton.BorderWidth.WithValue(value))
 
     [<Extension>]
     static member inline padding(this: WidgetBuilder<'msg, #IFabCompatButton>, value: Thickness) =
-        this.AddScalar(Button.Padding.WithValue(value))
+        this.AddScalar(CompatButton.Padding.WithValue(value))
 
     [<Extension>]
     static member inline padding(this: WidgetBuilder<'msg, #IFabCompatButton>, value: float) =
-        ButtonModifiers.padding(this, Thickness(value))
+        CompatButtonModifiers.padding(this, Thickness(value))
 
     [<Extension>]
     static member inline padding(this: WidgetBuilder<'msg, #IFabCompatButton>, left: float, top: float, right: float, bottom: float) =
-        ButtonModifiers.padding(this, Thickness(left, top, right, bottom))
+        CompatButtonModifiers.padding(this, Thickness(left, top, right, bottom))
 
     [<Extension>]
     static member inline characterSpacing(this: WidgetBuilder<'msg, #IFabCompatButton>, value: float) =
-        this.AddScalar(Button.CharacterSpacing.WithValue(value))
+        this.AddScalar(CompatButton.CharacterSpacing.WithValue(value))
 
     [<Extension>]
     static member inline contentLayout
@@ -115,7 +115,7 @@ type ButtonModifiers =
             position: Microsoft.Maui.Controls.Button.ButtonContentLayout.ImagePosition,
             spacing: float
         ) =
-        this.AddScalar(Button.ContentLayout.WithValue(Button.ButtonContentLayout(position, spacing)))
+        this.AddScalar(CompatButton.ContentLayout.WithValue(Button.ButtonContentLayout(position, spacing)))
 
     [<Extension>]
     static member inline font
@@ -131,25 +131,25 @@ type ButtonModifiers =
 
         match size with
         | None -> ()
-        | Some v -> res <- res.AddScalar(Button.FontSize.WithValue(v))
+        | Some v -> res <- res.AddScalar(CompatButton.FontSize.WithValue(v))
 
         match attributes with
         | None -> ()
-        | Some v -> res <- res.AddScalar(Button.FontAttributes.WithValue(v))
+        | Some v -> res <- res.AddScalar(CompatButton.FontAttributes.WithValue(v))
 
         match fontFamily with
         | None -> ()
-        | Some v -> res <- res.AddScalar(Button.FontFamily.WithValue(v))
+        | Some v -> res <- res.AddScalar(CompatButton.FontFamily.WithValue(v))
 
         match autoScalingEnabled with
         | None -> ()
-        | Some v -> res <- res.AddScalar(Button.FontAutoScalingEnabled.WithValue(v))
+        | Some v -> res <- res.AddScalar(CompatButton.FontAutoScalingEnabled.WithValue(v))
 
         res
 
     [<Extension>]
     static member inline image(this: WidgetBuilder<'msg, #IFabCompatButton>, light: ImageSource, ?dark: ImageSource) =
-        this.AddScalar(Button.ImageSource.WithValue(AppTheme.create light dark))
+        this.AddScalar(CompatButton.ImageSource.WithValue(AppTheme.create light dark))
 
     [<Extension>]
     static member inline image(this: WidgetBuilder<'msg, #IFabCompatButton>, light: string, ?dark: string) =
@@ -160,7 +160,7 @@ type ButtonModifiers =
             | None -> None
             | Some v -> Some(ImageSource.FromFile(v))
 
-        ButtonModifiers.image(this, light, ?dark = dark)
+        CompatButtonModifiers.image(this, light, ?dark = dark)
 
     [<Extension>]
     static member inline image(this: WidgetBuilder<'msg, #IFabCompatButton>, light: Uri, ?dark: Uri) =
@@ -171,7 +171,7 @@ type ButtonModifiers =
             | None -> None
             | Some v -> Some(ImageSource.FromUri(v))
 
-        ButtonModifiers.image(this, light, ?dark = dark)
+        CompatButtonModifiers.image(this, light, ?dark = dark)
 
     [<Extension>]
     static member inline image(this: WidgetBuilder<'msg, #IFabCompatButton>, light: Stream, ?dark: Stream) =
@@ -182,21 +182,21 @@ type ButtonModifiers =
             | None -> None
             | Some v -> Some(ImageSource.FromStream(fun () -> v))
 
-        ButtonModifiers.image(this, light, ?dark = dark)
+        CompatButtonModifiers.image(this, light, ?dark = dark)
 
     [<Extension>]
     static member inline onPressed(this: WidgetBuilder<'msg, #IFabCompatButton>, onPressed: 'msg) =
-        this.AddScalar(Button.Pressed.WithValue(onPressed))
+        this.AddScalar(CompatButton.Pressed.WithValue(onPressed))
 
     [<Extension>]
     static member inline onReleased(this: WidgetBuilder<'msg, #IFabCompatButton>, onReleased: 'msg) =
-        this.AddScalar(Button.Released.WithValue(onReleased))
+        this.AddScalar(CompatButton.Released.WithValue(onReleased))
 
     /// <summary>Determines how text should be handled when it can't fit on one line.</summary>
     /// <param name="value">The default value of this property is LineBreakMode.NoWrap</param>
     [<Extension>]
     static member inline lineBreakMode(this: WidgetBuilder<'msg, #IFabCompatButton>, value: LineBreakMode) =
-        this.AddScalar(Button.LineBreakMode.WithValue(value))
+        this.AddScalar(CompatButton.LineBreakMode.WithValue(value))
 
     /// <summary>Link a ViewRef to access the direct Button control instance</summary>
     [<Extension>]