VisualState Kelas

Definisi

Ruang nama:

Windows.UI.Xaml

Mewakili tampilan visual elemen UI saat berada dalam status tertentu. Status visual menggunakan Setters atau Storyboard untuk mengatur properti UI dalam halaman atau templat kontrol tempat VisualState ditentukan.

public ref class VisualState sealed : DependencyObject

/// [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)]
/// [Windows.UI.Xaml.Markup.ContentProperty(Name="Storyboard")]
/// [Windows.Foundation.Metadata.Activatable(65536, "Windows.Foundation.UniversalApiContract")]
class VisualState final : 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)]
[Windows.UI.Xaml.Markup.ContentProperty(Name="Storyboard")]
[Windows.Foundation.Metadata.Activatable(65536, "Windows.Foundation.UniversalApiContract")]
public sealed class VisualState : DependencyObject

Public NotInheritable Class VisualState
Inherits DependencyObject

<VisualState x:Name="stateName" />
-or-
<VisualState x:Name="stateName">
  singleStoryboard
</VisualState>
-or-
<VisualState x:Name="stateName">
  <VisualState.Setters>
    oneOrMoreSetters
  </VisualState.Setters>
  [optional]singleStoryboard
</VisualState>
-or-
<VisualState x:Name="stateName">
  <VisualState.StateTriggers>
    oneOrMoreTriggers
  </VisualState.StateTriggers>  
  <VisualState.Setters>
    oneOrMoreSetters
  </VisualState.Setters>
  [optional]singleStoryboard
</VisualState>

Warisan

Object Platform::Object IInspectable DependencyObject VisualState

Atribut

ActivatableAttribute ContractVersionAttribute MarshalingBehaviorAttribute ThreadingAttribute ContentPropertyAttribute

Persyaratan Windows

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

Contoh

Contoh ini membuat VisualStateGroup di ControlTemplatetombol yang disebut "CommonStates" dan menambahkan objek VisualState untuk status, "Normal", "Pressed", dan "PointerOver". Tombol juga mendefinisikan status yang disebut "Dinonaktifkan" yang ada di "CommonStates" bernama VisualStateGroup, tetapi contoh menghilangkannya untuk keringkasan.

<ControlTemplate TargetType="Button">
  <Border x:Name="RootElement">

    <VisualStateManager.VisualStateGroups>

      <!--Define the states for the common states.
          The states in the VisualStateGroup are mutually exclusive to
          each other.-->
      <VisualStateGroup x:Name="CommonStates">

        <!--The Normal state is the state the button is in
            when it is not in another state from this VisualStateGroup.-->
        <VisualState x:Name="Normal" />

        <!--Change the SolidColorBrush, BorderBrush, to red when the
            Pointer is over the button.-->
        <VisualState x:Name="PointerOver">
          <Storyboard>
            <ColorAnimation Storyboard.TargetName="BorderBrush" 
                              Storyboard.TargetProperty="Color" To="Red" />

          </Storyboard>

        </VisualState>

        <!--Change the SolidColorBrush, BorderBrush, to Transparent when the
            button is pressed.-->
        <VisualState x:Name="Pressed">
          <Storyboard >
            <ColorAnimation Storyboard.TargetName="BorderBrush" 
                              Storyboard.TargetProperty="Color" To="Transparent"/>
          </Storyboard>
        </VisualState>
          <!--The Disabled state is omitted for brevity.-->
        </VisualStateGroup>
  
    </VisualStateManager.VisualStateGroups>
    

    <Border.Background>
      <SolidColorBrush x:Name="BorderBrush" Color="Black"/>
    </Border.Background>

    <Grid Background="{TemplateBinding Background}" Margin="4">
      <ContentPresenter
        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
        Margin="4,5,4,4" />

    </Grid>


  </Border>
</ControlTemplate>

<Page>
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState>
                    <VisualState.StateTriggers>
                        <!-- VisualState to be triggered when window width is >=720 effective pixels -->
                        <AdaptiveTrigger MinWindowWidth="720"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="myPanel.Orientation" Value="Horizontal"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <StackPanel x:Name="myPanel" Orientation="Vertical">
            <TextBlock x:Name="myTextBlock" MaxLines="5" Style="{ThemeResource BodyTextBlockStyle}"/>
        </StackPanel>
    </Grid>
</Page>

Keterangan

