I've always been a fan of MvvmLight's SimpleIoc and was really pleased to see it mature and make its way into the CommunityToolkit after MvvmLight's deprecation.

In Marco Siccardi's blog post "Make the IServiceProvider of your MAUI application accessible with the MVVM CommunityToolkit" he walks through how this Container can be configured by extending the Maui App's Application class and calling Ioc.Default.ConfigureServices() from the construct of the resulting sub-class.

As highlighted in Marco's post, there are many ways to achieve this, however Sub-classing Application seemed a little too hard work for me :)

Alternative Approach

The IServiceProvider is exposed from the MauiApp object created in the MauiProgram.CreateMauiApp() method.

Rather than sub-class, we can simply extend the last line of CreateMauiApp():

MauiProgram.cs

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
            });

        builder.Services.AddTransient<MainViewModel>();

        var mauiApp = builder.Build();
        Ioc.Default.ConfigureServices(mauiApp.Services);
        return mauiApp;
    }    
}

A cleaner approach would be to create an extension method, allowing us to keep it to a single line and configure the IoC Container elsewhere. Old Sample

Thanks to Allan Ritchie's suggestion, a cleaner approach is to wrap the Ioc.Default.ConfigureServices() in a Service which is automatically initialized by the Maui App Builder during initialization using the IMauiInitializerService interface.

MauiAppExtensions.cs

public class IocConfigurationService : IMauiInitializeService
{
    public void Initialize(IServiceProvider services)
    {
        Ioc.Default.ConfigureServices(services);
    }
}

MauiProgram.cs

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        ...
        builder.Services.AddSingleton<IMauiInitializeService>(new IocConfigurationService());

        builder.Services.AddTransient<MainViewModel>();

        return builder.Build();
    }    
}

A sample app for context is provided here

Thanks again to Marco for the inspiration, this is in no way intended to put down his approach, only to highlight that there's always more than one approach and to choose the one you feel most comfortable with.

App Actions allow developers to add shortcuts to an App's launch icon to invoke custom functionality or deep link into the app.

As part of MAUI Essentials, a simple API is provided that allows the developer to declare App Actions. The API allows you to create the Action with a custom title, and sub-title and set an Icon for the action from the App's resources. However, creating Icons for App Actions can be quite finicky, as if they aren't the correct size and format, they will not render.

Enter AppActions.Icons.Maui. This nuget package provides a set of common icons that you can use in Android, iOS & Windows platforms to quickly add icons to your AppActions with little ceremony.

How to install

1. Follow the Microsoft .NET MAUI App actions Docs on how to Configure AppActions in your Application.

2. Install the AppActions.Icons.Maui Nuget package into your MAUI project.

3. In the ConfigureEssentials() method, call essentials.UseAppActionIcons()

   using AppActions.Icons.Maui;
   
   ...
   
   .ConfigureEssentials(essentials =>
   {
       essentials
           .UseAppActionIcons()
           .AddAppAction("shortcut_1", "Shortcut")
           .OnAppAction(App.HandAppActions)
   });
   

How to use

AppActions.Icons.Maui builds on top of the Essentials AppActions API to try and make life as easy as possible. This means that setting the icon to one of the provided Icons is as easy as passing in one of the options from the AppActionIcon class in place of a string name.

.ConfigureEssentials(essentials =>
{
    essentials
        .UseAppActionIcons()
        .AddAppAction("shortcut_1", "Shortcut", icon: AppActionIcon.Compose)
        .OnAppAction(App.HandAppActions)
});

This code snippet assigns the "Compose" icon and looks like this

Modify Icon Colors on Android

On Android, the Icons provided are VectorDrawables, this means we can utilise the platform's native features and override the foreground and background colors of the icons.

1. Open the colors.xml in Platforms > Android > Resources > values

2. Add the following two color resources and adjust the Hex codes to your desired colors.

   <color name="appActionBackground">#E6DFFC</color>
   <color name="appActionForeground">#512BD4</color>
   

   

And that's it! A simple way to add Icons to your AppActions.

As well as the 29 provided icons, this package also allows you to set SF Symbols for your iOS apps which give you even more flexibility. To see how to take advantage of this feature, please visit the Package's GitHub Readme

On occasions you may find a need to display a block of HTML in your app, for a bit of legal blurb for example, and you'll reach for the trusty WebView.

The WebView control is great for displaying a page of HTML, however it comes "as is". If a user clicks on a link within the WebView, it opens the link within the same view, but the user is unable to go back, as the WebView has no navigation controls.

