VisualStateManager Kelas

Referensi

Definisi

Ruang nama:: Windows.UI.Xaml

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

Mengelola status visual dan logika untuk transisi antara status visual untuk kontrol. Juga menyediakan dukungan properti terlampir untuk VisualStateManager.VisualStateGroups, yaitu cara Anda menentukan status visual di XAML untuk templat kontrol.

/// [Windows.Foundation.Metadata.ContractVersion(Windows.Foundation.UniversalApiContract, 65536)]
/// [Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
/// [Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
class VisualStateManager : DependencyObject

[Windows.Foundation.Metadata.ContractVersion(typeof(Windows.Foundation.UniversalApiContract), 65536)]
[Windows.Foundation.Metadata.MarshalingBehavior(Windows.Foundation.Metadata.MarshalingType.Agile)]
[Windows.Foundation.Metadata.Threading(Windows.Foundation.Metadata.ThreadingModel.Both)]
public class VisualStateManager : DependencyObject

Public Class VisualStateManager
Inherits DependencyObject

Warisan: Object IInspectable DependencyObject VisualStateManager

Atribut: ContractVersionAttribute MarshalingBehaviorAttribute ThreadingAttribute

Persyaratan Windows

Rangkaian perangkat	Windows 10 (diperkenalkan dalam 10.0.10240.0)
API contract	Windows.Foundation.UniversalApiContract (diperkenalkan dalam v1.0)

Contoh

Contoh ini memperlihatkan cara menggunakan properti terlampir VisualStateManager.VisualStateGroups XAML. Perhatikan bagaimana sebaliknya tidak ada tag "VisualStateManager" yang ditentukan. Secara konseptual, VisualStateManager.VisualStateGroups berisi status visual untuk kontrol, sebagai tag turunan langsung dari akar templat dalam templat kontrol.

Kumpulan status visual tertentu berisi satu VisualStateGroup, yang disebut "CommonStates", yang menentukan objek VisualState "PointerOver" dan "Normal". Saat pengguna meletakkan penunjuk di atas Tombol, Kisi berubah dari hijau menjadi merah dalam .5 detik. Saat pengguna memindahkan penunjuk menjauh dari tombol, Grid segera berubah kembali menjadi hijau.

<ControlTemplate TargetType="Button">
  <Grid >
    <VisualStateManager.VisualStateGroups>
      <VisualStateGroup x:Name="CommonStates">

        <VisualStateGroup.Transitions>

          <!--Take one half second to transition to the PointerOver state.-->
          <VisualTransition To="PointerOver" 
                              GeneratedDuration="0:0:0.5"/>
        </VisualStateGroup.Transitions>
        
        <VisualState x:Name="Normal" />

        <!--Change the SolidColorBrush, ButtonBrush, to red when the
            Pointer is over the button.-->
        <VisualState x:Name="PointerOver">
          <Storyboard>
            <ColorAnimation Storyboard.TargetName="ButtonBrush" 
                            Storyboard.TargetProperty="Color" To="Red" />
          </Storyboard>
        </VisualState>
      </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
    <Grid.Background>
      <SolidColorBrush x:Name="ButtonBrush" Color="Green"/>
    </Grid.Background>
  </Grid>
</ControlTemplate>

<common:LayoutAwarePage>
  <Grid>
...
    <VisualStateManager.VisualStateGroups>
    <!-- Visual states reflect the application's window size -->
      <VisualStateGroup>
        <VisualState x:Name="DefaultLayout">
           <Storyboard>
           </Storyboard>
        </VisualState>
        <VisualState x:Name="Below768Layout">
           <Storyboard>
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)"
               Storyboard.TargetName="ContentRoot">
               <DiscreteObjectKeyFrame KeyTime="0">
                 <DiscreteObjectKeyFrame.Value>
                   <Thickness>20,20,20,20</Thickness>
                 </DiscreteObjectKeyFrame.Value>
               </DiscreteObjectKeyFrame>
             </ObjectAnimationUsingKeyFrames>
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.HorizontalAlignment)"
               Storyboard.TargetName="FooterPanel">
               <DiscreteObjectKeyFrame KeyTime="0">
                 <DiscreteObjectKeyFrame.Value>
                    <HorizontalAlignment>Left</HorizontalAlignment>
                 </DiscreteObjectKeyFrame.Value>
               </DiscreteObjectKeyFrame>
             </ObjectAnimationUsingKeyFrames>
           </Storyboard>
         </VisualState>
       </VisualStateGroup>
     </VisualStateManager.VisualStateGroups>
   </Grid>
</common:LayoutAwarePage>

Cuplikan berikutnya adalah kode untuk digunakan bersama dengan XAML, menunjukkan bagaimana aplikasi mungkin mendeteksi lebar jendela aplikasi dan menggunakan info tersebut untuk memanggil status visual yang sesuai.

