Nick's .NET Travels

Continually looking for the yellow brick road so I can catch me a wizard....

Conditional Back Button Visibility with BuildIt.Lifecycle

In my post, Adding Back Button Support to Xamarin.Forms with BuildIt.Forms, I showed the basic support I’d added to BuildIt.Lifecycle to handle showing/hiding the back button depending on whether there were previous states. The back button visibility is actually more complex than that as there may be conditions on the current page (ie the current state/view model) that determine whether clicking back should be possible. To keep things simple I’m going to assume that if clicking back is possible, the back button will be shown, otherwise it will be hidden – this may not suit everyone as you may want to show the back button but have it disabled (personally I don’t like this, as it’s hard for the user to understand why the back button is disabled). I’ve just added support to the states and corresponding viewmodel management to detect if the current view model is in a blocked state.

There is an interface IIsAbleToBeBlocked that a view model can implement in order to both return an IsBlocked property and raise an event when it changes. This interface has also been added to the BaseViewModel class to make it easier for developers. For example this method can be used within a view model to toggle the visibility of the back button. If IsBlocked is true, the back button will be hidden.

public async void Run()
{
    for (int i = 0; i < 10; i++)
    {
        IsBlocked = !IsBlocked;
        await Task.Delay(1000);
    }
}

Note that the IsBlocked property works in conjunction with the HasHistory property on the state group (which maps to the back stack at a page level). If there is no history in the state group (ie at the first stage of the application – the first page of the application), then the back button won’t be shown, irrespective of the IsBlocked property.

Arriving or Leaving a ViewModel with BuildIt.Lifecycle

Often when arriving at a page/view it’s necessary to invoke some code in order to load data, or refresh the contents on the page. Of course, this needs to happen within the ViewModel. For BuildIt.Lifecycle, this is means implementing the IArrivingViewModelState interface which defines a single method, Arriving, which will get invoked when the user arrives at the page/view (and the corresponding viewmodel).

public async Task Arriving()
{
    await Task.Delay(2000);
    Name += ".... arrived ....";
}

Note that the method returns a Task, so you can do asynchronous code in order to retrieve data.

On the Windows platform the Universal Windows Platform has methods OnNavigatedTo, OnNavigatingFrom and OnNavigatedFrom which can be overridden in the code behind of a Page. These correspond to when a user arrives, is about to leave and has left a page. The Arriving method in BuildIt.Lifecycle maps to the OnNavigatedTo method. There are two more interfaces, IAboutToLeaveViewModelState and ILeavingViewModelState, which can be used to define methods AboutToLeave and Leaving. These methods map to the OnNavigatingFrom and OnNavigatedFrom methods.

One thing to note about the AboutToLeave method is that it has a CancelEventArgs as a parameter. The code in the AboutToLeave method can set the Cancel property on this parameter to true in order to cancel the navigation away from the page (note that this maps to cancelling the state change which drives the change in pages).

public async Task AboutToLeave(CancelEventArgs cancel)
{
    cancel.Cancel = true;
}

Adding Back Button Support to Xamarin.Forms with BuildIt.Forms

In my previous post I discussed the support I added for hardware and virtual back buttons in a Universal Windows Platform application (UWP) using BuildIt.Lifecycle. At an application level the back button (irrespective of whether it’s a hardware back button, such as on a phone, or a virtual back button, such as in desktop or tablet mode) is designed to return the user to the previous state of the application. In most cases this correlates to going to either the previous page in an application, or to the previous application, if the user is on the first page of the current application. Occasionally, there may be sub-states within a page, in which case the back button should be able to step back through those states, before causing the application to go back to the previous page.

This means that the back button should be applied at the highest level of the active window, which means passing it into StateManager of the region that correlates to the active window. In a UWP application, this is relatively straight forward as the application can subscribe to the BackRequested event, for example:

SystemNavigationManager.GetForCurrentView().BackRequested += BackRequested;

In the event handler, the StateManager for the region is queried to find out if a previous state exists. If it does, a call to GoBackToPreviousState is made.

Unfortunately Xamarin.Forms (XForms) doesn’t offer a global event for the back button. Instead it’s up to every page to override the OnBackButtonPressed method and return true if the back navigation should be cancelled. Having every page of the XForms application inherit from a custom base page isn’t an option I wanted to force upon users of this library. Luckily it’s not necessary to intercept the OnBackButtonPressed method on every page; it can instead be intercepted in the NavigationPage at the root of the application. By providing a CustomNavigationPage class, and requiring that it be used as the root of the application, it’s possible for the back button to be intercepted and applied to the active region.

Back Button Support in BuildIt.Lifecycle

Previously I’ve dealt with going back to previous pages based on user interaction on the current page (eg hitting a back button that triggers an “end of state” behaviour to go back to the previous page). However, another common scenario is for the user to press tha back button, either on their device (eg the Windows Phone hardware back button) or a virtual back button (eg the virtual button that’s available to Windows 10 UWP applications either in the task tray (running in tablet mode) or in the top navigation bar, when running in desktop mode). This wasn’t currently handled, so I’ve added handlers for both the hardware back button and the virtual back button to the UWP branch of BuildIt.Lifecycle. This work isn’t totally complete because at the moment it assumes that the decision as to whether the current page supports a back operation is determined only by the root level StateManager – this may not be the case if you have a view model that has business logic that determines whether the current page can be navigated way from.

This update also supports hiding and showing the virtual back button when a UWP application is run in desktop mode eg:

image image

Book: Mobile Strategies for Business: 50 Actionable Insights to Digitally Transform Your Business

If you’re interested in mobile strategies for line of business applications, you can’t go past this read, recently authored by Rob Tiffany. The book itself actually stems from a series of tweets Rob did a while ago. Each section starts with a tweet, followed by a more detailed discussion that both sets context and discusses current thought leadership in the area of mobile strategies for business applications.