By intercepting the WebView.Navigating event, we can block the WebView from opening the url and instead take advantage of Xamarin.Essentials Browser.OpenAsync method. In order to make this re-usable, I've wrapped it in a Behavior so it can be easily applied to any WebViews that require it.

View the sample code for this on GitHub

WebViewBrowserLinkBehavior

public class WebViewBrowserLinkBehavior : BehaviorBase<WebView>
{
    protected override void OnAttachedTo(WebView webView)
    {
		base.OnAttachedTo(webView);
		webView.Navigating += WebViewOnNavigating;
	}

	protected override void OnDetachingFrom(WebView webView)
	{
		base.OnDetachingFrom(webView);
		webView.Navigating -= WebViewOnNavigating;
	}

	private void WebViewOnNavigating(object sender, WebNavigatingEventArgs e)
	{
		if (!e.Url.StartsWith("http", StringComparison.InvariantCultureIgnoreCase))
			return;

        e.Cancel = true;
		_ = Browser.OpenAsync(e.Url, this.LaunchOptions);
	}
}

In the behavior we subscribe and unsubscribe to the WebView's Navigating() event via the OnAttachedTo and OnDetachingFrom methods respectively.

In the event handler, we check to see if the url that's been clicked starts with "http" and if so, we cancel the WebView's navigation and call Browser.OpenAsync with the url.

You could omit the check to see if the url starts with Http if you want, and use the Launcher.OpenAsync method instead.

Using the behavior

As with most other Xamarin Forms controls, WebView contains a Behaviors property and so we can just add our behavior to that:

<ContentPage x:Class="PrivacyPolicyLinks.MainPage"
             xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:behaviors="clr-namespace:PrivacyPolicyLinks.Behaviors">
    ...
    
    <WebView>
        <WebView.Source>
            <HtmlWebViewSource Html="{Binding DocumentText}" />
        </WebView.Source>
    
        <WebView.Behaviors>
            <behaviors:WebViewBrowserLinkBehavior />
        </WebView.Behaviors>
    </WebView>
</ContentPage>

And there we have it a simple behavior that will automatically launch hyperlinks in an external browser, leaving the original content of the webview in tact.

Source

You can find a full working sample of the code with some additional properties for cusomization on GitHub

In an ideal world, your lovely ASP Core application would be hosted in its own container in a sandboxed environment and separating Environmental Variables for different apps would be trivial. In the real world things are sometimes a bit muddier.

Problem:

Allow multiple ASP.NET Core apps to run in IIS on the same server but each have their own ASPNETCORE_ENVIRONMENT value that is generated via a CI pipeline.

Solution:

Pass the EnvironmentName parameter into the dotnet publish command. This will generate a web.config file for the application and include the ASPNETCORE_ENVIRONMENT property.

dotnet publish --configuration Release /p:EnvironmentName=Staging

The generated web.config file will look something similar to this:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    ...
      
    <aspNetCore ...>
      <environmentVariables>
        <environmentVariable name="ASPNETCORE_ENVIRONMENT" value="Staging" />
      </environmentVariables>
    </aspNetCore>
  </system.webServer>
</configuration>

If you already have a web.config in the root of your web app for other things (adding/removing certain headers), then this will edit that file rather than replace it.

Azure Devops Pipeline

If you're looking to do this within an AzDO Yaml Pipeline, here's a sample of the code required:

  - task: DotNetCoreCLI@2
    displayName: 'Publish Web Project'
    inputs:
      command: publish
      publishWebProjects: True
      arguments: '--configuration $(BuildConfiguration) --output $(build.artifactstagingdirectory) /p:EnvironmentName=Staging'
      zipAfterPublish: true

Sample

You can find a Hosted Blazor WebAssembly sample over at my GitHub

Whilst most people are familiar with the concept of pressing the tab key to allow users to move between fields on a Desktop or Web form, the same isn't as true for mobile devices. A more useable flow for mobile users is to jump to the next field when they press Return on the keyboard.

In Xamarin Forms, TabIndex is supported, but is only really useful for devices connected to a keyboard. For those more conventional touch devices, we need a different approach...Behaviors.

Sample source code

Using a custom behavior we can subscribe to an Entry's Completed event and assign focus to a new VisualElement.

The Behavior code:

public class SetFocusOnEntryCompletedBehavior : Behavior
{
    public static readonly BindableProperty TargetElementProperty
       = BindableProperty.Create(nameof(TargetElement), typeof(VisualElement), typeof(SetFocusOnEntryCompletedBehavior));

    public VisualElement TargetElement
    {
        get => (VisualElement)GetValue(TargetElementProperty);
        set => SetValue(TargetElementProperty, value);
    }
        
    protected override void OnAttachedTo(BindableObject bindable)
    {
        base.OnAttachedTo(bindable);
        
        if (bindable is Entry entry)
            entry.Completed += Entry_Completed;
    }

    protected override void OnDetachingFrom(BindableObject bindable)
    {
        if (bindable is Entry entry)
            entry.Completed -= Entry_Completed;

        base.OnDetachingFrom(bindable);
    }

    private void Entry_Completed(object sender, EventArgs e)
    {
        TargetElement?.Focus();
    }
}

We create a BindableProperty called TargetElement, this will hold a reference to the Element we want to focus on next when Return is pressed. Then, when the behavior is attached to its parent Entry, we hook up the Entry's Completed event and invoke the Focus() method when it's fired, remembering to detach the event when we're done.

The implementation

<ContentPage x:Class="NextFormFieldSample.Forms.MainPage"
             xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:behaviors="clr-namespace:NextFormFieldSample.Forms.Behaviors">
    <StackLayout Margin="20">   
        
        <Entry Placeholder="Field 1">
            <Entry.Behaviors>
                <behaviors:SetFocusOnEntryCompletedBehavior TargetElement="{x:Reference Entry2}" />
            </Entry.Behaviors>
        </Entry>

        <Entry x:Name="Entry2" Placeholder="Field 2"/>  
        
    </StackLayout>
</ContentPage>

This adds the behavior to listen to the Return key being pressed when the user is focused on the first Entry. The behavior's TargetElement property is set using {x:Reference} and uses the x:Name assigned to the second Entry as the reference point.

Now, when a user taps the Return key on their keyboard whilst in the first entry, the app will automatically move the cursor to the second field.

View the code within a sample app over on my GitHub.

In a previous post I showed how you could use my AppShortcuts plugin to add Dynamic shortcuts to your Xamarin Apps. Along with Dynamic shortcuts, both iOS and Android also provide Static shortcuts which can be added declaratively.

Static shortcuts are declared via the app's manifests, added automatically during installation and can't be manipulated via the app. Dynamic and Static shortcuts both have their uses and can be used in combination with each other.

A full sample app that demo's how to add and use Static shortcuts can be found here: github.com/adenearnshaw/xam-static-shortcuts

Handling AppLinks in Xamarin Forms

The Xamarin Forms Application class has a built in method for handling Shortcuts. This method is the OnAppLinkRequestReceived() and is called once the App's constructor has completed. This allows us to handle any navigation we may wish to occur.

In the sample, I remove the uri's base and then check to see if what remains matches one of the known keys. It's crude and would never see production, but it gives you an idea.

public partial class App : Xamarin.Forms.Application
{
    private const string AppShortcutUriBase = "stc://staticshortcuts/";
    private const string ShortcutKey_Favorite = "favorites";
    ...
    
    protected override async void OnAppLinkRequestReceived(Uri uri)
    {
        var shortcutKey = uri.ToString().Replace(AppShortcutUriBase, "");

        if (shortcutKey == ShortcutKey_Favorite)
            await NavigationService.Instance.Navigate(new FavoritesPage());
        else
            base.OnAppLinkRequestReceived(uri);
    }
}

iOS implementation

To add shortcuts (or Quick Actions as Apple call them) to iOS, is relatively trivial. Firstly declare the shortcuts in the Info.plist and then override AppDelegate.PerformActionForShortcutItem() to martial the data to the Xamarin Forms App.

Updating the Info.plist

Shortcuts are declared as a dictionary item within an array with the key UIApplicationShortcutItems. Each dictionary item within the array must include keys for UIApplicationShortcutItemTitle and UIApplicationShortcutItemType. Optional properties for a Subtitle, Icon and additional data can also be added.

Sample:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
  ...
  <key>UIApplicationShortcutItems</key>
    <array>
      <dict>
        <key>UIApplicationShortcutItemType</key>
        <string>stc://staticshortcuts/favorites</string>
        <key>UIApplicationShortcutItemTitle</key>
        <string>My favorites</string>
        <key>UIApplicationShortcutItemSubtitle</key>
        <string>View favorited monkeys</string>            
        <key>UIApplicationShortcutItemIconType</key>
        <string>UIApplicationShortcutIconTypeFavorite</string>
        <key>UIApplicationShortcutItemUserInfo</key>
          <dict>
            <key>dataKey1</key>
            <string>dataValue1</string>
          </dict>
      </dict>
    </array>
