AnimatedIcon Kelas

Referensi

Definisi

Ruang nama:: Microsoft.UI.Xaml.Controls

Penting

Beberapa informasi terkait produk prarilis yang dapat diubah secara signifikan sebelum dirilis. Microsoft tidak memberikan jaminan, tersirat maupun tersurat, sehubungan dengan informasi yang diberikan di sini.

Edit

Mewakili ikon yang menampilkan dan mengontrol visual yang dapat menganimasikan sebagai respons terhadap interaksi pengguna dan perubahan status visual.

Dokumentasi ini berlaku untuk WinUI 2 untuk UWP (untuk WinUI di SDK Aplikasi Windows, lihat namespace SDK Aplikasi Windows).

/// [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

Warisan: IconElement
AnimatedIcon

Atribut: ContractVersionAttribute MarshalingBehaviorAttribute ThreadingAttribute ContentPropertyAttribute

Contoh

Tip

Untuk informasi selengkapnya, panduan desain, dan contoh kode, lihat Ikon animasi.

Buka aplikasi Galeri WinUI 2 dan lihat AnimatedIcon beraksi.

Aplikasi WinUI 2 Gallery mencakup contoh interaktif sebagian besar kontrol, fitur, dan fungsi WinUI 2. Dapatkan aplikasi dari Microsoft Store atau dapatkan kode sumber di GitHub.

Menambahkan AnimatedIcon ke tombol

Contoh ini menunjukkan tombol kembali yang menampilkan ikon panah belakang yang menganimasikan saat peristiwa penunjuk terjadi.

AnimatedBackVisualSource adalah animasi panah belakang yang disediakan oleh WinUI.
FallbackIconSource digunakan saat animasi tidak dapat diputar.
Metode AddHandler dengan handledEventsToo diatur ke true digunakan untuk peristiwa yang ditandai tombol sebagai Ditangani.

<!-- 
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");
}

Keterangan

Atur properti AnimatedIcon.Source untuk menentukan visual animasi untuk ikon tersebut. WinUI menyediakan visual animasi untuk beberapa ikon umum di namespace Microsoft.UI.Xaml.Controls.AnimatedVisuals .

Dalam beberapa kasus, pengaturan atau batasan sistem dapat mencegah ikon dianimasikan.

Jika pengguna menonaktifkan animasi di pengaturan sistem mereka, AnimatedIcon menampilkan bingkai akhir transisi status tempat kontrol berada.
Tentukan FallbackIconSource yang akan digunakan saat animasi tidak didukung, seperti pada versi Windows yang lebih lama yang tidak mendukung animasi Lottie.

Animasi kustom

Anda dapat membuat animasi kustom untuk digunakan sebagai ikon animasi di aplikasi Anda. Animasi dapat dibuat dengan Adobe AfterEffects, lalu Anda dapat menggunakan output tersebut dengan pustaka Lottie-Windows untuk menghasilkan kelas kustom yang mengimplementasikan IAnimatedVisualSource2. Anda dapat menggunakan kelas ini sebagai Sumber untuk ikon animasi. Untuk informasi selengkapnya, lihat Menggunakan Lottie untuk membuat konten animasi untuk AnimatedIcon.

Mengontrol status ikon animasi

Anda mengubah posisi pemutaran dan status animasi dengan mengatur properti terlampir AnimatedIcon.State . Properti status mengambil nilai string yang menjelaskan status visual, seperti "Normal", "PointerOver", atau "Pressed". Anda juga dapat menentukan transisi status tertentu, seperti "PressedToNormal".

Ikon animasi Sumber berisi Penanda yang memetakan posisi di garis waktu animasi ke status visual. Nilai string yang Source didukung untuk mengatur State properti terlampir ditentukan dalam Markers koleksi. Untuk informasi selengkapnya, lihat Menentukan penanda AnimatedIcon.

Sumber visual animasi yang digunakan dalam templat kontrol sering memiliki sekumpulan Markers peta yang lebih kompleks untuk mengontrol status, sementara visual animasi untuk penggunaan yang lebih umum sering memiliki sekumpulan Markers peta yang lebih sederhana untuk menunjuk peristiwa.

Tempat mengatur status

Anda dapat mengatur properti pada AnimatedIcon atau pada leluhur di pohon XAML. Dalam kedua kasus, Anda perlu menggunakan sintaks properti terlampir, seperti ini:

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

Penting

Jika Anda menambahkan AnimatedIcon ke pohon XAML dan mengatur State properti pada elemen leluhur, State properti harus diatur ke nilai awal sebelum ikon animasi pertama kali dimuat agar ikon dapat dianimasikan. Anda biasanya mengatur status awal di XAML seperti yang ditunjukkan di sini.

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

Menggunakan status visual

Anda dapat menambahkan AnimatedIcon ke ControlTemplate kontrol XAML dan menggunakan VisualStateManager untuk mengatur statusnya. Beberapa kontrol, seperti NavigationViewItem, secara otomatis mengatur status untuk yang AnimatedIcon ditetapkan sebagai Ikonnya.

Untuk melihat contoh yang diatur AnimatedIcon.State dalam status visual templat kontrol, lihat CheckBox_themeresources.xaml di repositori WinUI GitHub. Kontrol CheckBox menggunakan AnimatedAcceptVisualSource untuk tanda centangnya. Setter status visual terlihat seperti ini:

<VisualState x:Name="CheckedPointerOver">
    ...
    <VisualState.Setters>
        <Setter Target="CheckGlyph.(AnimatedIcon.State)" Value="PointerOverOn"/>
    </VisualState.Setters>
</VisualState>

