DEV Community: Kamu

Introduction of AiForms.Dialogs for Xamarin.Forms

Kamu — Fri, 26 Apr 2019 03:08:10 +0000

Speaking of Dialogs in Xamarin.Forms, ACR User Dialogs is very famous, and I have used a lot in business.
In personal development, I used not it but self-implemented using DependencyService. And I implemented such as a loading dialog with it.
On Android, I used a ProgressDialog, and this turned to Deprecated, so I thought refactoring it.
When I was refactoring it, I hit on "This can be independent as a Library by a little effort".
Although it wasn't a little effort as a result, I almost finished it and so I released this as a NuGet package.

First of all, I thought that I wanted to replace self-implemented to ACR User Dialogs. But its GitHub repository is not active and it is not customizable such as replacing a loading icon. So I thought that I should make a library myself.

While implementing it, I found Popup Page Plugin at my twitter timeline. I thought this library was just what I wanted. But because I had already implemented most of it then, I decided to complete it differentiating from Popup Page Plugin.

Repository

Source

https://github.com/muak/AiForms.Dialogs

Nuget

https://www.nuget.org/packages/AiForms.Dialogs/

This is currently a pre-release.

Demo

Summary

AiForms.Dialogs is what can be put a ContentView defined by XAML or c# code into each platform native dialog and show it.

The position of a dialog can be specified any position in the screen with VerticalLayoutAlignment, HorizontallayoutAlignment, OffsetX and OffsetY property.

Features

Dialog – Showing a general dialog.
Toast – Showing what is called a toast.
Loading – Showing a full-screen modal dialog for loading.

Usage

var ret = await Dialog.Instance.ShowAsync<MyDialogView>(new{Title="Hello"});
// If canceled, return false. If completed, return true.
// Optionally, you can pass a ViewModel to a DialogView.
// When the dialog is closed, all related resources are automatically disposed of.

Toast.Instance.Show<MyToastView>(new{Title="Hello",Duration=1500});
// Optionally, you can pass a ViewModel to a ToastView.

await Loading.Instance.StartAsync(async progress =>{
    // Heavy process
    for (var i = 0; i < 100; i++)
    {
        await Task.Delay(50);
        // You can send the progress to a dialog with IProgress<double> value.
        progress.Report((i + 1) * 0.01d);
    }
});

For more information about how to use AiForms.Dialogs, see ReadMe.

Concluding

I would be grateful if you could use this library for using an elaborate dialog in a NETStandard project.

If there are some questions, requests, and bug reports, please report it to GitHub issues or twitter.

The sample of rendering faster avoiding out of memory exception in Xamarin.Forms (Android) with FFImageLoading + NativeCell

Kamu — Mon, 27 Aug 2018 03:46:01 +0000

Xamarin.Forms.Android ListView is poor performance when using images in particular.
This is also the same when using Fast Renderers.

Since rendering is slow or an app crash by the memory leak when continuing to use ListView, It is necessary some workaround.

To solve it, I took measures by combining NativeCell (an implementation of each platform cell) and FFImageLoading.

That's why this article describes the sample with NativeCell + FFImageLoading for comfortably using ListView.

A finished sample project

https://github.com/muak/FFNativeCell

Required library

FFImageLoading

This is the nice library that helps us with a lot of things such as caching image and load asynchronously.

In a case without taking measures

Used images as a sample are moderate to large 20 images of 500KB〜1000KB per picture.
These are positioned on ViewCell and in turn displayed 20 rows on ListView.

<ListView x:Name="listview" ItemsSource="{Binding Items}" HasUnevenRows="false" RowHeight="400">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <StackLayout Spacing="0" Margin="0,0,0,6" BackgroundColor="Silver">
                    <StackLayout.GestureRecognizers>
                        <TapGestureRecognizer Command="{Binding BindingContext.GoDetailCommand,Source={x:Reference listview}}" CommandParameter="{Binding PhotoUrl}" />
                    </StackLayout.GestureRecognizers>
                    <Image Aspect="AspectFill" Source="{Binding PhotoUrl}" HorizontalOptions="FillAndExpand" HeightRequest="300" />
                    <Label Text="{Binding Title,StringFormat='Title{0:N}'}" />
                    <Label Text="{Binding Date,StringFormat='Taken at：{0:N}'}" />
                </StackLayout>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Like this, the app crashes in no time.

Using FFImageLoading

FFImageLoading's CachedImage is used to avoid the problem as the previous section.

A CachedImage view is used instead of an Image view, its Downsample property is set to 320.
This works that an image is displayed not the original one but one shrunk the width to 320.

<ListView x:Name="listview" ItemsSource="{Binding Items}" HasUnevenRows="false" RowHeight="400">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <StackLayout Spacing="0" Margin="0,0,0,6" BackgroundColor="Silver">
                    <StackLayout.GestureRecognizers>
                        <TapGestureRecognizer Command="{Binding BindingContext.GoDetailCommand,Source={x:Reference listview}}" CommandParameter="{Binding PhotoUrl}" />
                    </StackLayout.GestureRecognizers>
                    <ff:CachedImage DownsampleWidth="320" Aspect="AspectFill" Source="{Binding PhotoUrl}" HorizontalOptions="FillAndExpand" HeightRequest="300" />
                    <Label Text="{Binding Title,StringFormat='Title{0:N}'}" />
                    <Label Text="{Binding Date,StringFormat='Taken at：{0:N}'}" />
                </StackLayout>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Here's the page loading images.

Here's the page loaded completely images.

The app came not to crash, and then displaying images came to be smooth.
More often than not, I think, the issue of out of memory is solved by this way.

FFImageLoading + NativeCell + the other workarounds for out of memory error

When the issue of out of memory occurs even if using a CachedImage, it might be solved by using a native cell.

The sample using a view cell as a native cell is here.
https://developer.xamarin.com/guides/xamarin-forms/application-fundamentals/custom-renderer/viewcell/

The way of implementing a native cell is

Define MyViewCell class derived from ViewCell in a .NET Standard project.
Create an XML file for layout in Resources/layout and define the layout.
Define an appropriate native cell class derived from LinearLayout in an Android platform project and implement INativeElementView to it.
Define MyViewCellRenderer class derived from ViewCellRenderer in an Android platform project, and attach ExportRederer Attribute.

And the other workarounds for out of memory error is

Enable a largeHeap option in the AndroidManifest.xml (the most effectively).
Add OnTrimMemory override method to the MainActivity class.
Define MyImageViewAsync class derived from ImageViewAsync.

About more information, see the offical wiki https://github.com/luberda-molinet/FFImageLoading/wiki/Advanced-Usage#clear-cache-and-memory-considerations.