Elemen VisualState harus selalu dimuat dalam induk VisualStateGroup di markup XAML. VisualStateGroup memiliki status properti koleksi implisit, sehingga Anda dapat menempatkan setiap VisualState sebagai elemen turunan langsung dari induk VisualStateGroup. Contohnya:

<VisualStateGroup x:Name="CommonStates">
   <VisualState x:Name="Normal"/>
   <VisualState x:Name="PointerOver">...</VisualState>
<!-- do not need explicit VisualStateGroups.States property element, States is the XAML content property-->
</VisualStateGroup>

Saat Anda menggunakan StateTriggers, pastikan bahwa VisualStateGroup dideklarasikan di bawah turunan pertama akar agar pemicu berlaku secara otomatis.

Status default

Adalah hukum dan umum untuk menentukan VisualState yang memiliki atribut x:Name tetapi tidak menentukan apa pun di Storyboard. Ini berguna karena VisualState seperti itu akan menggunakan nilai apa pun yang ada dalam templat default. Anda kemudian dapat secara khusus meminta status kosong dari panggilan GoToState . Saat status kosong menjadi status saat ini, yang membatalkan semua modifikasi pada properti templat yang dibuat oleh status visual sebelumnya dari VisualStateGroup yang sama. Untuk informasi selengkapnya tentang cara menggunakan grup untuk status visual, lihat Animasi storyboard untuk status visual.

Saat Anda menggunakan StateTriggers, Anda tidak lagi diharuskan membuat VisualState kosong untuk memanggil GoToState . Ketika kondisi untuk StateTrigger tidak lagi terpenuhi, semua modifikasi pada properti yang dibuat oleh VisualState terkait secara otomatis dihapus dan nilai yang disediakan dalam markup default berlaku.

VisualState dan x:Name

Metode GoToState (yang biasanya disebut dari kode kontrol) memerlukan parameter stateName untuk memberi tahu VisualStateManager status mana yang harus digunakan sebagai status saat ini. Tentukan atribut x:Name untuk setiap VisualState yang perlu diterapkan secara manual menggunakan panggilan GoToState dari kode. Jika Anda menggunakan StateTriggers untuk memicu VisualState dari markup secara otomatis, Anda tidak perlu menentukan atribut x:Name di VisualState tersebut.

Jika Anda menggunakan transisi visual, nilai atribut x:Name dari VisualState juga direferensikan oleh nilai Dari atau Ke dari VisualTransition. Dalam hal ini, nama mengidentifikasi status atau menyatakan bahwa VisualTransition menyediakan nilai perantara di antaranya.

Nilai atribut x:Name yang Anda tentukan untuk VisualState harus unik dalam templat kontrol XAML tempat VisualState berada. Cakupan untuk nama status tidak hanya tercakup untuk setiap VisualStateGroup, cakupannya dicakup ke semua status visual dalam templat. Misalnya, Anda tidak dapat menentukan dua status berbeda bernama "Fokus" dalam templat XAML yang sama, bahkan jika mereka berada dalam grup yang berbeda.

Anda harus menggunakan atribut x:Name untuk memberi nama status visual atau grup status visual; atribut "Name" yang tidak diprefiks tidak akan berfungsi. VisualState dan VisualStateGroup masing-masing memiliki properti Nama tetapi ini bersifat baca-saja. Properti Nama tersebut ada untuk skenario tingkat lanjut yang menggunakan kode untuk memeriksa konten templat kontrol pada run-time, bukan untuk pengaturan dari XAML.

Mengganti templat kontrol kontrol yang sudah ada

Jika Anda adalah pengembang aplikasi yang menggunakan kontrol di UI aplikasi, Anda dapat mengganti templat kontrol dengan mengatur properti Control.Template ke nilai yang berbeda. Atau Anda dapat mengganti templat dengan mendeklarasikan gaya baru yang menggunakan kunci gaya implisit untuk kontrol tersebut. Untuk informasi selengkapnya tentang konsep ini, lihat Mulai Cepat: Mengontrol templat.

Saat Anda mengganti templat kontrol, penting bagi Anda untuk mereproduksi semua elemen bernama VisualState yang ada dari konten VisualStateManager.VisualStateGroups templat kontrol asli di XAML. Kode kontrol (yang tidak Anda ubah) memanggil GoToState. Status dengan nama tersebut harus ada di templat kontrol. Permintaan untuk VisualState yang hilang tidak akan melemparkan pengecualian, tetapi sering kali akan meninggalkan kontrol dalam status visual yang akan membingungkan pengguna. Misalnya, jika Anda tidak menyediakan VisualState bernama "Diperiksa" untuk kontrol Kotak Centang , tidak ada umpan balik visual yang muncul saat pengguna memilih kontrol. Pengguna akan mengharapkan bahwa ada sesuatu yang berbeda secara visual untuk membedakan Kotak Centang yang dicentang dari Kotak Centang yang tidak dicentang. Jadi, kegagalan untuk mereprodusi status visual pada bagian pengembang aplikasi akan membuat kontrol tampak rusak kepada pengguna.

