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”
“>“
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);
}