[Xamarin.Forms] Add wrappers for all controls

[TimLariviere]

Would be great to have a control gallery apps to both test out the wrappers and have a sample on how to use them.

Pages:

• [x] ContentPage
• [x] FlyoutPage
• [x] NavigationPage
• [x] TabbedPage
• ~TemplatedPage(?)~

Layouts:

• [x] AbsoluteLayout
• ~ContentPresenter(?)~
• [x] ContentView
• [x] FlexLayout
• [x] Frame
• [x] Grid
• [x] RelativeLayout
• [x] ScrollView
• [x] StackLayout
• ~TemplatedView(?)~

Controls:

• [x] ActivityIndicator
• [x] BoxView
• [x] Button
• [x] CheckBox
• [x] DatePicker
• [x] Editor
• [x] Ellipse
• [x] Entry
• [x] Image
• [x] ImageButton
• [x] Label
• [x] Line
• [x] Path
• [x] Polygon
• [x] Polyline
• [x] ProgressBar
• [x] RadioButton
• [x] Rectangle
• [x] RefreshView
• [x] SearchBar
• [x] Slider
• [x] Stepper
• [x] SwipeView
• [x] Switch
• [x] TimePicker
• [x] WebView

Collections:

• [x] CarouselView
• [x] CollectionView
• [x] IndicatorView
• [x] ListView
• [x] Picker
• ~TableView~ (removed because deprecated in MAUI)

Cells:

• [x] TextCell
• [x] ImageCell
• [x] SwitchCell
• [x] EntryCell
• [x] ViewCell

MenuItems:

• [x] MenuItem
• [x] ToolbarItem

GestureRecognizers:

• [x] TapGestureRecognizer
• [x] PinchGestureRecognizer
• [x] PanGestureRecognizer
• [x] SwipeGestureRecognizer
• [x] DragGestureRecognizer
• [x] DropGestureRecognizer

[TimLariviere]

The controls with (?) means I'm not sure if we should wrap them, most of them are rely on DataTemplate

[edgarfgp]

I think would be good to Wrap TemplatedView. So we can have something like https://github.com/jsuarezruiz/TemplateUI . What do you think ?

[edgarfgp]

How do you plan to organise the effort of wrapping this controls ? . We could create the gallery app and then start adding one control per PR + add to the gallery + some screenshot 😀

[edgarfgp]