</dict>
</plist>

Here we've declared one shortcut to allow users to jump straight to the Favorites page of an app. The UIApplicationShortcutItemType can be any string, but I recommend following a URL format so that the Xamarin.Forms.Application identifies the AppLink correctly.

We're also leveraging the built in Favorites icon provided by iOS. A list of the icons can be found in Apple's Human Interface Guidelines and the corresponding Constant values are listed in Apple's Developer Documentation. Custom icons can be declared using UIApplicationShortcutItemIconFile, but that's beyond the scope of this.

Handling the quick action

App links should be handled by Application.OnAppLinkRequestReceived(). However, we need to add some additional code to our AppDelegate in order for the Forms Application to know about the shortcuts.

Add this into the AppDelegate within the iOS project:

public override void PerformActionForShortcutItem(UIApplication application, UIApplicationShortcutItem shortcutItem, UIOperationHandler completionHandler)
{
    if (!string.IsNullOrEmpty(shortcutItem?.Type))
    {
        Xamarin.Forms.Application.Current.SendOnAppLinkRequestReceived(new Uri(shortcutItem.Type));
    }
}

The PerformActionForShortcutItem() method is called automatically when a user clicks through from a Shortcut. Here we check if the shortcutItem's Type property has a value and then pass this as a Uri to the Xamarin Forms App.

Android implementation

Implementing shortcuts on Android is almost as simple as iOS, but there's just a little more ceremony involved.

Updating the Activity

