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 は、アニメーションを再生できない場合に使用されます。
に設定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 アプリ 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	Source 依存関係プロパティを識別します。このドキュメントは、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 添付プロパティ

コンストラクター

プロパティ

添付プロパティ

メソッド

適用対象

こちらもご覧ください

フィードバック

その他のリソース

次の方法で共有

AnimatedIcon クラス

定義

例

ボタンに AnimatedIcon を追加する

注釈

カスタム アニメーション

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

状態を設定する場所

表示状態を使用する

ポインター イベントを処理する

XAML 添付プロパティ

コンストラクター

プロパティ

添付プロパティ

メソッド

適用対象

こちらもご覧ください

フィードバック

その他のリソース

カスタムアニメーション

ポインターイベントを処理する