Develop Reference

How to use splitview's pane in visualstate to achieve adaptive effect in UWP?

I have a few navigation buttons inside StackPanel, I want to put them inside the splitview's pane. When the splitview's pane is open, the stackpanel's orientation is horizontal, and when the pane is closed the stackpanel's orientation is vertical so that user would always be able to see the navigation buttons.
The XAML code is as follows
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="PaneViewStates">
<VisualState x:Name="PaneClosedState">
<VisualState.StateTriggers>
<StateTrigger IsActive="{Binding Path=IsPaneOpen, ElementName=SplitView, Converter={StaticResource BooleanNegationConverter}}"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="NavigationControl.RootGrid.StackPanel.Orientation" Value="Vertical"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="PaneOpenState">
<VisualState.StateTriggers>
<StateTrigger IsActive="{Binding Path=IsPaneOpen, ElementName=SplitView}"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="NavigationControl.RootGrid.StackPanel.Orientation" Value="Horizontal"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
But I got the error like The attachable property 'IsPaneOpen' was not found in type 'SplitView'.
I got plane B, that is to use events like OnPaneClosing and OnPaneOpen, however there is only PaneClosing event, no openning event. I'm wondering if anyone can give any suggestion.

Adaptive triggers use MinWidth and MinHeight to check for trigger conditions. It doesn't check for any Boolean conditions. You need to use StateTrigger and bind IsPaneOpen to IsActive to trigger the "PaneOpenState". But if you want to trigger the "PaneClosedState", you cannot directly bind it to IsActive of the StateTrigger. You need to have some other State Triggers that are derived from StateTriggerBase Class, like these awesome WindowsStateTriggers. I am using IsFalseStateTrigger from the above said collection.
The code should be like:
<Page ...
xmlns:triggers="using:WindowsStateTriggers">
...
<VisualState x:Name="PaneOpenState">
<VisualState.StateTriggers>
<StateTrigger IsActive="{Binding IsPaneOpen, ElementName=MySplit}"/>
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="NavigationControl.RootGrid.StackPanel.Orientation" Value="Horizontal"/>
</VisualState.Setters>
</VisualState>
<VisualState x:Name="PaneClosedState">
<VisualState.StateTriggers>
<triggers:IsFalseStateTrigger Value="{Binding ElementName=MySplit, Path=IsPaneOpen}" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="NavigationControl.RootGrid.StackPanel.Orientation" Value="Vertical"/>
</VisualState.Setters>
</VisualState>
Edit
After one of our friends pointed out, I came to know that I forgot the most obvious way to do this instead of using IsFalseStateTrigger. You can use a converter like NotTrueConverter that negates the Boolean and use it in the "PaneClosedState" using the StateTrigger

How do you maintain changes made by VisualState triggers after setting another VisualState?

Not sure if am framing the question right. So please bear with me if I'm expecting something absurd. I am building a C#/XAML win10 UWP application following the MVVM pattern.
I've some visual states defined for handling wider screens and also some for running some animations. The problem am facing is that, when the visual state to run the animation is called using the VisualStateManager's GoToState method, the setters effected by the VisualState containing the adaptive triggers are lost.
Here's the sample code:
//Defining my grid here
<Grid x:Name="gridNewDrawing" Margin="4">
<Button x:Name="Confirm" Click="Button_Confirm_Click" Width="180" MaxWidth="220" Height="36" HorizontalAlignment="Left" Style="StaticResource StyleButtonGeneral}"/>
<Button x:Name="Cancel" Click="Button_Cancel_Click" Width="180" MaxWidth="220" Height="36" HorizontalAlignment="Left" Style="StaticResource StyleButtonGeneral}"/>
</Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="WideLayoutTrigger">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="640" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="gridNewDrawing.Margin" Value="16" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="AnimationState">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Cancel" Storyboard.TargetProperty="Visibility" Duration="0">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
When the width is above 640px; the margin on the gridNewDrawing switches to 16; but when I explicitly call the animation using
GoToState("AnimationState")
The margin on the grid defaults to 4 once again. Is there any way I can have the changes made by the adaptivetrigger persist when setting other visual styles?

The margin of the grid changes to default again because your VisualState are in same VisualStateGroup. You can set the AnimationState in another VisualStateGroup to maintain changes made by the AdaptiveTrigger.
See the Remarks of VisualStateGroup class.
The set of visual states within each VisualStateGroup should be mutually exclusive in the group. In other words, the control should be using exactly one of the visual states from each of its defined VisualStateGroup groups at all times. Whenever there's a case where a control is intended to be simultaneously in two states, make sure that the two states are in different groups.
So apply the following code should get what you want:
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="WindowStates">
<VisualState x:Name="WideLayoutTrigger">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="640" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="gridNewDrawing.Margin" Value="16" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="OtherStates">
<VisualState x:Name="AnimationState">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="Cancel" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>

state manager for xaml SplitView pane inside frame

