In my Xamarin UI July I’ve decided on a UI that was not only visually appealing but also one that had a little more complexity than you normally see in a Xamarin.Forms apps. I recently attended the Xamarin Developer Summit in Houston Texas, I flew Air Zealand during this trip and I found that the Air NZ app had some nice UI built around the pan/scroll gesture. What I found interesting is that the UI had both a long scroll and a horizontal pan. You can take a look at the original app below.

At first glance I was not exactly sure how I would solve this type of horizontal pan with snap but also the vertical scroll. I had a few different ideas to start on, would I use a collection view? listview? scroll view? or the new carousel view?. I actually attempted to do this in all those controls and they failed miserably, the way that I’ve actually got this working was with the trusty grid and post layout translations.  The overall hierarchy looks like this,

ScrollView
–>Grid
—->Trip1 (StackLayout)
—->Trip2 (StackLayout)
—->Trip3 (StackLayout)

The ScrollView does it’s job for the vertical scrolling but there alot more to the hoizontal pan and snap.

As many of you would’ve seen before the Grid allows you to layer views directly on top of each other. So the Trips are layered on top of each other.

In order to get the horizontal pan and snap I needed to bring a few things together, I’ve used the post layout translations to put views off the screen. eg

ScrollView
–>Grid
—->Trip1 – TranslationX = 0
—->Trip2 – TranslationX = Width
—->Trip3 – TranslationX = Width * 2

*A little extra note is that I needed to know the width of the view as soon as possible so I overrid the OnSizeAllocated method. As you can see below:

protected override void OnSizeAllocated(double width, double height)
{
    base.OnSizeAllocated(width, height);

    _trips = new List<TripOffset>()
    {
        new TripOffset { Trip = view1, TripBackgroundImage = view0Image, Offset = 0 },
        new TripOffset { Trip = view2, TripBackgroundImage = view2Image, Offset = width },
        new TripOffset { Trip = view3, TripBackgroundImage = view3Image, Offset = width * 2 }
    };            
    _currentTrip = _trips[0];
    view1.CalculateOffsets(0, width, 0, false);
    bgImage0.Opacity = 1;
    view2.CalculateOffsets(width, width, width, false);
    bgImage2.Opacity = 1;
    view3.CalculateOffsets(width * 2, width, width * 2, false);
    bgImage3.Opacity = 1;
}

Now that the trips are layed out we need to move them with a pan gesture, I spent alot of time using the Xamarin.Forms PanGestureRecognizer but in the end I could not get both the Forms PanGesture and ScrollView to work nicely. I was a little worried that this might not be possible, but then the awesome MRPanGesture Recognizers came to the rescue. Not only does it work ‘correctly’ with the scrollview it also has a velocity something that the built in Forms gesture was missing.

So now my views look like this.

ScrollView (Vertical Scroll)
–>Grid (MR Gestures Pan)
—->Trip1 – TranslationX = 0
—->Trip2 – TranslationX = Width
—->Trip3 – TranslationX = Width * 2

As we move the PanGesture we change the TranslationX on all the views.

It sounds pretty simple but when your moving things around on a screen based on Pan Gestures then there’s a few things you need to take into account. For example, if a user it actually wants to scroll then we need to disable the pan gesture, as you can see below.

counter++;
if (counter == 3)
{
    var totalDis = panEventArgs.TotalDistance;
    var isVertical = Math.Abs(totalDis.Y) > Math.Abs(totalDis.X);
    Debug.Write($"{isVertical}");
    if (isVertical)
        disabled = true;
    else
        scrollingContainer.IsEnabled = false;
}

There’s also much more to this complete view than we’ve discussed, we’ve got the pan/snap and scroll sorted but there’s many more elements to this view.

Fading and changing background

As you can see in the video when a user snaps between cities the background image of the city also fades out and is replaced with the new city, this one wasn’t too hard.

For the fade I used a white overlay with transparency, then as the user pan’s I change the opacity. As you can see.