Saat Anda menggunakan IDE seperti Microsoft Visual Studio, tindakan yang Anda gunakan untuk mengganti templat kontrol menyediakan opsi untuk memulai dengan salinan templat asli XAML, sehingga Anda dapat melihat semua elemen bernama VisualState asli dan komposisi kontrol lainnya yang Anda ganti. Yang terbaik adalah memulai dengan salinan templat, lalu memodifikasinya, sehingga Anda tidak secara tidak sengaja menghilangkan status visual yang diharapkan dari templat baru Anda.

Mengambil status visual bernama kontrol kustom

Jika Anda mendefinisikan kontrol kustom yang memiliki status visual dalam templat kontrolnya XAML, ini adalah praktik terbaik untuk mengaitkan kelas kontrol untuk menunjukkan kepada konsumen mana status visual yang tersedia. Untuk melakukan ini, terapkan satu atau beberapa atribut TemplateVisualState di tingkat kelas kode definisi kontrol Anda. Setiap atribut harus menentukan atribut x:Name status, yang merupakan nilai stateName yang akan diteruskan konsumen kontrol dalam panggilan GoToState untuk menggunakan status visual tersebut. Jika VisualState adalah bagian dari VisualStateGroup, itu juga harus ditunjukkan dalam nilai atribut Anda.

Konstruktor

VisualState()

Menginisialisasi instans baru kelas VisualState .

Properti

Dispatcher	Mendapatkan CoreDispatcher yang dikaitkan dengan objek ini. CoreDispatcher mewakili fasilitas yang dapat mengakses DependencyObject pada utas UI meskipun kode dimulai oleh utas non-UI. (Diperoleh dari DependencyObject)
Name	Mendapatkan nama VisualState.
Setters	Mendapatkan kumpulan objek Setter yang menentukan nilai properti diskrit yang mengontrol tampilan UIElements saat VisualState ini diterapkan.
StateTriggers	Mendapatkan kumpulan objek StateTriggerBase yang menunjukkan kapan VisualState ini harus diterapkan. Jika ada (tidak semua) pemicu aktif, VisualState akan diterapkan.
Storyboard	Mendapatkan atau mengatur Storyboard yang menentukan nilai properti khusus status dan tampilan kontrol saat menggunakan status visual ini.

Metode

ClearValue(DependencyProperty)	Menghapus nilai lokal properti dependensi. (Diperoleh dari DependencyObject)
GetAnimationBaseValue(DependencyProperty)	Mengembalikan nilai dasar apa pun yang ditetapkan untuk properti dependensi, yang akan berlaku dalam kasus di mana animasi tidak aktif. (Diperoleh dari DependencyObject)
GetValue(DependencyProperty)	Mengembalikan nilai efektif properti dependensi saat ini dari DependencyObject. (Diperoleh dari DependencyObject)
ReadLocalValue(DependencyProperty)	Mengembalikan nilai lokal properti dependensi, jika nilai lokal ditetapkan. (Diperoleh dari DependencyObject)
RegisterPropertyChangedCallback(DependencyProperty, DependencyPropertyChangedCallback)	Mendaftarkan fungsi pemberitahuan untuk mendengarkan perubahan pada DependencyProperty tertentu pada instans DependencyObject ini. (Diperoleh dari DependencyObject)
SetValue(DependencyProperty, Object)	Mengatur nilai lokal properti dependensi pada DependencyObject. (Diperoleh dari DependencyObject)
UnregisterPropertyChangedCallback(DependencyProperty, Int64)	Membatalkan pemberitahuan perubahan yang sebelumnya terdaftar dengan memanggil RegisterPropertyChangedCallback. (Diperoleh dari DependencyObject)

Lihat juga

• DependencyObject
• VisualStateGroup
• Animasi papan cerita untuk status visual
• Animasi papan cerita
• atribut x:Name
• Mulai cepat: Templat kontrol
• Sampel kontrol XAML dan gaya aplikasi
• Sampel master/detail (Windows 10)