VisualStateManager.GoToState useTransitions在自定义控件UWP中忽略

时间:2016-10-09 11:24:19

标签: animation uwp custom-controls windows-10-universal visualstatemanager

我创建了一个继承自contentControl的自定义控件。控件使用PlaneProjection.RotationX动画,同时从打开变为关闭,反之亦然。

我希望控件初始状态处于关闭状态。当应用程序启动时,即使我设置了changeVisualState(false),也会显示从打开到关闭的转换。

我做错了什么?

我的代码:

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);
        }         
    }
}

和我的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>

1 个答案:

答案 0 :(得分:0)

我认为这是因为您在故事板的Content事件中进行了Completed折叠,然后设置了changeVisualState(false);,因为“结束”故事板完成后它将不会执行任何操作

我修改了OnApplyTemplate这样的代码并且有效:

protected override void OnApplyTemplate()
{
    base.OnApplyTemplate();
    contentElement = (FrameworkElement)GetTemplateChild("Content");
    if (contentElement != null)
    {
        if (!IsOpen)
            contentElement.Visibility = Visibility.Collapsed;
        else
            changeVisualState(true);
    }
}

enter image description here