AnimatedIcon Kelas
Definisi
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.
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
-
AnimatedIcon
- Atribut
Contoh
Tip
Untuk informasi selengkapnya, panduan desain, dan contoh kode, lihat Ikon animasi.
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 ketrue
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 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). |