AnimatedIcon Класс

Определение

/// [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 включают интерактивные примеры большинства элементов управления, возможностей и функций WinUI 2. Получите приложение из Microsoft Store или получите исходный код в GitHub.

Добавление Объекта AnimatedIcon к кнопке

В этом примере показана кнопка "Назад", которая отображает значок стрелки назад, который анимирует события указателя.

• AnimationBackVisualSource — это анимация со стрелкой назад, предоставляемая WinUI.
• FallbackIconSource используется, когда невозможно воспроизвести анимацию.
• Метод AddHandler с handledEventsToo параметром true для используется для событий, которые кнопка помечает как 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 , который будет использоваться, если анимации не поддерживаются, например в более старых версиях Windows, которые не поддерживают анимации Lottie.

Пользовательские анимации

Вы можете создавать пользовательские анимации для использования в качестве значка анимации в приложении. Анимации можно создавать с помощью Adobe AfterEffects, а затем использовать эти выходные данные с библиотекой Lottie-Windows для создания пользовательского класса, реализующего IAnimatedVisualSource2. Этот класс можно использовать в качестве источника для анимированного значка. Дополнительные сведения см. в статье Создание анимированного содержимого для AnimatedIcon с помощью Lottie.

Управление состоянием анимированного значка

Вы можете изменить положение и состояние анимации, задав присоединенное свойство AnimatedIcon.State . Свойство state принимает строковое значение, описывающее визуальное состояние, например "Normal", "PointerOver" или "Pressed". Можно также указать определенный переход состояния, например "PressedToNormal".

Анимированный значок Источник содержит маркеры , которые сопоставляют положение на временной шкале анимации с визуальным состоянием. Строковые значения, которые Source поддерживает для задания присоединенного State свойства, определяются в Markers коллекции. Дополнительные сведения см. в разделе Определение маркеров AnimatedIcon.

Источники анимированных визуальных элементов, которые используются в шаблонах элементов управления, часто имеют более сложный набор сопоставлений Markers с состояниями управления, в то время как анимированные визуальные элементы для более общего использования часто имеют более простой набор этих сопоставлений Markers с событиями указателя.

Где задать состояние

Свойство можно задать для AnimatedIcon или для предка в дереве XAML. В любом случае необходимо использовать синтаксис присоединенного свойства, как показано ниже:

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

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

Использование визуальных состояний

Вы можете добавить в AnimatedIconControlTemplate элемент управления XAML и использовать VisualStateManager для задания его состояния. Некоторые элементы управления, такие как NavigationViewItem, автоматически задают состояние для объекта , заданного AnimatedIcon в качестве значка.

Пример, который задает AnimatedIcon.State в визуальном состоянии шаблона элемента управления, см. в статье CheckBox_themeresources.xaml в репозитории WinUI GitHub. Элемент CheckBox управления использует объект AnimatedAcceptVisualSource для своего флажка. Визуальные методы задания состояния выглядят следующим образом:

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

Обработка событий указателя

Чтобы реагировать AnimatedIcon на взаимодействие с пользователем, необходимо задать присоединенное свойство AnimatedIcon.State в ответ на некоторые события указателя. В этой таблице показаны события указателя, которые обычно обрабатываются, и общие состояния, которые сопоставляют с этими событиями. (Однако не каждый источник анимированных значков будет точно соответствовать этим состояниям.)

Пример кода, демонстрирующий эти обработчики событий, см. в разделе Примеры.

Присоединенные свойства XAML

AnimatedIcon — это класс службы узла для присоединенного свойства XAML.

Для поддержки доступа обработчика XAML к присоединенным свойствам, а также для предоставления коду эквивалентных операций получения и задания , каждое присоединенное свойство XAML имеет пару методов доступа Get и Set. Другой способ получить или задать значение в коде — использовать систему свойств зависимостей, вызывая метод GetValue или SetValue и передавая поле идентификатора в качестве идентификатора свойства зависимостей.

Конструкторы

Свойства

Присоединенные свойства

Методы

Применяется к

См. также раздел

• AnimatedVisualPlayer
• Обзор анимированных значков
• VisualStateManager
• Лотти-Windows