Is it possible to use itemTemplate and dataTemplate

I’ve tested adding 1000 items to a stack panel using the naive implementation and the UI grinds. However I spent a bit of time figuring out how to get DataTemplates working in FuncUI way and it seems to work and the UI becomes super snappy even for 1000 element lists.

The code for the working mini app is

https://gist.github.com/bradphelan/06d2e2250facfcf01b848ee71fda4064

The critical line is a helper

    let itemTemplate view dispatch =  
        Avalonia.Controls.Templates.FuncDataTemplate<(int*'state)>( ( fun (id,state) -> 
            let viewElement = (view state id dispatch)
            let view =  viewElement |> VirtualDom.createView
            let delta = Avalonia.FuncUI.VirtualDom.Delta.ViewDelta.From viewElement
            VirtualDom.Patcher.patch(view, delta)
            view
            ) ,true )

and can be used to render lists efficiently like below

module PersonsModule =
    type PersonsMsg = 
        | Update of IndexedMessage<PersonModule.PersonMsg>
        | Delete of int

    let update (personsMsg:PersonsMsg) state =
        match personsMsg with
        | Update (id, msg) -> pvSet id (PersonModule.update msg (pvGet id state)) state 
        | Delete id -> pvDel id state 


    let itemView (person:PersonModule.PersonState) (id:int) dispatch : View =
        // Set up a dispatcher for a person at a specific id
        let dispatchPerson  id = (fun msg -> dispatch(Update(id,msg)))

        Views.dockpanel [
            Attrs.children [
                Views.button [
                    Attrs.content "X"
                    Attrs.onClick ( fun sender args -> dispatch (PersonsMsg.Delete  id) )
                ]
                PersonModule.view person (dispatchPerson id)
            ]
        ]

    let view (state:PersonModule.PersonState PersistentVector) (dispatch) : View =
        Views.scrollViewer [
            Attrs.content (
                Views.listBox [
                    Attrs.itemTemplate (itemTemplate itemView dispatch )
                    Attrs.items (state |> Seq.indexed |> PersistentVector.ofSeq )
                ]
            )
        ]

Maybe I’m telling you something you already know but it seemed like a non-obvious trick and I had to pull some code out of the API to make it work. Hope it is useful for vNext as you think about it.

[bradphelan]

Awsome 😃

On Fri., 4 Oct. 2019, 20:19 Josua Jäger, [e-mail] wrote:

backing data is a list from 1 to 100.000

[image: 2019-10-04 20 13 26] https://user-images.githubusercontent.com/13090415/66230106-b4fdb000-e6e3-11e9-8e5c-2c8698b29d99.gif

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/JaggerJo/Avalonia.FuncUI/issues/19?email_source=notifications&email_token=AAAEJ4SKR37GT7QXUFKCEZTQM6CJ3A5CNFSM4I3TNPUKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEAMPUZQ#issuecomment-538507878, or mute the thread https://github.com/notifications/unsubscribe-auth/AAAEJ4URSUHGSVXJBEFPUWTQM6CJ3ANCNFSM4I3TNPUA .

[JaggerJo]

I now have a working prototype!

backing data is a list from 1 to 100.000