AnimatedIcon 클래스

참조

정의

네임스페이스:: Microsoft.UI.Xaml.Controls

중요

일부 정보는 릴리스되기 전에 상당 부분 수정될 수 있는 시험판 제품과 관련이 있습니다. Microsoft는 여기에 제공된 정보에 대해 어떠한 명시적이거나 묵시적인 보증도 하지 않습니다.

편집

사용자 상호 작용 및 시각적 상태 변경에 대한 응답으로 애니메이션 효과를 주는 시각적 개체를 표시하고 제어하는 아이콘을 나타냅니다.

이 설명서는 UWP용 WinUI 2에 적용됩니다(Windows 앱 SDK WinUI의 경우 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는 애니메이션을 재생할 수 없는 경우에 사용됩니다.
가 로 설정된 trueAddHandler 메서드 handledEventsToo 는 단추가 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 에서 애니메이션을 해제하면 컨트롤이 있던 상태 전환의 최종 프레임이 표시됩니다.
Lottie 애니메이션을 지원하지 않는 이전 버전의 Windows와 같이 애니메이션이 지원되지 않을 때 사용할 FallbackIconSource 를 지정합니다.

사용자 지정 애니메이션

앱에서 애니메이션 아이콘으로 사용할 사용자 지정 애니메이션을 만들 수 있습니다. Adobe AfterEffects를 사용하여 애니메이션을 만든 다음, Lottie-Windows 라이브러리와 함께 해당 출력을 사용하여 IAnimatedVisualSource2를 구현하는 사용자 지정 클래스를 생성할 수 있습니다. 이 클래스를 애니메이션 아이콘의 원본 으로 사용할 수 있습니다. 자세한 내용은 Lottie를 사용하여 AnimatedIcon에 대한 애니메이션 콘텐츠 만들기를 참조하세요.

애니메이션 아이콘 상태 제어

AnimationIcon.State 연결된 속성을 설정하여 애니메이션의 재생 위치와 상태를 변경합니다. state 속성은 "",PointerOver "" 또는Pressed "Normal"와 같은 시각적 상태를 설명하는 문자열 값을 사용합니다. "PressedToNormal"와 같은 특정 상태 전환을 지정할 수도 있습니다.

애니메이션 아이콘 원본 에는 애니메이션 타임라인의 위치를 시각적 상태로 매핑하는 표식 이 포함되어 있습니다. 가 연결된 속성을 설정 State 하도록 지원하는 문자열 값 Source 은 컬렉션에 Markers 정의됩니다. 자세한 내용은 AnimatedIcon 표식 정의를 참조하세요.

컨트롤 템플릿에 사용되는 애니메이션 시각적 원본에는 상태를 제어하기 위해 해당 맵의 Markers 더 복잡한 집합이 있는 경우가 많으며, 보다 일반적인 사용을 위한 애니메이션 시각적 개체에는 포인터 이벤트에 대한 보다 간단한 맵 집합 Markers 이 있는 경우가 많습니다.

상태를 설정할 위치

또는 XAML 트리의 AnimatedIcon 상위 항목에서 속성을 설정할 수 있습니다. 두 경우 모두 다음과 같이 연결된 속성 구문을 사용해야 합니다.

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

중요

XAML 트리에 를 AnimatedIcon 추가하고 상위 요소 State 의 속성을 설정하는 State 경우 아이콘에 애니메이션 효과를 주려면 애니메이션 아이콘이 처음 로드되기 전에 속성을 초기 값으로 설정해야 합니다. 일반적으로 여기에 표시된 대로 XAML에서 초기 상태를 설정합니다.

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

시각적 상태 사용

XAML 컨트롤의 에 ControlTemplate 을 추가하고 AnimatedIconVisualStateManager를 사용하여 상태를 설정할 수 있습니다. NavigationViewItem과 같은 일부 컨트롤은 아이콘으로 설정된 의 상태를 AnimatedIcon 자동으로 설정합니다.

컨트롤 템플릿 시각적 상태로 설정하는 AnimatedIcon.State 예제를 보려면 WinUI GitHub 리포지토리의 CheckBox_themeresources.xaml 을 참조하세요. 컨트롤은 CheckBox 확인 표시에 AnimatedAcceptVisualSource 를 사용합니다. 시각적 상태 setter는 다음과 같습니다.

<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`"

팁

Click 이벤트가 PointerPressed 있는 Button 또는 기타 컨트롤 내부에 을 배치 AnimatedIcon 하면 및 PointerReleased 이벤트가 Handled로 표시됩니다. 단추에서 이러한 이벤트를 처리하려면 AddHandler 메서드를 사용하여 이벤트 처리기를 연결하고 로 true지정 handledEventsToo 합니다. RemoveHandler를 사용하여 이벤트 처리기의 연결을 끊습니다.

이러한 이벤트 처리기를 보여 주는 샘플 코드는 예제 섹션을 참조하세요.

XAML 연결 속성

AnimatedIcon 는 XAML 연결된 속성의 호스트 서비스 클래스입니다.

연결된 속성에 대한 XAML 프로세서 액세스를 지원하고 동등한 get 및 set 작업을 코드에 노출하기 위해 연결된 각 XAML 속성에는 Get 및 Set 접근자 메서드 쌍이 있습니다. 코드에서 값을 얻거나 설정하는 또 다른 방법은 GetValue 또는 SetValue 를 호출하고 식별자 필드를 종속성 속성 식별자로 전달하는 종속성 속성 시스템을 사용하는 것입니다.

생성자

AnimatedIcon()

AnimatedIcon 클래스의 새 인스턴스를 초기화합니다.

이 설명서는 UWP용 WinUI 2에 적용됩니다(Windows 앱 SDK WinUI의 경우 Windows 앱 SDK 네임스페이스 참조).

속성

FallbackIconSource	애니메이션 아이콘을 실행할 수 없을 때 사용할 정적 아이콘을 가져오거나 설정합니다. 이 설명서는 UWP용 WinUI 2에 적용됩니다(Windows 앱 SDK WinUI의 경우 Windows 앱 SDK 네임스페이스 참조).
FallbackIconSourceProperty	FallbackIconSource 종속성 속성을 식별합니다. 이 설명서는 UWP용 WinUI 2에 적용됩니다(Windows 앱 SDK WinUI의 경우 Windows 앱 SDK 네임스페이스 참조).
MirroredWhenRightToLeft	FlowDirection이 RightToLeft일 때 아이콘이 미러링되는지 여부를 나타내는 값을 가져오거나 설정합니다. 이 설명서는 UWP용 WinUI 2에 적용됩니다(Windows 앱 SDK WinUI의 경우 Windows 앱 SDK 네임스페이스 참조).
MirroredWhenRightToLeftProperty	MirroredWhenRightToLeft 종속성 속성을 식별합니다. 이 설명서는 UWP용 WinUI 2에 적용됩니다(Windows 앱 SDK WinUI의 경우 Windows 앱 SDK 네임스페이스 참조).
Source	개체가 표시하는 애니메이션 시각적 개체를 `AnimatedIcon` 가져오거나 설정합니다. 이 설명서는 UWP용 WinUI 2에 적용됩니다(Windows 앱 SDK WinUI의 경우 Windows 앱 SDK 네임스페이스 참조).
SourceProperty	원본 종속성 속성을 식별합니다. 이 설명서는 UWP용 WinUI 2에 적용됩니다(Windows 앱 SDK WinUI의 경우 Windows 앱 SDK 네임스페이스 참조).
StateProperty	AnimatedIcon.State XAML 연결된 속성을 식별합니다. 이 설명서는 UWP용 WinUI 2에 적용됩니다(Windows 앱 SDK WinUI의 경우 Windows 앱 SDK 네임스페이스 참조).

연결된 속성

State

개발자가 AnimatedIcon에서 설정하는 속성입니다.

이 설명서는 UWP용 WinUI 2에 적용됩니다(Windows 앱 SDK WinUI의 경우 Windows 앱 SDK 네임스페이스 참조).

메서드

GetState(DependencyObject)

지정된 DependencyObject에 대한 AnimatedIcon.State 연결된 속성의 값을 검색합니다.

이 설명서는 UWP용 WinUI 2에 적용됩니다(Windows 앱 SDK WinUI의 경우 Windows 앱 SDK 네임스페이스 참조).

SetState(DependencyObject, String)

지정된 DependencyObject에 대한 AnimatedIcon.State 연결된 속성의 값을 지정합니다.

이 설명서는 UWP용 WinUI 2에 적용됩니다(Windows 앱 SDK WinUI의 경우 Windows 앱 SDK 네임스페이스 참조).

적용 대상

다음을 통해 공유

AnimatedIcon 클래스

정의

예제

단추에 AnimatedIcon 추가

설명

사용자 지정 애니메이션

애니메이션 아이콘 상태 제어

상태를 설정할 위치

시각적 상태 사용

포인터 이벤트 처리

XAML 연결 속성

생성자

속성

연결된 속성

메서드

적용 대상

추가 정보

피드백

추가 리소스