One of the biggest takeaways, which actually couples the content of Rob’s book with my own thoughts on enterprise applications, is that businesses need to do more to move quicker in the modern technology enviornment. This means getting rid of antiquated processes, such as SOEs, in favour of more agile mechanisms such as Windows as a service. Applications are no different, old/legacy applications should be migrated, updated, rebuilt or retired in order to allow organisations to be more agile.

I also believe that applications within an organisation, whether they be mobile, desktop or web, should have a lifecycle in which they are created, maintained and then retired. If you aren’t maintaining, and ideally updating/improving, an application, you’d better look at retiring it. If you don’t, you’ll risk slowing your organisation down over time.

Fixing Back Behaviour and Navigation Button in Xamarin Forms with BuildIt.Lifecycle

There were two issues that I identified in my post, Using BuildIt.Lifecycle with Xamarin Forms, which were to do with the navigation between pages

1. The back operation actually did a forward navigation to a new page

2. The navigation button was always showing that there was a previous page, even if there wasn’t

The first issue was fixed with an update to the BuildIt.Lifecycle.XForms library which picks up on the IsNewState flag during state transition to determine whether to do a forward navigation (ie a PushAsync) or a backward navigation (ie a PopAsync).

The second issue was fixed by looking at the Navigation.NavigationStack and based on whether there were any entries in there, toggle whether the navigation bar is shown. The following would hide the navigation bar (it’s a static method on the NavigationPage class).

NavigationPage.SetHasNavigationBar(NavigationRoot, false);

Visual States in XForms with BuildIt.Lifecycle

When I created the layout for the AboutPage in my post, Using BuildIt.Lifecycle with Xamarin Forms, I cut out most of the elements to make it quicker to get something up and running. The irony is that fixing up the AboutPage to include a SplitView like pane was actually relatively quick, although there’s a bit of polish that needs to be added to make it look great. The following is the XAML for the AboutPage which includes two columns: the left column, initially hidden, includes the Close button which allows the user to navigate back to the home page of the app; the right column holds a couple of buttons that can switch states of the page between Expanded and Minimised. Note that there is another button that sits in the top left corner which will simply toggle between the states.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="
http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="SimpleStates.XForms.Pages.AboutPage">
  <Grid>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="Auto"/>
      <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Grid BackgroundColor="Yellow"
          x:Name="SplitPane"
          IsVisible="False">

      <Button Clicked="CloseClick"
              VerticalOptions="Center"
              HorizontalOptions="Center"
              Text="Close"/>
    </Grid>

    <StackLayout Grid.Column="1"
                 VerticalOptions="Center"
                 HorizontalOptions="Center" >
      <Label  Text="About Page"
              FontSize="40" />
      <Label  Text="{Binding AboutTitle}"
              FontSize="40" />
      <Label  Text="{Binding Data}"
              FontSize="40" />
      <Button Clicked="ExpandClick" Text="Expand"/>
      <Button Clicked="CollapseClick" Text="Collapse"/>
    </StackLayout>
    <Button
      Clicked="splitViewToggle_Click"
      Text="="
      HorizontalOptions="Start"
      VerticalOptions="Start"/>
  </Grid>
</ContentPage>

Unfortunately the XForms XAML doesn’t support defining visual states, so we have to define these in code using the StateManager class. By specifying the IHasStates interface, the framework will automatically associate the StateManager on the AboutPage with the StateManager in the AboutViewModel, keeping them in sync.

public partial class AboutPage : IHasStates
{
    public IStateManager StateManager { get; }
   
