Xamarin.Forms: sharing resources in XAML using Styles

Previously, I’ve blogged about creating a custom Behavior in Xamarin.Forms. The sample published on GitHub initially used the default template available in Visual Studio which instantiates the Application singleton from C# using the following App class:

This is a great approach, however very often it is useful to define common resources in XAML and reuse them across the application using Styles.

To achieve this, It’s possible to transform the App class in a partial one and add a new App.xaml source file containing a resource dictionary to be shared:

In this code, I’ve defined a new resource with a specific Padding to be applied only on iOS via the OnPlatform class, and an explicit style named PageStyle targeting ContentPage types.

The modified code behind is now taking care of parsing/loading the XAML (via the InitializeComponent() call) and then creates an instance of SamplePage:

The page can now consume the new style specifying Style=”{StaticResource PageStyle}” (dynamic resources are also supported):

This is a basic example of using styles in Xamarin.Forms: a complete coverage of the various options is available on the Xamarin official documentation.

The source code is available for download here.

Xamarin.Forms: using the PanGestureRecognizer

Recently I’ve blogged about Xamarin.Forms and how to create a XAML Behavior for enabling Multi-Touch gestures to generic elements and implementing a scale / pinch functionality.

Fortunately the framework provides three types of recognizer that greatly simplify the implementation:

  • PinchGestureRecognizer allows user interactions for zoom / scale functionalities;
  • PanGestureRecognizer enables pan / translate transformations;
  • TapGestureRecognizer detects tap events.

Yesterday I decided to try the PanGestureRecognizer for extending the capabilities of the Behavior described in the previous post.

First of all, I added two Bindable properties in order to permit activation / deactivation of individual gestures (Bindable properties are equivalent to Dependency ones in UWP XAML)

In this way we can specify in our XAML what gestures are enabled:

Then I initialised the GestureRecognizers adding a new PanGestureRecognizer to the recognizers list:

And subscribed to the PanUpdated event in order to apply the translate transform:

The implementation of this event handler permits to update the X and Y coordinates of the element when a Pan gesture is detected:

Here we go: the sample app can now be deployed to the emulators and iOS / Android / Windows devices.

Just a couple of notes:

  • deployment to iOS required this workaround to work properly since the new sample app uses different assemblies;
  • Tap gestures on Android requires Xamarin.Forms – minimum version v2.1.0.6501-pre1 as pointed by the official documentation.

As usual, the latest source code is available for download on GitHub.

Having fun with Xamarin.Forms and Multi-Touch Behaviors

Recently Xamarin has released preview support for the Universal Windows Platform in their Xamarin.Forms framework so I have been playing around with version 2.0 for testing its features and verify how easy is to target multiple platforms (iOS, Android, Windows 10 UWP, Windows Phone, Windows 8.1) with a single codebase.

One of the experiments I have done is related to custom multi-touch gestures: the idea to use a XAML Behavior is a common scenario to write well structured code so I started creating a new Cross-Platform Xamarin.Forms Portable project and upgraded the NuGet packages to the latest stable version of the framework (currently v2.0.1.6505).

I have then read the official documentation and analysed the samples available on GitHub: a very good example is the PinchGesture one so, starting from it, I created a new MultiTouchBehavior implementing this gesture and attached the same Behavior to an Image object added to a sample ContentPage, as described below in this lovely cross-platform XAML 🙂

The BindingContext=”{Binding}” is used to trigger the BindingContextChanged event and initialise correctly the GestureRecognizers  for the parent object since the AssociatedObject.Parent is set to null when the Behavior.OnAttachedTo() is called (I suppose that the XAML tree is not yet completely created when the behavior is attached in Xamarin.Forms):

Here is the project deployed to the Android, iOS and Windows 10 emulators:

MultiTouch_Android_Emulator   Simulator Screen Shot 14 Feb 2016, 18.25.00   MultiTouch_Windows10_Emulator

I’ve been particularly impressed by Xamarin.Forms: the possibility to target so many platforms using the same code is a killer feature and the development environment is also very comfortable to use.

The sample code used in this post is available on GitHub, I’m planning to add more functionalities in the future with particular regard to other common multi-touch gestures using Xamarin.Forms and XAML.

TypedMVVM samples for Windows 10 UWP and IoC fixes

A new version of the TypedMVVM samples is now available on CodePlex and contains a basic sample targeting Windows 10 UWP.

The repository also contains a fix for the basic IoC container: now the code correctly handles the register<T>() and resolve<T>() functions and populates the internal dictionary of object instances

My friend Lee has also pushed to GitHub a new sample using TypedMVVM for web apps here: check it out!

Multi-Touch Behaviors project moved to GitHub

I’ve just pushed to GitHub a first version of the Multi-Touch Behaviors containing a new sample targeting Windows 10 UWP (work in progress…) and some refactoring using shared projects in order to simplify the code and reusing it across different platforms.

For new contributions just send pull requests here!

Multi-Touch Behaviors sample: Main Page

TypedMVVM and WinJS: Binding event handlers in a ListView ItemTemplate

I have recently received a request in the TypedMVVM forums about binding event handlers to a specific WinJS ListView item template.

I’ve then decided to improve the current samples available in the repository by adding some basic commands, using the RelayCommand<T> class, that can be fired by pressing a button associated to each item of the ListView:

The key here is to add the “win-interactive” class to the specific button element contained in the template (otherwise the click event will not be triggered) and then use WinJS.Utilities.markSupportedForProcessing() in the model to allow the declarative binding to be correctly applied:

Specific instances of the ListView model can be created by the sample service responsible for initialising the ViewModel data:

As usual, the sample code is available for download here.

Cordova Windows Store apps and certificate expired error

I was updating TypedMVVM to the latest Visual Studio 2013 Update 4 and Cordova tools (using the new free Community Edition) and trying to deploy the sample to the Windows 8 emulator when I received the following

error APPX0108: The certificate specified has expired

As pointed here by Microsoft Open Technologies, the certificate available in the Visual Studio template has just expired and is not possible to deploy Windows Store apps using the old one.

To solve this problem I’ve then downloaded from here the updated certificate and copied to the following location inside the Visual Studio project:

res/native/windows/CordovaApp_TemporaryKey.pfx

The updated code is available for download on CodePlex.

TypedMVVM: Samples updated for Apache Cordova

I’ve recently installed the Multi-Device Hybrid Apps template on Visual Studio in order to try out the development of native mobile applications (targeting Android, iOS, Windows Store and Windows Phone) using HTML, CSS and JavaScript using the Apache Cordova framework.

As a first example, I decided to reuse all the TypeScript code available in my library TypedMVVM available on CodePlex.

The process was very simple and didn’t take long: I was able to quickly create a basic “Hello World” application successfully deployed on the Ripple – Nexus 7 Android emulator

TypedMVVM_Cordova

As usual, the updated code is available for download on Codeplex.

WinJS and TypeScript: binding a ListView itemDataSource to a ViewModel property

I’ve recently been asked on the TypedMVVM forums how to properly bind a ListView data source to a list of items available as a property in the ViewModel.

Just create new getters and setters in the ViewModel and initialise the property by creating a new instance of WinJS.Binding.List:

Then reference from HTML the new itemsSource property in the ListView control using data-win-bind:

As usual, the sample code is available for download on Codeplex.

TypedMVVM: Adding a new IoC.Container class for generating instances using generics

In the previous days I was extending my TypedMVVM library with additional classes for separating the logic and being able to use different services for handling operations like showing message dialogs.

I’ve then started the implementation of a simple IoC.Container class that will manage in a centralized way the creation of new objects (ViewModels, Services, etc.) used by the application.

The first step was the creation of a simple Resolve<T> method for creating instances using the concept of Generics available in TypeScript.

When working with factories and generics, it’s necessary to refer to class types using their constructor function:

In this way, a new instance of type T will be returned each time the function IoC.Container.resolve will be used.

For example, it’s now possible to inject a service on a ViewModel in this way:

I’m planning for the future more functionalities for this IoC.Container class, like the possibility to register specific services with interfaces and use them as singletons.

The updated code is available for download from the repository here.