WPF 淡入淡出动画

2024-01-15

当控件变得可见时,如何使其淡入/淡出。

以下是我失败的尝试:

<Window x:Class="WadFileTester.Form1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Name="MyWindow" Title="WAD File SI Checker" Height="386" Width="563" WindowStyle="SingleBorderWindow" DragEnter="Window_DragEnter" DragLeave="Window_DragLeave" DragOver="Window_DragOver" Drop="Window_Drop" AllowDrop="True">
    <Window.Resources>
        <Style TargetType="ListView" x:Key="animatedList">
            <Style.Triggers>
                <DataTrigger Binding="{Binding Visibility}" Value="Visible">
                    <DataTrigger.EnterActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation
                                    Storyboard.TargetProperty="Opacity"
                                    From="0.0" To="1.0" Duration="0:0:5"
                                    />
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.EnterActions>
                    <DataTrigger.ExitActions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation
                                    Storyboard.TargetProperty="Opacity"
                                    From="1.0" To="0.0" Duration="0:0:5"
                                    />
                            </Storyboard>
                        </BeginStoryboard>
                    </DataTrigger.ExitActions>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <Grid>
        <ListView Name="listView1" Style="{StaticResource animatedList}" TabIndex="1" Margin="12,41,12,12" Visibility="Hidden">
        </ListView>
    </Grid>
</Window>

我不知道如何在纯 XAML 中执行两种动画(淡入和淡出)。但简单的淡出可以实现比较简单。将 DataTriggers 替换为 Triggers,并删除 ExitActions,因为它们在淡出场景中没有意义。这就是您将拥有的:

 <Style TargetType="FrameworkElement" x:Key="animatedList">
  <Setter Property="Visibility" Value="Hidden"/>
  <Style.Triggers>
    <Trigger Property="Visibility" Value="Visible">
      <Trigger.EnterActions>
        <BeginStoryboard>
          <Storyboard>
            <DoubleAnimation Storyboard.TargetProperty="Opacity"
                             From="0.0" To="1.0" Duration="0:0:0.2"/>
          </Storyboard>
        </BeginStoryboard>
      </Trigger.EnterActions>
    </Trigger>
  </Style.Triggers>
</Style>

但是,嘿,不要放弃。如果您想支持这两种动画,我可以建议在 XAML 后面进行少量编码。当我们做了一个技巧之后,我们通过在XAML中添加一行代码就可以得到你想要的东西:

<Button Content="Fading button"
        x:Name="btn"
        loc:VisibilityAnimation.IsActive="True"/>

每次我们将 btn.Visibility 从“可见”更改为“隐藏/折叠”按钮时,按钮就会淡出。每次我们重新更改可见性时,按钮都会淡入。这个技巧适用于任何 FrameworkElement(包括 ListView :) )。

这是 VisibilityAnimation.IsActive 附加属性的代码:

  public class VisibilityAnimation : DependencyObject
  {
    private const int DURATION_MS = 200;

    private static readonly Hashtable _hookedElements = new Hashtable();

    public static readonly DependencyProperty IsActiveProperty =
      DependencyProperty.RegisterAttached("IsActive", 
      typeof(bool), 
      typeof(VisibilityAnimation),
      new FrameworkPropertyMetadata(false, new PropertyChangedCallback(OnIsActivePropertyChanged)));

    public static bool GetIsActive(UIElement element)
    {
      if (element == null)
      {
        throw new ArgumentNullException("element");
      }

      return (bool)element.GetValue(IsActiveProperty);
    }

    public static void SetIsActive(UIElement element, bool value)
    {
      if (element == null)
      {
        throw new ArgumentNullException("element");
      }
      element.SetValue(IsActiveProperty, value);
    }

    static VisibilityAnimation()
    {
      UIElement.VisibilityProperty.AddOwner(typeof(FrameworkElement),
                                            new FrameworkPropertyMetadata(Visibility.Visible, new PropertyChangedCallback(VisibilityChanged), CoerceVisibility));
    }

    private static void VisibilityChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
      // So what? Ignore.
    }

    private static void OnIsActivePropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
      var fe = d as FrameworkElement;
      if (fe == null)
      {
        return;
      }
      if (GetIsActive(fe))
      {
        HookVisibilityChanges(fe);
      }
      else
      {
        UnHookVisibilityChanges(fe);
      }
    }

    private static void UnHookVisibilityChanges(FrameworkElement fe)
    {
      if (_hookedElements.Contains(fe))
      {
        _hookedElements.Remove(fe);
      } 
    }

    private static void HookVisibilityChanges(FrameworkElement fe)
    {
      _hookedElements.Add(fe, false);
    }

    private static object CoerceVisibility(DependencyObject d, object baseValue)
    {
      var fe = d as FrameworkElement;
      if (fe == null)
      {
        return baseValue;
      }

      if (CheckAndUpdateAnimationStartedFlag(fe))
      {
        return baseValue;
      }
      // If we get here, it means we have to start fade in or fade out
      // animation. In any case return value of this method will be
      // Visibility.Visible. 

      var visibility = (Visibility)baseValue;

      var da = new DoubleAnimation
      {
        Duration = new Duration(TimeSpan.FromMilliseconds(DURATION_MS))
      };

      da.Completed += (o, e) =>
                        {
                          // This will trigger value coercion again
                          // but CheckAndUpdateAnimationStartedFlag() function will reture true
                          // this time, and animation will not be triggered.
                          fe.Visibility = visibility;
                          // NB: Small problem here. This may and probably will brake 
                          // binding to visibility property.
                        };

      if (visibility == Visibility.Collapsed || visibility == Visibility.Hidden)
      {
        da.From = 1.0;
        da.To = 0.0;
      }
      else
      {
        da.From = 0.0;
        da.To = 1.0;
      }

      fe.BeginAnimation(UIElement.OpacityProperty, da);
      return Visibility.Visible;
    }

    private static bool CheckAndUpdateAnimationStartedFlag(FrameworkElement fe)
    {
      var hookedElement = _hookedElements.Contains(fe);
      if (!hookedElement)
      {
        return true; // don't need to animate unhooked elements.
      }

      var animationStarted = (bool) _hookedElements[fe];
      _hookedElements[fe] = !animationStarted;

      return animationStarted;
    }
  }

