Uno: SwipeControl is not implemented in Uno

[pdecostervgls]

Current behavior

SwipeControl is not implemented in Uno.

Expected behavior

SwipeControl is implemented in Uno.

Environment

Affected platform(s):

• [x] iOS
• [x] Android
• [x] WebAssembly
• [ ] Windows
• [ ] Build tasks

[ghuntley]

:wave: The path forward here involves porting the WinUI control from C++ to C#. The source for SwipeControl is available at https://github.com/microsoft/microsoft-ui-xaml/tree/master/dev/SwipeControl and it can be incorporated into Uno as it is licensed under MIT.

The process is quite manual at the moment and folks have been investigating how to make it less so via https://github.com/xoofx/CppAst. Anyway here's some of my personal notes from going through the process myself. I hope they help - the intention is to turn them into contributing to Uno documentation in the future.

what's involved

1. Create a folder under Uno.UI.UI.Xaml.Controls.[ControlName] and progressively port.
2. Progressively turn the Uno.UI/Generated/3.0.0.0 implementation into an empty class.
3. Progressively turn Uno.UI/Generated/3.0.0.0/Windows.UI.Xaml.Automation.Peers into an empty class. Destination for implementation is Uno.UI.UI.Xaml.Automation\Peers

reference example

https://github.com/unoplatform/uno/pull/1033/files

guidelines

When porting from C++ to C#, stay with C++ idioms. Don't refactor and make the code feel like .NET. A developer should be able to eyeball the .NET implementation, compare against the WinUI C++ implementation and be able to incorporate bug-fixes or features by eyeballing the WinUI source code.

It's really important to include the WinUI gitsha in the initial commit message ie "this is the SwipeControl from winui master at gitSha".

notes

• .idl contains the dependency properties
• .h contains the header definition.
• .cpp contains the meat and veggies
• .xaml contains the visual definitions.

find and replace

The first pass of porting a control involves doing a bunch of find and replace operations, here's the common ones:

Properties, members and events:

"global::Windows.UI.Xaml.DependencyProperty" -> "DependencyProperty"
"global::Windows.UI.Xaml.Controls." -> ""
"global::Windows.Foundation.Metadata.ApiInformation" -> "ApiInformation"

Control:

"SetDefaultStyleKey(this);" -> "DefaultStyleKey = GetType();"
"__RP_Marker_ClassById(RuntimeProfiler::ProfId_RatingControl);" -> ""
"std::min" -> "Math.Min"
"std::max" -> "Math.Max"
"winrt::unbox_value<int>" -> "(int)"
"winrt::unbox_value<string>" -> "(string)"
"winrt::unbox_value<float>" -> "(float)"
"winrt::unbox_value<double>" -> "(double)"
"(ItemInfo().try_as<winrt::RatingItemFontInfo>())" -> "(ItemInfo is RatingItemFontInfo)"

"m_dispatcherHelper.RunAsync(" -> "Dispatcher.RunAsync("

eventhandlers

convention

Add them in MyCoolControl.Events.cs

disposal

Add eventhandlers to Serial (if order matters) or Composite (if you need a bucket) disposables and then dispose the disposable.

default values

Keep an eye out for the default values and ensure the csharp codegen impl matches, it should but check.

String Caption { get; set; };
[MUX_DEFAULT_VALUE("1")]
Int32 InitialSetValue { get; set; };
[MUX_DEFAULT_VALUE("true")]
Boolean IsClearEnabled { get; set; };
Boolean IsReadOnly { get; set; };
[MUX_DEFAULT_VALUE("5")]
Int32 MaxRating { get; set; };
[MUX_DEFAULT_VALUE("-1")]
Double PlaceholderValue { get; set; };
RatingItemInfo ItemInfo { get; set; };
[MUX_DEFAULT_VALUE("-1")]
Double Value { get; set; };

ie

public static DependencyProperty InitialSetValueProperty { get; } =
    DependencyProperty.Register(
        "InitialSetValue", typeof(int),
        typeof(RatingControl),
        new FrameworkPropertyMetadata(<<< DEFAULT VALUE HERE >>>, OnStaticPropertyChanged));

dependency properties

Defined in the controls interface definition (MyCoolControl.IDL)

tracker_ref

When porting, the only ref that should stay is weak ref. Microsoft's ref counting implementation is at https://github.com/microsoft/microsoft-ui-xaml/blob/master/dev/inc/tracker_ref.h

Typically you can change:

tracker_ref<winrt::TextBlock> m_captionTextBlock{ this };

To:

private TextBlock m_captionTextBlock;

GitHub

microsoft/microsoft-ui-xaml

Windows UI Library: the latest Windows 10 native controls and Fluent styles for your applications - microsoft/microsoft-ui-xaml

GitHub

xoofx/CppAst

CppAst is a .NET library providing a C/C++ parser for header files powered by Clang/libclang with access to the full AST, comments and macros - xoofx/CppAst

GitHub

implement the rating control by ghuntley · Pull Request #1033 · unoplatform/uno

import from mui at d58f276068bbf84396e1be5c78d44eaebf084fa3 GitHub Issue (If applicable): #1029 PR Type What kind of change does this PR introduce? Feature What is the current behavior? Not imple...

GitHub

microsoft/microsoft-ui-xaml

Windows UI Library: the latest Windows 10 native controls and Fluent styles for your applications - microsoft/microsoft-ui-xaml

[pdecostervgls]

Wow, That is indeed a lot of work. Thanks for writing out your thoughts and observations. They'll come in handy.

[davidjohnoliver]

This will be a tricky one as it's using VisualInteractionSource which is not implemented in Uno yet. Currently Manipulation events aren't implemented either (#221).

[ghuntley]

howdy @pdecostervgls, been doing some splunking and it turns out nventive has a conceptually similar control to SwipeControl which uses platform-specific manipulation code. It's ios/android only and what we use internally while manipulation or gestures aren't implemented. Here's the code, it's released under MIT - https://gist.github.com/ghuntley/4f31a4cf55426b545ce630d3f52fabbc

Gist

code released under MIT

code released under MIT. GitHub Gist: instantly share code, notes, and snippets.

[DierkDroth]

@jeromelaban what are nventive's plans to support SwipeControl/SwipeItem for iOS and Android?

Posts above suggest there would be an alternate solution for iOS and Android? Is that solution recommendable at this point?

[jeromelaban]

@DierkDroth this control has not been prioritized above what's been published to this thread. The original control uses some features that not yet available in Uno. We'll be able to port it once those are implemented.

[DierkDroth]

Thanks for your feedback, @jeromelaban

[pdecostervgls]

howdy @pdecostervgls, been doing some splunking and it turns out nventive has a conceptually similar control to SwipeControl which uses platform-specific manipulation code. It's ios/android only and what we use internally while manipulation or gestures aren't implemented. Here's the code, it's released under MIT - https://gist.github.com/ghuntley/4f31a4cf55426b545ce630d3f52fabbc

Gistcode released under MITcode released under MIT. GitHub Gist: instantly share code, notes, and snippets.

@ghuntley @jeromelaban I just got to attempting to work with this, I noticed that there is no SwipeControl class in your gist, do you have any guidance on how to use this on the XAML side?

Gist

SwipableItem for Uno. Code released under MIT

SwipableItem for Uno. Code released under MIT. GitHub Gist: instantly share code, notes, and snippets.