I have UWP app.
<GridView Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" x:Name="GridColections" IsItemClickEnabled="True" SelectionMode=" None " ItemsSource="{x:Bind DS.AllRem, Mode=OneWay}" ItemClick="GridColections_ItemClick" >
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="Small">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="RemXML.Background" Value="Red" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Middle">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="400"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="RemXML.Background" Value="Green"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Big">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="500"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="RemXML.Background" Value="Yellow"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<GridView.ItemTemplate>
<DataTemplate x:DataType="local:GetRem">
<RelativePanel x:Name="RemXML" Width="345" Background="Cyan">
<TextBlock TextWrapping="Wrap" Text="{x:Bind ReminderName}" Margin="5,5,0,0" RelativePanel.AlignLeftWithPanel="True" FontSize="20" />
<TextBlock TextWrapping="Wrap" Text="{x:Bind ReminderDescription}" Margin="6,35,0,0" RelativePanel.AlignLeftWithPanel="True" FontSize="13.333"/>
<CheckBox RelativePanel.AlignRightWithPanel="True" Margin="100,0,-200,0" Width="220" RelativePanel.AlignVerticalCenterWithPanel="True">
<CheckBox.RenderTransform>
<CompositeTransform ScaleX="-1"/>
</CheckBox.RenderTransform>
</CheckBox>
</RelativePanel>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
So adaptive triggers don't work in my app. I need to change RelativePanel background. When Visual state I have in first control I have ERROR "An animation is trying to modify an object named 'RemXML', but no such object can be found in the Page." When Visual State I have in RelativePanel is don't work
Try putting the VisualStateManager inside of the DataTemplate which has a UserControl as top element.
<GridView.ItemTemplate>
<DataTemplate x:DataType="local:GetRem">
<UserControl>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="Small">
......
</VisualStateManager.VisualStateGroups>
<RelativePanel x:Name="RemXML" Width="345" Background="Cyan">
Related
I have a Collectionview like so:
<CollectionView SelectionMode="Single" WidthRequest="200" HeightRequest="144" x:Name="listViewLanguageMenu" HorizontalOptions="End" VerticalOptions="Start" ItemSizingStrategy="MeasureAllItems">
<CollectionView.ItemTemplate >
<DataTemplate >
<StackLayout Style="{StaticResource languageMenuStyle}" HeightRequest="40" Padding="25,4,5,4" Margin="0" Spacing="0" HorizontalOptions="End" VerticalOptions="Center" Orientation="Horizontal">
<Image VerticalOptions="CenterAndExpand" Aspect="AspectFit" Source="{Binding ImageSourceLanguage}"></Image>
<Label VerticalOptions="CenterAndExpand" FontSize="18" Margin="5,0,0,0" VerticalTextAlignment="Center" Text="{Binding LanguageName}"></Label>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
If I set the background inside the Style like so:
<Style TargetType="StackLayout" x:Key="languageMenuStyle">
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Property="SelectableItemBackground" Value="{StaticResource buttonBackgroundColor}"/>
<Setter Property="Visual" Value="Material"></Setter>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Normal" >
<VisualState.Setters>
<Setter Property="Visual" Value="Material"></Setter>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
The selection color has now succesfully changed but I no longer have the Material Ripple that the standard color has on selection. How do I change the selection color and have the material ripple?
Thanks.
Greetings,
Yme
I use your code to test, you create languageMenuStyle style for stacklayout, but stacklayout don't have SelectableItemBackground property, I modify languageMenuStyle for stacklayout, the collectionview still have material ripple when changing the collectionview selection color.
<Style x:Key="languageMenuStyle" TargetType="StackLayout">
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Selected">
<VisualState.Setters>
<Setter Property="BackgroundColor" Value="Green" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>
I have a custom user control which is like a icon button with text. I want it to have the same PointerOver and Pressed animations as AppBarButton but the VisualStateManager doesn't seem to be working.
This is the xaml of the control:
<UserControl
x:Class="SMPlayer.IconTextButton"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="using:SMPlayer"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
d:DesignHeight="300"
d:DesignWidth="400"
mc:Ignorable="d">
<Grid
x:Name="Root"
Background="{x:Bind Background}"
CornerRadius="{x:Bind CornerRadius}"
Tapped="Root_Tapped">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Viewbox
x:Name="ContentViewbox"
Grid.Column="1"
Height="{ThemeResource AppBarButtonContentHeight}"
HorizontalAlignment="Stretch"
VerticalAlignment="Center"
AutomationProperties.AccessibilityView="Raw">
<ContentPresenter
x:Name="IconContent"
Content="{x:Bind Icon}"
Foreground="{x:Bind Foreground}" />
</Viewbox>
<TextBlock
x:Name="LabelTextBlock"
Grid.Column="2"
Margin="0,0,10,0"
VerticalAlignment="Center"
AutomationProperties.AccessibilityView="Raw"
FontSize="{x:Bind FontSize}"
FontWeight="{x:Bind FontWeight}"
Foreground="{x:Bind Foreground}"
Text="{x:Bind Label}"
TextAlignment="Center"
TextWrapping="Wrap" />
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Target="Root.CornerRadius" Value="20" />
</VisualState.Setters>
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="ContentRoot" />
</Storyboard>
</VisualState>
<VisualState x:Name="PointerOver">
<VisualState.Setters>
<Setter Target="Root.(RevealBrush.State)" Value="PointerOver" />
<Setter Target="Root.Background" Value="{ThemeResource AppBarButtonRevealBackgroundPointerOver}" />
<Setter Target="IconContent.Foreground" Value="{ThemeResource AppBarButtonForegroundPointerOver}" />
<Setter Target="LabelTextBlock.Foreground" Value="{ThemeResource AppBarButtonForegroundPointerOver}" />
</VisualState.Setters>
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="LabelTextBlock" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<VisualState.Setters>
<Setter Target="Root.(RevealBrush.State)" Value="Pressed" />
<Setter Target="Root.Background" Value="{ThemeResource AppBarButtonRevealBackgroundPressed}" />
<Setter Target="IconContent.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}" />
<Setter Target="LabelTextBlock.Foreground" Value="{ThemeResource AppBarButtonForegroundPressed}" />
</VisualState.Setters>
<Storyboard>
<PointerDownThemeAnimation Storyboard.TargetName="LabelTextBlock" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</UserControl>
What is wrong with my code? Thanks in advance!
UWP Visual State Manager Not Working for PointerOver and Pressed States
Please check this document, you need to use VisualStateManager invoke GoToState method to transition between states in the code behind within the matched event handler .
VisualStateManager.GoToState(this, "PointerOver", useTransitions);
I am loocking to do a responsive desing on my uwp project.
The idea is on PC get my StackPanel_ListViews below the StackPanel_CommandBar.
And on mobile get my StackPanel_CommandBar below the StackPanel_ListViews.
Both StackPanels are inside of a Pivot.
This is my code:
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="VisualStateGroup">
<VisualState x:Name="Mobile">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="StackPanel_CommandBar.(RelativePanel.Below)" Value="StackPanel_ListViews"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Pc">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="800"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="StackPanel_ListViews.(RelativePanel.Below)" Value="StackPanel_CommandBar"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<StackPanel>
<controls:PageHeader x:Name="pageHeader" RelativePanel.AlignLeftWithPanel="True"
RelativePanel.AlignRightWithPanel="True"
RelativePanel.AlignTopWithPanel="True" Text="Tittle">
</controls:PageHeader>
<Pivot x:Name="MainPivot">
<PivotItem>
<RelativePanel>
<StackPanel Orientation="Vertical" x:Name="StackPanel_CommandBar" RelativePanel.AlignLeftWithPanel="True" RelativePanel.AlignRightWithPanel="True">
</StackPanel>
<StackPanel Orientation="Vertical" x:Name="StackPanel_ListViews" RelativePanel.Below="StackPanel_CommandBar" RelativePanel.AlignLeftWithPanel="True" RelativePanel.AlignRightWithPanel="True">
</StackPanel>
</RelativePanel>
</PivotItem>
</Pivot>
</StackPanel>
StackPanel_ListViews is a stackpanel contains 2 ListViews.
StackPanel_CommandBar is a stackpanel contains a CommandBar.
Using this code I have no results, and using a above and below I am geting a circular error.
What I am doing wrong, how I can get it work as I say above?
Any help is appreciated.
I think you've made a tiny mistake here by your second StackPanel "StackPanel_ListViews".
You've set RelativePanel.Below="StackPanel_CommandBar" at first, but when the layout is rendered, at the very beginning, the window's width is 0, this will cause conflicts with the Setter in your <VisualState x:Name="Mobile">, and throw an exception. You can just remove this RelativePanel.Below="StackPanel_CommandBar" code and it will works fine.
I want to use the VisualStateManager to change the appearance of my listbox items. I created a simplified example. When the listbox or listbox items got only space for width = 500 it should set for example the background to Beige otherwise to Green.
I tried the following and some other variations but neither of them worked. Has anyone a idea how to fix this?
<ListBox Grid.Column="0">
<ListBoxItem>asdfasf</ListBoxItem>
<ListBoxItem>fasf</ListBoxItem>
<ListBoxItem>fasf</ListBoxItem>
<ListBoxItem>asdsf</ListBoxItem>
<ListBoxItem>aasf</ListBoxItem>
<ListBox.ItemTemplate>
<DataTemplate>
<ContentControl>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="visualStateGroup" >
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="500" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="PathTextBlock.Text" Value="a" />
<Setter Target="border.Background" Value="Beige" />
</VisualState.Setters>
</VisualState>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="PathTextBlock.Text" Value="b" />
<Setter Target="border.Background" Value="Green" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentControl.Content>
<Border x:Name="border" >
<TextBlock x:Name="PathTextBlock" Text="{Binding RelativeSource={RelativeSource Mode=None}}" />
</Border>
</ContentControl.Content>
</ContentControl>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I tried to adopt:
https://stackoverflow.com/a/32092547/740651
The easiest way I find to do this is to create a UserControl of your DataTemplate code. So something like this
<UserControl x:class="MyListBoxControl">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="visualStateGroup" >
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="500" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="PathTextBlock.Text" Value="a" />
<Setter Target="border.Background" Value="Beige" />
</VisualState.Setters>
</VisualState>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="PathTextBlock.Text" Value="b" />
<Setter Target="border.Background" Value="Green" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="border" >
<TextBlock x:Name="PathTextBlock" Text="{Binding RelativeSource={RelativeSource Mode=None}}" />
</Border>
</Grid>
</UserControl>
and then add to your ListBox ItemTemplate. The Visual States will then work accordingly. Note you will need to create a reference to where your UserControls are stored at the top of your page something like xmlns:myUserControls="[location of your controls]"
<ListBox Grid.Column="0">
<ListBoxItem>asdfasf</ListBoxItem>
<ListBoxItem>fasf</ListBoxItem>
<ListBoxItem>fasf</ListBoxItem>
<ListBoxItem>asdsf</ListBoxItem>
<ListBoxItem>aasf</ListBoxItem>
<ListBox.ItemTemplate>
<DataTemplate>
<myUserControls:MyListBoxControl />
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Usually we don’t manipulate the ListBox's item directly, the common way is adding the items to the ObservableCollection and set ItemSource property of ListBox to bind to the ObservableCollection.
If you use the ItemSource, you can use the UserControl like #SWilko said. But it does not need to use the RelativeSource.
For example, I create a Person class, and it has a property Name. I use <TextBlock x:Name="PathTextBlock" Text="{Binding name}" /> replace <TextBlock x:Name="PathTextBlock" Text="{Binding RelativeSource={RelativeSource Mode=None}}" />.
If you want to add the ListBox’s item directly, and use the VisualStateManager to change the appearance of the ListBox items. You can edit the ItemContainerStyle.
To modify the template of ListBoxItem, we can select the ListBox in "Document Outline" and right click, then select "Edit Additional Templates"→ "Edit Generated Item Container (ItemContainerStyle)" → "Edit a Copy...".
You can create a VisualStateGroup into the <VisualStateManager.VisualStateGroups>.
For example:
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
...
</VisualStateGroup>
<VisualStateGroup>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="600" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="PathTextBlock.Text" Value="a" />
<Setter Target="border.Background" Value="Beige" />
</VisualState.Setters>
</VisualState>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="PathTextBlock.Text" Value="b" />
<Setter Target="border.Background" Value="Green" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
And you can edit the ContentPresenterlike:
<ContentPresenter x:Name="ContentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Style="{StaticResource BodyContentPresenterStyle}" TextWrapping="NoWrap" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<Border Name="border">
<TextBlock Name="PathTextBlock" Text="{TemplateBinding Content}"></TextBlock>
</Border>
</ContentPresenter>
By the way, you set the MinWindowWidth property to 500 of AdaptiveTrigger, the effect will not obvious. You can set it to 600.
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?
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...
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>