这里最重要的是 CoerceVisibility() 方法。正如您所看到的,在淡入淡出动画完成之前,我们不允许更改此属性。

这段代码既不是线程安全的,也不是没有错误的。它的唯一目的是表明方向:)。因此,请随意改进、编辑并获得声誉;)。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

WPF 淡入淡出动画 的相关文章

  • 如何在一个元素上实现多个 CSS 过渡?

    这是一个非常简单的问题 但我找不到关于 CSS 转换属性的很好的文档 这是 CSS 片段 nav a text transform uppercase text decoration none color d3d3d3 line heigh
  • 根据值更改 DataGrid 单元格颜色

    我有一个 WPF 数据网格 我想要根据值使用不同的单元格颜色 我的 xaml 上有以下代码 Style TargetType DataGridCell 但不是只选择一个单元格而是选择所有行 我缺少什么 如果您尝试设置DataGrid Cel
  • 使用 XAML 文件作为矢量图像源

    我希望能够使用矢量图形 最好在 XAML 中定义 作为图像控件的源 就像我当前可以使用 PNG 等光栅图像一样 这样我就可以轻松地混合和匹配位图和矢量图像 如下所示
  • WPF XAML 定义的 MenuItem 重用开始工作,然后消失

    以下简单代码尝试在两个单独的菜单上重用 Window Resources 中定义的 MenuItem
  • UWP/XAML:如何使用BaseOn继承默认样式?

    微软官方article https msdn microsoft com en us windows uwp controls and patterns styling controls states 修改系统默认样式 您应该尽可能使用来自
  • WPF C# 输入框

    我正在使用 C 构建 WPF 应用程序 我想弹出一个对话框提示用户输入他 她的名字 之后 我将跟踪该名称并将一些数据保存到 txt使用该名称的文件 例如 输入的名称是姓名 约翰 所以我有数据数据 1 2 3 然后我将 数据 保存在John
  • 通过 Javascript 更改 Webkit 属性?

    请帮助我 可能是因为我对 CSS 动画和 Javascript 相当陌生 但我使用的代码应该更改它的属性 当我运行代码时 它会执行代码中的所有其他操作 除了更改所需 div 的 CSS 属性 我已经尝试了所有这四种方法 但似乎都不起作用 它
  • Windows 10 UWP 中的视觉状态管理器未在页面加载时应用初始状态

    我有一个带有相关面板的页面 可以根据宽度重新组织 但是 除非宽度 gt 720px 否则它似乎不会在加载时应用任何状态 如果我在加载页面后调整页面大小 则两种状态都有效 解决方法是检查加载页面上的窗口大小并手动选择状态 但我相信这应该自动处
  • 如何将屏幕截图转换为二进制?

    我正在开发一个 Xamarin Forms 项目 在该项目中我想将我的屏幕截图 PNG 转换为二进制并将其上传到服务器 现在服务器部分需要一个API 我将由已经完成它的人交给我 我只需要实现它 在我完成这个任务之后 到目前为止 我已经成功地
  • WinRT 中的数据触发器?

    我能够找到事件触发 http msdn microsoft com en us library windows apps windows ui xaml eventtrigger 28v VS 85 29 aspx然而 在 WinRT 参考
  • 如何移动图像(动画)?

    我正在尝试在 x 轴上移动船 还没有键盘 我如何将运动 动画与boat png而不是任何其他图像 public class Mama extends Applet implements Runnable int width height i
  • 基本 jQuery 动画:省略号(三个点依次出现)

    我需要的 我需要一个动画省略号 一个点一个接一个地出现 动画需要循环播放 我想通过 jQuery 实现这一点 动画序列 Frame 1 等待您的选择 Frame 2 等待您的选择 Frame 3 等待您的选择 Frame 4 等待您的选择
  • Android 在 WPF 中的涟漪效应

    我喜欢 Android 的新动画 当你触摸一个控件 listviewitem 按钮等 时 它会执行如下所示的简洁动画 我想知道如何在全球范围内为 WPF 中的所有 可点击 控件以良好的方式实现这一点 我特别需要帮助的是如何在控件上创建圆圈
  • 自定义过渡动画在animationControllerForPresentedController和animateTransition之间未知延迟

    我的目标是使动画在第一个视图控制器中开始并在第二个视图控制器中结束 我正在尝试使用符合以下条件的对象进行过渡动画UIViewControllerAnimatedTransitioning and UIViewControllerTransi
  • CSS 关键帧动画的随机“起点”

    我有一个带有垂直滚动背景图像的框列表 keyframes movie 0 background position 50 5 50 background position 50 95 0 background position 50 5 mo
  • 在单个 WPF 控件中列出所有 Validation.Error?

    我试图找到一种简单的方法来绑定单个控件 例如 TextBlock 或 ListBox 以列出 WPF 表单上的所有验证错误 我能找到的大多数源代码示例只是将一个控件绑定到 Validation Errors 0 ErrorContent 它
  • 打开和关闭 WPF DataGrid 背景图像?

    我有一个 DataGrid 当它为空时 我希望显示背景图像 当填充 DataGrid 时 我希望图像消失 并在再次清除 DataGrid 时重新出现 这可以通过 XAML 或 C 实现吗 if myDataGridView Rows Cou
  • Android 中用于过渡的自定义动画对象?

    我想用一些更奇特的东西来覆盖 Android 中的默认活动转换 我想做的事情不能用通常使用的 XML 集来完成 所以我不能使用overridePendingTransition因为它只接受对基于 XML 的动画资源的整数引用 我想做的是创建
  • 动画 D3 地球仪 (d3.geo.azimuthal)

    我对 d3 javascript 库有疑问 我想使用方位角 http mbostock github com d3 talk 20111018 azimuthal html地球 我想从地球上的经度和纬度坐标插入点 并使地球动画化 而无需使用
  • 软键盘大写最初

    我希望当用户点击TextBox键盘首先应为大写 输入第一个字符后应为小写 我在日历应用程序中看到过这个 当您点击Add titleShift 键最初处于打开状态 当您点击Add a message已经关了这是屏幕截图 屏幕截图 1 屏幕截图

