Question

如何使用动画隐藏和返回像Border或TextBlock（当我点击它时）元素？我现在通过在“Tapped”事件中更改Opacity的值（从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。 :)希望它有所帮助。

隐藏Border或TextBlock的动画

1 个答案: