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.