The concrete code is shown in the following sections.

Define PhotoViewCell class derived from ViewCell in a .NET Standard project.

public class PhotoViewCell : ViewCell
{
    public static BindableProperty PhotoItemProperty =
        BindableProperty.Create(
            nameof(PhotoItem),
            typeof(MainPageViewModel.PhotoItem),
            typeof(PhotoViewCell),
            null,
         defaultBindingMode: BindingMode.OneWay
        );

    public MainPageViewModel.PhotoItem PhotoItem {
        get { return (MainPageViewModel.PhotoItem)GetValue(PhotoItemProperty); }
        set { SetValue(PhotoItemProperty, value); }
    }

    public static BindableProperty CommandProperty =
        BindableProperty.Create(
            nameof(Command),
            typeof(ICommand),
            typeof(PhotoViewCell),
            null,
         defaultBindingMode: BindingMode.OneWay
        );

    public ICommand Command {
        get { return (ICommand)GetValue(CommandProperty); }
        set { SetValue(CommandProperty, value); }
    }
}

This is what communicates with the platform project.
Though individual title and URL could be set, passing them is troublesome, so I decided to pass a unit of the following class.

public class PhotoItem
{
    public string PhotoUrl { get; set; }
    public string Title { get; set; }
    public string Date { get; set; }
}

Create an XML file for layout in Resources/layout and define the layout.

The layout is defined with XML. In turn, this is named "PhotoViewCell.axml" and saved in Resources/Layout.
In this sample, a custom ImageView is used for more efficient memory usage. But you can use any ImageView.

The custom ImageView are discussed in more detail in the section Define MyImageViewAsync class derived from ImageViewAsync below.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="406dp"
    android:minHeight="406dp">
    <sample.droid.cells.MyImageView
        android:id="@+id/PhotoViewImage"
        android:scaleType="centerCrop"
        android:layout_alignParentTop="true"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:minHeight="300dp" />
    <TextView
        android:id="@+id/PhotoViewTitle"
        android:layout_below="@id/PhotoViewImage"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <TextView
        android:id="@+id/PhotoViewDate"
        android:layout_below="@id/PhotoViewTitle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <LinearLayout
        android:background="#FFFFFF"
        android:layout_alignParentBottom="true"
        android:layout_width="match_parent"
        android:layout_height="6dp" />
</RelativeLayout>

Define native cell class

This cell is what is displayed in native ListView actually.
In the constructor, the corresponding layout is inflated, the reference to each control is getting, and the OnClickListener is added.

In the UpdateCell method, the current cell contents are updated after the previous task is cleared in order to be appropriately updated.
In concrete, if the previous loading task is running, it is canceled, which in turn the current task is executed.
Without this process, it would be poor performance because the unnecessary vain processes go on running.

In the CellPropertyChanged method, UpdateCell method is called when the forms cell is updated if Xamarin.Forms.Listview cache strategy is RecycleElement.
It is also called when changing dynamically Xamarin.Forms cell value.
This is not needed if cache strategy is RetainElement.

INativeElementView is what RecycleElement needs, in which case it must be implemented.

public class PhotoNativeCell : LinearLayout, INativeElementView, Android.Views.View.IOnClickListener
{
    public PhotoViewCell PhotoViewCell { get; set; }
    public Element Element => PhotoViewCell;
    public IScheduledWork CurrentTask { get; set; }

    public MyImageView ImageView { get; set; }
    public TextView Title { get; set; }
    public TextView Date { get; set; }

    public PhotoNativeCell(Context context, PhotoViewCell formsCell) : base(context)
    {
        var view = (context as FormsAppCompatActivity).LayoutInflater.Inflate(Resource.Layout.PhotoViewCell, this, true);

        PhotoViewCell = formsCell;

        ImageView = view.FindViewById<MyImageView>(Resource.Id.PhotoViewImage);
        Title = view.FindViewById<TextView>(Resource.Id.PhotoViewTitle);
        Date = view.FindViewById<TextView>(Resource.Id.PhotoViewDate);

        SetOnClickListener(this);
    }

    public void CellPropertyChanged(object sender,PropertyChangedEventArgs e)
    {
        if (e.PropertyName == PhotoViewCell.PhotoItemProperty.PropertyName) {
            // Update for when the cache strategy of Xamarin.Forms.ListView is RecycleElement
            // or changing dynamically Xamarin.Forms cell value.
            UpdateCell();
        }
    }

    public void UpdateCell()
    {

        // If the previous task is no completed and no canceled, the task is canceled. 
        if (CurrentTask != null && !CurrentTask.IsCancelled && !CurrentTask.IsCompleted) {
            CurrentTask.Cancel();
        }

        // An alternate image until the image is completely loaded (here is transparent).
        ImageView.SetImageResource(global::Android.Resource.Color.Transparent);

        // Begin loading the image
        CurrentTask = ImageService.Instance.LoadUrl(PhotoViewCell.PhotoItem.PhotoUrl).DownSample(320).Into(ImageView);
        // Set the key in order to clear the CachedImage memory cache when finalizing.
        ImageView.Key = PhotoViewCell.PhotoItem.PhotoUrl;

        // Update the cell's text
        Title.Text = PhotoViewCell.PhotoItem.Title;
        Date.Text = PhotoViewCell.PhotoItem.Date;
    }

    public void OnClick(Android.Views.View v)
    {
        PhotoViewCell.Command?.Execute(PhotoViewCell.PhotoItem.PhotoUrl);
    }
}

Define CustomCellRenderer

This class is what associate a forms cell with a native cell.

In GetCellCore method, the item is assigned the forms cell and convertView is assigned null or the native cell.

What the convertView is null means that it is a new cell; otherwise means that it is a recycle cell.
So the former have to create a new native cell, the latter have to clean up the previous cell.

In both cases, Updating the referred forms cell and the PropertyChanged event is needed.

The concrete process is done by the side of a native cell. About more information, see the above section Define native cell class.

[assembly: ExportRenderer(typeof(PhotoViewCell), typeof(PhotoViewCellRenderer))]
namespace Sample.Droid.Cells
{
    public class PhotoViewCellRenderer : ViewCellRenderer
    {
        protected override Android.Views.View GetCellCore(Xamarin.Forms.Cell item, Android.Views.View convertView, Android.Views.ViewGroup parent, Android.Content.Context context)
        {
            var formsCell = item as PhotoViewCell;
            var nativeCell = convertView as PhotoNativeCell;

            if (nativeCell == null) {
                // Creating a new real native cell. 
                nativeCell = new PhotoNativeCell(context, formsCell);
            }

            // Unsubscribe the privious formscell propertychanged event on the nativecell.
            nativeCell.PhotoViewCell.PropertyChanged -= nativeCell.CellPropertyChanged;

            // Update the formscell reffered by the nativecell. 
            nativeCell.PhotoViewCell = formsCell;

            // Subscribe the current formscell propertychanged event on the nativecell.
            nativeCell.PhotoViewCell.PropertyChanged += nativeCell.CellPropertyChanged;

            // Update the nativecell contents with the current formscell contents.
            nativeCell.UpdateCell();

            return nativeCell;
        }
    }
}

