AnimatedIcon Класс

Ссылка

Определение

Пространство имен:: Microsoft.UI.Xaml.Controls

Важно!

Некоторые сведения относятся к предварительной версии продукта, в которую до выпуска могут быть внесены существенные изменения. Майкрософт не предоставляет никаких гарантий, явных или подразумеваемых, относительно приведенных здесь сведений.

Изменить

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

Эта документация относится к 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

Наследование: IconElement
AnimatedIcon

Атрибуты: ContractVersionAttribute MarshalingBehaviorAttribute ThreadingAttribute ContentPropertyAttribute

Примеры

Совет

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

Откройте приложение "Коллекция WinUI 2" и просмотрите Приложение 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 пространства имен).

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

AnimatedIcon Класс

Определение

Примеры

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

Комментарии

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

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

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

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

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

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

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

Свойства

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

Методы

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

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

Обратная связь

Обратная связь

Дополнительные ресурсы