String state = (Window.Current.Bounds.Width > 768) ? "DefaultLayout" : "Below768Layout";
VisualStateManager.GoToState(this, state, false); // 'this' is the LayoutAwarePage, scope is page code-behind

Keterangan

VisualStateManager mendukung dua fitur penting untuk penulis kontrol, dan untuk pengembang aplikasi yang menerapkan templat kustom ke kontrol:

Penulis kontrol atau pengembang aplikasi menambahkan elemen objek VisualStateGroup ke elemen akar definisi templat kontrol di XAML, menggunakan properti terlampir VisualStateManager.VisualStateGroups . Dalam elemen VisualStateGroup, setiap VisualState mewakili status visual kontrol diskrit. Setiap VisualState memiliki nama yang mewakili status UI yang dapat diubah oleh pengguna, atau diubah oleh logika kontrol. VisualState terutama terdiri dari Storyboard. Papan Cerita ini menargetkan perubahan nilai properti dependensi individu yang harus diterapkan setiap kali kontrol berada dalam status visual tersebut. Untuk informasi selengkapnya tentang cara menulis status visual di XAML, termasuk contoh kode, lihat Animasi storyboard untuk status visual.
Mengontrol transisi penulis atau pengembang aplikasi antara status ini dengan memanggil metode GoToState statis dari VisualStateManager. Penulis kontrol melakukan ini setiap kali logika kontrol menangani peristiwa yang menunjukkan perubahan status, atau logika kontrol memulai perubahan status dengan sendirinya. Lebih umum bagi kode definisi kontrol untuk melakukan ini daripada kode aplikasi, sehingga semua status visual yang mungkin serta transisi dan kondisi pemicunya ada secara default untuk kode aplikasi, dan logika dienkapsulasi oleh kontrol.

Sebagian besar pengembang hanya akan menggunakan dua API VisualStateManager: VisualStateManager.VisualStateGroups, dan GoToState, seperti yang dijelaskan di atas. API yang tersisa semuanya untuk dukungan ekstensi dan membuat VisualStateManager kustom. Untuk informasi selengkapnya, lihat bagian "VisualStateManager Kustom" dalam topik ini.

Saat Anda mengedit salinan gaya seperti yang diaktifkan oleh permukaan desain XAML Microsoft Visual Studio, status visual dari templat default ditentukan dalam XAML yang Anda edit. Pastikan Anda tidak menghapus status ini atau mengubah namanya, karena logika kontrol mengharapkan bahwa status visual ini ada di templat.

Selain status visual, model status visual juga mencakup transisi. Transisi adalah tindakan animasi yang dikontrol oleh Papan Cerita yang terjadi di antara setiap status visual saat status diubah. Transisi dapat didefinisikan secara berbeda untuk setiap kombinasi status awal dan status akhir seperti yang didefinisikan oleh serangkaian status visual kontrol Anda. Transisi ditentukan oleh properti Transisi VisualStateGroup, di XAML menggunakan sintaks elemen properti. Sebagian besar templat kontrol default tidak menentukan transisi. Dengan tidak adanya transisi yang ditentukan secara khusus, transisi antar status terjadi secara instan (tanpa durasi). Untuk informasi selengkapnya, lihat VisualTransition.

VisualStateManager Kustom

Jika Anda ingin menerapkan logika Anda sendiri untuk transisi antar status (skenario tingkat lanjut), Anda dapat membuat kelas yang mewarisi dari VisualStateManager. Ikuti panduan berikut:

Kelas turunan harus mengambil alih metode GoToStateCore yang dilindungi. Setiap instans VisualStateManager kustom menggunakan logika Core ini saat metode GoToState-nya dipanggil.
Untuk mereferensikan kelas VisualStateManager kustom Anda, atur nilai properti terlampir VisualStateManager.CustomVisualStateManager pada elemen akar ControlTemplate tempat Anda ingin menggunakan perilaku kelas VisualStateManager kustom, bersama dengan penggunaan properti terlampir VisualStateManager.VisualStateGroups yang menentukan status visual untuk templat. Anda biasanya membuat instans kelas VisualStateManager kustom melalui konstruksi XAML default di Application.Resources. Kemudian properti terlampir VisualStateManager.CustomVisualStateManager diatur menggunakan referensi ekstensi markup {StaticResource} ke kunci sumber daya VisualStateManager kustom.

Itulah persyaratan dasar untuk membuat dan menggunakan VisualStateManager kustom. Anda juga dapat memilih untuk mengambil alih beberapa perilaku lagi:

