Поделиться через


AnimatedIcon Класс

Определение

Представляет значок, который отображает и управляет визуальным элементом, который может анимироваться в ответ на взаимодействие с пользователем и изменение визуального состояния.

Эта документация относится к WinUI 2 для UWP (для WinUI в Windows App SDK см. Windows App 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
Наследование
AnimatedIcon
Атрибуты

Примеры

Совет

Дополнительные сведения, рекомендации по проектированию и примеры кода см. в разделе Анимированный значок.

Приложения из коллекции 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>

Важно!

Если добавить в AnimatedIcon дерево XAML и задать State свойство для элемента-предка, State для этого свойства необходимо задать начальное значение перед первой загрузкой анимированного значка, чтобы значок анимировался. Как правило, начальное состояние задается в XAML, как показано ниже.

<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 в ответ на некоторые события указателя. В этой таблице показаны события указателя, которые обычно обрабатываются, и общие состояния, которые сопоставляют с этими событиями. (Однако не каждый источник анимированных значков будет точно соответствовать этим состояниям.)

Событие Состояние
PointerEntered "PointerOver"
PointerPressed "Pressed"
PointerReleased "Normal"
PointerExited "Normal"

Совет

Если поместить внутри AnimatedIconэлемента управления Button или другого элемента управления с событием PointerPressedClick, события и PointerReleased помечаются как Обработанные. Чтобы обработать эти события на кнопке, используйте метод AddHandler для подключения обработчика событий и укажите handledEventsToo как true. Используйте RemoveHandler , чтобы отключить обработчик событий.

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

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

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

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

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

AnimatedIcon()

Инициализирует новый экземпляр класса AnimatedIcon .

Эта документация относится к WinUI 2 для UWP (для WinUI в Windows App SDK см. Windows App SDK пространства имен).

Свойства

FallbackIconSource

Возвращает или задает статический значок, используемый, если не удается запустить анимированный значок.

Эта документация относится к WinUI 2 для UWP (для WinUI в Windows App SDK см. Windows App SDK пространства имен).

FallbackIconSourceProperty

Определяет свойство зависимости FallbackIconSource .

Эта документация относится к WinUI 2 для UWP (для WinUI в Windows App SDK см. Windows App SDK пространства имен).

MirroredWhenRightToLeft

Возвращает или задает значение, указывающее, является ли значок зеркальным, если значение FlowDirection имеет значение RightToLeft.

Эта документация относится к WinUI 2 для UWP (для WinUI в Windows App SDK см. Windows App SDK пространства имен).

MirroredWhenRightToLeftProperty

Определяет свойство зависимостей MirroredWhenRightToLeft .

Эта документация относится к WinUI 2 для UWP (для WinUI в Windows App SDK см. Windows App SDK пространства имен).

Source

Возвращает или задает анимированный визуальный элемент, отображаемый AnimatedIcon объектом .

Эта документация относится к WinUI 2 для UWP (для WinUI в Windows App SDK см. Windows App SDK пространства имен).

SourceProperty

Идентифицирует свойство зависимостей источника .

Эта документация относится к WinUI 2 для UWP (для WinUI в Windows App SDK см. Windows App SDK пространства имен).

StateProperty

Определяет присоединенное свойство XAML AnimatedIcon.State .

Эта документация относится к WinUI 2 для UWP (для WinUI в Windows App SDK см. Windows App SDK пространства имен).

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

State

Свойство, задающее разработчиком в AnimatedIcon.

Эта документация относится к WinUI 2 для UWP (для WinUI в Windows App SDK см. Windows App SDK пространства имен).

Методы

GetState(DependencyObject)

Извлекает значение присоединенного свойства AnimatedIcon.State для указанного Объекта DependencyObject.

Эта документация относится к WinUI 2 для UWP (для WinUI в Windows App SDK см. Windows App SDK пространства имен).

SetState(DependencyObject, String)

Задает значение присоединенного свойства AnimatedIcon.State для указанного Объекта DependencyObject.

Эта документация относится к WinUI 2 для UWP (для WinUI в Windows App SDK см. Windows App SDK пространства имен).

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

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