//Calculate percentage of pan and then set opacity on overlayt
var percentage = Math.Abs(panEventArgs.TotalDistance.X / this.Width);
whiteoverlay.Opacity = (percentage + .4).Clamp(.5, .9);

Then for the images I just show and hide them using opacity, I’m using opacity so that I don’t cause a layout refresh.

if (trip.Offset == 0)
{
    _currentTrip = trip;
    trip.TripBackgroundImage.Opacity = 1;
}
else
{
    trip.TripBackgroundImage.Opacity = 0;
}

The Circle Images

As you can see in the original view we have a floating image circle off the side of the screen that show the user that the they can pan horizontally this also changes offset and size as the user moves.

This one was a little time consuming, essentially what I needed to do was calculate the percentage of horizontal pan and then do some maths to translate this into an offset and a scale (change the size).

First we need to find if the view we have is to the left or right of centre.

bool isNeighbourOfCentre = Math.Abs(parentCurrentStartingOffset) == containerWidth;

Then we need to calculate the percentage that the gesture has moved.

var offset = Math.Abs(x) - halfOfImage;
var maxOffset = (inverseParentCurrentStartingOffset - halfOfImage);
finalOffset = offset.Clamp(0, maxOffset);
percentageMoved = (finalOffset / maxOffset);

Once we’ve done this we use an easing function to give the movement some bounce.

normalizedTime = Ease(percentageMoved);
finalOffset = normalizedTime * (maxOffset - offsetOfImage);

Here’s our custom easing function.

double Ease(double normalizedTime)
{
    normalizedTime = 1.0 - normalizedTime;
    normalizedTime = Math.Max(0.0, Math.Min(1.0, normalizedTime));
    normalizedTime = 1.0 - Math.Sqrt(1.0 - normalizedTime * normalizedTime);
    return 1.0 - normalizedTime;
}

Then we also need to calculate the scale, in the case below we take the percentage of movement and turn at into a number between .6 and 1 which will allow us to scale the image.

var makeToPointFiveScale = (.5 * (1 - percentageMoved));
var scale = makeToPointFiveScale + .5;

Then we translate the views.

if (animate)
{
    circleImageContainer.TranslateTo(finalOffset, 0, 250, Easing.SinOut);
    circleImageContainer.ScaleTo(scale, 250, Easing.SinOut);
}
else
{
    circleImageContainer.Scale = scale;
    circleImageContainer.TranslationX = finalOffset;
}

Then here’s our final view, it’s definitely not completed like the ‘real’ app but I’m pretty confident I’ve been able to prove my original goals of proving that this app would 100% be possible in Xamarin.

If you want to take a look at the source code then you can find it up on github here. https://github.com/rid00z/AirNZClone

Thanks for reading – Michael

Normally I like to write about deep technical topics but CX (Customer Experience) is another one of my passions. I’m passionate about CX because I’ve had so many bad experiences with big brands and this trend is a welcome change.

I recently wrote an article over on linkedin about ‘Why you should care about CX’.

I think as developers we need to be across these trends, it’s often that these types of trends are what drives our work and it’s nice to know that we can help people have a better experience.

Please take a look at the post and let me know what you think: https://www.linkedin.com/pulse/why-you-should-care-cx-michael-ridland

Thanks

Michael

A DoD or Definition of Done is a software development term, the term is common in many agile teams and it has origins in SCRUM. The basic idea is that a team has a shared understanding of what defines a task as Done. What a project manager might foresee as ‘Done’ can be different to a developer or a customer. At XAM Consulting we deliver high quality solutions for our customers and therefore a solid DoD is essential. It’s important all developers understand that just because they’ve made a code change this does not mean it’s done.

We’ve recently revised our Definition of Done and thought we would share it because it’s a good marker on what it means to be ‘Done’ as a Xamarin developer.

Note* This is only a checklist for what’s done as a developer, it’s not the complete software lifecycle, in order for this to be successful we also need to follow modern software engineering techniques including gitflow, CI and TestCloud Testing.

So here I present… The Definition of Done (DoD) for Xamarin developers. (This DoD could also apply for Mobile Developers or Cross Platform developers)