Firstly, find the Activity where you decare MainLauncher = true and add the properties Exported = true and Name = "com.mycompany.myapp.mainlauncher" to the Activity attribute. Exported needs to be set in order for the shortcut to see the activity, and Name must be set in order for a user-friendly version of activity name to be shown (otherwise you'll have to deal with unsightly guids).

Underneath this, add a new MetaDataAttribute to the class to inform the app where the shortcut data is located.

[MetaData("android.app.shortcuts", Resource = "@xml/shortcuts")]

Now you need to create your shortcut data.

Creating Shortcut metadata

In your Resources folder, if one doesn't exist, create an xml folder and within that create a shortcuts.xml. This is where you will declare your shortcuts. Unfortunately, it's a bit more verbose than iOS.

<?xml version="1.0" encoding="utf-8" ?> 
<shortcuts xmlns:android="http://schemas.android.com/apk/res/android">
  <shortcut
    android:shortcutId="favorites"
    android:enabled="true"
    android:icon="@drawable/ic_sc_favorite"
    android:shortcutShortLabel="@string/sc_favorites_short"
    android:shortcutLongLabel="@string/sc_favorites_long"
    android:shortcutDisabledMessage="@string/sc_favorites_disabled">
    <intent
      android:action="android.intent.action.VIEW"
      android:targetPackage="com.mycompany.myapp"
      android:targetClass="com.mycompany.myapp.mainlauncher"
      android:data="stc://staticshortcuts/favorites" />
    <categories android:name="android.shortcut.conversation" />
  </shortcut>
</shortcuts>

Here again we've declared a shortcut that will navigate users to the app's Favorites page.

Things to note:

• Labels and messages must come from the strings.xml and can't be hardcoded - this produces a build error.
• The icon can be any png or android vector stored in your Resources/Drawable folder - Some useful images can be found within my AppShortcuts Plugin Repo
• The value for android:targetClass must match the Name declared in the Activity attribute earlier.
• The android:data value must be able to be parsed to a Uri in order for Xamarin Forms to handle it correctly.

Providing the android:data value is a Uri format and the Activity which calls LoadApplication(new App()) has the data within it's Intent. Then Xamarin Forms will automatically call Application.OnAppLinkRequestReceived() without you doing anything further.

If your MainLauncher Activity is not the same as the one that creates the XamarinForms application (e.g. you've got a SplashScreenActivity), then you'll need to pass the shortcut data into the new Intent.

protected override void OnResume()
{
    base.OnResume();
    var intent = new Intent(Application.Context, typeof(MainActivity));
    
    intent.SetAction(Intent.ActionView);
    intent.SetData(Intent?.Data);
    
    StartActivity(intent);
}

It's this data that Xamarin.Forms uses to see whether OnAppLinkRequestReceived() needs to be called

For more detailed information on how to create shortcuts for Android, the developer docs have a derth of information.

What is Android Autofill?

Account creation, login, and credit card transactions take time and are prone to errors. Users can easily get frustrated with apps that require these types of repetitive tasks. Android 8.0 (API level 26) makes filling out forms, such as login and credit card forms, easier with the introduction of the Autofill Framework.

The framework is divided into two parts; Apps that can store autofill data (such as password managers or banking apps), and apps that can consume the data of a user's chosen Autofill service.

Xamarin Forms Effects & Platform Specifics

Back in the early days of Xamarin Forms, if you wanted to extend the functionality of an Element to provide additional properties to its underlying native control, you had to create Custom Renderers to replace substantial parts of the logic, sometimes with unexpected consequences.

Fast forward to mid-2016 and Xamarin introduced a new way to extend a native control's functionality: Effects. These allow the native controls on each platform to be customized in a similar way to Custom Renderers, but with much less faff. In most cases, if you only want to add a couple of minor styling changes to a control, they're the recommended approach.

As the Framework continues to evolve, Xamarin keep improving the ways in which developers can add custom functionality. Platform Specifics provide a method of accessing features unique to certain platforms by utilising attached properties, which can be specified in Xaml or Code-behind.

Adding an Autofill Effect into your app

In order to incorporate the Autofill feature into an app, we'll first start with creating the PlatformSpecifics class in our Shared project which provide the AttachedProperties and store the Autofill Type value for each control. Then we'll build an Effect, which we'll utilise to get the value from the AttachedProperty and use it to modify the Control.

A full sample of the code can be found here: GitHub

AutofillHintTypes

The Autofill service works by matching keys which are stored as strings. Android recommend using the constants provided by the View, however, as these are specific to Android, we'll create an enum which can expose these within the Shared Project.

public enum AutofillHintType
{
    [Description("")]
    None,
    [Description("creditCardExpirationDate")]
    CreditCardExpirationDate,
    [Description("creditCardExpirationDay")]
    CreditCardExpirationDay,
    [Description("creditCardExpirationMonth")]
    CreditCardExpirationMonth,
    [Description("creditCardExpirationYear")]
    CreditCardExpirationYear,
    [Description("creditCardNumber")]
    CreditCardNumber,
    [Description("creditCardSecurityCode")]
    CreditCardSecurityCode,
    [Description("emailAddress")]
    EmailAddress,
    [Description("name")]
    Name,
    [Description("password")]
    Password,
    [Description("phone")]
    Phone,
    [Description("postalAddress")]
    PostalAddress,
    [Description("postalCode")]
    PostalCode,
    [Description("username")]
    Username
}

We utilise the System.ComponentModel.DescriptionAttribute to specify the constant value consistent with Android.

Autofill PlatformSpecifics

Next we'll add an AttachedProperty that can be used by the view and hook up its OnChanged event to add or remove the AutofillEffect (that we'll create later) to the Native Android control.

namespace XamAutofill.PlatformConfiguration.AndroidSpecific
{
    using System.Linq;
    using Xamarin.Forms;
    using FormsElement = Xamarin.Forms.Entry;

    public static class Entry
    {
        const string EffectName = "com.adenearnshaw.AutofillEffect";

        public static readonly BindableProperty AutofillHintProperty =
            BindableProperty.CreateAttached(nameof(AutofillHint),
                                            typeof(AutofillHintType),
                                            typeof(Entry),
                                            AutofillHintType.None,
                                            propertyChanged: OnAutofillHintPropertyChanged);

        public static AutofillHintType GetAutofillHint(BindableObject element)
        {
            return (AutofillHintType)element.GetValue(AutofillHintProperty);
        }

        public static void SetAutofillHint(BindableObject element, AutofillHintType value)
        {
            element.SetValue(AutofillHintProperty, value);
        }

        private static void OnAutofillHintPropertyChanged(BindableObject element, object oldValue, object newValue)
        {
            if ((AutofillHintType)newValue != AutofillHintType.None)
            {
                AttachEffect(element as FormsElement);
            }
            else
            {
                DetachEffect(element as FormsElement);
            }
        }

        private static void AttachEffect(FormsElement element)
        {
            IElementController controller = element;
            if (controller == null || controller.EffectIsAttached(EffectName))
            {
                return;
            }
            element.Effects.Add(Effect.Resolve(EffectName));
        }

        private static void DetachEffect(FormsElement element)
        {
            IElementController controller = element;
            if (controller == null || !controller.EffectIsAttached(EffectName))
            {
                return;
            }

            var toRemove = element.Effects.FirstOrDefault(e => e.ResolveId == Effect.Resolve(EffectName).ResolveId);
            if (toRemove != null)
            {
                element.Effects.Remove(toRemove);
            }
        }
    }
}

Now that we have the attached property, we'll add the second half of this class which is a couple of Extension methods which allow the AttachedProperty to be accessed via the PlatformConfiguration Fluent API.

namespace XamAutofill.PlatformConfiguration.AndroidSpecific
{
    using System.Linq;
    using Xamarin.Forms;
    using Xamarin.Forms.PlatformConfiguration;
    using FormsElement = Xamarin.Forms.Entry;

    public static class Entry
    {
        const string EffectName = "com.adenearnshaw.AutofillEffect";

        ...

        public static AutofillHintType AutofillHint(this IPlatformElementConfiguration<Android, FormsElement> config)
        {
            return GetAutofillHint(config.Element);
        }

        public static IPlatformElementConfiguration<Android, FormsElement> SetAutofillHint(this IPlatformElementConfiguration<Android, FormsElement> config, AutofillHintType value)
        {
            SetAutofillHint(config.Element, value);
            return config;
        }
    }
}

AutofillEffect

Now we have our PlatformSpecifics code, we'll add in the AutofillEffect so that we can apply our property to the Native control.

First, create a RoutingEffect in the Shared code. This is a shell, and allows the Shared code a link to the Platform's Effect that we'll create next.

namespace XamAutofill
{
    public class AutofillEffect : RoutingEffect
    {
        public AutofillEffect() : base("com.adenearnshaw.AutofillEffect")
        {
        }
    }
}

Second is to create the PlatformEffect. This is created in the Android Project and contains the logic to apply the property to the native control.

using Xamarin.Forms.Platform.Android;
using Xamarin.Forms;
using System;
using System.Reflection;
using System.ComponentModel;
using XamAutofill.PlatformConfiguration.AndroidSpecific;
using Entry = Xamarin.Forms.Entry;

[assembly: ResolutionGroupName("com.adenearnshaw")] // Remember, only set this on one effect within your App, otherwise conflicts can occur.
[assembly: ExportEffect(typeof(XamAutofill.Droid.AutofillEffect), "AutofillEffect")]
namespace XamAutofill.Droid
{
    public class AutofillEffect : PlatformEffect
    {
        protected override void OnAttached()
        {
            try
            {
                if (!IsSupported())
                    return;

                var control = Control as Android.Widget.EditText;

                var hint = GetAndroidAutofillHint();
                control.ImportantForAutofill = Android.Views.ImportantForAutofill.Yes;
                control.SetAutofillHints(hint);
            }
            catch (Exception ex)
            {
                Console.WriteLine("Cannot set property on attached control. Error: {0}", ex.Message);
            }
        }

        protected override void OnDetached()
        {
            if (!IsSupported())
                return;

            Control.SetAutofillHints(string.Empty);

            Control.ImportantForAutofill = Android.Views.ImportantForAutofill.Auto;
        }

        private bool IsSupported()
        {
            return Element as Entry != null && 
                   Android.OS.Build.VERSION.SdkInt >= Android.OS.BuildVersionCodes.O;
        }

        private string GetAndroidAutofillHint()
        {
            var hint = ((Entry)Element).OnThisPlatform().AutofillHint();
            var constantValue = GetEnumDescription(hint);
            return constantValue;
        }

        private static string GetEnumDescription(Enum value)
        {
            FieldInfo fi = value.GetType().GetField(value.ToString());

            DescriptionAttribute[] attributes =
                (DescriptionAttribute[])fi.GetCustomAttributes(typeof(DescriptionAttribute), false);

            return attributes != null && attributes.Length > 0 ? attributes[0].Description : value.ToString();
        }
    }
}

When the AttachedProperty in the SharedCode is declared and has a value other than AutofillHintType.None, then an Effect is attached to the Control. This then does the following:

1. The PlatformEffect's OnAttached method checks to see if Autofill is supported
2. Then gets the enum value from the AutofillHint() extension method declared earlier and uses reflection to get the constant declared in the DescriptionAttribute.
3. The constant is then applied to the Control using the EditText.SetAutofillHints() method.

The EditText.ImportantForAutofill property is also set to force the Autofill service to lookup and insert a value for the field.

Consuming the code

Right, we've got all the parts we need, we just need to use them now. Below are two examples of how the PlatformSpecifics can be used. In XAML, declare the namespace for at the top of the file, then add the AttachedProperty to your Entry element. In Code-Behind, use the OnPlatform Fluent API to set the property using the Extension method

XAML

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:android="clr-namespace:XamAutofill.PlatformConfiguration.AndroidSpecific;assembly=XamAutofill"
             x:Class="XamAutofill.MainPage" >
    <StackLayout Margin="12,12,12,12">
        <Entry HorizontalOptions="Fill"
               Placeholder="Your name"
               Keyboard="Text"
               android:Entry.AutofillHint="Name"/>
        <Entry x:Name="PhoneEntry"
               HorizontalOptions="Fill"
               Placeholder="Your phone"
               Keyboard="Telephone"/>
    </StackLayout>
</ContentPage>

Code-behind

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();

        PhoneEntry.On<Android>().SetAutofillHint(AutofillHintType.Phone);
    }
}

