AnimatedIcon 类

参考

定义

命名空间:: Microsoft.UI.Xaml.Controls

重要

一些信息与预发行产品相关，相应产品在发行之前可能会进行重大修改。对于此处提供的信息，Microsoft 不作任何明示或暗示的担保。

编辑

表示一个图标，该图标显示和控制可对用户交互和视觉状态更改进行动画处理的视觉对象。

本文档适用于Windows 应用 SDK中适用于 UWP 的 WinUI 2 (，请参阅Windows 应用 SDK命名空间) 。

/// [Windows.Foundation.Metadata.ContractVersion(Microsoft.UI.Xaml.XamlContract, 65536)]
/// [Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
/// [Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
/// [Windows.UI.Xaml.Markup.ContentProperty(Name="Source")]
class AnimatedIcon : IconElement

[Windows.Foundation.Metadata.ContractVersion(typeof(Microsoft.UI.Xaml.XamlContract), 65536)]
[Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
[Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
[Windows.UI.Xaml.Markup.ContentProperty(Name="Source")]
public class AnimatedIcon : IconElement

Public Class AnimatedIcon
Inherits IconElement

继承: IconElement
AnimatedIcon

属性: ContractVersionAttribute MarshalingBehaviorAttribute ThreadingAttribute ContentPropertyAttribute

示例

提示

有关详细信息、设计指南和代码示例，请参阅动画图标。

打开 WinUI 2 库应用，查看 AnimatedIcon 的运行情况。

WinUI 2 库应用包括大多数 WinUI 2 控件、特性和功能的交互式示例。通过 Microsoft Store 获取应用，或在 GitHub 上获取源代码。

向按钮添加 AnimatedIcon

此示例演示一个后退按钮，该按钮显示一个后退箭头图标，该图标在指针事件发生时进行动画处理。

AnimatedBackVisualSource 是由 WinUI 提供的后箭头动画。
无法播放动画时，将使用 FallbackIconSource 。
将设置为 true 的 handledEventsTooAddHandler 方法用于按钮标记为 Handled 的事件。

<!-- 
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
xmlns:animatedvisuals="using:Microsoft.UI.Xaml.Controls.AnimatedVisuals"
-->

<AppBarButton x:Name="BackButton" Label="Back"
              muxc:AnimatedIcon.State="Normal"
              PointerEntered="AppBarButton_PointerEntered"
              PointerExited="AppBarButton_PointerExited">
    <muxc:AnimatedIcon>
        <animatedvisuals:AnimatedBackVisualSource/>
        <muxc:AnimatedIcon.FallbackIconSource>
            <muxc:SymbolIconSource Symbol="Back"/>
        </muxc:AnimatedIcon.FallbackIconSource>
    </muxc:AnimatedIcon>
</AppBarButton>

// using muxc = Microsoft.UI.Xaml.Controls;

// Add handlers.
protected override void OnNavigatedTo(NavigationEventArgs e)
{
    SettingsButton.AddHandler(UIElement.PointerPressedEvent, 
        new PointerEventHandler(AppBarButton_PointerPressed), true);
    SettingsButton.AddHandler(UIElement.PointerReleasedEvent, 
        new PointerEventHandler(AppBarButton_PointerReleased), true);
    base.OnNavigatedTo(e);
}

// Remove handlers.
protected override void OnNavigatedFrom(NavigationEventArgs e)
{
    SettingsButton.RemoveHandler(UIElement.PointerPressedEvent, 
        (PointerEventHandler)AppBarButton_PointerPressed);
    SettingsButton.RemoveHandler(UIElement.PointerReleasedEvent, 
        (PointerEventHandler)AppBarButton_PointerReleased);
    base.OnNavigatedFrom(e);
}

private void AppBarButton_PointerEntered(object sender, PointerRoutedEventArgs e)
{
    muxc.AnimatedIcon.SetState((UIElement)sender, "PointerOver");
}

private void AppBarButton_PointerPressed(object sender, PointerRoutedEventArgs e)
{
    muxc.AnimatedIcon.SetState((UIElement)sender, "Pressed");
}

private void AppBarButton_PointerReleased(object sender, PointerRoutedEventArgs e)
{
    muxc.AnimatedIcon.SetState((UIElement)sender, "Normal");
}

private void AppBarButton_PointerExited(object sender, PointerRoutedEventArgs e)
{
    muxc.AnimatedIcon.SetState((UIElement)sender, "Normal");
}

注解

设置 AnimatedIcon.Source 属性以指定图标的动画视觉对象。 WinUI 为 Microsoft.UI.Xaml.Controls.AnimatedVisuals 命名空间中的一些常见图标提供动画视觉对象。

在某些情况下，系统设置或限制可能会阻止对图标进行动画处理。

如果用户在其系统设置中关闭动画， AnimatedIcon 则显示控件处于的状态转换的最后一帧。
指定在不支持动画时要使用的 FallbackIconSource ，例如在不支持 Lottie 动画的旧版 Windows 上。

自定义动画

可以创建自定义动画以用作应用中的动画图标。可以使用 Adobe AfterEffects 创建动画，然后可以将该输出与 Lottie-Windows 库一起使用，以生成实现 IAnimatedVisualSource2 的自定义类。可以将此类用作动画图标的源。有关详细信息，请参阅使用 Lottie 为 AnimatedIcon 创建动画内容。

控制动画图标状态

通过设置 AnimatedIcon.State 附加属性更改动画的播放位置和状态。 state 属性采用描述视觉状态的字符串值，例如“”、“NormalPointerOver”或“Pressed”。还可以指定特定状态转换，例如“PressedToNormal”。

动画图标 Source 包含将动画时间线中的位置映射到视觉状态的标记。支持设置附加属性的State字符串值Source在集合中Markers定义。有关详细信息，请参阅定义 AnimatedIcon 标记。

控件模板中使用的动画视觉源通常具有一组 Markers 更复杂的映射到控件状态的视觉对象，而用于更常规用途的动画视觉对象通常具有一组更简单的 Markers 映射到指针事件的视觉对象。

设置状态的位置

可以在 XAML 树中的或上级上 AnimatedIcon 设置属性。在任一情况下，都需要使用附加属性语法，如下所示：

<muxc:AnimatedIcon muxc:AnimatedIcon.State="Normal">...</muxc:AnimatedIcon>

重要

如果将添加到 AnimatedIcon XAML 树并在上级元素上设置 State 属性，则必须在 State 首次加载动画图标之前将属性设置为初始值，以便图标进行动画处理。通常，在 XAML 中设置初始状态，如下所示。

<StackPanel muxc:AnimatedIcon.State="Normal" ...>
   <muxc:AnimatedIcon>
       <animatedvisuals:AnimatedBackVisualSource/>
   </muxc:AnimatedIcon>
</StackPanel>

使用视觉状态

可以将添加到 AnimatedIcon XAML 控件的， ControlTemplate 并使用 VisualStateManager 设置其状态。某些控件（如 NavigationViewItem）会自动设置 AnimatedIcon 设置为其 Icon 的的状态。

若要查看在控件模板视觉状态中设置 AnimatedIcon.State 的示例，请参阅 WinUI GitHub 存储库中的 CheckBox_themeresources.xaml 。控件 CheckBox 使用 AnimatedAcceptVisualSource 作为其复选标记。视觉状态资源库如下所示：

<VisualState x:Name="CheckedPointerOver">
    ...
    <VisualState.Setters>
        <Setter Target="CheckGlyph.(AnimatedIcon.State)" Value="PointerOverOn"/>
    </VisualState.Setters>
</VisualState>

处理指针事件

AnimatedIcon若要响应用户交互，需要设置 AnimatedIcon.State 附加属性以响应某些指针事件。下表显示了通常会处理的指针事件，以及映射到这些事件的常见状态。 (但是，并非每个动画图标源都将完全映射到这些状态。)

事件	状态
PointerEntered	"`PointerOver`"
PointerPressed	"`Pressed`"
PointerReleased	"`Normal`"
PointerExited	"`Normal`"

提示

如果将放在 AnimatedIconButton 或其他具有 Click 事件的控件内，则 PointerPressed 和 PointerReleased 事件将标记为已处理。若要处理按钮上的这些事件，请使用 AddHandler 方法连接事件处理程序，并将指定 handledEventsToo 为 true。使用 RemoveHandler 断开事件处理程序的连接。

有关演示这些事件处理程序的示例代码，请参阅示例部分。

XAML 附加属性

AnimatedIcon 是 XAML 附加属性的主机服务类。

为了支持 XAML 处理器访问附加属性，以及向代码公开等效 的 get 和 set 操作，每个 XAML 附加属性都有一对 Get 和 Set 访问器方法。在代码中获取或设置值的另一种方法是使用依赖属性系统，调用 GetValue 或 SetValue 并将标识符字段作为依赖属性标识符传递。

构造函数

AnimatedIcon()

初始化 AnimatedIcon 类的新实例。

本文档适用于Windows 应用 SDK中适用于 UWP 的 WinUI 2 (，请参阅Windows 应用 SDK命名空间) 。

属性

FallbackIconSource	获取或设置动画图标无法运行时要使用的静态图标。本文档适用于Windows 应用 SDK中适用于 UWP 的 WinUI 2 (，请参阅Windows 应用 SDK命名空间) 。
FallbackIconSourceProperty	标识 FallbackIconSource 依赖属性。本文档适用于Windows 应用 SDK中适用于 UWP 的 WinUI 2 (，请参阅Windows 应用 SDK命名空间) 。
MirroredWhenRightToLeft	获取或设置一个值，该值指示当 FlowDirection 为 RightToLeft 时图标是否镜像。本文档适用于Windows 应用 SDK中适用于 UWP 的 WinUI 2 (，请参阅Windows 应用 SDK命名空间) 。
MirroredWhenRightToLeftProperty	标识 MirroredWhenRightToLeft 依赖属性。本文档适用于Windows 应用 SDK中适用于 UWP 的 WinUI 2 (，请参阅Windows 应用 SDK命名空间) 。
Source	获取或设置对象显示的 `AnimatedIcon` 动画视觉对象。本文档适用于Windows 应用 SDK中适用于 UWP 的 WinUI 2 (，请参阅Windows 应用 SDK命名空间) 。
SourceProperty	标识 Source 依赖属性。本文档适用于Windows 应用 SDK中适用于 UWP 的 WinUI 2 (，请参阅Windows 应用 SDK命名空间) 。
StateProperty	标识 AnimatedIcon.State XAML 附加属性。本文档适用于Windows 应用 SDK中适用于 UWP 的 WinUI 2 (，请参阅Windows 应用 SDK命名空间) 。

附加属性

State

开发人员在 AnimatedIcon 上设置的属性。

本文档适用于Windows 应用 SDK中适用于 UWP 的 WinUI 2 (，请参阅Windows 应用 SDK命名空间) 。

方法

GetState(DependencyObject)

检索指定 DependencyObject 的 AnimatedIcon.State 附加属性的值。

本文档适用于Windows 应用 SDK中适用于 UWP 的 WinUI 2 (，请参阅Windows 应用 SDK命名空间) 。

SetState(DependencyObject, String)

指定指定 DependencyObject 的 AnimatedIcon.State 附加属性的值。

本文档适用于Windows 应用 SDK中适用于 UWP 的 WinUI 2 (，请参阅Windows 应用 SDK命名空间) 。

适用于

通过

AnimatedIcon 类

定义

示例

向按钮添加 AnimatedIcon

注解

自定义动画

控制动画图标状态

设置状态的位置

使用视觉状态

处理指针事件

XAML 附加属性

构造函数

属性

附加属性

方法

适用于

另请参阅

反馈

其他资源