I was investigating the possibility to add support for VisualStateManager (https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/visual-state-manager as a way to control control states and avoid having to create custom renderers.

We already use VisualStateManager in v1 See here https://github.com/fsprojects/Fabulous/blob/8bbb610a2bbfe239e175b8e25ac950d55ebc94f5/Fabulous.XamarinForms/samples/AllControls/AllControls/Samples/Controls/RadioButton.fs#L60 . SoI was wondering if could add some sort of support for it as a extension method 😀

Unlike #10 I think this is not blocked with the V2 architecture . But I might be wrong

[edgarfgp]

I'm happy to help adding any widgets necessary 😀

[TimLariviere]

I think would be good to Wrap TemplatedView. So we can have something like https://github.com/jsuarezruiz/TemplateUI . What do you think ?

That would be interesting. Maybe we can keep it for the end so we can better think how to do it?

How do you plan to organise the effort of wrapping this controls ? . We could create the gallery app and then start adding one control per PR + add to the gallery + some screenshot 😀

Right now, I'm working on making AttributeDefinitions pure so unused attributes will be removed from the compiled code (smaller IPA/APK). It might have a big impact on how widgets are declared. Could you wait a few days before adding new widgets please?

But ideally, we should do like you said:

• Create the gallery app using the existing wrapped controls (I was thinking something like https://storybook.js.org, minus the interactivity)
• Do one PR with 1 wrapped control, its sample in gallery app and documentation

The important part is to make sure we don't forget any properties.

I was investigating the possibility to add support for VisualStateManager

That would be very interesting too, I don't see any blocker with v2. Not exactly sure how to handle target names though. But if you want to write a POC, I would be happy to discuss it :) Most likely, it will be part of a later release though.

[edgarfgp]

Could you wait a few days before adding new widgets please?

Sure 😀.

[edgarfgp]

@TimLariviere I have started to implement the Carrousel based on the new virtualized collections . But I notice that on my app I will need to support cell types based on the data. As far I can see CarrouselView only has ItemTemplate and EmptyViewTemplate. . So Was wondering if have any thought on the implementation . ?

Edit: I realised that I can achieve the result that I want by organising the data using a DU to model the types of data while still uses the same item template 😄

[TimLariviere]

@edgarfgp Internally, Fabulous will change the cell type based on the root control passed in the ItemTemplate like you found. :)

CarouselView(items) (fun item ->
    if item.Name = "Hello" then
        Label("Hello World")
    else
        Button("Click me", Clicked)
)

Here, it will instantiate a Label cell when item.Name = "Hello" and a Button cell for everything else.

[edgarfgp]

@TimLariviere Should we include Behaviour, Triggers and Effects to the list ?

[TimLariviere]

Triggers are closely related to Style, so I think we need to properly think of VisualStateManagers and Styles before. For Behaviors and Effects, absolutely. We can add them.

For Effect, I remember creating a basic one in v1

View.Label(
    effects = [ View.Effect("EffectName") ]
)

Maybe we can add the same one to v2?

[TimLariviere]

Though Effect is not a BindableObject, so no ViewNode no diffing :/

[edgarfgp]

@TimLariviere BoxView can be marked as Done . It was completed as part of https://github.com/TimLariviere/Fabulous-new/pull/73

[edgarfgp]

Grid and StackLayout do not need any update . They are already complete

Grid : https://docs.microsoft.com/en-us/dotnet/api/xamarin.forms.grid?view=xamarin-forms StackLayout : https://docs.microsoft.com/en-us/dotnet/api/xamarin.forms.stacklayout?view=xamarin-forms

[TimLariviere]

Almost 50% done 🥳

[edgarfgp]

@TimLariviere BoxView can be marked as Done . It was completed as part of #73

Same applies for ProgressBar 😀

[edgarfgp]

@TimLariviere RelativeLayout can set the children position based on the on other views . Could we use ViewRef for this ?

public static Constraint RelativeToView(View view, Func<RelativeLayout, View, double> measure)
{
    var result = new Constraint { _measureFunc = layout => measure(layout, view), RelativeTo = new[] { view } };

    return result;
}

I had a look at V1 and it does not seem to support for this RelativeToView either . I could only see RelativeToParent

[edgarfgp]

@TimLariviere Seems like CarrouselPage has been deprecated in favour of CarrouselView . Not sure if it worth to make a wrapper for this ? .

From Docs :

Important The CarouselPage has been superseded by the CarouselView, which provides a scrollable layout where users can swipe to move through a collection of items. For more information about the CarouselView, see Xamarin.Forms CarouselView.

[TimLariviere]

Oh alright. If it's deprecated then no need to write a wrapper for it

[edgarfgp]

@TimLariviere Regarding OpenGLView > I think most people mow a days uses SkiaSharp . So We could avoid wrapping it and also remove the dependency of OpenTK.Graphics on V2 and implement this in case we have request to do it in the future .

[edgarfgp]

Looks like Maui is not biding it also. https://github.com/dotnet/maui/wiki/Status. I guess the With Shape, Geometries it is ok for now

[TimLariviere]

Yes. I read a few years ago that iOS even dropped support for OpenGL in favor of Metal. Will update the list

[edgarfgp]

126 #129 Should be the last ones to complete the 56 items 😀.

There are still somethings are not wrapped . Like Effects, Behaviours, VisualStateManagers, TemplatedView , TemplatedPages, StyleWidgets. Would be good to create a separate issue for all them so we can attempt then in the future.

[TimLariviere]

Awesome work @edgarfgp! This brings us very close to a first release for v2 🥳

Will start to bring everything we did into the main repo