Links

A full sample of the code can be found here: GitHub

More information on creating Effects & Platform specifcs:
Creating Effects: docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/effects/creating
Creating PlatformSpecifics: docs.microsoft.com/en-us/xamarin/xamarin-forms/platform/platform-specifics/creating
Consuming PlatformSpecifics: docs.microsoft.com/en-us/xamarin/xamarin-forms/platform/platform-specifics/consuming/android
Testing Autofill: developer.xamarin.com/samples/monodroid/android-o/AutofillFramework/

A brief intro

In Windows 95, users were introduced to the paradigm of a shortcut context menus. These menus were limited, but provided the user with additional actions that could be achieved by other means, but took more effort. As Windows advanced, so did the functionality found in the context menus with extensibility options allowing third-parties to integrate custom actions too.

Fast forward a few years to the release of the iPhone 6s and the introduction of a feature called 3D Touch which brought shortcut context menus to the smartphone masses. Last year in 2017, Android also thought this may be a nice to have, and added the feature to their Nougat 7.1 release.

As developers, we can utilize this feature to provide the user with quick actions into our apps that enhance the UX. For example, many browsers like Chrome, Edge & Safari have shortcuts to open a new incognito tab and the Shazam app includes the ability to initiate a search straight from the home screen, saving crucial seconds when you're trying to identify that snippet of a song.