Menangani peristiwa penunjuk

Untuk membuat AnimatedIcon respons terhadap interaksi pengguna, Anda perlu mengatur properti terlampir AnimatedIcon.State sebagai respons terhadap beberapa peristiwa penunjuk. Tabel ini memperlihatkan peristiwa penunjuk yang biasanya akan Anda tangani, dan status umum yang memetakan ke peristiwa ini. (Namun, tidak setiap sumber ikon animasi akan memetakan ke status ini dengan tepat.)

Kejadian	Provinsi
PointerEntered	"`PointerOver`"
PointerPressed	"`Pressed`"
PointerReleased	"`Normal`"
PointerExited	"`Normal`"

Tip

Jika Anda menempatkan di AnimatedIcon dalam Tombol atau kontrol lain yang memiliki peristiwa Klik , PointerPressed peristiwa dan PointerReleased ditandai sebagai Ditangani. Untuk menangani peristiwa ini pada tombol, gunakan metode AddHandler untuk menyambungkan penanganan aktivitas Anda dan tentukan handledEventsToo sebagai true. Gunakan RemoveHandler untuk memutuskan sambungan penanganan aktivitas.

Lihat bagian Contoh untuk kode sampel yang menunjukkan penanganan aktivitas ini.

Properti terlampir XAML

AnimatedIcon adalah kelas layanan host untuk properti terlampir XAML.

Untuk mendukung akses prosesor XAML ke properti terlampir, dan juga untuk mengekspos operasi dapatkan dan atur yang setara ke kode, setiap properti terlampir XAML memiliki sepasang metode aksesor Get and Set. Cara lain untuk mendapatkan atau mengatur nilai dalam kode adalah dengan menggunakan sistem properti dependensi, memanggil GetValue atau SetValue dan meneruskan bidang pengidentifikasi sebagai pengidentifikasi properti dependensi.

Konstruktor

AnimatedIcon()

Menginisialisasi instans baru kelas AnimatedIcon .

Dokumentasi ini berlaku untuk WinUI 2 untuk UWP (untuk WinUI di SDK Aplikasi Windows, lihat namespace SDK Aplikasi Windows).

Properti

FallbackIconSource	Mendapatkan atau mengatur ikon statis untuk digunakan saat ikon animasi tidak dapat berjalan. Dokumentasi ini berlaku untuk WinUI 2 untuk UWP (untuk WinUI di SDK Aplikasi Windows, lihat namespace SDK Aplikasi Windows).
FallbackIconSourceProperty	Mengidentifikasi properti dependensi FallbackIconSource . Dokumentasi ini berlaku untuk WinUI 2 untuk UWP (untuk WinUI di SDK Aplikasi Windows, lihat namespace SDK Aplikasi Windows).
MirroredWhenRightToLeft	Mendapatkan atau mengatur nilai yang menunjukkan apakah ikon dicerminkan saat FlowDirection adalah RightToLeft. Dokumentasi ini berlaku untuk WinUI 2 untuk UWP (untuk WinUI di SDK Aplikasi Windows, lihat namespace SDK Aplikasi Windows).
MirroredWhenRightToLeftProperty	Mengidentifikasi properti dependensi MirroredWhenRightToLeft . Dokumentasi ini berlaku untuk WinUI 2 untuk UWP (untuk WinUI di SDK Aplikasi Windows, lihat namespace SDK Aplikasi Windows).
Source	Mendapatkan atau mengatur visual animasi yang ditunjukkan oleh `AnimatedIcon` objek . Dokumentasi ini berlaku untuk WinUI 2 untuk UWP (untuk WinUI di SDK Aplikasi Windows, lihat namespace SDK Aplikasi Windows).
SourceProperty	Mengidentifikasi properti Dependensi sumber . Dokumentasi ini berlaku untuk WinUI 2 untuk UWP (untuk WinUI di SDK Aplikasi Windows, lihat namespace SDK Aplikasi Windows).
StateProperty	Mengidentifikasi properti terlampir AnimatedIcon.State XAML. Dokumentasi ini berlaku untuk WinUI 2 untuk UWP (untuk WinUI di SDK Aplikasi Windows, lihat namespace SDK Aplikasi Windows).

Properti yang Terlampir

State

Properti yang ditetapkan pengembang di AnimatedIcon.

Dokumentasi ini berlaku untuk WinUI 2 untuk UWP (untuk WinUI di SDK Aplikasi Windows, lihat namespace SDK Aplikasi Windows).

Metode

GetState(DependencyObject)

Mengambil nilai properti terlampir AnimatedIcon.State untuk DependencyObject yang ditentukan.

Dokumentasi ini berlaku untuk WinUI 2 untuk UWP (untuk WinUI di SDK Aplikasi Windows, lihat namespace SDK Aplikasi Windows).

SetState(DependencyObject, String)

Menentukan nilai properti terlampir AnimatedIcon.State untuk DependencyObject yang ditentukan.

Dokumentasi ini berlaku untuk WinUI 2 untuk UWP (untuk WinUI di SDK Aplikasi Windows, lihat namespace SDK Aplikasi Windows).

Berlaku untuk

AnimatedIcon Kelas

Definisi

Contoh

Menambahkan AnimatedIcon ke tombol

Keterangan

Animasi kustom

Mengontrol status ikon animasi

Tempat mengatur status

Menggunakan status visual

Menangani peristiwa penunjuk

Properti terlampir XAML

Konstruktor

Properti

Properti yang Terlampir

Metode

Berlaku untuk

Lihat juga

Saran dan Komentar

Saran dan Komentar

Sumber Daya Tambahan: