Visual States in XForms with BuildIt.Lifecycle

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 http://xamarin.com/schemas/2014/forms"”>http://xamarin.com/schemas/2014/forms”
             http://schemas.microsoft.com/winfx/2009/xaml"”>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);
    }

Leave a Reply

Your email address will not be published. Required fields are marked *