One of the current limitations of the Xamarin.Forms implementation of the Visual State Manager (VSM) is that it only works for setting properties on an individual control. Whilst this is great for control state management (think button states like disabled, pressed etc), its incredibly limiting and makes it unsuitable for some typical visual state scenarios. The one that often comes up in a mobile application is for pages that load data. In this scenario you typically have a least three states: Loading, DataLoaded, DataFailedToLoad. In some cases you might even extend this to have states such as Refreshing or LoadingMoreData. For these states you probably want to show/hide different elements on the screen, which is why the current Xamarin.Forms implementation of the VSM isn’t a great option.
Luckily there’s an alternative, which is the Visual State Manager that’s part of the BuildIt.Forms library. Here’s a quick example of it in action:
<?xml version=”1.0″ encoding=”utf-8″ ?>
<ContentPage
x_Class=”App14.MainPage”>
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroups>
<vsm:VisualStateGroup Name=”LoadingStates”>
<vsm:VisualState Name=”Loading”>
<vsm:VisualState.Setters>
<vsm:Setter Value=”True” Element=”{x:Reference LoadingLabel}” Property=”IsVisible” />
</vsm:VisualState.Setters>
</vsm:VisualState>
<vsm:VisualState Name=”DataLoaded”>
<vsm:VisualState.Setters>
<vsm:Setter Value=”True” Element=”{x:Reference LoadedLabel}” Property=”IsVisible” />
</vsm:VisualState.Setters>
</vsm:VisualState>
<vsm:VisualState Name=”DataFailedToLoad”>
<vsm:VisualState.Setters>
<vsm:Setter Value=”True” Element=”{x:Reference FailedLabel}” Property=”IsVisible” />
</vsm:VisualState.Setters>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateGroups>
</vsm:VisualStateManager.VisualStateGroups>
<StackLayout VerticalOptions=”Center”>
<Label Text=”Loading…” x_Name=”LoadingLabel” HorizontalOptions=”Center” IsVisible=”False” />
<Label Text=”Success: Data Loaded!!” x_Name=”LoadedLabel” HorizontalOptions=”Center” IsVisible=”False” />
<Label Text=”Failure :-(” x_Name=”FailedLabel” HorizontalOptions=”Center” IsVisible=”False” />
<Button Text=”Load Data” Clicked=”LoadClicked” />
</StackLayout>
</ContentPage>
In this case we’ve defined three Visual States that correspond to showing the LoadingLabel, LoadedLabel and FailedLabel respectively. The code behind for the LoadClicked method illustrates how easily you can switch between the states:
private readonly Random rnd = new Random();
private async void LoadClicked(object sender, EventArgs e)
{
var success = rnd.Next(0, 1000) % 2 == 0;
await VisualStateManager.GoToState(this, “Loading”);
await Task.Delay(2000);
await VisualStateManager.GoToState(this, success ? “DataLoaded” : “DataFailedToLoad”);
}
Ok, so one last thing we can add in is a bit of animation to make the transition between states a little smoother. Let’s fade our labels in and out:
<vsm:VisualState Name=”Loading”>
<vsm:VisualState.ArrivingAnimations>
<animations:AnimationGroup>
<animations:AnimationGroup.PostAnimations>
<animations:FadeAnimation Opacity=”1″
Duration=”500″
Element=”{x:Reference LoadingLabel}” />
</animations:AnimationGroup.PostAnimations>
</animations:AnimationGroup>
</vsm:VisualState.ArrivingAnimations>
<vsm:VisualState.LeavingAnimations>
<animations:AnimationGroup>
<animations:AnimationGroup.PreAnimations>
<animations:FadeAnimation Opacity=”0″
Duration=”500″
Element=”{x:Reference LoadingLabel}” />
</animations:AnimationGroup.PreAnimations>
</animations:AnimationGroup>
</vsm:VisualState.LeavingAnimations>
<vsm:VisualState.Setters>
<vsm:Setter Value=”True” Element=”{x:Reference LoadingLabel}” Property=”IsVisible” />
</vsm:VisualState.Setters>
</vsm:VisualState>
The XAML adds a fade in after the state transition has occurred (Post animation) when transitioning to (Arriving at) the the Loading state, and a fade out before the state transition has occurred (Pre animation) when transitioning from (Leaving) the Loading state. As you can see the XAML gets fairly verbose but it’s structured this way to allow for complex combinations and sequences of animations:
<animations:AnimationGroup.PostAnimations>
<animations:SequenceAnimation>
<animations:ParallelAnimation>
<animations:FadeAnimation Opacity=”1″ Duration=”500″ Element=”{x:Reference LoadingLabel}” />
<animations:ScaleAnimation Scale=”5″ Duration=”500″ Element=”{x:Reference LoadingLabel}” />
<animations:SequenceAnimation>
<animations:RotateAnimation Rotation=”10″ Duration=”250″ Target=”LoadingLabel” />
<animations:RotateAnimation Rotation=”0″ Duration=”250″ Target=”LoadingLabel” />
<animations:RotateAnimation Rotation=”-10″ Duration=”250″ Target=”LoadingLabel” />
<animations:RotateAnimation Rotation=”0″ Duration=”250″ Target=”LoadingLabel” />
</animations:SequenceAnimation>
</animations:ParallelAnimation>
<animations:ScaleAnimation Scale=”1″ Duration=”500″ Element=”{x:Reference LoadingLabel}” />
</animations:SequenceAnimation>
</animations:AnimationGroup.PostAnimations>
And let’s see this in action:
Hopefully you can see from this short post how you can leverage the BuildIt.Forms Visual State Manager to do complex page state management as well as animations. We’ve just released a new beta package compatible with the latest Xamarin.Forms v3.6 and would love feedback (https://www.nuget.org/packages/BuildIt.Forms/2.0.0.27-beta).