UWP: Issues with SplitView with VisualStateManager - xaml

Question

I have been struggling with SplitView control while trying to create a sample (and simple!) UW App. First the list of issues and then the code:
I am using VisualStateManager to control the DisplayState and Pane Visibility. So I do not use the corresponding attributes (DisplayMode and IsPaneOpen) in the XAML.
Issues Faced:
a. Sometimes the designer shows Exception from HRESULT: 0x88000FA8
b. The Pane is always in Closed state - in Designer and in Runtime.
c. I was also getting a runtime exception showing Debugger code but after restarting Visual Studio it's stopped.
If I add the two attributes in the XAML markup (commenting out VisualStateManager) then for the following combination the Hamburger button does not work: IsPaneOpen="False" DisplayMode="Overlay". The code for the Hamburger button is plain vanilla - MainSplitView.IsPaneOpen = !MainSplitView.IsPaneOpen;
Markup:
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="721" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="MainSplitView.DisplayMode" Value="Inline" />
<Setter Target="MainSplitView.IsPaneOpen" Value="True" />
</VisualState.Setters>
</VisualState>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="548" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="MainSplitView.DisplayMode" Value="CompactOverlay" />
<Setter Target="MainSplitView.IsPaneOpen" Value="True" />
</VisualState.Setters>
</VisualState>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="MainSplitView.DisplayMode" Value="Overlay" />
<Setter Target="MainSplitView.IsPaneOpen" Value="False" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<RelativePanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Button Name="HamBurgerButton" Background="Transparent" Padding="0,-6" Margin="12" Click="HamBurgerButton_Click">
<FontIcon FontFamily="{ThemeResource ContentControlThemeFontFamily}"
Glyph="≡" FontSize="32" Margin="0,-8,0,0"/>
</Button>
<TextBlock RelativePanel.RightOf="HamBurgerButton"
Style="{ThemeResource TitleTextBlockStyle}" Margin="5,0,0,0"
Text="Title"/>
<SplitView x:Name="MainSplitView" PaneBackground="{ThemeResource ApplicationPageBackgroundThemeBrush}"
RelativePanel.AlignLeftWithPanel="True" RelativePanel.AlignRightWithPanel="True"
RelativePanel.Below="HamBurgerButton" OpenPaneLength="200" CompactPaneLength="50">
<SplitView.Pane>
<StackPanel Orientation="Horizontal" Background="Gray">
<AppBarButton x:Name="AboutButton" Icon="Important" IsCompact="True" Click="AboutButton_Click"/>
<TextBlock Text="About"/>
</StackPanel>
</SplitView.Pane>
<SplitView.Content>
<ScrollViewer VerticalScrollBarVisibility="Auto" VerticalScrollMode="Auto"
HorizontalScrollBarVisibility="Disabled" HorizontalScrollMode="Disabled">
<Frame x:Name="ContentFrame"/>
</ScrollViewer>
</SplitView.Content>
</SplitView>
</RelativePanel>
So can somebody either confirm that these issues can be replicated at their end (i.e. they are bugs) or that I am wrong somewhere or there are workarounds available?

Answer 1

This code will work...
<RelativePanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Button Name="HamBurgerButton" Background="Transparent" Padding="0,-6" Margin="12" Click="HamBurgerButton_Click">
<FontIcon FontFamily="{ThemeResource ContentControlThemeFontFamily}"
Glyph="≡" FontSize="32" Margin="0,-8,0,0"/>
</Button>
<TextBlock RelativePanel.RightOf="HamBurgerButton"
Style="{ThemeResource TitleTextBlockStyle}" Margin="5,0,0,0"
Text="Title"/>
<SplitView x:Name="MainSplitView" IsPaneOpen="False" PaneBackground="{ThemeResource ApplicationPageBackgroundThemeBrush}"
RelativePanel.AlignLeftWithPanel="True" RelativePanel.AlignRightWithPanel="True"
RelativePanel.Below="HamBurgerButton" OpenPaneLength="200" CompactPaneLength="50">
<SplitView.Pane>
<StackPanel Orientation="Horizontal" Background="Gray">
<AppBarButton x:Name="AboutButton" Icon="Important" IsCompact="True" Click="AboutButton_Click"/>
<TextBlock Text="About"/>
</StackPanel>
</SplitView.Pane>
<SplitView.Content>
<ScrollViewer VerticalScrollBarVisibility="Auto" VerticalScrollMode="Auto"
HorizontalScrollBarVisibility="Disabled" HorizontalScrollMode="Disabled">
<Frame x:Name="ContentFrame"/>
</ScrollViewer>
</SplitView.Content>
</SplitView>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="721" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="MainSplitView.DisplayMode" Value="Inline" />
<Setter Target="MainSplitView.IsPaneOpen" Value="True" />
</VisualState.Setters>
</VisualState>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="548" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="MainSplitView.DisplayMode" Value="CompactOverlay" />
<Setter Target="MainSplitView.IsPaneOpen" Value="True" />
</VisualState.Setters>
</VisualState>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="MainSplitView.DisplayMode" Value="Inline" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</RelativePanel>
The hamburger button did not work when width was between 0 and 548 because the mode is set to overlay... actually the pane had been opened and closed outside the frame...that's why it was not visible which made you to think that the button was not working. It isn't a bug in splitview... If it doesnt work comment...will help yo...

Answer 2

I dont think your Adaptive Trigger is working after all. Place it inside the relativePanel and see if it gets triggered.
<RelativePanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Button Name="HamBurgerButton" Background="Transparent" Padding="0,-6" Margin="12" Click="HamBurgerButton_Click">
<FontIcon FontFamily="{ThemeResource ContentControlThemeFontFamily}"
Glyph="≡" FontSize="32" Margin="0,-8,0,0"/>
</Button>
<TextBlock RelativePanel.RightOf="HamBurgerButton"
Style="{ThemeResource TitleTextBlockStyle}" Margin="5,0,0,0"
Text="Title"/>
<SplitView x:Name="MainSplitView" PaneBackground="{ThemeResource ApplicationPageBackgroundThemeBrush}"
RelativePanel.AlignLeftWithPanel="True" RelativePanel.AlignRightWithPanel="True"
RelativePanel.Below="HamBurgerButton" OpenPaneLength="200" CompactPaneLength="50">
<SplitView.Pane>
<StackPanel Orientation="Horizontal" Background="Gray">
<AppBarButton x:Name="AboutButton" Icon="Important" IsCompact="True" Click="AboutButton_Click"/>
<TextBlock Text="About"/>
</StackPanel>
</SplitView.Pane>
<SplitView.Content>
<ScrollViewer VerticalScrollBarVisibility="Auto" VerticalScrollMode="Auto"
HorizontalScrollBarVisibility="Disabled" HorizontalScrollMode="Disabled">
<Frame x:Name="ContentFrame"/>
</ScrollViewer>
</SplitView.Content>
</SplitView><VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="721" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="MainSplitView.DisplayMode" Value="Inline" />
<Setter Target="MainSplitView.IsPaneOpen" Value="True" />
</VisualState.Setters>
</VisualState>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="548" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="MainSplitView.DisplayMode" Value="CompactOverlay" />
<Setter Target="MainSplitView.IsPaneOpen" Value="True" />
</VisualState.Setters>
</VisualState>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="MainSplitView.DisplayMode" Value="Overlay" />
<Setter Target="MainSplitView.IsPaneOpen" Value="False" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</RelativePanel>