App shortcuts can be static, where they're declared as part of the app's manifest, or can be added dynamically through code. This post is here to demonstrate how the latter can be done within a Xamarin Forms app, using the AppShortcuts Plugin.

Adding the plugin to your app

The AppShortcuts plugin can be installed via Nuget by searching for Plugin.AppShortcuts in the Nuget Explorer or via the Package Manager console with the command: PM> Install-Package Plugin.AppShortcuts

Install the plugin into the project where you'll be implementing the code and also each platform specific project.

Once installed, there is an extra step required for Android. In the MainActivity.OnCreate() before the LoadApplication() call, make a call to:

CrossAppShortcuts.Current.Init();

Adding a shortcut

To add a shortcut to the app's icon, first you need to create a new instance of the Shortcut class and populate it with the information you wish to pin.

using Plugin.AppShortcuts;
using Plugin.AppShortcuts.Icons;

...

var shortcut = new Shortcut()
{
    Label = "Shortcut 1",
    Description = "My shortcut",
    Icon = new FavoriteIcon(),
    Uri = "asc://AppShortcutsApp/Detail/shortcut_1_id"
};

The plugin has a number of supplied icons built in that you can use, or you can provide your own by using the CustomIcon class

Once you have your shorcut object, to add it to the App Icons shortcuts you call:

await CrossAppShortcuts.Current.AddShortcut(shortcut);

Note; you can add as any shortcuts as you wish, but only four will ever be displayed on the homepage. This is not tracked by the plugin.

Handling deeplinks when a shortcut's clicked

To provide a consistent UX when the user clicks a shortcut to launch the app, the code to handle what happens, should be done in the App.cs class' OnAppLinkReceived() method. This passes in a Uri from the platform as a parameter. In order for each platform to pass the uri to this method, some additional work is required.

protected override void OnAppLinkRequestReceived(Uri uri)
{
    var itemId = uri.ToString().Replace("asc://AppShortcutsApp/Detail/", "");
	var item = Repository.Instance.Items.FirstOrDefault(m => m.Id.Equals(itemId));

	if (item != null)
		MainPage.Navigation.PushAsync(new DetailsPage(item));
	else
		base.OnAppLinkRequestReceived(uri);
}

Android

In order for Android to launch your app from a shortcut, it needs to be told that the shortcut's uri can be handled by the app. This is done by adding an IntentFilter attribute to the MainActivity.

