SplitView without Light Dismiss layer

I had an issue recently in a UWP application that used a SplitView. The requirement for this application was to allow the SplitView to be expanded while still allowing the main content to be interactive and more importantly, for the list in the main content to be scrollable. However, normally when the SplitView pane is open, the main content is not accessible – tapping anywhere outside of the SplitView pane just collapses it.

I spent a frustrating amount of time trying to see if there were any events that could be intercepted or overridden to cancel the closing of the SplitView pane when the content area is tapped. As usual a much simpler solution was available – editing the template.

In Visual Studio, right click on the SplitView control in the Document outline and choose Edit Template and then Edit a Copy.

<ControlTemplate x:Key="TestSplitViewControlTemplate1" TargetType="SplitView">
    <Grid Background="{TemplateBinding Background}">
	<VisualStateManager.VisualStateGroups>
	
	    ...
			
	</VisualStateManager.VisualStateGroups>
	<Grid.ColumnDefinitions>
	    <ColumnDefinition x:Name="ColumnDefinition1" Width="{Binding TemplateSettings.OpenPaneGridLength, FallbackValue=0, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
	    <ColumnDefinition x:Name="ColumnDefinition2" Width="*" />
        </Grid.ColumnDefinitions>

	<!-- Pane Content Area -->
	<Grid x:Name="PaneRoot"
		Grid.ColumnSpan="2"
		HorizontalAlignment="Left"
		Visibility="Collapsed"
		Background="{TemplateBinding PaneBackground}"
		Width="{Binding TemplateSettings.OpenPaneLength, RelativeSource={RelativeSource Mode=TemplatedParent}}"
		Canvas.ZIndex="1">
	    <Grid.Clip>
		<RectangleGeometry x:Name="PaneClipRectangle">
		    <RectangleGeometry.Transform>
			<CompositeTransform x:Name="PaneClipRectangleTransform" />
	            </RectangleGeometry.Transform>
	        </RectangleGeometry>
            </Grid.Clip>
	    <Grid.RenderTransform>
	        <CompositeTransform x:Name="PaneTransform" />
	    </Grid.RenderTransform>
	    <Border Child="{TemplateBinding Pane}" />
	    <Rectangle x:Name="HCPaneBorder"
		x:DeferLoadStrategy="Lazy"
		Visibility="Collapsed"
		Fill="{ThemeResource SystemControlForegroundTransparentBrush}"
		Width="1"
		HorizontalAlignment="Right" />
        </Grid>

	<!-- Content Area -->
	<Grid x:Name="ContentRoot" Grid.ColumnSpan="2">
	    <Border Child="{TemplateBinding Content}">
            <Rectangle x:Name="LightDismissLayer" Fill="Transparent" Visibility="Collapsed" />
            </Border>
	</Grid>
    </Grid>
</ControlTemplate>

In the template there is a Rectangle element called LightDismissLayer. This is what was responsible for swallowing any touch input while the SplitView was expanded. Commenting this out (and any references to it in the template) immediately fixed the problem! Now when the SplitView is open the main content is still accessible and I can scroll my list.

Of course, now that the LightDismissLayer is missing the SplitView won’t automatically close. In my case this was handled by a specific button to open and close it.