显示/隐藏三态VisualStateGroup的字段 [英] Showing/hiding fields for tri-state VisualStateGroup

问题描述

我有一个有三个VisualStates的VisualStateGroup。 每个州都涉及显示/隐藏某些TextBlocks和TextBoxes。 我只用一个TextBlock / TextBox对开始简单，但我已经遇到了麻烦。

I have a VisualStateGroup that has three VisualStates.  Each state involves showing/hiding certain TextBlocks and TextBoxes.  I started off simple with just one TextBlock/TextBox pair, but already I'm having trouble.

我发布了两个代码示例。 第一个是冗长的，有一个问题。 第二个是我试图减少冗长，但引入了另一个问题。

I'm posting two code samples.  The first is verbose and has one issue.  The second was my attempt to be less verbose but introduced another issue.

< VisualStateGroup>

    < VisualState x：Name =" State1">

        <故事板>

            < FadeInThemeAnimation TargetName =" label1" />

            < FadeInThemeAnimation TargetName =" field1" />

        < / Storyboard>

    < / VisualState>

    < VisualState x：Name =" State2">

        <故事板>

            < FadeOutThemeAnimation TargetName =" label1" />

            < FadeOutThemeAnimation TargetName =" field1" />

        < / Storyboard>

    < / VisualState>

    < VisualState x：Name =" State3">

        <故事板>

            < FadeOutThemeAnimation TargetName =" label1" />

            < FadeOutThemeAnimation TargetName =" field1" />

        < / Storyboard>

    < / VisualState>

< / VisualStateGroup>

<VisualStateGroup>
    <VisualState x:Name="State1">
        <Storyboard>
            <FadeInThemeAnimation TargetName="label1"/>
            <FadeInThemeAnimation TargetName="field1"/>
        </Storyboard>
    </VisualState>
    <VisualState x:Name="State2">
        <Storyboard>
            <FadeOutThemeAnimation TargetName="label1"/>
            <FadeOutThemeAnimation TargetName="field1"/>
        </Storyboard>
    </VisualState>
    <VisualState x:Name="State3">
        <Storyboard>
            <FadeOutThemeAnimation TargetName="label1"/>
            <FadeOutThemeAnimation TargetName="field1"/>
        </Storyboard>
    </VisualState>
</VisualStateGroup>

以上（详细）代码的问题是在State2和State3中的其他字段在label1和field1下方出现的内容不会向上移动占据label1 / field1正式所在的空间。 在WPF术语中，label1和field1 似乎是
为 ""hidden""而不是"崩溃"。 它们不应该完全折叠而不是隐藏吗？ 如何更正此问题？

The issue with the above (verbose) code is that when in State2 and State3 the other fields that appear below label1 and field1 do not move up to occupy the space where label1/field1 formally were.  In WPF terminology, label1 and field1 seem to be "hidden" rather than "collapsed".  Shouldn't they be fully collapsed instead of just hidden?  How do I correct this issue?

< VisualStateGroup>

    < VisualState x：Name =" State1">

        <故事板>

            < FadeInThemeAnimation TargetName =" label1" />

            < FadeInThemeAnimation TargetName =" field1" />

        < / Storyboard>

    < / VisualState>

    < VisualState x：Name =" State2" />

    < VisualState x：Name =" State3" />

    < VisualStateGroup.Transitions>

        < VisualTransition From =" State1" GeneratedDuration =" 0：0：5">

            <故事板>&
                < FadeOutThemeAnimation TargetName =" label1" />

                < FadeOutThemeAnimation TargetName =" field1" />

            < / Storyboard>

        < / VisualTransition>

    < /VisualStateGroup.Transitions>

< / VisualStateGroup>

<VisualStateGroup>
    <VisualState x:Name="State1">
        <Storyboard>
            <FadeInThemeAnimation TargetName="label1"/>
            <FadeInThemeAnimation TargetName="field1"/>
        </Storyboard>
    </VisualState>
    <VisualState x:Name="State2"/>
    <VisualState x:Name="State3"/>
    <VisualStateGroup.Transitions>
        <VisualTransition From="State1" GeneratedDuration="0:0:5">
            <Storyboard>
                <FadeOutThemeAnimation TargetName="label1"/>
                <FadeOutThemeAnimation TargetName="field1"/>
            </Storyboard>
        </VisualTransition>
    </VisualStateGroup.Transitions>
</VisualStateGroup>

这是我试图减少冗长。 将有许多TextBlocks和TextBoxes显示/隐藏，所以我不能在两个州重复FadeOutThemeAnimations。我称之为"我的尝试"。因为当我将
转到另一个不应该显示的状态时，淡出元素才重新出现。那么减少冗长的正确方法是什么？

This was my attempt to be less verbose.  There will be many TextBlocks and TextBoxes to show/hide so I cannot afford to repeat the FadeOutThemeAnimations in two states. I called this my "attempt" since the faded out element just reappears once I go to the other state for which it shouldn't be shown. So what's the correct way to be less verbose?

另请注意GeneratedDuration。 如果没有它，它会淡出，然后立即重新出现。 指定的实际持续时间似乎并不重要，只要它高于零。 为什么忽略指定的持续时间？

Notice also the GeneratedDuration.  Without this it fades out then immediately reappears.  The actual duration specified doesn't seem to matter as long as it's above zero.  Why is the specified duration ignored?

推荐答案

我将在周一看一下这个。

I'll take a look at this on Monday.

这篇关于显示/隐藏三态VisualStateGroup的字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！