Flyout component support

According to docs (https://docs.avaloniaui.net/docs/controls/flyouts) Avalonia has Flyout components, but in Avalonia.FuncUI no implementation for that component, so I tried to add it by myself and I’ve got a problem that I’m stuck with.

I’ve implemented basic frame for new component:

namespace Avalonia.FuncUI.DSL

[<AutoOpen>]
module Flyout =
    open Avalonia.Controls
    open Avalonia.FuncUI.Types
    open Avalonia.FuncUI.Builder
    open Avalonia.Controls.Primitives
    
    let create (attrs: IAttr<Flyout> list): IView<Flyout> =
        ViewBuilder.Create<Flyout>(attrs)

    type FlyoutBase with

        /// <summary>
        /// A value indicating whether the flyout is visible.
        /// </summary>
        static member isOpen<'t when 't :> FlyoutBase>(value: bool) : IAttr<'t> =
            AttrBuilder<'t>.CreateProperty<bool>(FlyoutBase.IsOpenProperty, value, ValueNone)
            
        /// <summary>
        /// A value indicating how the flyout is positioned.
        /// </summary>
        static member placement<'t when 't :> FlyoutBase>(value: FlyoutPlacementMode) : IAttr<'t> =
            AttrBuilder<'t>.CreateProperty<FlyoutPlacementMode>(Flyout.PlacementProperty, value, ValueNone)
            
        /// <summary>
        /// A value indicating flyout show mode.
        /// </summary>
        static member showMode<'t when 't :> FlyoutBase>(value: FlyoutShowMode) : IAttr<'t> =
            AttrBuilder<'t>.CreateProperty<FlyoutShowMode>(Flyout.ShowModeProperty, value, ValueNone)
            
    type Flyout with

        static member content<'t when 't :> Flyout>(value: IView option) : IAttr<'t> =
            AttrBuilder<'t>.CreateContentSingle(Flyout.ContentProperty, value)

        static member content<'t when 't :> Flyout>(value: IView) : IAttr<'t> =
            value
            |> Some
            |> Flyout.content
            
    type Button with
    
        /// <summary>
        /// A value for flyout view placement for button.
        /// </summary>
        static member flyout<'t when 't :> Button>(value: IView option) : IAttr<'t> =
            AttrBuilder<'t>.CreateContentSingle(Button.FlyoutProperty, value)
    
        /// <summary>
        /// A value for flyout view placement for button.
        /// </summary>
        static member flyout<'t when 't :> Button>(value: IView) : IAttr<'t> =
            value
            |> Some
            |> Button.flyout

And when I’m trying to use it:

Button.create [
    Button.content "Hello there"
    Button.flyout (
        Flyout.create [
            Flyout.isOpen true
            Flyout.content (
                TextBox.create [
                    TextBox.text "Hello there"
                ]
            )
        ]
    )
]

I’ve got an error:

System.InvalidCastException: Unable to cast object of type 'Avalonia.Controls.Flyout' to type 'Avalonia.Controls.IControl'.
   at Avalonia.FuncUI.VirtualDom.Patcher.create(ViewDelta viewElement)
   at Avalonia.FuncUI.VirtualDom.Patcher.patch_avalonia@165(IControl view, FSharpOption`1 viewElement, AvaloniaProperty property)
   at Avalonia.FuncUI.VirtualDom.Patcher.patchContentSingle(IControl view, Accessor accessor, FSharpOption`1 viewElement)
   ...

Library can’t render Button.flyout because Flyout class doesn’t implement IControl interface (reference).

For now I don’t see any possible workarounds to use this control with FuncUI library, also IControl interface has many references in core of FuncUI library, so I don’t see any quick fixes for that. Any thoughts?

[sleepyfran]

@picolino just had time to try this out: are you in the latest master? I just copy-pasted your code and it’s working. The only thing I removed is the isOpen property, since it’s not settable and it errors; other than that the flyout appears when clicking the button. I modified the inline example and it works:

Feel free to create a PR with your changes if you manage to make it work, otherwise I’ll try to open a PR whenever I get some time 😃

[sleepyfran]

Closed in #229.