Xaml for the native cell (Android)

In this sample case, as the native cell is used on only Android, the Xaml is divided into the native cell and ViewCell using OnPlatform tag.

The below is how the native cell is used only on Android.

<ListView x:Name="listview" CachingStrategy="RecycleElement" ItemsSource="{Binding Items}" HasUnevenRows="false" RowHeight="400">
    <ListView.ItemTemplate>
        <DataTemplate>
            <cell:PhotoViewCell PhotoItem="{Binding}" Command="{Binding BindingContext.GoDetailCommand,Source={x:Reference listview}}">
                <!-- Above properties are just available on Android -->
                <!-- Below ViewCell content is just available on iOS -->
                <ViewCell.View>
                    <OnPlatform x:TypeArguments="View">
                        <On Platform="iOS">
                            <StackLayout Spacing="0" Margin="0,0,0,6" BackgroundColor="Silver">
                                <StackLayout.GestureRecognizers>
                                    <TapGestureRecognizer Command="{Binding BindingContext.GoDetailCommand,Source={x:Reference listview}}" CommandParameter="{Binding PhotoUrl}" />
                                </StackLayout.GestureRecognizers>
                                <ff:CachedImage DownsampleWidth="320" Aspect="AspectFill" Source="{Binding PhotoUrl}" HorizontalOptions="FillAndExpand" HeightRequest="300" />
                                <Label Text="{Binding Title,StringFormat='Title：{0:N}'}" />
                                <Label Text="{Binding Date,StringFormat='Taken at：{0:N}'}" />
                            </StackLayout>
                        </On>
                    </OnPlatform>
                </ViewCell.View>
            </cell:PhotoViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

This speed is, as far as I see, as good as ViewCell + FFImageLoading.
But I think that memory will be used efficiently.

Enable a largeHeap option in the AndroidManifest.xml

If the memory size used an app is wanted to be large, you write android:largeHeap="true" in the AndroidManifest.xml as the following.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" android:versionCode="1" android:versionName="1.0" package="kamusoft.sample">
    <uses-sdk android:minSdkVersion="21" />
    <application android:label="Sample" android:largeHeap="true"></application>
</manifest>

Though this has nothing to do with memory efficient, I think that it is the most effective for out of memory error.

Add OnTrimMemory override method to the MainActivity class

For more information, see https://github.com/luberda-molinet/FFImageLoading/wiki/Advanced-Usage#clear-cache-and-memory-considerations

public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
{
    ...
    public override void OnTrimMemory([GeneratedEnum] TrimMemory level)
    {
        ImageService.Instance.InvalidateMemoryCache();
        GC.Collect(GC.MaxGeneration, GCCollectionMode.Forced);
        base.OnTrimMemory(level);
    }
}

Define MyImageViewAsync class derived from ImageViewAsync

This custom ImageViewAsync clears memory cache when JavaFinalize.
Register attribute is what enables the custom view in XML.

For more information, see https://github.com/luberda-molinet/FFImageLoading/wiki/Advanced-Usage#clear-cache-and-memory-considerations

[Android.Runtime.Preserve(AllMembers = true)]
[Register("sample.droid.cells.MyImageView")]
public class MyImageView : ImageViewAsync
{
    public string Key { get; set; }

    public MyImageView(Context context) : base(context)
    {
    }

    public MyImageView(IntPtr javaReference, JniHandleOwnership transfer) : base(javaReference, transfer)
    {
    }

    public MyImageView(Context context, IAttributeSet attrs) : base(context, attrs)
    {
    }

    protected override void JavaFinalize()
    {
        SetImageDrawable(null);
        SetImageBitmap(null);
        ImageService.Instance.InvalidateCacheEntryAsync(Key, FFImageLoading.Cache.CacheType.Memory);
        base.JavaFinalize();
    }
}

Conclusion

This article introduced several workarounds with FFImageLoading for out of memory.

More often than not, it solves if only replacing a default Image view with a CachedImage.

Nevertheless, if out of memory error occurs, as this latter section discussed, you can fit together such as a native cell and lerge heap memory setting.

In that case, there is demerit that you have to create more classes.
But the more complex the design has, the more the merit is when using a native cell.
So I think that it is better to judge by what you want to give priority to.

Thank you for reading the too long article.

About pictures used by this sample app.

http://sozai-free.com/
Thanks.

Supplemental explanation about customizing user interface with Azure Active Directory B2C (AD B2C)

Kamu — Tue, 10 Jul 2018 03:45:49 +0000

This article supplementary describes the article of Azure Active Directory B2C: Customize the Azure AD B2C user interface (UI).

Reordering social ID providers on the sign-in page

Social providers order seems to be constant on the sign-in page.
Though I wanted to change the order, the HTML code corresponding it is in an untouchable part.
So I changed it with CSS Flexbox.

.options {
  display: flex;
  flex-direction: column;
  div{
    margin-bottom: 15px;
  }
  div:nth-child(4){
    order: -5; // twitter
  }
  div:nth-child(3){
    order: -4; // facebook
  }
  div:nth-child(2){
    order: -3; // google
  }
  div:last-child {
    order: -2; // github
  }
  div:first-child {
    order: 10; // microsoft
  }
}

Applying an order property, the order can be changed.
This sample is that when chosen twitter, facebook, google, GitHub and Microsoft.
Note that original order will be changed depending on the chosen providers.

The issue that the sign-in page is automatically scrolled up to the mail form when on loading on iOS Safari

Though I wanted to have priority to social account over e-mail account, it was not possible by default.
Because the page is automatically scrolled up to e-mail input form when loaded the sign-in page on iOS Safari.

As UI customizing can't be used Javascript, e-mail input focus can't be controlled.

So I solved that by force with CSS animation.

.localAccount{
  position: relative;
  animation: fade 1ms ease;
  animation-delay: 1s;
  animation-iteration-count: 1;
  animation-fill-mode: backwards;
  z-index: 10;
}

