@@ -9,24 +9,56 @@ open Fabulous.Maui
99open Microsoft.Maui.Graphics
1010open Fabulous
1111open Fabulous.Maui
12−open Microsoft.Maui
1312open Microsoft.Maui.Graphics
1413
1514open type Fabulous.Maui.View
15+open type Fabulous.Maui.VisualElementAnimationModifiers
16+open type Microsoft.Maui.Controls.ViewExtensions
1617
1718module Buttons =
1819 open Microsoft.Maui
1920
20− let button (text: string) (msg: 'msg) : WidgetBuilder<'msg, _> =
21+ let private animationDuration = 100u
22+ let private animationEasing = Easing.CubicOut
23+
24+ let button (text: string) (msg: 'msg) =
25+
26+ let shadowRef = ViewRef<Microsoft.Maui.Controls.Shapes.Rectangle>()
27+
28+ let animate pressed =
29+ match shadowRef.TryValue with
30+ | None -> ()
31+ | Some c ->
32+ if pressed then
33+ c.TranslateToAsync(8., 8., animationDuration, animationEasing) |> ignore
34+ else
35+ c.TranslateToAsync(12., 12., animationDuration, animationEasing) |> ignore
36+
2137 Component(text) {
38+
2239 Grid() {
23− Rectangle().margin(Thickness(8., 8., -8., -8.)).background (Colors.Black)
24−
25− Button(text, msg)
26− .borderWidth(4)
27− .background(Constants.accentColor)
28− .borderColor(Colors.Black)
29− .textColor(Colors.White)
30− .font (fontFamily = "UnboundedBold", size = 24.)
40+
41+ Rectangle().reference(shadowRef).background(Colors.Black).translationX(12.).translationY (12.)
42+ Rectangle().background (Constants.accentColor)
43+
44+
45+ Label(text).textColor(Colors.White).font(fontFamily = "UnboundedBold", size = 24.).center().margin (8)
46+
47+
48+ Rectangle()
49+ .strokeThickness(4.)
50+ .stroke(Colors.Black)
51+ .margin(-3)
52+ .fillHorizontal()
53+ .fillVertical()
54+ .gestureRecognizers () {
55+ PointerGestureRecognizer()
56+ .onPointerPressed(fun _ -> animate true)
57+ .onPointerReleased(fun _ -> animate false)
58+ .onPointerExited (fun _ -> animate false)
59+
60+ TapGestureRecognizer(msg)
61+ }
62+
3163 }
3264 }