随机推荐

  • 如何获得可等待的Thread.Sleep?

    我正在编写一个基于等待 睡眠范例的网络绑定应用程序 有时 会发生连接错误 根据我的经验 等待一段时间然后再次重试操作是值得的 问题是 如果我在等待 异步中使用 Thread Sleep 或其他类似的阻塞操作 它会阻塞调用者线程中的所有活动
  • 包 android.support.v7.internal.view.menu 不存在:找不到符号类 MenuBuilder

    我刚刚升级了我的支持库compile com android support appcompat v7 23 1 1 from compile com android support appcompat v7 23 1 0 它给了我这个错误
  • 集合协调算法的实现

    我正在寻找集合协调算法的实现 问题如下 有两个集合 其元素由一些相对紧凑的值 例如 UUID 或 MD5 SHA1 任何哈希值 标识 位于不同的计算机上 这些集合在相对较少的元素上有所不同 我想在传输最少量数据的同时同步这些集合 大多数谷歌
  • symbolicatecrash 不适用于 dSYM,但“atos”可以使用

    打扰一下 有个问题让我很困惑 我有 Myapp app dSYM 所有符号已从 MyApp app 中剥离并复制到 dSYM 现在我使用symbolicatecrash工具来符号化崩溃 它不起作用 十六进制地址仍然存在 我的崩溃日志的一部分
  • 如何在 Flutter 中调整 IconButton 的大小(高度和宽度)

    如何在 Flutter 中调整 IconButton 的大小 高度和宽度 似乎它需要默认的宽度和高度 没有高度或宽度属性 new IconButton padding new EdgeInsets all 0 0 color themeDa
  • 如何在 pygame.draw.lines 中为每条线使用不同的颜色

    我最近开始学习pygame这就是我的问题 无论如何 我可以为使用绘制的每条线使用不同的颜色pygame draw lines 这是我的代码 import pygame pygame init screen pygame display se
  • R 检查重复项的速度非常慢,即使使用 mclapply

    我有一些涉及重复销售大量具有唯一 ID 的汽车的数据 一辆车可以多次出售 然而 有些 Id 是错误的 因此我正在检查每个 Id 的尺寸在多次销售中是否记录为相同 如果不是 那么我就知道 Id 是错误的 我正在尝试使用以下代码来做到这一点 l
  • SlidingPaneLayout 上的单击事件

    我正在尝试使用 SlidingPaneLayout 左视图是ListFragment 右视图是详细视图 布局显示正确 我可以滑动它 但是 如果详细视图位于列表前面并且我单击它 则后台中的列表会收到单击 我的布局如下所示
  • 使用下划线将两个键和值数组合并到一个对象

    给定两个数组 一个包含键 一个包含值 keys foo bar qux values 1 2 3 你如何将它转换为一个对象 仅使用 underscore js 方法 foo 1 bar 2 qux 3 我不是在寻找简单的 javascrip
  • Google 地图在模拟器上显示,但在设备上不显示

    我编写了一个基本的地图应用程序 可以使用 AndroidStudio 轻松实例化 唯一的区别是片段加载到另一个自定义布局中 package com wayl activities import android os Bundle impor
  • 将表单输入值作为对象列表从 JSP 页面传递到 Servlet

    这里有一个简化的 不是现实世界 的例子 假设有一个领域模型 一个类Movie 其中有演员列表 一类Actor具有三个字段 name 出生日期 角色数量 以下代码是此场景的说明 电影 java public class Movie some
  • Java - 带重音符号的 InetSocketAddress 主机名

    我在与主机名中包含一些重音符号 的服务器建立连接时遇到问题 例如 String oUrl www h tel fr System out println oUrl InetSocketAddress isa new InetSocketAd
  • 无法在 React 的类中使用 const

    我正在关注这个教程 https nickymeuleman netlify com blog gatsby pagination navigate to previousnext page https nickymeuleman netli
  • 无法将匿名方法转换为类型“System.Delegate”,因为它不是委托类型

    我想在 WPF 应用程序的主线程上执行此代码并收到错误 我无法弄清楚出了什么问题 private void AddLog string logItem this Dispatcher BeginInvoke delegate this Lo
  • 具有内部属性的 JSON 序列化器对象

    我有一些带有一些内部属性的类 我也想将它们序列化为 json 我怎样才能做到这一点 例如 public class Foo internal int num1 get set internal double num2 get set pub
  • 构建目录是否应该提交到版本控制项目中?

    我正在对我的项目进行版本控制 我已使用 src 目录提交项目源代码 我的问题是 使用版本控制时是否应该提交我的 build 目录 有时称为 dist 或 bin 具体取决于应用程序 请在您给出的答案中解释原因 提前致谢 除非你专门使用git
  • 防止点击事件时浏览器弹出

    在基于 jquery mobile 的 Web 应用程序中 我如何防止默认浏览器菜单在 点击按住 时显示 相反 我想显示自定义对话框页面 下面提到的是我现在的代码 task row bind taphold function event u
  • Java - 如何将此字符串转换为日期?

    我从服务器收到此信息 但我不明白 T 和 Z 的含义 2012 08 24T09 59 59Z将此字符串转换为 Date 对象的正确 SimpleDateFormat 模式是什么 This is ISO 8601 http www w3 o
  • 如何使用 Python 更快地处理图像?

    我试图编写一个脚本来检测屏幕上的 RGB 值 然后单击 x y 值 我知道如何执行单击 但我需要比下面的代码当前处理图像的速度快得多 这可以用Python实现吗 到目前为止 我一次读取一行 当 x 1920 时 我进入第二行 但完成一行大约
  • WPF 淡入淡出动画

    当控件变得可见时 如何使其淡入 淡出 以下是我失败的尝试