Merge pull request #1012 from TimLariviere/focus-modifier

Add focus modifier + update VisualElement docs

docs/content/en/v2/api/visual-element.md

@@ -25,38 +25,37 @@ This control can't be instantiated on its own. Its properties and events are inh
 
 | Properties | Description |
 |--|--|
-| anchorX(value: float) | Sets the horizontal anchor of the element. |
-| anchorY(value: float) | Sets the vertical anchor of the element. |
-| backgroundColor(light: FabColor, ?dark: FabColor) | | Sets the background color depending if light or dark mode |
-| background(light: FabColor, ?dark: FabColor) | | Sets the background color depending if light or dark mode |
-| clip(content: WidgetBuilder<'msg, 'contentMarker>) | Defines the outline of the contents of an element.
+| anchorX(value: float) | Sets the anchor of the element on the X axis. |
+| anchorY(value: float) | Sets the anchor of the element on the Y axis. |
+| backgroundColor(light: FabColor, ?dark: FabColor) | | Sets the background color depending if light or dark mode. |
+| background(light: Brush, ?dark: Brush) | | Sets the background brush depending if light or dark mode. |
+| clip(content: WidgetBuilder<'msg, 'contentMarker>) | Clips the shape of the element based on a geometry. |
 | flowDirection(value: FlowDirection) | Sets the flow direction of the element. |
