Fabulous: Collection/Carousel-View, Shell

[SergejDK]

Not every of this control is working currently correctly.
Collection works fine for iOS but not Android.
Carousel seems to work on Android but not iOS.

Shell needs a Test.

It would be great if we could make this work.

[TimLariviere]

Noticed it as well.
I couldn't make Shell work on iOS for some reasons (only a blank page, a top black header and a page title), while it worked fine on Android. (only tested it for 10min)

Also ShellContent doesn't work (it wants View and not ViewElement)

With this test, I also found that we may be able to simplify the nesting when using Shell.
Today, XF handles it with implicit conversion.
Something we don't have

[SergejDK]

Shell needs some specific parts which I think we do not include but I need to check this before I can clearly say which.

[TimLariviere]

Shell is definitely too complicated to use today in Fabulous (when ignoring blocking bugs)
See this issue for a super simple Hello world: https://github.com/fsprojects/Fabulous/issues/427

[SergejDK]

That's right. It is the 'old' style - the way in 3.5. With 4.0 it is possible to make it a lot easier but this needs some changes in converting the viewparts.

[TimLariviere]

@SergejDK I'm currently trying to re-implement the Xanimals sample from Xamarin.Forms to iron out our implementation of Shell.
I will make it part of our samples too.

[SergejDK]

@TimLariviere great thing! I think everyone will appreciate this.

[PureWeen]

@TimLariviere do you have your effort for the Xanimals sample in a repo anywhere?

[TimLariviere]

@PureWeen Yes, here: https://github.com/TimLariviere/Fabulous/tree/xaminals
Still very WIP, had to change quite a lot of things.
Shell is not the most functional-friendly control. 😄

It might not be easy to read the change log because I split Fabulous.Core into several projects for better extensibility in the future.

Overall the sample is working for the most part. Still have to fix:

• Routing
• FlyoutHeader not showing
• SearchHandler.ItemsSource not removing items from UI, even though it's an ObservableCollection behind the scenes
• Use ShellContent.ContentTemplate instead of ShellContent.Content

Once everything works as expected, I will refactor my changes and prepare it for a pull request.

[TimLariviere]

I'm having a hard time with Routing.
The way it works in Shell is just not applicable to Fabulous, and I can't find a way to work around.

For Fabulous, the page being navigated to needs to declared inside the main view function to access the model.

But Xamarin.Forms requires to declare routes ahead of time so it can creates the pages on the fly.
Then these pages are managed internally, no way to access the current model...

[PureWeen]

@TimLariviere would resolving this issue help you?

https://github.com/xamarin/Xamarin.Forms/issues/5166

If we provided some additional places for Fabulous to hook into?

[TimLariviere]

@PureWeen Yes, that would be really helpful.
I'll try to think of what Fabulous would need ideally and share my views in this issue.

[PureWeen]

@TimLariviere that sounds great!! I'm working on figuring out the best way for shell to compose and recompose itself so I'd really like to have something that plays cleanly with Fabulous. Kind of like a small version of the MVU loop :-)

Something happens on shell -> you tell shell how you want it to change -> it changes

I'd like for users to always be able to have an entry point, like the update function, where they can modify aspects of the shell like the look and the stack.

I think by trying to make this work super well for Fabulous we can end up with some really useful things on the non fabulous side as well. If you ever want to chat over skype or anything about shell and where you're having issues let me know

shneuvil at microsoft.com

[SergejDK]

The issue for the problem with the ContentView in CollectionView and CarouselView: https://github.com/xamarin/Xamarin.Forms/issues/6461.

If we could replace the base class for the ItemTemplate I think it should work for now.
(Currently trying it out)

[TimLariviere]

I'm working on figuring out the best way for shell to compose and recompose itself so I'd really like to have something that plays cleanly with Fabulous. Kind of like a small version of the MVU loop :-)

@PureWeen That's awesome! :)
I will contact you as soon I figure out my planning.
I could use a deeper insight of the current inner workings of Shell as well. 😄

If we could replace the base class for the ItemTemplate I think it should work for now.

@SergejDK What do you mean? Only ContentView doesn't work inside a CollectionView?

[TimLariviere]

@SergejDK Oddly CollectionView works in #445

[SergejDK]

@TimLariviere
will take a look on this. On Android it works??

[TimLariviere]

Yes, it works both on Android and iOS.

[SergejDK]

@TimLariviere
found the solution for now with CollectionView....
If you use a Layout-class like StackLayout, FlexLayout, Grid etc. as the itemsproperty e.g.:

View.CollectionView(items= [
    View.StackLayout( children = [
        View.Label(text="Person 1")    
])
    View.Grid(children=[View.Button(text="ok")])
])

it renders all correct. Using a simple Element in the collectionview as Label or Button won't render it currently.

Normally you would use a layout in the items because you have more elements and want to customize the layout.

For CarouselView this does not work. Still not displaying anything.....

[SergejDK]

@TimLariviere
CollectionView and CarouselView works with 4.1.0.496342-pre2.
It was a problem with XF and ContentView as I wrote before.
So with the release of 4.1 we should be good on this!

[SergejDK]

closed by #511