fabulous-dev / Fabulous

Declarative UI framework for cross-platform mobile & desktop apps, using MVU and F# functional programming
https://fabulous.dev
Apache License 2.0
1.14k stars 121 forks source link

Need some help with ScrollTo in CollectionView #853

Closed reigam closed 3 years ago

reigam commented 3 years ago

Question / Discussion

Sorry, tried to solve my "scrollTo" problem like shown in Issue #470, this didn't work for me at all. I found another solution (which I thought I tried before), so I'm closing this issue.

SergejDK commented 3 years ago

@reigam I think it would be great if you can include your solution in this issue. Maybe this will help someone else, too.

reigam commented 3 years ago

Sure, will do so tonight, thanks for the feedback.

reigam commented 3 years ago

I wanted to start each new page on top of my CollectionView, changing the model (checking a radio button) should not affect the scroll position. Here is my solution, in case i should help somebody:


module App = 

    type Model = 
      { ...
      ScrolledToTop : bool
      ...}

    type Msg =    
        ...
        | ScrollToTop of bool

    let initModel = 
        { 
        ...
        ScrolledToTop = true
        }

    let update msg model =
        match msg with
         ....
            | ScrollToTop b ->
                match b with
                | true -> {model with ScrolledToTop = true}, Cmd.none
                | false -> {model with ScrolledToTop = false}, Cmd.none

    let view (model: Model) dispatch =

            let questionPage disptach = 
                dependsOn (model.AllCategoriesList.Item(k), model.ScrolledToTop) (fun model (generalQuestionList, scrolledToTop) ->
                    View.ContentPage(
                        title = pageName, content = View.StackLayout(padding = Thickness 05.0, verticalOptions = LayoutOptions.Center,
                            children = [ 
                                View.CollectionView( 
                                    ?scrollTo = 
                                        (if scrolledToTop then 
                                           Some {
                                                Index = 0
                                                Position = ScrollToPosition.Start 
                                                Animate = AnimationKind.NotAnimated
                                            }
                                        else 
                                            None),
                                    items =[  for i in 0 .. generalQuestionList.Length - 1 do

                                        View.StackLayout(padding = Thickness 05.0, verticalOptions = LayoutOptions.Center,
                                            children = [ ...]

                                            ]
                                     )

                                    ...

                                        View.Button(
                                            text = "next Page", 
                                            command = (fun args -> dispatch (SelectPage (next)); dispatch (ScrollToTop (true)))
                                        )
                                        ....
                                ]
                        )
                    )
                )