That's kind of a long title.
So i have a Shell.xaml with a for the content .xaml's
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="720" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="ShellSplitView.DisplayMode" Value="CompactInline"/>
</VisualState.Setters>
</VisualState>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="ShellSplitView.DisplayMode" Value="Overlay"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<SplitView x:Name="ShellSplitView">
<SplitView.Pane>
<Grid>
<ListView x:Name="NavMenuList">
...
</ListView>
</Grid>
</SplitView.Pane>
<Frame x:Name="ContentFrame">
</Frame>
</SplitView>
</Grid>
Inside this Frame other .xaml's are loadad for the actual content. Those also use a (to add further depth, like the mail app: folder->email list->email view) but if i add a to that nested xaml it doesn't do anything.
My goal would be to have it behave like two separate frames when in small view (like phone), so the user can navigate between them (again, like the win10 mail app).
Right now the VisualStateManager of the Frame xaml looks like this, but this was just a test to see it working. As I mentioned I'd prefer a similar behaviour to the mail app.
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="720" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="PeopleSplitView.DisplayMode" Value="Inline"/>
</VisualState.Setters>
</VisualState>
<VisualState>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="0" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="PeopleSplitView.DisplayMode" Value="CompactInline"/>
<Setter Target="PeopleSplitView.IsPanelOpen" Value="False"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
Also when resizing the Window, the content of the frame splitview content doesn't resize itself and stays full width (thus not wrapping the text).
<SplitView x:Name="PeopleSplitView"
DisplayMode="Inline"
IsPaneOpen="True"
OpenPaneLength="400"
CompactPaneLength="48">
<SplitView.Pane></SplitView.Pane>
<SplitView.Content>
<Grid Padding="0">
<ListView.../>
</Grid>
</SplitView.Content>
</SplitView>

you need to delete this element of your c# code that is found in the event of the listview that selects the frames
i think this should help you
private void ListViewSplit_Tapped(object sender,TappedRoutedEventArgs e)
{
//delete those lines
if (MySplitView.IsPaneOpen)
MySplitView.IsPaneOpen = !MySplitView.IsPaneOpen;
}

Windows Phone listbox selected item transition

In a Windows Phone 8 app, I would like to use the animation / transition /effect used into the Windows Phone Store app when an item is selected.
Here the explanation of the animation / transition :
open the Official Windows Phone Store app
do a research
in the list of results click on an app
watch the behaviour of the title of the app (it is going on the bottom right to reappear on the page with an animation too).
I am pretty sure that I have seen this effect on several other apps. So my question could be stupid, but is there a method or something into the SDK to do this effect / animation / transition or should I do "manually" ?
Thank you in advance for your tips about the subject !

I had searched for this as well some times back but could not find any template that I need to apply in order to get the same result.
At the end, I was creating my own animations to get a similar effect.
I have a Button control which is used for a selection within my list. For the button template, I applied my own style that contains the following defintion for Visual State changes:
You can create button templates and style templates in Blend.
<Style x:Key="LongListSelectorButtonStyle" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="(Border.RenderTransform).(TranslateTransform.Y)"
Storyboard.TargetName="ButtonBackground"
From="0"
To="-6"
Duration="00:00:0.04"/>
<DoubleAnimation Storyboard.TargetProperty="(Border.RenderTransform).(TranslateTransform.X)"
Storyboard.TargetName="ButtonBackground"
From="0"
To="2"
Duration="00:00:0.04"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
This animation will move the button a bit to the top right from its current position. You can change the animation to any other direction.

VisualStateManager in user control

I design an application for Windows RT. I used VisualStateManager for snapped in a user control. but when my application snapped the user control is not changed. where is the problem?
<Grid Width="500" Height="40" Margin="15" x:Name="questionRoot" Background="DarkSeaGreen">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" >
<TextBlock x:Name="OrginalWord" FontSize="32" Text="{Binding Question.OrginalWord}"></TextBlock>
</StackPanel>
<VisualStateManager.VisualStateGroups>
<!-- Visual states reflect the application's view state -->
<VisualStateGroup x:Name="ApplicationViewStates">
<VisualState x:Name="FullScreenLandscape"/>
<VisualState x:Name="Filled"/>
<!-- The entire page respects the narrower 100-pixel margin convention for portrait -->
<VisualState x:Name="FullScreenPortrait"/>
<!--
The back button and title have different styles when snapped, and the list representation is substituted
for the grid displayed in all other view states
-->
<VisualState x:Name="Snapped">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="OrginalWord" Storyboard.TargetProperty="FontSize">
<DiscreteObjectKeyFrame KeyTime="0" Value="88"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>

Are you calling the VisualStateManager.GoToState method in codebehind? You need to detect when the application transitions from Full/Fill to Snap mode, and call this method then.
You'll find the MSDN documentation for this function here.
You generally recognize this transition when the size of your Page parent control or application Window changes. This SO question (look at the answer by Jowen) gives you a code snippet on how to do this by listening to the Window's size changed event.

I had a similar issue I found a solution that helped me and may be someone find it useful if the usercontrol is hosted in layoutawarepage
<my:usercontrole Loaded="StartLayoutUpdates" Unloaded="StopLayoutUpdates" />
otherwise you will have to de the follow (example can be found in the layout aware page)
•make event handler on sizechanged
•in the event handler check the viewstate with ApplicationView.Value
•move to that state with VisualStateManager.GoToState