VisualStateManager does not revert to original state - xaml

The following definition is used as ItemContainer style for a GridView, SelectionMode "Single". When an element is selected, a particular glyph becomes visible to indicate selection.
It works right with Windows 8.1, but with UWP, it accepts changed state: Selected makes the glyph to appear, but does not revert to the original state (state Unselected), glyph stays with selection changed, even though SelectionChanged event brings the old selection as removed item.
Similar problems exist for other states (like Pressed and Focused), I just don't show the full VisualStateManager for simplicity.
<Style x:Key="MyItemContainerStyle" TargetType="SelectorItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="SelectorItem">
<Border>
<Grid>
<!-- Layout of the grid -->
</Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected" />
<VisualState x:Name="SelectedUnfocused">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="SelectingGlyph"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0" />
</Storyboard>
</VisualState>
<VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="SelectingGlyph"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Tried also
<VisualState x:Name="Unselected">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="SelectingGlyph"
Storyboard.TargetProperty="Opacity"
To="0"
Duration="0" />
</Storyboard>
</VisualState>
But didn't help.

According to the code you've posted, it seems you are using VisualStateGroup and VisualStates defined in Windows 8.1. However, in UWP, these VisualStates have been changed.
In GridViewItem styles and templates, it lists all the VisualStates defined in the control's default style. As you can see, in UWP, there is no "SelectionStates" VisualStateGroup and also no "Unselected" VisualState. So your code won't work in UWP.
To solve your problem, I'd suggest you rewrite your style according to the new GridViewItem styles and templates used in UWP. And in the new style, "Normal" and "Selected" visual state are in the same visual state group. So you can show "SelectingGlyph" in "Selected" and hide it in "Normal" like:
<VisualState x:Name="Normal">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="SelectingGlyph"
Storyboard.TargetProperty="Opacity"
To="0"
Duration="0" />
<PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" />
</Storyboard>
</VisualState>
...
<VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="SelectingGlyph"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0" />
...
</Storyboard>
</VisualState>

Related

How to change the default style of CheckBox control in Universal Windows Platform?

I don't know how to change the Checkbox's Default color.I coded this line for Checkbox
<CheckBox x:Name="chkRememberme" Foreground="Gray" Grid.Row="4" Background="Transparent" IsChecked="False" TabIndex="3" HorizontalAlignment="Center" VerticalAlignment="Top" Background="Blue" Margin="0,2,0,0" />
In the below image, I have mentioned the style of Checkbox I require.
Open designer window, right click on your CheckBox, then choose Edit template -> Edit a copy (or do the same in Blend). This should create default style in your resources (you can find the style also here at MSDN).
In the style you will find everything you want. The background color you are looking for is changed by VisualStateManager - edit suitable visual states and it should work. Sample - changed value of NormalRectangle.Fill property to SystemControlBackgroundBaseLowBrush:
<VisualState x:Name="CheckedNormal">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="NormalRectangle">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Duration="0" To="{ThemeResource CheckBoxCheckedStrokeThickness}" Storyboard.TargetProperty="StrokeThickness" Storyboard.TargetName="NormalRectangle"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke" Storyboard.TargetName="NormalRectangle">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltTransparentBrush}"/>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="CheckGlyph"/>
</Storyboard>
</VisualState>
Sample image:
Note also that you may need to edit also other visual states than the one mentioned above - it depends on your need.

Change button style with VisualStateManager

I am working on a Universal Windows App.
I want to change the Style of my button under different states but I cant figure out (I'm new to this)
Here is my visual state group
<VisualStateGroup x:Name="StartStopTimer">
<VisualState x:Name="Start">
</VisualState>
<VisualState x:Name="Stop">
<VisualState.Setters>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
I have two styles setup called StartButtonStyle and StopButtonStyle.
So I want to change the buttons style to StopButonStyle in the Stop visual state and StartButtonStyle in the Start visual state.
How do I do this? I tried with record on in Expression Blend but it doesn't apply anything to my visual state.
Here you are:
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="StartStopTimer">
<VisualState x:Name="Start">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="TestButton"
Storyboard.TargetProperty="Style">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource StartButtonStyle}">
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Stop">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="TestButton"
Storyboard.TargetProperty="Style">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{StaticResource StopButtonStyle}">
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
Of course you need to have defined your styles in the resources, for example in page resources.
Please don't forget to mark my reply as an answer.