    public AboutPage()
    {
        InitializeComponent();

        StateManager = new StateManager();
        StateManager
            .Group<AboutExpandStates>()
                .DefineState(AboutExpandStates.Minimised)
                .DefineState(AboutExpandStates.Expanded)
                    .Target(SplitPane)
                        .Change(x => x.IsVisible, (x, c) => x.IsVisible = c)
                        .ToValue(true);
    }

Using BuildIt.Lifecycle with Xamarin Forms

Leaving the Universal Windows Platform behind for a little bit I wanted to show that the BuildIt.Lifecycle framework can be used to drive a Xamarin Forms (XForms) application.

The first step is to create a Xamarin Forms project. In this case I’ll select the Portable option.

image

This will actually create four projects, one which is contains the actually application logic, including the XAML markup for the pages, and then three platform specific projects for iOS, Droid and Windows Phone. The platform specific projects are where any code required for device integration or custom UX goes for each platform.

After creating the projects, the first thing to do is to upgrade the Xamarin.Forms NuGet reference to the latest version (v2.0.1.6495 at time of writing).

The next thing to do is to add references to the BuildIt.Lifecycle NuGet packages including the Xamarin Forms specific package (https://www.nuget.org/packages/BuildIt.Lifecycle.XForms ). I had a few issues here because I initially had the dependency setting in the NuGet manager set to Lowest and it refused to install one of the dependencies (NuGet still isn’t clever enough some times to resolve everything properly). Switching this to Highest, which I think should be the default, fixed this issue.

Of course, the core XForms project needs a reference to the SimpleStates.Core library which contains all my application, region and view model classes. At this point I realised I hadn’t set the PCL profile correctly on the project. Updating this turned out to be a bit of a mission as Visual Studio insisted the project had to be switched to NuGet v3, which you can’t do with any packages installed (according to the error message). So I had to uninstall all the NuGet packages (in the correct order) one at a time, and then update the targets as per the Change Targets dialog for the project.

image

Now that the projects have all the references I need, it’s time to wire up the application. To do this I need to initialise the BuildIt.Lifecycle application, and I need a XForms page that maps to each of the pages (ie my states) in the application. Creating the pages is the easiest thing as they all come straight from the Forms Xaml Page template (no changing of base page required!!).

image

The image shows me creating the MainPage but I also added a SettingsPage, AboutPage and LandingPage into the Pages folder in my XForms PCL project.

Hooking up the BuildIt.Lifecycle framework was also relatively easy. In the App.cs, I simply replace the in-code page that’s created when you create the new project with the following:

public class App : Application
{
    public App()
    {
        LifecycleHelper.RegisterView<MainPage>().ForState(AppStates.Home);
        LifecycleHelper.RegisterView<SettingsPage>().ForState(AppStates.Settings);
        LifecycleHelper.RegisterView<AboutPage>().ForState(AppStates.About);

        LifecycleHelper.RegisterView<LandingPage>().ForState(AdditionalStates.Landing);

        MainPage = new NavigationPage();
        StartApplication();
    }

    private async void StartApplication()
    {
        var core = new SimpleStatesApplication();
        var wm = new WindowManager(MainPage as NavigationPage, core);
        await core.Startup(builder =>
        {
            builder.RegisterType<FormsDataService>().As<IDataService>();
        });
    }
}

This also requires an implementation of IDataService which I called FormsDataService and returns slightly different Contacts than the UWP version did, just to prove the point.

public class FormsDataService : IDataService
{
    public async Task<IEnumerable<string>> LoadContacts()
    {
        return new[] { "XF: Joe", "XF: Bob", "XF: Frank" };
    }
}

My application will now run and display the MainPage but won’t show any content. To fix this I simply needed to go through each of the pages, translate the UWP XAML into XForms and then wire up any event handlers in the code-behind (which route through to the ViewModel anyhow). The XAML and code behind (where required) for the four pages is at the end of this post…. You’ll note that I cheated on the About page just to get something displaying (I’ll come back to that to implement visual states etc) and that neither the About, nor the Landing page currently have any code behind.

That’s it – I can run the application and my page transitions work without me having to do anything. This is very much in early stages as you’ll see that the back navigation isn’t working properly (it’s actually a forward navigation at the moment) and the navigation back button exists even on the first page of the application, which isn’t correct. In coming posts we’ll clear these issues up.

 

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="
http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="SimpleStates.XForms.Pages.MainPage">
  <Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto"/>
      <RowDefinition/>
    </Grid.RowDefinitions>
    <StackLayout >
      <Label Text="Main Page"
                  
                 FontSize="40" />
      <Button Clicked="SettingsClick">Settings</Button>
      <Button Clicked="AboutClick">About</Button>
      <Button Clicked="AnotherWindowClick">Another Window</Button>
    </StackLayout>
    <ListView Grid.Row="1" ItemsSource="{Binding Contacts}"></ListView>
  </Grid>
</ContentPage>

public partial class MainPage
{
    public MainPage()
    {
        InitializeComponent();
    }
    private MainViewModel ViewModel => BindingContext as MainViewModel;
    private void SettingsClick(object sender, EventArgs e)
    {
        ViewModel.DisplaySettings();
    }

    private void AboutClick(object sender, EventArgs e)
    {
        ViewModel.DisplayAbout();
    }
    private void AnotherWindowClick(object sender, EventArgs e)
    {
        ViewModel.OpenAnotherWindow();
    }
}

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="
http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="SimpleStates.XForms.Pages.SettingsPage">

  <StackLayout VerticalOptions="Center" HorizontalOptions="Center">
    <Label Text="Settings Page"
               FontSize="40" />
    <Label Text="{Binding SettingsTitle}"
               FontSize="40" />
    <Button Clicked="GoBackClick">Go Back</Button>
  </StackLayout>
</ContentPage>

public partial class SettingsPage
{
    public SettingsPage()
    {
        InitializeComponent();
    }
    private void GoBackClick(object sender, EventArgs e)
    {
        (BindingContext as SettingsViewModel)?.CompleteSettings();
    }
}

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="
http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="SimpleStates.XForms.Pages.AboutPage">
  <StackLayout VerticalOptions="Center" HorizontalOptions="Center" >
    <Label  Text="About Page"
                   FontSize="40" />
    <Label  Text="{Binding AboutTitle}"
             FontSize="40" />
    <Label  Text="{Binding Data}"
             FontSize="40" />
  </StackLayout>
</ContentPage>

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="
http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="SimpleStates.XForms.Pages.LandingPage">
  <Label Text="Landing" VerticalOptions="Center" HorizontalOptions="Center" FontSize="40" />
</ContentPage>

Windows Hello (Beta) on Lumia 950 XL

Yesterday, after my Lumia 950 XL arrived, I noted that one of the two features I was going to try was Windows Hello. I want to start by saying that I now have this on both my Surface Book and the Lumia 950XL, and I’ve been using it on the former for quite some time now. Windows Hello on the Surface Book absolutely rocks – it’s not as instant sign on as say the Touch ID sign in capability on the iphone, which is virtually instantaneous on the latest iphones/ipads, but it is still relatively quick and definitely hands free. The latter is useful if you don’t have the keyboard attached.

Unfortunately my experience on the Lumia 950 XL has been disappointing at best, frustrating in some cases. I’ve gone in and repeatedly try to improve recognition but despite this Windows Hello only recognises me less than 50% of the time. What’s worse is that after not recognising me a couple of times it stops trying and forces me to use PIN to unlock. It would be good if it would prompt and suggest PIN to unlock, followed by perhaps a suggestion to improve recognition (perhaps to allow for different lighting conditions etc) but this should only be a suggestion, the camera should still try to identify me, especially since my head is in front of the camera and it should be able to at least detect the presence of a head, even if it can’t identify that it’s me.

The disappointing thing is that even when it does recognise me, it’s no quicker than me swiping up and entering my 4 digit PIN, and you look much less of an idiot doing it. I feel that the integration of a finger print reader would have been much better – less chance of you putting your finger in the wrong place and less environment factors to account for. Not to mention the technology is probably cheaper than the camera required to do Windows Hello with a camera.

This bring me to the final point of this post which is that I’ve bought a production device which comes with the RTM build of Windows 10 Mobile. Now of course, Windows is now a service, which means that patches and updates should come through progressively but at this point no updates have come out for regular customers. If you go to Settings and look at setting up Windows Hello, it is clearly marked as Beta…. WTF! Why have I got Beta features on a device I’ve paid a lot of money for? I don’t know when it became acceptable to ship Beta features to end customers but I think it traces back to Google (if you recall Google was in Beta for years before this tag was removed from their service). Beta testing is there for a purpose, to iron out bugs before you ship to end customers. Now that’s not to say that you can’t have some end customers as beta testers, but they should be invited/request to take part, rather than assume that every customer will tolerate unpolished, incomplete or broken features. Microsoft shipping Beta features to end customers just points to why Apple dominates the mobile market and why iOS customers rarely switch to other platforms.

Windows 10 Microsoft Developer Camp in Sydney and Melbourne

Microsoft Dev Camps are no cost, hands-on, technical training events for developers led by Microsoft experts.

Sydney 23rd February – Register

Melbourne 25th February – Register

Agenda

Time

Module title

Hands-on / theory / demo

8:30am – 9:15am

Registration and welcome

Theory

9:15am – 10:15am

Introduction to Windows 10 UWP

Theory + demo

10:15 am – 10:30am

Morning tea

10:30am – 11:30am

Adaptive UI

Theory + hands-on

11:30am – 12:00pm

Live tiles & notifications

Theory + demo

12:00pm – 1:00pm

Lunch

1:00pm – 2:00pm

Edge + hosted web apps

Theory + hands-on

2:00pm – 3:00pm

Cloud Services & connected experiences

Theory + hands-on

3:00pm – 3:30pm

Afternoon tea

3:30pm – 4:30pm

More personal computing

Theory + hands-on

4:30pm – 5:00pm

Store & monetisation

Theory + demo

5:00pm – 5:30pm

Wrap up

Theory

Microsoft Lumia 950, Windows Hello and Continuum

Due to an issue with the USB dock on my Lumia 640XL preventing me deploying apps for debugging, I went ahead and ordered a Lumia 950 XL which arrived today. The unboxing experience went well and as per most new phones there’s the normal down time whilst you transfer and reinstall apps on the new device. There were two features that I really wanted to try out:

Windows Hello

I’ve been using my Surface Book for a while now, so I’m used to the speed and convenience of the Windows Hello sign in experience which means I can just look at my monitor and it signs in. On the phone the experience is basically the same – it looks for you and signs you in. However, I do feel that it’s actually slower than simply tapping the pin code. At this stage I’ll leave Windows Hello enabled but I suspect that it may annoy me, more than it is a convenience.

Continuum

I don’t have one of the continuum docks yet, and since I purchased a grey-imported phone I wasn’t eligible for http://microsoftdisplaydock.com.au/, the Microsoft Australia offer for getting a free dock (personally I think this should be open to anyone willing to sync $700+ dollars into a Windows Phone at this point given the dire lack of feature complete apps). However, I do have a TV that has a Miracast dongle (https://www.microsoft.com/en-ie/mobile/accessory/hd-10/) attached to it, so I went ahead and tapped the NFC pad, and 10 seconds later the device was connected, displaying out my TV. The phone turns into a track pad and the whole TV is used for whichever app is being displayed.

I went and downloaded an app we’ve just helped deliver - https://www.microsoft.com/en-au/store/apps/hungry-jacks-shake-win-app/9nblggh648x0. Looks brilliant running at full desktop size on a TV screen.

Keeping Visual States in Sync with Application States using Adaptive Triggers and BuildIt.Lifecycle

In earlier posts on BuildIt.Lifecycle I’ve covered how changing state via the StateManager can trigger events that will cause changes in visual states on the corresponding page. With the Universal Windows Platform (UWP) we have visual state triggers which can be used to invoke state changes from within the view. For example an AdaptiveTrigger can cause a change in visual state based on the size of the window, which I covered in the post, Using the Universal Windows Platform SplitView Control with Visual States and BuildIt.Lifecycle. These two mechanisms of changing visual states are independent and thus would lead to an inconsistent experience when it comes to maintaining state. For example, if I update the AboutViewModel to include state definitions that modify a Data property, then when the state changes the value of Data will change between “Minimised” and “Expanded”

private string data;
public string Data
{
    get { return data; }
    set
    {
        data = value;
        OnPropertyChanged();
    }
}

public AboutViewModel()
{

    StateManager
        .Group<AboutExpandStates>()
        .DefineState(AboutExpandStates.Minimised)
            .Target(this)
                .Change(x => x.Data, (x, c) => x.Data = c)
                .ToValue("Minimised")
        .DefineState(AboutExpandStates.Expanded)
            .Target(this)
                .Change(x => x.Data, (x, c) => x.Data = c)
                .ToValue("Expanded");
}

If the application was to change state by invoking ChangeState on the StateManager, this would trigger the appropriate change in Visual State on the page. If the user were to resize the page, the AdaptiveTriggers would kick in, causing a change in the Visual State. However, this change wouldn’t be reflected in the StateManager, thus not updating the value of Data (ie would say “Minimised” when the SplitView was expanded, or saying “Expanded” when the SplitView was collapsed). Luckily the VisualStateGroup class in UWP raises a CurrentStateChanged event, which can be intercepted and used to route the update back in the StateManager. This has been added to BuildIt.Lifecycle to ensure consistence between the state of the StateManager and the corresponding visual states. In the same way as the name of each VisualState has to match the enumeration value, the name of the VisualStateGroup has to match the name of the enumeration itself.

Toggling the SplitView using Visual States

Yesterday when I was Toggling the SplitView Pane using a Hamburger Button in a UWP Application, I did it by simply inverting the IsPaneOpen property on the SplitView. This is in conflict with the visual states I had previously declared. An alternative would be for the button to invoke a state change on the AboutViewModel – this relies on knowing what the current state is, as shown in the following code which sits within the AboutViewModel.

public void ToggleSplitView()
{
    var group = StateManager.StateGroups[typeof (AboutExpandStates)] as StateGroup<AboutExpandStates>;
    var current = group.CurrentState;
    var current = StateManager.CurrentState<AboutExpandStates>();
    StateManager.GoToState(current != AboutExpandStates.Expanded
        ? AboutExpandStates.Expanded
        : AboutExpandStates.Minimised);
}

Update: There is now a CurrentState method on the StateManager which eliminates the need to explicitly grab a reference to the state group. See bold lines in code above for the change

Toggling the SplitView Pane using a Hamburger Button in a UWP Application

Yesterday (Using the Universal Windows Platform SplitView Control with Visual States and BuildIt.Lifecycle) I introduced a SplitView into my sample application where I used a couple of buttons in the content. In a lot of applications the SplitView will be triggered by either AdaptiveTriggers used in conjunection with the visual states, or via a hamburger button. Today I’ll add both of these to our application. Firstly a couple of AdaptiveTriggers added to the visual state definitions:

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup x:Name="SplitViewStates">
        <VisualState x:Name="Minimised">
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="0" />
            </VisualState.StateTriggers>
        </VisualState>
        <VisualState x:Name="Expanded">
            <VisualState.Setters>
                <Setter Target="RootSplitView.(SplitView.IsPaneOpen)"
                        Value="True" />
                <Setter Target="RootSplitView.(SplitView.DisplayMode)"
                        Value="Inline" />
            </VisualState.Setters>
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowHeight="0" MinWindowWidth="600" />
            </VisualState.StateTriggers>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>
As the user adjusts the width of the window the Pane of the SplitView will open and close depending on whether the window is wide enough. Secondly, I need to add a hamburger button to the layout of the page. This is a regualr button control, styled to be a hamburger button – in this case the style for the hamburger button was taken from the UWP samples.

<Button Style="{StaticResource SplitViewTogglePaneButtonStyle}"
        Click="splitViewToggle_Click" />

private void splitViewToggle_Click(object sender, RoutedEventArgs e)
{
    RootSplitView.IsPaneOpen = !RootSplitView.IsPaneOpen;
}


// -------------------------------------- Page Resources ------------------------------

<Page.Resources>
    <ControlTemplate x:Key="SplitViewTogglePaneButtonTemplate"
                        TargetType="Button">
        <Grid x:Name="RootGrid"
                Background="{TemplateBinding Background}">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal" />
                    <VisualState x:Name="PointerOver">
                        <VisualState.Setters>
                            <Setter Target="RootGrid.Background"
                                    Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" />
                            <Setter Target="ContentPresenter.Foreground"
                                    Value="{ThemeResource SystemControlHighlightBaseMediumHighBrush}" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="Pressed">
                        <VisualState.Setters>
                            <Setter Target="RootGrid.Background"
                                    Value="{ThemeResource SystemControlBackgroundBaseMediumLowBrush}" />
                            <Setter Target="ContentPresenter.Foreground"
                                    Value="{ThemeResource SystemControlHighlightBaseMediumBrush}" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="Disabled">
                        <VisualState.Setters>
                            <Setter Target="ContentPresenter.Foreground"
                                    Value="{ThemeResource SystemControlForegroundBaseLowBrush}" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <ContentPresenter x:Name="ContentPresenter"
                                Padding="{TemplateBinding Padding}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                AutomationProperties.AccessibilityView="Raw"
                                ContentTemplate="{TemplateBinding ContentTemplate}"
                                ContentTransitions="{TemplateBinding ContentTransitions}" />
        </Grid>
    </ControlTemplate>
    <Style x:Key="SplitViewTogglePaneButtonStyle"
            TargetType="Button">
        <Setter Property="Background"
                Value="Transparent" />
        <Setter Property="Foreground"
                Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
        <Setter Property="BorderBrush"
                Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
        <Setter Property="BorderThickness"
                Value="0" />
        <Setter Property="Padding"
                Value="0" />
        <Setter Property="HorizontalAlignment"
                Value="Left" />
        <Setter Property="HorizontalContentAlignment"
                Value="Center" />
        <Setter Property="VerticalAlignment"
                Value="Top" />
        <Setter Property="VerticalContentAlignment"
                Value="Center" />
        <Setter Property="UseSystemFocusVisuals"
                Value="True" />
        <Setter Property="FontFamily"
                Value="{ThemeResource SymbolThemeFontFamily}" />
        <Setter Property="Content"
                Value="&#xE700;" />
        <Setter Property="Height"
                Value="48" />
        <Setter Property="Width"
                Value="48" />
        <Setter Property="FontWeight"
                Value="Normal" />
        <Setter Property="FontSize"
                Value="20" />
        <Setter Property="Template"
                Value="{StaticResource SplitViewTogglePaneButtonTemplate}" />
    </Style>
</Page.Resources>

Using the Universal Windows Platform SplitView Control with Visual States and BuildIt.Lifecycle

In this post I’m going to add a SplitView to the About page. I’ve also created two visual states that will control whether the Pane of the SplitView is visible or not (ie IsPaneOpen) and whether the display behaviour is for it to overlay or shift the content over (ie Inline). In the main content area I’ve also added two buttons which will be used to switch between each visual state. Lastly, in the SplitView.Pane has a Close button which will be used to return to the previous page in the application.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
       <VisualStateManager.VisualStateGroups>
           <VisualStateGroup x:Name="SplitViewStates">
               <VisualState x:Name="Minimised" />
               <VisualState x:Name="Expanded">
                   <VisualState.Setters>
                       <Setter Target="RootSplitView.(SplitView.IsPaneOpen)"
                               Value="True" />
                       <Setter Target="RootSplitView.(SplitView.DisplayMode)"
                               Value="Inline" />
                   </VisualState.Setters>
               </VisualState>
           </VisualStateGroup>
       </VisualStateManager.VisualStateGroups>

       <SplitView  x:Name="RootSplitView">
           <SplitView.Pane>
               <Grid>
                   <Border Background="Yellow" />
                   <Button Click="CloseClick">Close</Button>
               </Grid>
           </SplitView.Pane>

           <StackPanel VerticalAlignment="Center"
                       HorizontalAlignment="Center">
               <TextBlock Text="About Page"
                          FontSize="40" />
               <TextBlock Text="{Binding AboutTitle}"
                          FontSize="40" />
               <Button Click="ExpandClick">Expand</Button>
               <Button Click="CollapseClick">Collapse</Button>
           </StackPanel>
       </SplitView>
   </Grid>
And here is the code behind for the page:

private void ExpandClick(object sender, RoutedEventArgs e)
{
    (DataContext as AboutViewModel).Expand();
}
private void CollapseClick(object sender, RoutedEventArgs e)
{
    (DataContext as AboutViewModel).Collapse();
}

And then the implementation of the Expand and Collapse methods on the AboutViewModel. For this we’re defining states whose names match the visual states I declared in the XAML. The Expand and Collapse method then switch between these states. I’ve shown the whole class (excluding the AboutTitle property as I’ve changed the base class to include the StateManager and OnCompletion.

public class AboutViewModel : BaseStateManagerViewModelWithCompletion<DefaultCompletion>
{
    public AboutViewModel()
    {
        StateManager.Group<AboutExpandStates>().DefineAllStates();
    }

    public void Close()
    {
        OnComplete(DefaultCompletion.Complete);
    }

    public void Expand()
    {
        StateManager.GoToState(AboutExpandStates.Expanded);
    }

    public void Collapse()
    {
        StateManager.GoToState(AboutExpandStates.Minimised);
    }
}

Lastly, I needed to modify the About state for the PrimaryRegion so that the Completion event would return the application to the Home state:

.StateWithViewModel<AppStates, AboutViewModel>(AppStates.About)
    .OnComplete(DefaultCompletion.Complete).ChangeToPreviousState()

    .WhenChangedToWithData<AppStates, AboutViewModel, string>((vm, d) => vm.AboutTitle = d)
.EndState();

And here is the output with the state manager triggering changes that switch visual states expanding and collapsing the Pane of the SplitView.

image image

Additional Windows using Regions with BuildIt.Lifecycle

In the first post on Getting Started with BuildIt.Lifecycle I touched on the notion of an application region being a logical representation of a Window that’s part of an application. Most Windows Phone, iOS and Android applications will only have a single region but the very nature of Windows lends itself to multi-windowed applications. In this post we’ll extend the sample application to launch a new Window by creating a new region within the application. We’ll start with the declaration of the region:

public enum AdditionalStates
{
    Base,
    Landing
}

public class AdditionalRegion : StateAwareApplicationRegion
{

    public AdditionalRegion()
    {
        StateManager.GroupWithViewModels<AdditionalStates>()
            .StateWithViewModel<AdditionalStates, LandingViewModel>(AdditionalStates.Landing)
                .OnComplete(DefaultCompletion.Complete)
                .CloseRegion(this)
            .EndState();
    }

    protected override async Task CompleteStartup()
    {

        await base.CompleteStartup();

        await StateManager.GoToState(AdditionalStates.Landing, false);
    }
}

You may notice this is slightly different from the PrimaryRegion I defined in my initial post as it inherits from the StateAwareApplicationRegion instead of just ApplicationRegion, and that there’s no StateManager property. The StateAwareApplicationRegion was added as a convenience class, which contains the StateManager property and implements the IHasStates interface. Note that both regions in my sample application now inherit from this class.

There is only a single state defined for the AdditionalRegion, which will correlate to the only page that will get loaded. When this region is started, the state manager transitions to the Landing state, which will display the LandingPage. In order for this to work, we need to create and correlate a LandingPage to the Landing state. I’ve added a page to the application based on the Blank Page template, called LandingPage. In App.xaml.cs I then needed to add the association between the new page and the Landing state:

LifecycleHelper.RegisterView<LandingPage>().ForState(AdditionalStates.Landing);

On the MainPage of the application I’ve added another Button which simply calls a new OpenAnotherWindow method on the MainViewModel.

private void AnotherWindowClick(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
    ViewModel.OpenAnotherWindow();
}

The OpenAnotherWindow method simply calls OnComplete with a new enumeration value of AnotherWindow (this enumeration value is independent of the fact that I’ll be using it to open a new window, I could have called it “ShowMeTheMoney” so long as it correlates to the handler I’ll define in the PrimaryRegion).

public void OpenAnotherWindow()
{
    OnComplete(MainCompletion.AnotherWindow);
}

As I just mentioned, I need to define what happens when OnComplete is called. To do this I need to update the state declarations in the PrimaryRegion. Here you can see the additional OnComplete which handles the AnotherWindow enumeration value, and calls LaunchRegion.

StateManager.GroupWithViewModels<AppStates>()
    .StateWithViewModel<AppStates, MainViewModel>(AppStates.Home)
        .OnCompleteWithData(MainCompletion.Settings,vm=>vm.HelloWithTime)
        .ChangeState(AppStates.Settings)

        .OnCompleteWithData< AppStates, MainViewModel,MainCompletion,string>(MainCompletion.About,null)
        .ChangeState(AppStates.About)
                   
        .WhenChangedTo(async vm => await vm.LoadData())
                   
        .OnComplete(MainCompletion.AnotherWindow)
        .LaunchRegion(this,TypeHelper.Ref<AdditionalRegion>())
    .EndState()

Note: The TypeHelper is there to try to eliminate the need to specify all the Type arguments for the LaunchRegion method. I’ll look to refactor this more as we go to make it less obtuse to use.

That’s it, when you run the application, clicking the new Button will spawn of new windows (and actually will keep spawning new windows each time you click the button, even if the previous window is still open).

Refactoring Data Passing Methods in BuildIt.Lifecycle

In my earlier post, Passing Data Between States with BuildIt.Lifecycle, the state declarations for the primary application region started to look really messy. As promised I’ve tidied up the extension helper methods, making it much easier to define delegates that are invoked when changing to and from a state. The updated state declartion now looks like:

StateManager.GroupWithViewModels<AppStates>()
    .StateWithViewModel<AppStates, MainViewModel>(AppStates.Home)
        .OnCompleteWithData(MainCompletion.Settings,vm=>vm.HelloWithTime)
            .ChangeState(AppStates.Settings)
        .OnCompleteWithData< AppStates, MainViewModel,MainCompletion,string>(MainCompletion.About,null)
            .ChangeState(AppStates.About)
        .WhenChangedTo(async vm => await vm.LoadData())
    .EndState()
               
    .StateWithViewModel<AppStates, SettingsViewModel>(AppStates.Settings)
        .OnComplete(DefaultCompletion.Complete).ChangeToPreviousState()
        .WhenChangedToWithData<AppStates, SettingsViewModel, string>((vm, d) => vm.SettingsTitle = d)
    .EndState()
               
    .StateWithViewModel<AppStates, AboutViewModel>(AppStates.About)
        .WhenChangedToWithData<AppStates, AboutViewModel, string>((vm, d) => vm.AboutTitle = d)
    .EndState();

Note that if you’re attempting to use these updates they haven’t yet made their way into the NuGet packages. I’ll endeavour to update these packages later this week. In the meantime I’d recommend downloading the source from the BuildIt repository on GitHub.

Loading Data Using Services with BuildIt.Lifecycle

The BuildIt.Lifecycle automatically creates instances of ViewModels and associates them with the corresponding page/view as the user steps between application states. Behind the scenes this uses Autofac to create these instances and ensure any dependencies are resolved. ViewModels that require access to device hardware, or to services that load or save data, can simply include the interface in the constructor. Take the following example where the MainViewModel relies on an instance of the IDataService interface to populate the Contacts collection.

public interface IDataService
{
    Task<IEnumerable<string>> LoadContacts();
}

public class MainViewModel : BaseViewModelWithCompletion<MainCompletion>
{
    public ObservableCollection<string> Contacts { get; }=new ObservableCollection<string>();
    private IDataService Data { get; }
    public MainViewModel(IDataService data)
    {
        Data = data;
    }
    public async Task LoadData()
    {
        var contactList = await Data.LoadContacts();
        contactList.DoForEach(Contacts.Add);
    }

We need to make two changes to our application declaration. The first is to register the implementation of IDataService, which we’ll do in App.xaml.cs

var core = new SimpleStatesApplication();
var wm = new WindowManager(core);
await core.Startup(builder =>
{
    builder.RegisterType<UWPDataService>().As<IDataService>();
});

public class UWPDataService : IDataService
{
    public async Task<IEnumerable<string>>  LoadContacts()
    {
        return new []{"Joe", "Bob", "Frank"};
    }
}

The other change is to then invoke this method when the MainViewModel is used, this is when the Home state is changed to. We add the following to our state declarations

(group.Item2.States[AppStates.Home] as IViewModelStateDefinition<AppStates, MainViewModel>)
    .WhenChangedTo(async vm => await vm.LoadData());

Note that we can also register services as part of our application class, allowing them to be registered within the PCL, rather than the platform specific libraries. This is useful for services that you want to use the same implementation for all supported platforms.

public class SimpleStatesApplication : RegionAwareBaseApplication<PrimaryRegion>
{
    protected override void RegisterDependencies(ContainerBuilder builder)
    {
        base.RegisterDependencies(builder);
        builder.RegisterType<BasicDebugLogger>().As<ILogService>();
    }
}

The ILogService is used within BuildIt.Lifecycle, so registering this implementatino will allow you to view the diagnostic information in the Output window within Visual Studio.

Passing Data Between States with BuildIt.Lifecycle

Yesterday I discussed in my post, Navigating Back using State History with BuildIt.Lifecycle, how we needed to extend the state manager concept to understand and track state history. The next challenge that app developers face, that doesn’t fit nicely into the current state manager concept is that you often need to pass data between pages of the application. Think of a simple example where you have a list of contacts on one page; the user taps on one of those contacts and is taken to a new page that shows the details of that person. What you need to pass between pages is information about which contact the user tapped. I’ll discuss later how we can pass data between states, and thus view models, later in the post, but first I wanted to dig into the concept of passing data between pages a bit further.

When the user tapped on the contact in the list, there is a lot of information that we can record about that event:

- Mouse/Touch position (don’t forget we’re not just dealing with mobile devices, apps are a big part of the desktop experience on Mac and PC now)

- List index (the index of the item tapped in the list)

- List item (the object in the list that corresponds to the cell that was tapped)

- Item Id (some sort of unique identifier of the item that was tapped)

With all these pieces of information, the question is which one to pass to the details page. Let’s review them individually:

- Mouse/Touch position – this in itself isn’t very useful as it only has meaning on the page that’s currently in view and that point in time. For example, if the user were to scroll the list, all of a sudden this information is useless as it now points to a different cell in the list

- List index – this is only useful if the details page has a reference to exactly the same list that is used to populate the contacts list page. If the underlying data set changed (eg sync with backend caused new contacts to be downloaded), then the list index might now point to a different item

- List item – if the items in the list contain all the details necessary to populate the details page then passing the list item to the details page is ok. However, if you have a large list off contacts, chances are you only load enough data about each contact to display the item in the list (eg perhaps only photo and name). In this case, passing the whole entity isn’t that useful since the details page has to load the whole contact anyhow. The other point worth considering is about serialization of navigation parameters – depending on the platform there are mechanisms for persisting navigation stack, including data parameters; some of these have size and complexity constraints on the data passed between pages.

- Item Id – this is probably the best choice for this scenario. It contains enough information for the contact to be loaded. If performance is a concern (ie you want the contact summary information to be instantly available when the user arrives at the details page, even if details have to be progressively loaded), then you should cache the contact summary information in memory in a service which can be accessed as soon as the details page is loaded. The cache service might also cache the last X number of loaded contacts in memory to make it quick for a user to go between contacts.

Ok, so this works for this scenario but how do we summarize this into a more generic form. Essentially it comes down to passing the minimal set of information between pages that is required to completely load the next page. Ideally pages (and their corresponding ViewModel) should be self sufficient, relying only on application services to load data. Application services, most likely passed into the ViewModel using some sort of dependency injection, provide an abstraction over loading/saving data both locally (in memory and to disk) and across the network (calling services or performing data sync). To this end, by supplying the minimum set of information (eg item id in the case of the contacts list scenario), the ViewModel is only reliant on that piece of information. This reduces the necessary testing surface area as there are few permutations of input data that need to be teted.

Now that we have an understanding of how to determine what data to pass between pages, we again need to come back to thinking in terms of states and passing data during a transition between states. If you recall, our ViewModels aren’t aware of states or the ability to change between them. All they’re able to do is indicate that they’re complete. In the following code, the MainViewModel exposes a public HelloWithTime property as well as a private AboutWithTime property, the former will be passed into the Settings state, the latter into the About state. You’ll observe that the OnComplete call for settings hasn’t been changed, whilst there is now a call to OnCompleteWithData, passing in the AboutWithTime property value, for completing with the About completion value.

public class MainViewModel : BaseViewModelWithCompletion<MainCompletion>
{
    public string HelloWithTime => $"Hello World at {DateTime.Now.ToString("h:mm tt")}";
    private string AboutWithTime => $"About information {DateTime.Now.ToString("h:mm tt")}";

    public void DisplaySettings()
    {
        OnComplete(MainCompletion.Settings);
    }
    public void DisplayAbout()
    {
        OnCompleteWithData(MainCompletion.About,AboutWithTime);
    }
}

Our state declaration now looks like the following:

var group = StateManager.GroupWithViewModels<AppStates>()
    .StateWithViewModel<AppStates, MainViewModel>(AppStates.Home)
        .OnCompleteWithData(MainCompletion.Settings,vm=>vm.HelloWithTime)
            .ChangeState(AppStates.Settings)
        .OnCompleteWithData< AppStates, MainViewModel,MainCompletion,string>(MainCompletion.About,null)
            .ChangeState(AppStates.About)
        .EndState()
    .StateWithViewModel<AppStates, SettingsViewModel>(AppStates.Settings)
        .OnComplete(DefaultCompletion.Complete).ChangeToPreviousState()
        .EndState()
    .StateWithViewModel<AppStates, AboutViewModel>(AppStates.About)
        .EndState();

(group.Item2.States[AppStates.Settings] as IViewModelStateDefinition<AppStates, SettingsViewModel>)
    .WhenChangedToWithData<AppStates, SettingsViewModel, string>((vm, d) => vm.SettingsTitle = d);

(group.Item2.States[AppStates.About] as IViewModelStateDefinition<AppStates, AboutViewModel>)
    .WhenChangedToWithData<AppStates, AboutViewModel, string>((vm, d) => vm.AboutTitle = d);

What’s interesting here is that there are two parts to passing data between states. The first is how the data is exposed out of the state that’s being completed. Here I’ve shown two ways – completion with Settings uses the public HelloWithTime property to retrieve the data to pass to the next state; completion with About can’t access the AboutWithTime property, since it’s private, which is why it relies on the MainViewModel to pass out the AboutWithTime value when it invokes OnCompleteWithData. Note that currently in the state declaration you still need to call OnCompleteWithData passing in a null value for the data accessor, otherwise the data value isn’t passed – this will be fixed shortly.

The second part of passing data between states is how the data is passed into the new state. This is done by calling the WhenChangedToWithData and specifying a function that will be invoked with the corresponding data. Note this method is a generic method and you can actually call it multiple times with different data types, which means that you can handle arriving at this state with different data (perhaps from different states). One thing to be aware of is that behind the scenes the data is being serialized to json, so whatever data you pass between states need to be serializable to json. Ideally the data being passed between states should be kept to a minimum.

Navigating Back using State History with BuildIt.Lifecycle

So far I’ve only discussed transitioning between states with an assumption that every transition is forward looking and that our state manager doesn’t track any sort of history. Other than simple applications, or poorly architected applications that don’t make use of the devices back navigation feature, it is a requirement for most applications to track the page/view/state that the user was previously in, allowing them to easily navigate back to where they just came from. This doesn’t fit into the normal concept of a finite state machine, since this wouldn’t normally have any “memory”. However, our state manager can easily be extended to include a history of which states have been visited.

Again, let’s start with updating the user interface on our simple application. On the settings page we didn’t have any way to get back to the main/home page of our application. I’ll add a new button, resulting in the following XAML and codebehind:

<Page x:Class="SimpleStates.Pages.SettingsPage"
      xmlns="
http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:SimpleStates.Pages"
      xmlns:d="
http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="d">
    <StackPanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <TextBlock Text="Settings Page"
                   VerticalAlignment="Center"
                   HorizontalAlignment="Center"
                   FontSize="40" />
        <Button Click="GoBackClick">Go Back</Button>
    </StackPanel>
</Page>

public sealed partial class SettingsPage
{
    public SettingsPage()
    {
        InitializeComponent();
    }
    private void GoBackClick(object sender, RoutedEventArgs e)
    {
        (DataContext as SettingsViewModel).Complete();
    }
}

The only change I needed to make to the SettingsViewModel is to change the back class. Note that in this case since there is only one way that the state can be exited, I’m going to use the built in DefaultCompletion enumeration, which has a single Complete value.

public class SettingsViewModel : BaseViewModelWithCompletion<DefaultCompletion>
{
    public void Complete()
    {
        OnComplete(DefaultCompletion.Complete);
    }
}

The only thing left to do is to update the state declaration for my application to change to the previous state when the Settings state is Complete, as follows:

StateManager.GroupWithViewModels<AppStates>()
    .StateWithViewModel<AppStates, MainViewModel>(AppStates.Home)
        .OnComplete(MainCompletion.Settings).ChangeState(AppStates.Settings)
        .OnComplete(MainCompletion.About).ChangeState(AppStates.About)
        .EndState()
    .StateWithViewModel<AppStates, SettingsViewModel>(AppStates.Settings)
        .OnComplete(DefaultCompletion.Complete).ChangeToPreviousState()
        .EndState()
    .StateWithViewModel<AppStates, AboutViewModel>(AppStates.About);

The state history feature does allow for skipping states that are in the history, so you can easily return to the start of an application by changing to the corresponding state using ChangeBackToState instead of ChangeState.

Note: The state history feature can be turned on/off on individual state groups. By default TrackHistory is disabled for regular state groups. State groups that have corresponding view models has TrackHistory enabled by default.