过渡"可见性"在混合中使用视觉状态

时间:2014-07-17 11:41:06

标签: c# wpf blend visualstates

所以我有一个加载控件,如果有效的是一个用户控件在我的主用户控件的顶部显示“正在加载”,则阻止用户与我的程序交互,直到它被加载。

我想使用视觉状态将“加载”控件的可见性转换为慢慢淡入淡出并折叠为程序中的任何其他状态。

我目前有加载控件:

    <ContentControl x:Name="contentControl" Content="{StaticResource loadingAnimation}">
        <i:Interaction.Triggers>
            <ei:DataTrigger Value="false" Binding="{Binding IsLoadingAnimationVisible}">
                <ei:GoToStateAction StateName="Loaded"/>
            </ei:DataTrigger>
        </i:Interaction.Triggers>
    </ContentControl>

其中:

    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="VisualStateGroup">
            <VisualStateGroup.Transitions>
                <VisualTransition GeneratedDuration="0:0:0.5" To="Collapsed">
                    <VisualTransition.GeneratedEasingFunction>
                        <CubicEase EasingMode="EaseInOut"/>
                    </VisualTransition.GeneratedEasingFunction>
                </VisualTransition>
                <VisualTransition GeneratedDuration="0:0:0.5" To="Expanded">
                    <VisualTransition.GeneratedEasingFunction>
                        <CubicEase EasingMode="EaseInOut"/>
                    </VisualTransition.GeneratedEasingFunction>
                </VisualTransition>
                <VisualTransition GeneratedDuration="0:0:0.5" To="Loaded">
                    <VisualTransition.GeneratedEasingFunction>
                        <CubicEase EasingMode="EaseInOut"/>
                    </VisualTransition.GeneratedEasingFunction>
                </VisualTransition>
            </VisualStateGroup.Transitions>
            <VisualState x:Name="Expanded">
                <Storyboard>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="contentControl">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Collapsed}"/>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
            <VisualState x:Name="Collapsed">
                <Storyboard>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="metaGrid">
                        <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                    </DoubleAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="contentControl">
                        <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Collapsed}"/>
                    </ObjectAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
            <VisualState x:Name="Loaded">
                <Storyboard>
                    <BooleanAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.IsHitTestVisible)" Storyboard.TargetName="contentControl">
                        <DiscreteBooleanKeyFrame KeyTime="0" Value="False"/>
                    </BooleanAnimationUsingKeyFrames>
                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="contentControl">
                        <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
                    </DoubleAnimationUsingKeyFrames>
                </Storyboard>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

现在问题在于,当我触发Expanded和Collapsed状态时,“Loading”contentControl变为可见,然后淡出以折叠超过.5秒。 一旦触发了Loaded状态,如何将加载控件永久设置为折叠?

修改

我不确定这是在混合中转换可见性的正确方法(即设置ishittestvisible = false和opacitiy = 0但是这是我认为设置可见性的唯一方法。当我尝试时,崩溃似乎没有转变,它会折叠崩溃)

1 个答案:

答案 0 :(得分:0)

听起来你想使用Timeline.BeginTime Property。使用此属性,您可以延迟Visibility.Collapsed Animation的开始。理想情况下,您还应在Duration对象上设置DoubleAnimationUsingKeyFrames属性。试试这个:

<VisualState x:Name="Collapsed">
    <Storyboard>
        <DoubleAnimationUsingKeyFrames Duration="0:0:5" Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="metaGrid">
            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
        </DoubleAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames BeginTime="0:0:5" Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="contentControl">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Collapsed}"/>
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
</VisualState>