AnimatedIcon クラス

定義

/// [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 ギャラリー アプリには、ほとんどの 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>

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

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

XAML 添付プロパティ

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

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

コンストラクター

プロパティ

添付プロパティ

メソッド

適用対象

こちらもご覧ください

• AnimatedVisualPlayer
• アニメーション 化されたアイコンの概要
• VisualStateManager
• Lottie-Windows