How to use transition with image opacity?

[fsharpn00b]

Hello,

I'm trying to create a dissolve effect between two images by using a transition with the opacity property of each image.

However, while one image replaces the other as expected, there is no transition. The change happens at once.

AI (o1) tells me this is because my controls are re-rendered each time my state changes. It suggested various ways to have each Image control retain the same instance across renders, but I can't get any of them to work.

1. It suggested assigning a key to each Image control. I did this, with View.createWithKey, but that had no effect.
2. It suggested creating the Image controls in a top-level let statement. However, if I do that, I can't have the Image.opacity property reference my writable state (which I obtain from IComponentContext.useState).

Here is my code (adapted from the counter example.

I've been looking at code examples for hours, including discussions here about controlling rendering behavior, but haven't found anything that seems analogous to this (or that I can hack together in a way to make this work). Any help much appreciated.

namespace CounterApp

// TimeSpan
open System

open Avalonia
// DoubleTransition
open Avalonia.Animation
open Avalonia.Controls
open Avalonia.Controls.ApplicationLifetimes
open Avalonia.FuncUI
open Avalonia.FuncUI.DSL
open Avalonia.FuncUI.Hosts
open Avalonia.Layout
// Bitmap
open Avalonia.Media.Imaging
open Avalonia.Themes.Fluent

type State =
    {
        image_1_opacity : float
        image_2_opacity : float
    }

module Main =

    let view () =
        Component(fun ctx ->
            let state = ctx.useState { image_1_opacity = 1 ; image_2_opacity = 0 }

            DockPanel.create [
                DockPanel.children [
                    Button.create [
                        Button.dock Dock.Bottom
                        Button.onClick (fun _ -> state.Set { image_1_opacity = 1; image_2_opacity = 0 })
                        Button.content "Day"
                        Button.horizontalAlignment HorizontalAlignment.Stretch
                        Button.horizontalContentAlignment HorizontalAlignment.Center
                    ]
                    Button.create [
                        Button.dock Dock.Bottom
                        Button.onClick (fun _ -> state.Set { image_1_opacity = 0; image_2_opacity = 1 })
                        Button.content "Night"
                        Button.horizontalAlignment HorizontalAlignment.Stretch
                        Button.horizontalContentAlignment HorizontalAlignment.Center
                    ]
                    Grid.create [
                        Grid.children [
                            Image.create [
                                Image.height 1920
                                Image.width 1080
                                Image.opacity state.Current.image_1_opacity
                                Image.source <| new Bitmap ("/media/data/backup/avalonia/avalonia_20250124/images/golden-larch-forest-and-prusik-peak-dx-1920x1080.jpg")
                                Image.transitions (
                                    let transitions = new Transitions ()
                                    transitions.Add <| new DoubleTransition (Property = Image.OpacityProperty, Duration = TimeSpan.FromSeconds 2.0)
                                    transitions
                                )
                            ]
                            Image.create [
                                Image.height 1920
                                Image.width 1080
                                Image.opacity state.Current.image_2_opacity
                                Image.source <| new Bitmap ("/media/data/backup/avalonia/avalonia_20250124/images/dark-night-forest-view-5k-io-1920x1080.jpg")
                                Image.transitions (
                                    let transitions = new Transitions ()
                                    transitions.Add <| new DoubleTransition (Property = Image.OpacityProperty, Duration = TimeSpan.FromSeconds 2.0)
                                    transitions
                                )
                            ]
                        ]
                    ]
                ]
            ]
        )

type MainWindow() =
    inherit HostWindow()
    do
        base.Title <- "Counter Example"
        base.Content <- Main.view ()

type App() =
    inherit Application()

    override this.Initialize() =
        this.Styles.Add (FluentTheme())
        this.RequestedThemeVariant <- Styling.ThemeVariant.Dark

    override this.OnFrameworkInitializationCompleted() =
        match this.ApplicationLifetime with
        | :? IClassicDesktopStyleApplicationLifetime as desktopLifetime ->
            desktopLifetime.MainWindow <- MainWindow()
        | _ -> ()

module Program =

    [<EntryPoint>]
    let main(args: string[]) =
        AppBuilder
            .Configure<App>()
            .UsePlatformDetect()
            .UseSkia()
            .StartWithClassicDesktopLifetime(args)