隐藏Border或TextBlock的动画

Question

如何通过动画隐藏和返回诸如Border或TextBlock之类的元素（当我点击它时）？ 我现在通过在“点击”事件中更改不透明度的值（从0到1，反之亦然）来实现。 当我第一次点击它时，它消失了，当我再次点击它时，它消失了，但是它没有动画就可以工作。 当元素逐渐消失时，我想添加一些动画。 我知道有“ fadeoutthemeanimation”，但是我无法根据需要进行配置

<Border Tapped="Border_Tapped" Background="#A5000000" Height="80">
    <TextBlock Text="Test"/>
</Border>

private void Border_Tapped(object sender, TappedRoutedEventArgs e)
{
    Border b = (Border)sender;

    b.Opacity = b.Opacity == 0.0 ? 1.0 : 0.0;
}

我添加了fadeoutthemeanimation，它可以按我的意愿工作，但是我应该按住边框。 我只想点击边框并开始动画。

<StackPanel>
    <StackPanel.Resources>
        <Storyboard SpeedRatio="0.1" x:Name="EnterStoryboard">
            <FadeOutThemeAnimation Storyboard.TargetName="border" />
        </Storyboard>
        <Storyboard SpeedRatio="0.1" x:Name="ExitStoryboard">
            <FadeInThemeAnimation Storyboard.TargetName="border" />
        </Storyboard>
    </StackPanel.Resources>
    <Border Name="border" Tapped="Border_Tapped" Background="#A5000000" Height="80" 
            HorizontalAlignment="Center" VerticalAlignment="Center"
            PointerEntered="Border_PointerEntered" 
           PointerExited="Border_PointerExited">
         <TextBlock Text="Test" FontSize="40" TextWrapping="Wrap" Foreground="White"/>
    </Border>
</StackPanel>

    private void Border_Tapped(object sender, TappedRoutedEventArgs e)
    {
        Border b = (Border)sender;
        b.Opacity = b.Opacity == 0.0 ? 1.0 : 0.0;
    }

    private void Border_PointerEntered(object sender, PointerRoutedEventArgs e)
    {
        EnterStoryboard.Begin();
    }

    private void Border_PointerExited(object sender, PointerRoutedEventArgs e)
    {
        ExitStoryboard.Begin();
    }

Answer 1

可以说您的TextBlock是这个

<TextBlock x:Name="textBlock" Text="Fade Me" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="{StaticResource PhoneFontSizeExtraLarge}" Tap="textBlock_Tap" />

您可以轻松地将其混合在一起。 将以下XAML代码添加到您的文本块所在的页面。

<phone:PhoneApplicationPage.Resources>
    <Storyboard x:Name="FadeOutTextBlock">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="textBlock">
            <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
            <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
    <Storyboard x:Name="FadeInTextBlock">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="textBlock">
            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
            <EasingDoubleKeyFrame KeyTime="0:0:2" Value="1"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</phone:PhoneApplicationPage.Resources>

然后在Tap事件处理程序中添加以下代码

private void textBlock_Tap(object sender, System.Windows.Input.GestureEventArgs e)
{
     if (textBlock.Opacity == 0.0)
     {
         FadeInTextBlock.Begin();
     }
     else
     {
         FadeOutTextBlock.Begin();
     }
}

现在运行该应用程序，然后点击TextBlock。 ：） 希望能帮助到你。