-| size(?width: float, ?height: float) | Sets the size of an element by applying the width and height of the element. |
-| width(value: float) | Sets the width of an element. |
+| focus(isFocused: bool, onFocusChanged: bool -> 'msg) | Sets the focus state of the element and listen for any changes. |
 | height(value: float) | Sets the height of an element. |
-| inputTransparent(value: bool) | Sets a value indicating whether this element should be involved in the user interaction cycle. |
+| inputTransparent(value: bool) | Sets a value indicating whether this element should interact with the user. |
 | isEnabled(value: bool) | Sets a value indicating whether this element is enabled. |
-| isVisible(value: bool) | Sets a value indicating whether this element is visible. |
 | isTabStop(value: bool) | Sets a value that indicates whether a control is included in tab navigation. |
-| minimumWidth(value: float) | Sets the minimum width of an element. |
-| minimumHeight(value: float) | Sets the minimum height of an element. |
-| opacity(value: float) | Sets the opacity of an element. |
-| tabIndex(value: int) | Sets the tab index of an element. |
+| isVisible(value: bool) | Sets a value indicating whether this element is visible. |
+| minimumHeight(value: float) | Sets the minimum height of the element. |
+| minimumWidth(value: float) | Sets the minimum width of the element. |
+| opacity(value: float) | Sets the opacity of the element. |
+| tabIndex(value: int) | Sets the tab index of the element. |
+| translationX(x: float) | Translates the position of the element on the X axis. |
+| translationY(y: float) | Translates the position of the element on the Y axis. |
+| size(?width: float, ?height: float) | Sets the size of an element by applying the width and height of the element. |
 | visual(value: IVisual) | Sets the visual of an element. With the VisualMarker class providing the following IVisual properties: Default, MatchParent, Material. |
-| translateTo(x: float, y: float, duration: int, easing: Easing) | Animates an elements TranslationX and TranslationY properties from their current values to the new values. |
-| translationX(x: float) | Translates the X position of the element. |
-| translationY(y: float) | Translates the Y position of the element. |
-| scaleTo(scale: float, duration: int, easing: Easing) | Animates elements Scale property from their current values to the new values. |
-| scaleXTo(scale: float) | Animates element ScaleX property from its current value to the new value. |
-| scaleYTo(scale: float) | Animates element ScaleY property from its current value to the new value. |
-| fadeTo(opacity: float, duration: int, easing: Easing) | Animates elements Opacity property from their current values to the new values. |
-| rotateTo(rotation: float, duration: int, easing: Easing) | Animates an elements Rotation property from their current values to the new values. |
-| rotateXTo(rotation: float) | Animates element RotationX property from its current value to the new value. |
-| rotateYTo(rotation: float) | Animates element RotationY property from its current value to the new value. |
+| width(value: float) | Sets the width of an element. |
 
-## Events
+## Animations
 
 | Properties | Description |
 |--|--|
-| onFocused(onFocused: bool -> 'msg) | Event that is triggered when the element is focused. |
-| onUnfocused(onUnfocused: bool -> 'msg) | Event that is triggered when the element is unfocused. |
+| fadeTo(opacity: float, duration: int, easing: Easing) | Animates elements Opacity property from their current values to the new values. |
+| rotateTo(rotation: float, duration: int, easing: Easing) | Animates an elements Rotation property from their current values to the new values. |
+| rotateXTo(rotation: float) | Animates an elements RotationX property from its current value to the new value. This ensures that the input layout is in the same position as the visual layout. |
+| rotateYTo(rotation: float) | Animates an elements RotationY property from its current value to the new value. This ensures that the input layout is in the same position as the visual layout. |
+| scaleTo(scale: float, duration: int, easing: Easing) | Animates elements Scale property from their current values to the new values. |
+| scaleXTo(scale: float) | Animates elements ScaleX property from their current value to the new value. This ensures that the input layout is in the same position as the visual layout. |
+| scaleYTo(scale: float) | Animates elements ScaleY property from their current value to the new value. This ensures that the input layout is in the same position as the visual layout. |
+| translateTo(x: float, y: float, duration: int, easing: Easing) | Animates an elements TranslationX and TranslationY properties from their current values to the new values. |

samples/Xamarin.Forms/FabulousContacts/FabulousContacts/AboutPage.fs

@@ -162,7 +162,7 @@ module AboutPage =
             ScrollView(
                 (VStack() {
                     ContentView(Image(Aspect.AspectFit, "icon.png"))
-                        .backgroundColor(accentColor)
+                        .background(accentColor)
                         .size(height = 100., width = 100.)
                         .centerHorizontal()
                         .padding(15.)

samples/Xamarin.Forms/FabulousContacts/FabulousContacts/Components.fs

@@ -37,7 +37,7 @@ module Components =
 
     let destroyButton text onClicked =
         Button(text, onClicked)
-            .backgroundColor(Color.Red.ToFabColor())
+            .background(Color.Red.ToFabColor())
             .textColor(Color.White.ToFabColor())
             .margin(0., 20., 0., 0.)
             .alignEndVertical(expand = true)
@@ -55,7 +55,7 @@ module Components =
                     .verticalTextAlignment(TextAlignment.Center)
                     .margin(Thickness(20., 5.))
              })
-                .backgroundColor(accentColor)
+                .background(accentColor)
         )
 
     let cellView picture name address isFavorite =
@@ -90,7 +90,7 @@ module Components =
 
     let detailActionButton (imagePath: string) onClicked =
         ImageButton(Aspect.AspectFit, imagePath, onClicked)
-            .backgroundColor(accentColor)
+            .background(accentColor)
             .size(height = 35.)
             .fillHorizontal(expand = true)
 
@@ -121,7 +121,7 @@ module Components =
         match picture with
         | None ->
             ContentView(ImageButton(Aspect.AspectFit, "addphoto.png", updatePicture))
-                .backgroundColor(Color.White.ToFabColor())
+                .background(Color.White.ToFabColor())
                 .gridRowSpan(2)
 
         | Some picture ->

samples/Xamarin.Forms/FabulousContacts/FabulousContacts/ContactsListPage.fs

@@ -110,7 +110,7 @@ module ContactsListPage =
             title,
             (VStack(spacing = 0.) {
                 SearchBar(model.FilterText, UpdateFilterText, Search)
-                    .backgroundColor(accentColor)
+                    .background(accentColor)
                     .cancelButtonColor(accentTextColor)
 
                 (ListView

samples/Xamarin.Forms/FabulousContacts/FabulousContacts/DetailPage.fs

@@ -119,7 +119,7 @@ module DetailPage =
                         .alignStartVertical()
                  })
                     .size(height = 125., width = 125.)
-                    .backgroundColor(Color.White.ToFabColor())
+                    .background(Color.White.ToFabColor())
                     .centerHorizontal()
 
                 (HStack(spacing = 20.) {
@@ -133,7 +133,7 @@ module DetailPage =
                     .centerHorizontal()
                     .margin(0., 10., 0., 10.)
              })
-                .backgroundColor(FabColor.fromHex "#448cb8")
+                .background(FabColor.fromHex "#448cb8")
                 .padding(20., 10., 20., 10.)
         with
         | ex -> raise ex

samples/Xamarin.Forms/FabulousWeather/FabulousWeather/CityView.fs

@@ -87,7 +87,7 @@ module CityView =
                                     }
                                 )
                             )
-                                .backgroundColor(Styles.HourlyForecastStartColor)
+                                .background(Styles.HourlyForecastStartColor)
                      })
                         .centerHorizontal()
                         .margin(0., 30., 0., 0.)

samples/Xamarin.Forms/TicTacToe/TicTacToe/App.fs

@@ -227,7 +227,7 @@ module App =
                                 for row, col as pos in positions do
                                     if canPlay model model.Board.[pos] then
                                         Button("", Play pos)
-                                            .backgroundColor(Colors.lightBlue)
+                                            .background(Colors.lightBlue)
                                             .gridRow(row * 2)
                                             .gridColumn(col * 2)
                                     else
@@ -252,7 +252,7 @@ module App =
 
                             Button("Restart game", Restart)
                                 .textColor(Colors.black)
-                                .backgroundColor(Colors.lightBlue)
+                                .background(Colors.lightBlue)
                                 .font(namedSize = NamedSize.Large)
                                 .gridRow(2)
                         }