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=”” />
<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>