Ambil alih RaiseCurrentStateChanged untuk mengontrol kapan peristiwa CurrentStateChanged diaktifkan oleh VisualStateGroup yang dikelola oleh VisualStateManager.
Ambil alih RaiseCurrentStateChanging untuk mengontrol kapan peristiwa CurrentStateChanging diaktifkan oleh VisualStateGroup yang dikelola oleh VisualStateManager.
Mengambil alih atau membebani konstruktor jika kelas kustom Anda memerlukan informasi tambahan untuk diinisialisasi.

Semua API lainnya (CustomVisualStateManagerProperty, GetCustomVisualStateManager, GetVisualStateGroups, SetCustomVisualStateManager) adalah infrastruktur untuk dukungan properti terlampir, dan Anda tidak perlu memanggilnya atau melakukan apa pun dengannya.

Status visual untuk elemen yang bukan kontrol

Status visual terkadang berguna untuk skenario di mana Anda ingin mengubah status beberapa area UI yang tidak segera menjadi subkelas Kontrol . Anda tidak dapat melakukan ini secara langsung karena parameter kontrol metode GoToState memerlukan subkelas Kontrol , yang mengacu pada objek yang ditindak lanjuti VisualStateManager. Halaman adalah subkelas Kontrol , dan cukup jarang Anda menampilkan UI dalam konteks di mana Anda tidak memiliki Halaman, atau akar Window.Content Anda bukan subkelas Kontrol . Kami sarankan Anda menentukan UserControl kustom untuk menjadi root Window.Content atau menjadi kontainer untuk konten lain yang ingin Anda terapkan statusnya (seperti Panel). Kemudian Anda dapat memanggil GoToState di UserControl Anda dan menerapkan status terlepas dari apakah konten lainnya adalah Kontrol. Misalnya Anda dapat menerapkan status visual ke UI yang hanya terdiri dari SwapChainPanel selama Anda menempatkannya dalam UserControl Anda dan menyatakan status bernama yang berlaku untuk properti UserControl induk atau dari bagian SwapChainPanel bernama dari templat.

Properti terlampir XAML

VisualStateManager adalah kelas layanan host untuk beberapa properti terlampir XAML.

Untuk mendukung akses prosesor XAML ke properti terlampir, dan juga untuk mengekspos operasi get dan set 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.

Properti Terlampir	Deskripsi
VisualStateGroups	Mendapatkan koleksi elemen VisualStateGroup yang ditentukan oleh elemen akar definisi templat. Kontrol biasanya mendefinisikan ini sebagai bagian dari templatnya. Jenis: VisualStateGroup Bidang pengidentifikasi: T/A Metode pengaktif: GetVisualStateGroups Saat mendapatkan properti ini dalam kode, gunakan GetVisualStateGroups. Ini mengembalikan objek koleksi, yang dapat Anda tambahkan itemnya. Ini menyejajarkan perilaku pemrosesan XAML dari elemen turunan dari penggunaan elemen properti VisualStateManager.VisualStateGroups. Karena tidak ada pengidentifikasi properti dependensi publik untuk properti terlampir khusus ini, Anda tidak dapat menggunakan GetValue untuk mendapatkan nilai properti terlampir ini, Anda harus selalu menggunakan GetVisualStateGroups.
CustomVisualStateManager	Mendapatkan atau mengatur objek VisualStateManager kustom yang menangani transisi antara status kontrol.

Properti Terlampir

Deskripsi

VisualStateGroups

Mendapatkan koleksi elemen VisualStateGroup yang ditentukan oleh elemen akar definisi templat. Kontrol biasanya mendefinisikan ini sebagai bagian dari templatnya.

Jenis: VisualStateGroup
Bidang pengidentifikasi: T/A
Metode pengaktif: GetVisualStateGroups

Saat mendapatkan properti ini dalam kode, gunakan GetVisualStateGroups. Ini mengembalikan objek koleksi, yang dapat Anda tambahkan itemnya. Ini menyejajarkan perilaku pemrosesan XAML dari elemen turunan dari penggunaan elemen properti VisualStateManager.VisualStateGroups.

Karena tidak ada pengidentifikasi properti dependensi publik untuk properti terlampir khusus ini, Anda tidak dapat menggunakan GetValue untuk mendapatkan nilai properti terlampir ini, Anda harus selalu menggunakan GetVisualStateGroups.

CustomVisualStateManager

Mendapatkan atau mengatur objek VisualStateManager kustom yang menangani transisi antara status kontrol.

Konstruktor

VisualStateManager()

Menginisialisasi instans baru kelas VisualStateManager .

Properti

CustomVisualStateManagerProperty	Mengidentifikasi properti dependensi VisualStateManager.CustomVisualStateManager .
Dispatcher	Mendapatkan CoreDispatcher yang dikaitkan dengan objek ini. CoreDispatcher mewakili fasilitas yang dapat mengakses DependencyObject pada utas UI bahkan jika kode dimulai oleh utas non-UI. (Diperoleh dari DependencyObject)

Properti yang Terlampir