VisualState commonState doesn´t work xaml

I have this XAML view. The VisualStateGroups for the visual triggers
works fine, but the VisualStateGroup for the common states doesn't.
I try assign to a rectangle in the beginning and then neither work. In other views this works fine .. :(
<view:NavigationStoredPage.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/Styles/ResponsiveStyles.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</view:NavigationStoredPage.Resources>
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="rer">
<DiscreteObjectKeyFrame KeyTime="0" Value="#121212"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="rer">
<DiscreteObjectKeyFrame KeyTime="0" Value="#121212"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle Fill="Red" x:Name="rer" Width="100" Height="100" HorizontalAlignment="Left" Canvas.ZIndex="99" VerticalAlignment="Top" />
Your code actually has to transition to one of these CommonStates using VisualStateManager.GoToState() for the state to transition. It happens automatically for a control like Button because somewhere in the Button class or its base class - there is a call to GoToState().

Closed VisualState for ComboBox in Windows 10, animations not played

I have a problem with Closed VisualState for ComboBox. Animations in Closed state are being played only for the first time.
ComboBox opened for the first time [all animations OK]
ComboBox opened for the second time [no Closed animations]
Here's XAML I'm using:
<VisualStateGroup x:Name="DropDownStates">
<VisualState x:Name="Opened">
<Storyboard>
<SplitOpenThemeAnimation ClosedTargetName="ContentPresenter"
OpenedTargetName="PopupBorder"
ClosedLength="0"
OpenedLength="{Binding TemplateSettings.DropDownOpenedHeight, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
<ColorAnimation To="Transparent"
Duration="0:0:0.1"
Storyboard.TargetProperty="(UIElement.BorderBrush).(SolidColorBrush.Color)"
Storyboard.TargetName="Background"/>
<DoubleAnimation Storyboard.TargetName="DropDownGlyph"
Storyboard.TargetProperty="Opacity"
To="0"
Duration="0:0:0.2">
<DoubleAnimation.EasingFunction>
<PowerEase EasingMode="EaseIn" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</VisualState>
<VisualState x:Name="Closed">
<Storyboard>
<SplitCloseThemeAnimation ClosedTargetName="ContentPresenter"
OpenedTargetName="PopupBorder"
ClosedLength="0"
OpenedLength="{Binding TemplateSettings.DropDownOpenedHeight, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
<ColorAnimation To="#66D3D3D3"
Duration="0:0:0.1"
Storyboard.TargetProperty="(UIElement.BorderBrush).(SolidColorBrush.Color)"
Storyboard.TargetName="Background" />
<DoubleAnimation Storyboard.TargetName="DropDownGlyph"
Storyboard.TargetProperty="Opacity"
To="1"
Duration="0:0:0.2">
<DoubleAnimation.EasingFunction>
<PowerEase EasingMode="EaseIn" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</VisualState>
</VisualStateGroup>
Could you give me some advise, what I'm doing wrong? Thanks!
The workaround I used for this was to remove the VisualState for "Closed" from my Style. Once I had done this the ComboBox worked as expected.

Maintain Control.Opacity with animation according to it's "Disabled" visual state?

I have a custom button.
I want that when it goes to "Disabled" state, it's Opacity property should swap to 65% or so, over a time frame of a around a second, when it leaves the "Disabled" state, it should turn the Opacity back to 100% (animated).
How is this done?
How is this done?
This short video answered all my question in minutes!
Here is all I needed:
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.3" To="Disabled"/>
<VisualTransition From="Disabled" GeneratedDuration="0:0:0.3"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Pressed" />
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="LayoutRoot">
<EasingDoubleKeyFrame KeyTime="0" Value="0.55"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>