Xamarin.Forms : Using styles on custom UserControls

To use styles for your custom usercontrol, you have to define the styles TargetType property with an x:Type in your resource dictionary.

<ResourceDictionary
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:buttons="clr-namespace:AnAwesomeApp.Controls.Buttons"
    x:Class="AnAwesomeApp.Resources.Styles">

Declare the clr-namespace where your custom usercontrol lives.

<Style
        x:Key="BlueButtonStyle"
        TargetType="{x:Type buttons:ColoredButton}">
        <Setter
            Property="TextColor"
            Value="White" />
        <Setter
            Property="Color"
            Value="{AppThemeBinding Dark=#2325A6, Light=#61BAFF}" />
        <Setter
            Property="FontFamily"
            Value="Nunito" />
    </Style>

Set the target type with x:Type.

And boom, done!

[Xamarin.Forms] Custom font handling made easy by MS

No more sorrow with custom font defining in Xamarin.Forms. Later we had to define a ResourceDictionary for storing platform specific filenames for our ttf files, import for each platform specific project the ttf file, and set a specific build action for them.

Now we only need to import the TTF file to our Xamarin.Forms project, and set the build action to BundleResource, and add a new line to assembly.cs:

[assembly: ExportFont("Nunito-Light.ttf", Alias = "Nunito")]

See reference at: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/text/fonts

Appreciate it!

Xamarin Forms: Infinite scrolling ListView

To get a dynamic “paged” loading for your list view, follow the steps below:

Make a new usercontrol in your forms project. Derive from ContentView instead from ListView. By deriving from listview, you simply can not Count the items binded to the ItemsSource property, which is the base of the Fetching logic.

public class InfiniteScrollListView : ContentView

Make a countable ItemsSource bindable property for your new usercontrol.

		public static readonly BindableProperty ItemsSourceProperty = BindableProperty.Create(
														propertyName: "ItemsSource",
														returnType: typeof(IList),
														declaringType: typeof(View),
														defaultValue: null,
														defaultBindingMode: BindingMode.TwoWay,
														propertyChanged: null);

		public IList ItemsSource
		{
			get { return (IList)GetValue(ItemsSourceProperty); }
			set { SetValue(ItemsSourceProperty, value); }
		}

We need to get the usercontrol to display a listview for us. Make a new instance of a listview. You can specify a caching strategy for the listview, which can be useful on lists have a lot of items. Set the contenview’s content to the new listview instance.

		public InfiniteScrollListView()
		{
			_listViewInstance = new ListView(cachingStrategy: ListViewCachingStrategy.RecycleElement);
			_listViewInstance.HorizontalOptions = LayoutOptions.Fill;
			_listViewInstance.VerticalOptions = LayoutOptions.Fill;
			_listViewInstance.ItemAppearing += InfiniteScrollListView_ItemAppearing;
			_listViewInstance.SetBinding(ListView.ItemsSourceProperty, new Binding(nameof(ItemsSource), BindingMode.TwoWay, source: this));
			Content = _listViewInstance;
		}

		~InfiniteScrollListView()
		{
			if (_listViewInstance != null)
				_listViewInstance.ItemAppearing -= InfiniteScrollListView_ItemAppearing;
		}

The ItemAppearing event is the most important event in our Infinite scrolling listview instance. It’s called, when an item is displayed “phisically” on the screen. Let’s make an eventhandler for it. We are using a new Bindable Property for fetching data command, which will be called, when the last item of the ItemsSource has been displayed, and an another Bindable property, to turn off the fetching if the Data access layer could not provide more elements for the query. The _lastElementIndex will be the e.ItemIndex.

if (_lastItemDisplayedIndex == (ItemsSource?.Count - 1 ?? int.MinValue))
			{
				if (HasMoreItems)
				{
					if (FetchDataCommand?.CanExecute(null) == true)
					{
						FetchDataCommand?.Execute(null);
					}
				}
			}

Xamarin Android: Native image scaling, images are pixelated

If you use Android’s native image scaling, from ldpi, mdpi, hdpi, to xxxhdpi, and have all the image resource in the right directory of your Xamarin.Android project folder, and find the pictures displaying pixelated: Make sure, you are correctly set the Build action for each images to AndroidResource. When adding an existing item to the resources folder from Windows version of VisualStudio’s browse dialog, the Build action will be set to BundleResource, and won’t appear in the Resources.designer.cs file, so it will be unavailable to use from code. If the picture is displaying, but it is pixelated, you may check the higher DPI version image files, have the correct buid action