Code respects .NET Coding Guidelines
We follow .NET coding guidelines outlined here – https://github.com/dennisdoomen/CSharpGuidelines

Code respects XAM Consulting’s Code Quality and Architecture Guidelines
We’ve not published this in the public domain (yet) but in summary we follow industry best practices for code quality. Our code bases are designed to be maintainable in the long term. Here’s a short summary:

• Code is Loosely Coupled
• Code has High Cohesion
• Code makes use of OOP (avoiding pitfalls with inheritance, prefer composition over inheritance)
• Interface Driven Development – programming to small interfaces
• Classes are small
• Methods are small
• Code follows SOLID Principles
• Use and understand design patterns
• Make use of Reactive patterns

Tested on all target platforms
As our solutions are cross platform it’s essential that all code modifications are tested on all target platforms. If you test on a single platform it’s not done.

Tested on variety of screen sizes
It’s easy to code a UI for a single screen size but much harder to have it work on multiple sizes, especially smaller devices. All code modifications must be tested on different screen sizes.

Tested on a variety of physical devices
Real devices behave differently to simulators in many situations. All code modifications must be tested on a variety of devices, internally at XAM Consulting we have a good variety of different physical devices for internal testing before we go into TestCloud.

All possible side effects tested in system
If you make modification in a complex system it’s essential that you test for any possible side effects.

Tested in Release Mode
Applications can behave much different in Debug mode then Release. We need to make sure we’re testing the application in a release mode.

Application must handle intermittent connections
Mobile devices have transient connections, there needs to be a strategy for handling these types of connections.

Units Tests
Unit tests are an essential component of a high quality codebase. If it doesn’t have unit tests it’s not done.

UITests developed covering features
Xamarin TestCloud is a great tool, it’s saved us (from production issues) a number of time. We now have UITests and CI with (TestCloud) on all of our projects.

Peer reviewed code
This is a no brainer, peer reviewed code is essential. We made this a part of our lifecycle using gitflow.

Peer reviewed for end-user acceptance
It’s important that not only the code is reviewed we also need to ensure that the problem is well understood. It’s important that two or more people discuss and understand the issue. Once understood the developers must both test the solution will meet the user acceptance criteria.

Issues must be reproduced
If you don’t reproduce an issue it cannot be confirmed as solved. The issue that is reproduced must be exactly the same as the issue that’s reported, otherwise there might be two issues.

Essentially, the goal is to have no issues when shipped into a UAT environment. If you ship a issue into UAT you need to review why that issues went into UAT.

At XAM Consulting it’s our commitment to ship world class apps and I hope that you can also make the effort.

In this video I chat with Martijn van Dijk about Xamarin Plugins and a little bit of .net standard. It was filmed at the Xamarin Dev Days in Singapore 2016, sorry it’s taken a while to upload.

Martijn is doing some great work in the Xamarin community and you can follow him on twitter and github.

Links from the interview:

Plugin For Xamarin Templates

nbsp;

If you’re a Xamarin.Forms developer, it’s likely you already know about the two great talks that Jason Smith did at Evolve this year (2016). Both of the talks were on performance in Xamarin.Forms and they were outstanding because we got a truckload of performance tips that we’ve never had previously. If you’ve watched them once we would recommend you also consider watching them again, there’s alot of content and you’ll learn something new. This insight into the Xamarin.Forms performance and the layout system has been a key part of us building performant apps in Xamarin.Forms at XAM Consulting.

But we wanted more, we wanted more speed and more performance, we want native performance. The tips we got were great, but we wanted to understand why these tips existed because if we understand the system we can use that understanding to develop our own tips and techniques for Xamarin.Forms performance.

One of the points that Jason makes is about the Xamarin.Forms Grid, the suggestion is that we should avoid using the ‘Auto’ setting for columns and rows. Why is this? Well it turns out that if a view inside a Auto column changes size (or generally does anything to invalid measure) the grid will be doing a full layout of all children, well not only the grid but the Grid’s parent and parent after that.

If you watch both of the talks, it’s clear the root of performance in Xamarin.Forms is in the layout system, so let’s look into this Layout System. Now that Xamarin.Forms is open source we can use the code a understand the layout system.

The layout system is broken up into two parts/cycles, 1) the invalidation cycle 2) the layout cycle.

Invalidation Cycle

To understand the invalidation cycle let’s take a look at the Xamarin.Forms layout code.

As we can see in this code below each VisualElement.cs has a event MeasureInvalidated, VisualElement is the base class of Layouts, Views and Pages.

Then each time a child is added to a Page or Layout, the parent attaches the MeasureInvalidated event of the child.

As we can see below the OnChildMeasureInvalidated event handler (for the children) then calls the MeasureInvalidated event, because the parent of that View is subscribed to the MeasureInvalidated even the parents OnChildMeasureInvalidated method is called. It’s important to note there’s conditional logic involved, the event will not always be called.

…Conditional Logic…

So here’s an example of what it looks like, with the events.

Here’s what happens when a child view becomes invalidated. As you can see the events bubble to the top.

That’s the invalidation cycle.

Layout Cycle

Let’s take a look at the layout cycle, the layout cycle happens in two cases:
1) When a layout is done for the first time, eg. when a page is first displayed.
2) After the invalidation cycle

As you can see in the image below, during the first part of the layout cycle measure is called on the child. It’s important to note that for the most part measure is called on all children and in many cases it’s called multiple times. After the children have been measured then layout is called on all children.

So here’s how the full layout looks.

You might be thinking why do I care about this? Well because we can hack it. It’s possible to short circuit the invalidation cycle at an early stage, as per the image below.

Let’s take a look at how we can test this. In order to test this I’ve created a page with a few labels and a single label that’s, updated on a timer 20 times. I’ve also linked up my Xamarin.Forms app into the Forms code base and added performance metrics to the methods inside Forms.

Let’s first take a look at the results of a StackLayout as per below. 

The results show that LayoutChildIntoBoundingRegion is called 243 times, every time the text of the label is changed a full layout cycle happens.

Let’s try the same with a Grid, as per below.

The results show that LayoutChildIntoBoundingRegion is called 6 times, it’s only called the first time the view is shown.

Let’s try the same Grid but using a ‘Auto’ for a row.

The result is back up to 243 times and the full layout is happening every time the label text is changed.

Ok, now let’s put back the Grid to using stars but I also want to try something different. I want to have children of the grid dynamically change size, so let’s test with a BoxView that changes width.

NB – In order for me to change the Width of the Box I need to change the HorizontalOptions on the BoxView from Fill to Start.

Even though we’ve changed the Height back to a star the result is still 243 and the full layout is happening everytime the label text is changed. It seems that when we change the HorizontalOptions of a child we also change change the invalidation cycle behaviour.

Ok, so I changed the BoxView back to Fill the BoxView will not change dynamically. Let’s try something different, lets put the BoxView inside a ContentView.

It’s back down again, great so we still get our children changing dynamically and we also short circuit the layout system.

Conclusions

• A child of a stacklayout will always cause a full layout cycle, there’s no way a StackLayout can short circuit this cycle.
• A child of a Grid with that’s inside rows and columns with static or star widths AND the LayoutOptions are set to Fill, are fully constrained which means that the invalidation cycle will be stopped at that child view.
• In order to have children of a Grid change layout dynamically they need to be a child of another View which is fully constrained. (As per the Grid sample).

After taking a look at the Xamarin.Forms code base I can see this is the line that does the short circuit. It seems that a view.Constraint needs to be the value of LayoutConstraint.Fixed for this short circuit to occur. I did further research into this and found the only time we can short circuit the invalidation cycle is in the cases proven above.

UPDATE – Originally in this blog post I mentioned that the above cases are the only way to short circuit the invalidation cycle, this is not entirely true as the AbsoluteLayout can be used to short circuit the invalidation cycle. I will put together some more research for this for another post.