使用视觉状态在混合中转换“可见性”答案

【问题标题】：Transitioning "Visibility" in blend using visual states使用视觉状态在混合中转换“可见性”
【发布时间】：2023-11-18 04:46:01
【问题描述】：

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

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

我目前有我的加载控制：

    <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 状态时，“正在加载”的 contentControl 变得可见，然后在 0.5 秒内淡入折叠状态。触发 Loaded 状态后，如何将加载控件永久设置为折叠？

编辑

我不确定这是在混合中转换可见性的正确方法（即设置 ishittestvisible = false 和 opacitiy = 0 但这是我认为设置可见性的唯一方法。当我尝试它时，collapsed 似乎没有转换，它会突然折叠）

【问题讨论】：

您如何期望慢慢淡化为一个离散的Visibility 值，例如Collapsed？它是一个离散值，所以要么是Collapsed，要么不是。
我在英语意义上使用 Visiblity 这个词而不是 C# 意义上的。例如，具有 Visibility.Visible 但 Height = 0 的元素不是“Visible”

标签： c# wpf blend visualstates

【解决方案1】：

听起来您想使用Timeline.BeginTime Property。使用此属性，您可以延迟Visibility.Collapsed Animation 的启动。理想情况下，您也应该在 DoubleAnimationUsingKeyFrames 对象上设置 Duration 属性。试试这个：

<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>

【讨论】：