次の方法で共有


AnimatedIcon クラス

定義

ユーザーの操作とビジュアルの状態の変化に応じてアニメーション化できるビジュアルを表示および制御するアイコンを表します。

このドキュメントは、UWP 用の WinUI 2 に適用されます (Windows アプリ SDKWinUI の場合は、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
継承
AnimatedIcon
属性

ヒント

詳細、設計ガイダンス、およびコード例については、「 アニメーション 化されたアイコン」を参照してください。

WinUI 2 ギャラリー アプリには、ほとんどの WinUI 2 コントロールと機能の対話型の例が含まれています。 Microsoft Store からアプリを入手するか、GitHub でソース コードを取得します。

ボタンに AnimatedIcon を追加する

この例では、ポインター イベントが発生したときにアニメーション化する戻る矢印アイコンを表示する [戻る] ボタンを示します。

  • AnimatedBackVisualSource は、WinUI によって提供されるバック矢印アニメーションです。
  • FallbackIconSource は、アニメーションを再生できない場合に使用されます。
  • に設定trueされた AddHandler メソッド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 のアニメーションコンテンツを作成する」を参照してください。

アニメーション化されたアイコンの状態を制御する

アニメーションの再生位置と状態を変更するには、 AnimatedIcon.State 添付プロパティを設定します。 state プロパティは、""NormalPointerOver などの視覚的な状態を記述する文字列値をPressed受け取ります。 "PressedToNormal" などの特定の状態遷移を指定することもできます。

アニメーション化されたアイコン [ソース] には、アニメーション タイムライン内の位置を視覚的な状態にマップする マーカー が含まれています。 添付プロパティを Source 設定 State するために をサポートする文字列値は、コレクションで 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 を追加AnimatedIconし、VisualStateManager を使用してその状態を設定できます。 NavigationViewItem などの一部のコントロールでは、アイコンとして設定された のAnimatedIcon状態が自動的に設定されます。

コントロール テンプレートのビジュアル状態を設定 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 添付プロパティを設定する必要があります。 次の表は、通常処理するポインター イベントと、これらのイベントにマップされる一般的な状態を示しています。 (ただし、すべてのアニメーション化されたアイコン ソースがこれらの状態に正確にマップされるわけではありません)。

イベント State
PointerEntered "PointerOver"
PointerPressed "Pressed"
PointerReleased "Normal"
PointerExited "Normal"

ヒント

Click イベントを持つ Button またはその他のコントロール内に をAnimatedIcon配置すると、 PointerPressed イベントと PointerReleased イベントは Handled としてマークされます。 ボタンでこれらのイベントを処理するには、AddHandler メソッドを使用してイベント ハンドラーを接続し、 として trueを指定handledEventsTooします。 RemoveHandler を使用して、イベント ハンドラーを切断します。

これらのイベント ハンドラーを示すサンプル コードについては、「例」セクションを参照してください。

XAML 添付プロパティ

AnimatedIcon は、 XAML 添付プロパティのホスト サービス クラスです。

アタッチされたプロパティへの XAML プロセッサ アクセスをサポートし、同等の get 操作と set 操作をコードに公開するために、各 XAML 添付プロパティには Get メソッドと Set アクセサー メソッドのペアがあります。 コードで値を取得または設定するもう 1 つの方法は、依存関係プロパティ システムを使用して GetValue または SetValue を呼び出し、識別子フィールドを依存関係プロパティ識別子として渡すことです。

コンストラクター

AnimatedIcon()

AnimatedIcon クラスの新しいインスタンスを初期化します。

このドキュメントは、UWP 用の WinUI 2 に適用されます (Windows アプリ SDKWinUI の場合は、Windows アプリ SDK名前空間を参照してください)。

プロパティ

FallbackIconSource

アニメーション化されたアイコンを実行できない場合に使用する静的アイコンを取得または設定します。

このドキュメントは、UWP 用の WinUI 2 に適用されます (Windows アプリ SDKWinUI の場合は、Windows アプリ SDK名前空間を参照してください)。

FallbackIconSourceProperty

FallbackIconSource 依存関係プロパティを識別します。

このドキュメントは、UWP 用の WinUI 2 に適用されます (Windows アプリ SDKWinUI の場合は、Windows アプリ SDK名前空間を参照してください)。

MirroredWhenRightToLeft

FlowDirectionRightToLeft の場合にアイコンをミラー化するかどうかを示す値を取得または設定します。

このドキュメントは、UWP 用の WinUI 2 に適用されます (Windows アプリ SDKWinUI の場合は、Windows アプリ SDK名前空間を参照してください)。

MirroredWhenRightToLeftProperty

MirroredWhenRightToLeft 依存関係プロパティを識別します。

このドキュメントは、UWP 用の WinUI 2 に適用されます (Windows アプリ SDKWinUI の場合は、Windows アプリ SDK名前空間を参照してください)。

Source

オブジェクトによって表示されるアニメーション化されたビジュアルを AnimatedIcon 取得または設定します。

このドキュメントは、UWP 用の WinUI 2 に適用されます (Windows アプリ SDKWinUI の場合は、Windows アプリ SDK名前空間を参照してください)。

SourceProperty

Source 依存関係プロパティを識別 します

このドキュメントは、UWP 用の WinUI 2 に適用されます (Windows アプリ SDKWinUI の場合は、Windows アプリ SDK名前空間を参照してください)。

StateProperty

AnimatedIcon.State XAML 添付プロパティを識別します。

このドキュメントは、UWP 用の WinUI 2 に適用されます (Windows アプリ SDKWinUI の場合は、Windows アプリ SDK名前空間を参照してください)。

添付プロパティ

State

開発者が AnimatedIcon に設定するプロパティ。

このドキュメントは、UWP 用の WinUI 2 に適用されます (Windows アプリ SDKWinUI の場合は、Windows アプリ SDK名前空間を参照してください)。

メソッド

GetState(DependencyObject)

指定した DependencyObjectAnimatedIcon.State 添付プロパティの値を取得します。

このドキュメントは、UWP 用の WinUI 2 に適用されます (Windows アプリ SDKWinUI の場合は、Windows アプリ SDK名前空間を参照してください)。

SetState(DependencyObject, String)

指定した DependencyObjectAnimatedIcon.State 添付プロパティの値を指定します。

このドキュメントは、UWP 用の WinUI 2 に適用されます (Windows アプリ SDKWinUI の場合は、Windows アプリ SDK名前空間を参照してください)。

適用対象

こちらもご覧ください