@keyframes fade {
  0% {
    transform: translateY(-100vh);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

localAccount class that is email section is moved up an amount to 1 screen, will be moved to the original position 1 second later.
This stops the page from scrolling.

Supplemental explanation about authenticating Users in Xamarin.Forms apps with Azure Active Directory B2C (AD B2C)

Kamu — Tue, 10 Jul 2018 03:40:48 +0000

This article supplementary describes the article of Authenticating Users with Azure Active Directory B2C.

The most referential sample project

As there are too many similar sample projects, I had difficulty knowing it, but I managed to find the following sample.

https://github.com/xamarin/xamarin-forms-samples/tree/master/WebServices/TodoAzureAuthADB2CClientFlow

This is the very referential sample project.

The issue that a password reset link doesn't work.

Though there is a password reset page link at AD B2C local account login form, an exception occurs when tapping this link, and the password reset page can't be transitioned to.

This issue can be solved by catching the exception and judging the error message.

public async Task<bool> LoginAsync()
{
    AuthenticationResult authResult = null;

    try
    {
        authResult = await _client.AcquireTokenAsync(
            Scopes,
            GetUserByPolicy(_client.Users, PolicySignUpSignIn),
            UIParent
        );
    }
    catch (MsalException msalex)
    {
        // As an exception contains the following message occurs when tapping the password reset link,
        // identifing the exception by the message, password reset page is jumped to.
        if (msalex.Message.Contains("AADB2C90118"))
        {
            try
            {
                // If calling no delay, AquireTokenAsync doesn't sometimes return a result forever
                // It is avoided by a few delays is set.
                await Task.Delay(500); // very important! 
                authResult = await _client.AcquireTokenAsync(
                    Scopes,
                    _client.Users.FirstOrDefault(),
                    UIBehavior.SelectAccount,
                    "",
                    new string[] { },
                    ResetAuthority, // https://login.microsoftonline.com/tfp/your_tenant/your_resetpassword_policy
                    UIParent
                );
            }
            catch (MsalException msalex)
            {
                if (msalex.ErrorCode == "authentication_canceled")
                {
                    Debug.WriteLine("password reset user_cancel");
                }
                return false;
            }            
        }

        else if(msalex.ErrorCode == "authentication_canceled" ){
            return false;
        }

        else {
            Debug.WriteLine($"Error Acquire Token: {msalex}");
            throw msalex;
        }        
    }
    catch(Exception ex)
    {
        throw ex;
    }

    if(authResult == null){
        return false;               
    }

    return true;
}

Note that a few delays should be set before calling AcquireTokenAsync method to call the password reset page.

Creating custom ImageSource in Xamarin.Forms, and displaying an SVG image to default Image controll

Kamu — Fri, 27 Apr 2018 03:41:28 +0000

Since Xamarin.Forms 2.3.5, it comes to be possible to create your own ImageSource.

This article demonstrates how to display an SVG image to default Image control with custom ImageSource.

Repository

https://github.com/muak/SvgImageSource

Nuget

https://www.nuget.org/packages/Xamarin.Forms.Svg/

Procedure of adding custom ImageSource

On the shared project, create a class which derives from ImageSource class. (e.g. SomeImageSource).
On each platform project, create SomeImageSourceHandler class which implements IImageSourcehandler. This needs in order to read an image actually.
Implements LoadImageAsync method in SomeImageSourceHandler, and writes the process of reading an image here.
Registers SomeImageSource and SomeImageSourceHandler types to Xamarin.Forms in order to enable SomeImageSource.

Define custom ImageSource

I explain for the example creating SvgImageSource for displaying an SVG image.

Make StreamImageSouce inherit because the procedure taking a stream of an SVG resource is the same as it.
And define some common BindableProperty's and some static methods for creating ImageSource here.

I copied from Xamarin.Forms source the part of getting assembly. This seems to get the assembly from a calling method.

public class SvgImageSource : StreamImageSource, ISvgImageSource
{
    public static BindableProperty WidthProperty =
        BindableProperty.Create(
            nameof(Width),
            typeof(double),
            typeof(SvgImageSource),
            default(double),
            defaultBindingMode: BindingMode.OneWay
        );

    public double Width {
        get { return (double)GetValue(WidthProperty); }
        set { SetValue(WidthProperty, value); }
    }

    public static BindableProperty HeightProperty =
        BindableProperty.Create(
            nameof(Height),
            typeof(double),
            typeof(SvgImageSource),
            default(double),
            defaultBindingMode: BindingMode.OneWay
        );

    public double Height {
        get { return (double)GetValue(HeightProperty); }
        set { SetValue(HeightProperty, value); }
    }

    // ... Omitted

    static Assembly AssemblyCache;

    public static void RegisterAssembly(Type typeHavingResource = null)
    {
        if (typeHavingResource == null)
        {
            MethodInfo callingAssemblyMethod = typeof(Assembly).GetTypeInfo().GetDeclaredMethod("GetCallingAssembly");
            if (callingAssemblyMethod != null)
            {
                AssemblyCache = (Assembly)callingAssemblyMethod.Invoke(null, new object[0]);
            }
        }
    }

    public static ImageSource FromSvg(string resource, double width, double height, Color color = default(Color))
    {
        if (AssemblyCache == null)
        {
            MethodInfo callingAssemblyMethod = typeof(Assembly).GetTypeInfo().GetDeclaredMethod("GetCallingAssembly");
            if (callingAssemblyMethod != null)
            {
                AssemblyCache = (Assembly)callingAssemblyMethod.Invoke(null, new object[0]);
            }
            else
            {
                return null;
            }
        }
        var source = (SvgImageSource)FromSvg(resource, color);

        source.Width = width;
        source.Height = height;

        return source;
    }

    public static ImageSource FromSvg(string resource, Color color = default(Color))
    {
        if (AssemblyCache == null)
        {
            MethodInfo callingAssemblyMethod = typeof(Assembly).GetTypeInfo().GetDeclaredMethod("GetCallingAssembly");
            if (callingAssemblyMethod != null)
            {
                AssemblyCache = (Assembly)callingAssemblyMethod.Invoke(null, new object[0]);
            }
            else
            {
                return null;
            }
        }

        var realResource = GetRealResource(resource);
        if (realResource == null)
        {
            return null;
        }

        Func<Stream> streamFunc = () => AssemblyCache.GetManifestResourceStream(realResource);

        return new SvgImageSource { Stream = token => Task.Run(streamFunc, token), Color = color };

    }

    static string GetRealResource(string resource)
    {
        return AssemblyCache.GetManifestResourceNames()
                            .FirstOrDefault(x => x.EndsWith(resource, StringComparison.CurrentCultureIgnoreCase));

    }
}

Implementing IImageSourceHandler for iOS

This is almost the same as the source Xamarin.Forms StreamImageSourceHandler.

I changed LoadImageAsync to getting it from SVG stream with Ngraphics.

The LoadImageAsync method is used to load a native image actually, and customized ImageSource can be run by writing own process here.

Although this is iOS example, it can be implemented the same way as this about Android too.
For more information, see Github source.

public class SvgImageSourceHandler : IImageSourceHandler
 {
     internal static float ScreenScale;

     public async Task<UIImage> LoadImageAsync(ImageSource imagesource, CancellationToken cancelationToken = default(CancellationToken), float scale = 1)
     {
         UIImage image = null;
         var svgsource = imagesource as SvgImageSource;
         if (svgsource?.Stream != null)
         {
             using (var streamImage = await ((IStreamImageSource)svgsource).GetStreamAsync(cancelationToken).ConfigureAwait(false))
             {
                 if (streamImage != null)
                     image = GetUIImage(streamImage, svgsource.Width, svgsource.Height, svgsource.Color, scale);
             }
         }

         if (image == null)
         {
             Log.Warning(nameof(SvgImageSourceHandler), "Could not load image: {0}", svgsource);
         }

         return image;
     }

     UIImage GetUIImage(Stream stream, double width, double height, Color color, float scale)
     {
         Graphic g = null;
         using (var sr = new StreamReader(stream))
         {
             g = Graphic.LoadSvg(sr);
         }

         var newSize = SvgUtility.CalcAspect(g.Size, width, height);

         if (width > 0 || height > 0)
         {
             g = SvgUtility.Resize(g, newSize);
         }

         if (scale <= 1)
         {
             scale = ScreenScale;
         }

         var canvas = Platforms.Current.CreateImageCanvas(newSize, scale);

         if (color != Xamarin.Forms.Color.Default)
         {
             var nColor = new NGraphics.Color(color.R, color.G, color.B, color.A);

             foreach (var element in g.Children)
             {
                 SvgUtility.ApplyColor(element, nColor);
                 element.Draw(canvas);
             }
         }
         else
         {
             g.Draw(canvas);
         }

         return canvas.GetImage().GetUIImage();
     }
 }

Registers custom ImageSource and ImageSourceHandler

Finally, register it with Xamarin.Forms that "Do with SvgImageSource with SvgImageSourceHandler".

This example is to register it when initializing this library.

Note that this method isn't shown in intellisense because it is specified EditorBrowsable attribute.

public static class SvgImage
{
    public static void Init()
    {
        Internals.Registrar.Registered.Register(typeof(SvgImageSource), typeof(SvgImageSourceHandler));
    }
}

By registering to Internals.Registrar.Registered, such a control as an Image calls the handler corresponded a type of the ImageSource, and calls LoadImageAsync method and get a native image. Thereby Xamarin.Forms.Image can display an SVG image without changing its code.

The result is that default Image control can be set an SVG image and displayed without changing itself.

For more information about SvgImageSource, see ReadMe.

Conclusion

Disclosing Xamarin.Forms.Internals is very nice. I was impressed with changing the behavior of Image control without extending it like this article.

Likewise, I think, it is nice if my own GestureRecognizer can be created too.

Introduction of Settings View for Xamarin.Forms

Kamu — Fri, 06 Apr 2018 02:55:59 +0000

Though Xamarin.Forms TableView is useful, there aren't enough built-in cells. So I always use a ViewCell, but which makes app performance worse.

In order to solve that, I made some custom native cells and a custom TableView which works these cells effectively.

This library named AiForms.SettingsView is available on NuGet.

Source

https://github.com/muak/AiForms.Renderers

Nuget

https://www.nuget.org/packages/AiForms.SettingsView/

What SettingsView can do.

General

To set separator color.
To set selected cell color.
To scroll to screen top and bottom.

Sections

To set IsVisible each section.
To set section a footer.
To set various options of a header and a footer.
To use DataTemplate and DataTemplateSelector in a section.
To reorder items by drag and drop in a section.

Cells

To set options of all the cells as SettingsView options at once.
To set indivisual cell options. (indivisual cell options is superior to SettingsView options.)
To set a cell HintText.
To use an icon cached in memory at all cells.
To change corner radius of an icon.
To use various defined cells.
To use Xamarin.Forms.ViewCell and the others.

For more information about SettingsView, see ReadMe.md.

Built-in Cells

LabelCell - a cell showing read only text.
CommandCell - a LabelCell invoked an action.
ButtonCell - a simple cell invoked an action like a button.
SwitchCell - a LabelCell equipped a switch
CheckboxCell - a LabelCell equipped a checkbox.
NumberPickerCell - a LabelCell calling a number picker.
TimePickerCell - a LabelCell calling a time picker.
DatePickerCell - a LabelCell calling a date picker.
TextPickerCell - a LabelCell calling a text picker.
PickerCell - a LabelCell calling a multiple select picker.
EntryCell - a cell inputing some text.

For more information about built-in Cells, see ReadMe.md.

Installation

Install-Package AiForms.SettingsView

You need to install this nuget package to PCL/.NETStandard project and each platform project.

For iOS project

To use by iOS, you need to write some code in AppDelegate.cs.

public override bool FinishedLaunching(UIApplication app, NSDictionary options) {
    global::Xamarin.Forms.Forms.Init();

    AiForms.Renderers.iOS.SettingsViewInit.Init(); //need to write here

    LoadApplication(new App(new iOSInitializer()));

    return base.FinishedLaunching(app, options);
}

How to write with xaml

<ContentPage 
    xmlns="http://xamarin.com/schemas/2014/forms" 
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
    xmlns:sv="clr-namespace:AiForms.Renderers;assembly=SettingsView"
    x:Class="Sample.Views.SettingsViewPage">

<sv:SettingsView HasUnevenRows="true">

    <sv:Section Title="Header1" FooterText="Footer1">
        <sv:CommandCell IconSource="icon.png" IconSize="60,60" IconRadius="30"
            Title="Xam Xamarin" Description="hoge@fuga.com"
            Command="{Binding ToProfileCommand}" CommandParameter="{Binding Parameter}"
            KeepSelectedUntilBack="true"            
        />
        <sv:ButtonCell Title="Toggle Section" TitleColor="{StaticResource TitleTextColor}"
             TitleAlignment="Center" Command="{Binding SectionToggleCommand}" />
        <sv:LabelCell Title="Label" ValueText="value" />
        <sv:SwitchCell Title="Switch" On="true" 
            Description="This is description." />
        <sv:CheckboxCell Title="Checkbox" Checked="true" />
    </sv:Section>

    <sv:Section Title="Header2" FooterText="Footer2" IsVisible="{Binding SctionIsVisible}">
        <sv:PickerCell Title="Favorites" ItemsSource="{Binding ItemsSource}" DisplayMember="Name" MaxSelectedNumber="3" 
        SelectedItems="{Binding SelectedItems}" KeepSelectedUntilBack="true" PageTitle="select 3 items" />
        <sv:NumberPickerCell Title="NumberPicker" Min="0" Max="99" Number="15" PickerTitle="Select number" />
        <sv:TimePickerCell Title="TimePicker" Format="HH:mm" Time="15:30" PickerTitle="Select time" />
        <sv:DatePickerCell Title="DatePicker" Format="yyyy/MM/dd (ddd)" Date="2017/11/11" MinimumDate="2015/1/1" MaximumDate="2018/12/15" TodayText="Today's date"/>
        <sv:EntryCell Title="EntryCell" ValueText="{Binding InputText.Value}" Placeholder="Input text" Keyboard="Email" TextAlignment="End" HintText="{Binding InputError.Value}" />
    </sv:Section>

</sv:SettingsView>
</ContentPage>

SettingsView properties settings may as well be witten in App.xaml.
For example...

<Application xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:sv="clr-namespace:AiForms.Renderers;assembly=SettingsView"
             x:Class="Sample.App">
    <Application.Resources>
        <ResourceDictionary>
            <Color x:Key="AccentColor">#FFBF00</Color>
            <Color x:Key="DisabledColor">#E6DAB9</Color>
            <Color x:Key="TitleTextColor">#CC9900</Color>
            <Color x:Key="PaleBackColorPrimary">#F2EFE6</Color>
            <Color x:Key="PaleBackColorSecondary">#F2EDDA</Color>
            <Color x:Key="DeepTextColor">#555555</Color>
            <Color x:Key="NormalTextColor">#666666</Color>
            <Color x:Key="PaleTextColor">#999999</Color>
            <x:Double x:Key="BaseFontSize">12</x:Double>
            <x:Double x:Key="BaseFontSize+">14</x:Double>
            <x:Double x:Key="BaseFontSize++">17</x:Double>
            <x:Double x:Key="BaseFontSize-">11</x:Double>

            <Style TargetType="sv:SettingsView">
                <Setter Property="SeparatorColor" Value="{StaticResource DisabledColor}" />
                <Setter Property="BackgroundColor" Value="{StaticResource PaleBackColorPrimary}" />
                <Setter Property="HeaderBackgroundColor" Value="{StaticResource PaleBackColorPrimary}" />
                <Setter Property="CellBackgroundColor" Value="{StaticResource AppBackground}" />
                <Setter Property="CellTitleColor" Value="{StaticResource DeepTextColor}" />
                <Setter Property="CellValueTextColor" Value="{StaticResource NormalTextColor}" />
                <Setter Property="CellTitleFontSize" Value="{StaticResource BaseFontSize++}" />
                <Setter Property="CellValueTextFontSize" Value="{StaticResource BaseFontSize}" />
                <Setter Property="CellDescriptionColor" Value="{StaticResource NormalTextColor}" />
                <Setter Property="CellDescriptionFontSize" Value="{StaticResource BaseFontSize-}" />
                <Setter Property="CellAccentColor" Value="{StaticResource AccentColor}" />
                <Setter Property="SelectedColor" Value="#50FFBF00" />
                <Setter Property="HeaderTextColor" Value="{StaticResource TitleTextColor}" />
                <Setter Property="FooterFontSize" Value="{StaticResource BaseFontSize-}" />
                <Setter Property="FooterTextColor" Value="{StaticResource PaleTextColor}" />
            </Style>
        </ResourceDictionary>
    </Application.Resources>
</Application>

Whereby any SettingsView in App will become the same property setttings.

Concluding

I would be grateful if you could use this library.

If there are some questions, requests, and bug reports, please report it to GitHub issues or twitter (@muak_x).

Thank you.

Introduction of Image Edit Plugin for Xamarin

Kamu — Mon, 02 Apr 2018 02:46:25 +0000

I needed the processing in my app that an image was cropped, resized, rotated and saved. So I implemented it using DependencyService.

After that, I tried extracting the processing to use as a library and I thought this should be made as a Plugin.

That's why I made the Plugin which edits an image. This plugin is available on NuGet.

Source

https://github.com/muak/Xamarin.Plugin.ImageEdit

Nuget

https://www.nuget.org/packages/Xamarin.Plugin.ImageEdit/

Installation

Install-Package Xamarin.Plugin.ImageEdit

Install into your PCL / .NETStandard project and each platform projects.

Supported

Platform	Supported	Version
Xamarin.iOS	Yes	iOS 9+
Xamarin.Android	Yes	API 22+
Windows 10 UWP	No
Xamarin.Mac	No

Features

Resizing
Cropping
Rotation
Turning monochrome
Convert to png/jpeg bytes array
Getting ARGB pixels information

How to use

An image can be cropped, rotated, resized and converted PNG data in the following code:

using (var image = await CrossImageEdit.Current.CreateImageAsync(imageByteArray)) {
    var croped = await Task.Run(() =>
            image.Crop(10, 20, 250, 100)
                 .Rotate(180)
                 .Resize(100, 0)
                 .ToPng()
    );
}

With DI container (eg. prism.forms)

In case using as plugin, it is difficult to do unit test.
Considering unit test, you should use DI container such as unity on prism.forms as the following code:

//View model constructor
public ViewModel(IImageEdit imageEdit){

    using (var image = await imageEdit.CreateImageAsync(imageByteArray)) {
        var croped = await Task.Run(() =>
                image.Crop(10, 20, 250, 100)
                     .Rotate(180)
                     .Resize(100, 0)
                     .ToPng()
        );
    }
}

//on platform
public class iOSInitializer : IPlatformInitializer
{
    public void RegisterTypes(IUnityContainer container)
    {
        container.RegisterType<IImageEdit,ImageEdit>();
    }
}

API Usage

IImageEdit.CreateImageAsync

This method is used to get EditableImage object.

//from byte[]
var editableImage = await CrossImageEdit.Current.CreateImageAsync(imageByteArray);

//from stream
var editableImage = await CrossImageEdit.Current.CreateImageAsync(imageStream);

You can manipulate an image using a got EditableImage.

IEditableImage.Resize

This method resizes an image and returns IEditableImage.

var width = 200;
var height = 150;
editableImage.Resize(width, height);
editableImage.Resize(width, 0); //auto height
editableImage.Resize(0, height); //auto width

editableImage.Resize(50); //specify max length of long side. other side auto size.

Specifying either width or height to 0, the other side will automatically be adjusted following the aspect ratio.

Passing only one argument, the long side length will become the value length and the other side will automatically be adjusted following the aspect ratio.

IEditableImage.Crop

This method crop an image and returns IEditableImage.

var x = 10;
var y = 10;
var width = 50;
var height = 50;
editableImage.Crop(x, y, width, height);

IEditableImage.Rotate

This method rotate an image and returns IEditableImage.

var degree = 90; // 0-360;
editableImage.Rotate(degree);

The rotation angle is specified from 0 to 360.

IEditableImage.ToMonochrome

This method turns an image color into monochrome and returns IEditableImage.

editableImage.ToMonochrome();

IEditableImage.ToPng

This method converts an image to PNG and returns PNG bytes array.

var pngBytes = editableImage.ToPng();

IEditableImage.ToJpeg

This method converts an image to JPEG and returns JPEG bytes array.

var jpgBytes = editableImage.ToJpeg(90); // quality(0-100)

An image quality is specified from 0 to 100.

IEditableImage.ToArgbPixels

This method returns the image pixels array which has ARGB information.

For example, when an element of this array has 0xFF00F090 value, the state is the following.

A	R	G	B
FF	00	F0	90

And in order to get an individual color from this value, like the following code is used.

var pixels = editableImage.ToArgbPixels();

var pixel = pixels[10];
var r = pixel & 0x00FF0000 >> 16; //Get R
var g = pixel & 0x0000FF00 >> 8;  //Get G
var b = pixel & 0x000000FF;       //Get B

IEditableImage.GetNativeImage

This method returns each platform native image. If the platform is iOS, returns UIImage; Otherwise, returns Bitmap.

Concluding

I would be grateful if you could use this library.

If there are some questions, requests, and bug reports, please report it to GitHub issues or twitter (@muak_x ).

Thank you.

How to use a private NuGet server (feed) on App Center

Kamu — Tue, 13 Feb 2018 04:40:40 +0000

I would want to make private NuGet packages referred, and I surveyed it. I wrote down the result here in case I forgot.

Repository

https://github.com/muak/AppCenterPrivateNugetSample

Entire the repository isn't concerned with this article so much, but I hope this will help you with how to write Nuget.config.

Procedures

By some means, arrange a server in order to put your private Nuget package.
- Buy a MyGet license.
- Use VSTS private feed.
- Using VPS or cloud service, construct a server by myself.
Put a Nuget.config file in the same folder as .sln.
Setting environment variables on App Center.

1. Nuget server

It is OK to skip over this section.

First of all, I tried to use MyGet. But I gave up it because of using private feed in MyGet is not free.

Secondly, I tried to construct a nuget server using nuget.service package. But I gave up it because it did not correspond to ASP.NET core.

Then, I searched "nuget linux" with Google and hit the following site.

https://github.com/Daniel15/simple-nuget-server

And I found the docker image which corresponds to this.

https://github.com/rolfwessels/docker-simple-nuget-server

I tried to use it.

But it didn't work well. So I forked those projects and did trial and error.
The result is the following links.
Though I registered docker hub and that is available, it is just a suggestion because I hardly know docker knowledge.

https://hub.docker.com/r/kamu/docker-simple-nuget-server/

https://github.com/muak/simple-nuget-server
https://github.com/muak/docker-simple-nuget-server

2. Nuget.config

Create a Nuget.config file in the same folder as .sln and write as the following code.

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <packageSources>
    <add key="nuget" value="https://www.nuget.org/api/v2" />
    <add key="MyNuget" value="https://mynuget.com" />
  </packageSources>
  <activePackageSource>
    <add key="All" value="(Aggregate source)" />
  </activePackageSource>
  <packageSourceCredentials>
    <MyNuget>
      <add key="Username" value="%private_nuget_user%" />
      <add key="ClearTextPassword" value="%private_nuget_pass%" />
    </MyNuget>
  </packageSourceCredentials>
</configuration>

https://intercom.help/appcenter/build/how-to-restore-a-private-nuget-feed

Though I referred from this, I changed default feed URL to VS for Mac default URL because it didn't work for some reason.

Add a private nuget server key-value (name / URL) to packageSources, and add the same name item as added key to packageSourceCredentials. and add user and password item there.
Parts of between % are environment variables which are set in AppCenter. Not to mention, they can be written directly there too.

3. Settings on App Center

All you have to do is register environment variables corresponding to the Nuget.config on App Center.

If build success, the following log will begin to be output soon.

But if any settings were made mistake, the following error messages will be displayed and it will take a long time to build.

"Unable to load the service index for source…"
"Package 'something' is not found on source…"

If these messages were shown, you should cancel the build since it will be failed.

Custom Effects for Xamarin.Forms named AiForms.Effects

Kamu — Tue, 06 Feb 2018 07:07:43 +0000

I think that Xamarin.Forms Controls haven't enough fundamental functions. But Using Xamarin.Forms.Effects enable us to add various functions to controls.
So I made the effects library named AiForms.Effects in order to make the most of Xamarin.Forms Controls.

Repository

https://github.com/muak/AiForms.Effects

Nuget

https://www.nuget.org/packages/AiForms.Effects/

You need to install this nuget package to PCL project and each platform project.

For iOS project

To use on iOS, you need to write some code in AppDelegate.cs.

public override bool FinishedLaunching(UIApplication app, NSDictionary options) {
    global::Xamarin.Forms.Forms.Init();

    AiForms.Effects.iOS.Effects.Init();  //need to write here

    LoadApplication(new App(new iOSInitializer()));

    return base.FinishedLaunching(app, options);
}

Minimum Device and Version etc

iOS: iPhone5s, iPod touch6, iOS9.3
Android: version 5.1.1 (only FormsAppCompatActivity) / API22

Features


AddCommand	Add a Command to a view.
AddDatePicker	Add a DatePicker function to a view.
AddNumberPicker	Add a NumberPicker function to a view.
AddTimePicker	Add a TimePicker function to a view.
AddText	Add one line text in a view.
AddTouch	Add touch events (begin, move, end, cancel) to a view.
AlterLineHeight	Alter line height (line spacing) of a Label and Editor.
AlterColor	Alter an element color which can't be changed.
Border	Add a border to a view.
Placeholder	Show a placeholder in an Editor.
SizeToFit	Make font size adjusted to fit a Label size.
ToFlatButton	Alter a Button to flat (for Android).

Overview

AddCommand

This is the effect that adds Commands functions to a view. This provides such functions as tap action, long tap action, touch feedback color, tap sound and changing IsEnabled property synchronized CanExecute of Command.

AddDatePicker

This is the effect that adds a Date Picker to a view. When a view is tapped, a Date Picker is shown and when a date is selected, the date will be reflected the Date property value. Furthermore, if the Command property is set, the command will be executed.

On iOS, if the TodayText property is set, today's button will be shown and if that button is tapped, today will be selected.

AddNumberPicker

This is the effect that adds a Number Picker to a view. When a view is tapped, a Number Picker is shown and when a number is selected, the number will be reflected the Number property value. Furthermore, if the Command property is set, the command will be executed.

AddTimePicker

This is the effect that adds a Time Picker to a view. When a view is tapped, a Time Picker is shown and when a time is selected, the time will be reflected the Time property value. Furthermore, if the Command property is set, the command will be executed.

AddText

This is the effect that adds one line text into a view. If you use this effect, for example, you will be able to show such information as validations and character counter and so on.
You can change the text position(top-left, top-right, bottom-left, bottom-right), text color, font size and margin by specifying each corresponded property.

AddTouch

This is the effect that adds touch events (begin, move, end, cancel) to a view. Each touch events provides location property and can be taken X and Y position.

AlterLineHeight

This is the effect that alters line height of Label and Editor. If the value of Multiple-property is specified, Line height will become the font height * the Multiple property value.

AlterColor

This is the effect that alters the color in a part of a view which can't be changed normally. This supports such a view as Slider and Switch.

Border

This is the effect that adds a border to a view. Width, Color, and Radius of a border can be changed by specifying each corresponded property.

Though Entry, Picker, DatePicker, and TimePicker have a border in default on iOS, the border can be hidden by changing Width value to 0.

Placeholder

This is the effect that shows a placeholder in Editor. This supports Editor only.

SizeToFit

This is the effect that makes font size adjusted to fit the Label size. This can be used Label only.

ToFlatButton

This is the effect that alters Button to flat on Android. If this effect is used, you will be able to design a Button like an iOS one. And also this will enable you to change BorderRadius, BorderWidth, and BorderColor that are default Button properties on Android.

Concluding

I would be grateful if you could use this library.

If there are some questions, requests, and bug reports, please report it to GitHub issues or twitter (@muak_x).

Thank you.

WrapLayout and RepeatableStackLayout for Xamarin.Forms

Kamu — Thu, 25 Jan 2018 07:49:29 +0000

For now, Xamarin.Forms hasn't a Layout which is wrapped on view boundary such as WPF WrapLayout.

That's why I made the layout library named AiForms.Layout.

Demo

RepeatableWrapLayout

RepeatableStack

Repository

https://github.com/muak/AiForms.Layouts

Nuget Package

https://www.nuget.org/packages/AiForms.Layouts/

Installation

Install-Package AiForms.Layouts

You need to install this package to .NETStandard / PCL project and each platform project.

iOS

If you don't use XamlCompilationOptions.Compile, need to write following code in AppDelegate.cs; Otherwise needn't.

public override bool FinishedLaunching(UIApplication app, NSDictionary options) {
    global::Xamarin.Forms.Forms.Init();

    AiForms.Layouts.LayoutsInit.Init();  //need to write here

    LoadApplication(new App(new iOSInitializer()));

    return base.FinishedLaunching(app, options);
}

Overview

Wraplayout

WrapLayout horizontally arranges an element, automatically wraps at parent view boundary.
In addition to wrapping function, there are functions that each element width is automatically made uniform width by specifying the number of elements in a row.

Parameters

Spacing
- Margin between elements.
UniformColumns
- Specifying more than 0, a child width will be width which divide parent width by this number.
IsSquare
- Specifying true, a child height will be equal to its width.

How to write with Xaml

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        xmlns:l="clr-namespace:AiForms.Layouts;assembly=AiForms.Layouts"
        x:Class="Sample.Views.MainPage">
    <StackLayout>
        <l:WrapLayout Spacing="4" UniformColumns="3" IsSquare="true" HorizontalOptions="FillAndExpand">
            <BoxView Color="Red" />
            <BoxView Color="Blue" />
            <BoxView Color="Green" />
            <BoxView Color="Black" />
            <BoxView Color="Yellow" />
        </l:WrapLayout>
    </StackLayout>
</ContentPage>

RepeatableWrapLayout

RepeatableWrapLayout is a WrapLayout corresponded to DataTemplate and DataTemplateSelector.

Parameters

ItemTapCommandProperty
- Command invoked when an element is tapped.
ItemsSource
- What is like ListView ItemsSource.
ItemTemplate
- What is like ListView ItemTemplate.

How to write to Xaml

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        xmlns:l="clr-namespace:AiForms.Layouts;assembly=AiForms.Layouts"
        x:Class="Sample.Views.MainPage">
    <StackLayout>
        <ScrollView HorizontalOptions="FillAndExpand">
            <l:RepeatableWrapLayout
                ItemTapCommand="{Binding TapCommand}"
                ItemsSource="{Binding BoxList}"
                Spacing="3" UniformColumns="{Binding UniformColumns}"
                IsSquare="{Binding IsSquare}" >
                <l:RepeatableWrapLayout.ItemTemplate>
                    <DataTemplate>
                        <StackLayout BackgroundColor="{Binding Color}" >
                            <Label
                                VerticalTextAlignment="Center" HorizontalTextAlignment="Center"
                                Text="{Binding Name}"  />
                        </StackLayout>
                    </DataTemplate>
                </l:RepeatableWrapLayout.ItemTemplate>
            </l:RepeatableWrapLayout>
        </ScrollView>
    </StackLayout>
</ContentPage>

RepeatableStack

RepeatableStack is a StackLayout corresponded to DataTemplate and DataTemplateSelector.

Parameters

ItemsSource
ItemTemplate

How to write to Xaml

<!-- Horizontal -->
<ScrollView Orientation="Horizontal" HeightRequest="86">
<al:RepeatableStack Orientation="Horizontal" ItemsSource="{Binding BoxList}" HeightRequest="86">
    <al:RepeatableStack.ItemTemplate>
        <DataTemplate>
            <ContentView BackgroundColor="{Binding Color}" WidthRequest="80" HeightRequest="80" Padding="3" />
        </DataTemplate>
    </al:RepeatableStack.ItemTemplate>
</al:RepeatableStack>
</ScrollView>

<!-- Vertical -->
<ScrollView>
<al:RepeatableStack Orientation="Vertical" ItemsSource="{Binding BoxList}">
    <al:RepeatableStack.ItemTemplate>
        <DataTemplate>
            <ContentView BackgroundColor="{Binding Color}" WidthRequest="80" HeightRequest="80" Padding="3" />
        </DataTemplate>
    </al:RepeatableStack.ItemTemplate>
</al:RepeatableStack>
</ScrollView>