VisualStateManager.GoToState useTransitions Ignored in custom control UWP - animation

Question

I've created a custom control which inherits from contentControl . The control uses PlaneProjection.RotationX animation while changing from open to close and vice versa.
I want the control initial state to be in closed state. When the app launched the transition from open to close is shown even though I set changeVisualState(false).
What am I doing wrong?
My code:
public sealed class FlipPanel : ContentControl
{
private VisualState collapsedState;
private FrameworkElement contentElement;
public FlipPanel()
{
this.DefaultStyleKey = typeof(FlipPanel);
}
public bool IsOpen
{
get { return (bool)GetValue(IsOpenProperty); }
set { SetValue(IsOpenProperty, value); }
}
public static readonly DependencyProperty IsOpenProperty =
DependencyProperty.Register("IsOpen", typeof(bool), typeof(FlipPanel), new PropertyMetadata(false, onIsOpenChanged));
private static void onIsOpenChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
FlipPanel flipPanel = d as FlipPanel;
flipPanel.changeVisualState(true);
}
private void changeVisualState(bool useTransitions)
{
Debug.WriteLine(IsOpen.ToString());
if (IsOpen)
{
if (contentElement != null)
{
contentElement.Visibility = Visibility.Visible;
}
VisualStateManager.GoToState(this, "Opening", useTransitions);
}
else
{
VisualStateManager.GoToState(this, "Closing", useTransitions);
}
}
protected override void OnApplyTemplate()
{
base.OnApplyTemplate();
contentElement = (FrameworkElement)GetTemplateChild("Content");
if (contentElement != null)
{
collapsedState = (VisualState)GetTemplateChild("Closing");
if ((collapsedState != null) && (collapsedState.Storyboard != null))
{
collapsedState.Storyboard.Completed += (object sender, object e) =>
{
contentElement.Visibility = Visibility.Collapsed;
};
}
changeVisualState(false);
}
}
}
and my Style
<Style TargetType="local:FlipPanel" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:FlipPanel">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ViewStates">
<VisualState x:Name="Opening">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)" Storyboard.TargetName="Content">
<EasingDoubleKeyFrame KeyTime="0" Value="-90"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Closing">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)" Storyboard.TargetName="Content">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="90"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}">
<Grid>
<ContentPresenter Content="{TemplateBinding Content}" x:Name="Content">
<ContentPresenter.Projection>
<PlaneProjection CenterOfRotationX="0.5"/>
</ContentPresenter.Projection>
</ContentPresenter>
</Grid>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Answer 1

I think this is because you make the Content Collapsed in the Completed event of the storyboard and then you set changeVisualState(false);, it will do nothing since the "closing" storyboard is completed.
I modified your code of OnApplyTemplate like this and it works:
protected override void OnApplyTemplate()
{
base.OnApplyTemplate();
contentElement = (FrameworkElement)GetTemplateChild("Content");
if (contentElement != null)
{
if (!IsOpen)
contentElement.Visibility = Visibility.Collapsed;
else
changeVisualState(true);
}
}