文本块高度的DoubleAnimation

Question

我有一个文本块，它应该只显示2行的文本，而它是未选中的。一旦它被选中，我希望它能够顺利地扩展。

我开始的时候是这样的：

<BeginStoryboard>
  <Storyboard>
    <DoubleAnimation
      Storyboard.TargetName="Second" 
      Storyboard.TargetProperty="(TextBlock.MaxHeight)"
      To="50.0" Duration="0:0:0.5" />
  </Storyboard>
</BeginStoryboard>

但这里的问题是，我不知道文本有多大。

Answer 1

您应该能够改用From='0'，这将以0值开始动画，并以MaxHeight的值结束。但是，这会产生一个不同的问题，因为MaxHeight默认为无穷大，这会使动画太快。如下所示：

<BeginStoryboard>
  <Storyboard>
    <ObjectAnimationUsingKeyframes
      Storyboard.TargetName='Second'
      Storyboard.TargetProperty='(TextBlock.MaxHeight)'>
      <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{Binding TargetName=Second, Path=ActualHeight}" />
    </ObjectAnimationUsingKeyframes>
    <DoubleAnimation
      Storyboard.TargetName="Second" 
      Storyboard.TargetProperty="(TextBlock.MaxHeight)"
      From="0" Duration="0:0:0.5" />
  </Storyboard>
</BeginStoryboard>

Answer 2

您可以使用DoubleAnimation来实现这一点。我已经在一个示例应用程序中实现了这一点。

<Window.Resources>
    <Storyboard x:Key="OnGotFocus">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="textBox" Storyboard.TargetProperty="(FrameworkElement.Height)">
            <EasingDoubleKeyFrame KeyTime="0:0:2">
                <EasingDoubleKeyFrame.Value>
                    <System:Double>NaN</System:Double>
                </EasingDoubleKeyFrame.Value>
            </EasingDoubleKeyFrame>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Key="OnLostFocus">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="textBox" Storyboard.TargetProperty="(FrameworkElement.Height)">
            <EasingDoubleKeyFrame KeyTime="0">
                <EasingDoubleKeyFrame.Value>
                    <System:Double>NaN</System:Double>
                </EasingDoubleKeyFrame.Value>
            </EasingDoubleKeyFrame>
            <EasingDoubleKeyFrame KeyTime="0:0:2" Value="30" />
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</Window.Resources>
<Window.Triggers>
    <EventTrigger RoutedEvent="UIElement.GotFocus" SourceName="textBox">
        <BeginStoryboard Storyboard="{StaticResource OnGotFocus}" />
    </EventTrigger>
    <EventTrigger RoutedEvent="UIElement.LostFocus" SourceName="textBox">
        <BeginStoryboard x:Name="OnLostFocus_BeginStoryboard" Storyboard="{StaticResource OnLostFocus}" />
    </EventTrigger>
</Window.Triggers>

textbox的代码应该是：

<TextBox x:Name="textBox"
         Height="30"
         HorizontalAlignment="Right"
         Text="Hello World" />

这将使textbox在聚焦时立即动画到指定的高度。我已经添加了一个动画，当它失去焦点时也会折叠它。

希望这对你有帮助。