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:
VisualStateManager
to control the DisplayState
and Pane
Visibility. So I do not use the corresponding attributes (DisplayMode
and IsPaneOpen
) in the XAML.Exception from HRESULT: 0x88000FA8
Closed
state - in Designer and in Runtime.Debugger
code but after restarting Visual Studio it's stopped.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?
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...