[Activity(Label = "AppShortcuts Sample",
          Theme = "@style/MainTheme")]
[IntentFilter(new[] { Intent.ActionView },
              Categories = new[] { Intent.CategoryDefault },
              DataScheme = "asc",
              DataHost = "AppShortcutsApp",
              AutoVerify = true)]
public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
{
    ...
    

This is all that needs to be done for Android, the FormsAppCompatActivity will look to see if the app launched with a Uri and pass this through to the App class.

iOS

iOS will automatically launch the app from a shortcut, however, the FormsApplicationDelegate is not setup to pass the data through to the App class. To do this, the AppDelegate's PerformActionForShortcutItem() needs to be overridden.

public override void PerformActionForShortcutItem(UIApplication application, UIApplicationShortcutItem shortcutItem, UIOperationHandler completionHandler)
{
    var uri = Plugin.AppShortcuts.iOS.ArgumentsHelper.GetUriFromApplicationShortcutItem(shortcutItem);
    if (uri != null)
    {
        Xamarin.Forms.Application.Current.SendOnAppLinkRequestReceived(uri);
    }
}

UWP

Similar to iOS, a UWP app will launch the app when the shortcut is clicked, but needs some additional setup to pass the Uri back to the Forms App class.

A restriction of UWP is that its implementation of shortcuts doesn't provide the ability to set multiple properties. In order for The Plugin to overcome this, the shortcut's ID and Uri are serialized into a JSON object.

Firstly, in the UWP MainPage call the helper method to split the NavigationArgs and pass this to the Forms App. Then override the OnNavigatedTo() to call it. Your UWP MainPage should look similar to this:

public sealed partial class MainPage : WindowsPage
{
    public MainPage()
    {
        this.InitializeComponent();
        LoadApplication(new App());
    }

    protected override void OnNavigatedTo(NavigationEventArgs e)
    {
        base.OnNavigatedTo(e);
        OnLaunchedEvent(e.Parameter.ToString());
    }

        public void OnLaunchedEvent(string arguments)
        {
            if (!string.IsNullOrEmpty(arguments))
            {
                var argsUri = JumplistArgumentsHelper.GetUriFromJumplistArguments(arguments);
                Xamarin.Forms.Application.Current.SendOnAppLinkRequestReceived(argsUri);
            }
        }
    }

Next, in the UWP App class, modify the OnLaunched() method so that if rootFrame.Content is not null, then it calls the MainPage's OnLaunchedEvent() directly:

protected override void OnLaunched(LaunchActivatedEventArgs e)
{
    ...

    if (rootFrame.Content == null)
    {
        rootFrame.Navigate(typeof(MainPage), e.Arguments);
    }
    else
    {
        var page = rootFrame.Content as MainPage;
        page?.OnLaunchedEvent(e.Arguments);
    }
    Window.Current.Activate();
}

To see how this plugin works within the context of a full application, a sample can be found on the Plugin's GitHub repo, along with full documentation of the library's features.

Angular's DatePipe does a great job of formatting Date strings or objects into specified formats, however, if you want to pass in a time string like "09:00" you're out of luck.

The easiest way to over come this is to extend the DatePipe with some additional logic which can handle time strings and feed these into the base method. This allows you to use the standard formatting notation of Angular without having to do much.

Here is the code:

import { Pipe, PipeTransform } from '@angular/core';
import { DatePipe } from '@angular/common';

@Pipe({
    name: 'time'
})
export class TimePipe extends DatePipe implements PipeTransform {
    public transform(value: any, format: string): string {
        const dateTime: Date = new Date(value);

        let dateTimeString: string;
        if (this.isValidDate(dateTime)) {
            dateTimeString = dateTime.toString();
        } else {
            dateTimeString = `1970-01-01 ${value}`;
        }

        dateTimeString = dateTimeString.replace(/-/g, '/');

        if (!this.isValidDate(new Date(dateTimeString))) {
            return value;
        }

        const formattedTime: string = super.transform(dateTimeString, format);

        return formattedTime;
    }

    private isValidDate(d: any): boolean {
        return d instanceof Date && !isNaN(d.getTime());
    }
}

Here you can see that we override the transform() method and in it, immediately try and parse the inputted value. We then check if this is a valid Date, if it is not, then we assume that a time string has been passed in and concatenate this with a date value. Once we have a valid date, then we use the DatePipe's transform method and allow Angular to do the rest.

You can find the file & some tests here: github.com/adenearnshaw/ng-timepipe