how to create button of image and text?

[lanyusan]

Just got started with Avalonia and FuncUI.

I am trying to create a button of image and text with below code and got this error:
FS0001: The type 'Image' is not compatible with the type 'Types.IView.

Couldn't figure out how to wrap Image into View. Can someone help?

Thanks.

            let playIcon =
                Canvas.create [
                   Canvas.children [
                       Image.FromString "avares://FuncUITest/Assets/pour-over.jpeg"
                   ]
                ]
            let textbox =
                TextBox.create [
                   TextBox.text "Layers"
                ]

            let iconAndTextBlock =
                StackPanel.create [
                    StackPanel.spacing 8.0
                    StackPanel.orientation Orientation.Horizontal
                    StackPanel.children [ playIcon; textbox ]
                ]

[sleepyfran]

Hey! I'm guessing you're using the FromString extension defined in the music player example, right? That one returns an Image instead of a IView<Image>, which is what the canvas is expecting.

Try to do something like the following:

Canvas.create [
    Canvas.children [
        Image.create [
            "avares://FuncUITest/Assets/pour-over.jpeg"
            |> Bitmap.create (* This one is defined in that example as well. *)
            |> Image.source
        ]
    ]
]

I haven't tested it, but I think it should work 😃

[lanyusan]

Yes you are right FromString is from the extension.

Thanks.

[Aytharn]

is this working with SVG as well?
How come, that by default you got to write so many lines of code to load an image in the 21st century: that you have to write an extension yourself? I am absolutely lost here.

[JaggerJo]

You can load images like this:

https://github.com/fsprojects/Avalonia.FuncUI/blob/39587cc1ac2bd7e6ffcf9fe60aceb8c7b9c51325/src/Examples/Component%20Examples/Examples.TodoApp/Program.fs#L59-L65C5

If you want to use SVGs take a look at this library: https://github.com/wieslawsoltes/Svg.Skia#avaloniaui

[Aytharn]

Hello Josua, Thank you for you answer: I already looked at that library, it works nicely when used in Xaml, but there’s no way to use it in FuncUI. The examples you shared mention legacy PNG files, which I would never consider using in a modern application... Moreover very important, going back to the library Svg.Skia, in xaml it works by just referencing the folder, ie. “Assets/icon.svg” the node would be simply <Svg Margin="2" Height="40" Path="/Assets/reload.svg”/> without prefixing it with “avares:://” with reload.svg defined as a AvaloniaResource/Do Not Copy to output folder PS: I really like your library: too bad F# doesn’t have implicit enums like Swift otherwise it would be a perfect way to write an app (and the SVG support of course :-p ) Stéphane

…

On 22 Oct 2023 at 12:54 +0200, Josua Jäger ***@***.***>, wrote: You can load images like this: https://github.com/fsprojects/Avalonia.FuncUI/blob/39587cc1ac2bd7e6ffcf9fe60aceb8c7b9c51325/src/Examples/Component%20Examples/Examples.TodoApp/Program.fs#L59-L65C5 If you want to use SVGs take a look at this library: https://github.com/wieslawsoltes/Svg.Skia#avaloniaui — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: ***@***.***>