Bagikan melalui

Gambaran Umum Popup

  • Artikel

Kontrol Popup ini menyediakan cara untuk menampilkan konten di jendela terpisah yang mengambang di atas jendela aplikasi saat ini relatif terhadap elemen atau koordinat layar yang ditunjuk. Topik ini memperkenalkan Popup kontrol dan memberikan informasi tentang penggunaannya.

Apa itu Popup?

Popup Kontrol menampilkan konten di jendela terpisah relatif terhadap elemen atau titik pada layar. Popup Ketika terlihat, IsOpen properti diatur ke true.

Catatan

Popup Tidak terbuka secara otomatis ketika penunjuk mouse bergerak di atas objek induknya. Jika Anda ingin Popup membuka secara otomatis, gunakan ToolTip kelas atau ToolTipService . Untuk informasi selengkapnya, lihat Ringkasan TipsAlat.

Membuat Popup

Contoh berikut menunjukkan cara menentukan Popup kontrol yang merupakan elemen turunan dari ToggleButton kontrol. ToggleButton Karena hanya dapat memiliki satu elemen anak, contoh ini menempatkan teks untuk ToggleButton dan Popup kontrol dalam StackPanel. Konten Popup ditampilkan di jendela terpisah yang mengambang di atas jendela aplikasi di dekat kontrol terkait ToggleButton .

<ToggleButton x:Name="TogglePopupButton" Height="30" Width="150" HorizontalAlignment="Left">
    <StackPanel>
        <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center">
            <Run Text="Is button toggled? " />
            <Run Text="{Binding IsChecked, ElementName=TogglePopupButton}" />
        </TextBlock>

        <Popup Name="myPopup" IsOpen="{Binding IsChecked, ElementName=TogglePopupButton}">
            <Border BorderThickness="1">
                <TextBlock Name="myPopupText" Background="LightBlue" Foreground="Blue" Padding="30">
                Popup Text
                </TextBlock>
            </Border>
        </Popup>
    </StackPanel>
</ToggleButton>

Kontrol yang Menerapkan Popup

Anda dapat membangun Popup kontrol ke kontrol lain. Kontrol berikut menerapkan Popup kontrol untuk penggunaan tertentu:

  • ToolTip. Jika Anda ingin membuat tipsalat untuk elemen, gunakan ToolTip kelas dan ToolTipService . Untuk informasi selengkapnya, lihat Ringkasan TipsAlat.

  • ContextMenu. Jika Anda ingin membuat menu konteks untuk elemen, gunakan ContextMenu kontrol . Untuk informasi selengkapnya, lihat Gambaran Umum ContextMenu.

  • ComboBox. Jika Anda ingin membuat kontrol pilihan yang memiliki kotak daftar drop-down yang dapat diperlihatkan atau disembunyikan, gunakan ComboBox kontrol .

  • Expander. Jika Anda ingin membuat kontrol yang menampilkan header dengan area yang dapat diciutkan yang menampilkan konten, gunakan Expander kontrol . Untuk informasi selengkapnya, lihat Gambaran Umum Expander.

Kontrol ini Popup menyediakan fungsionalitas yang memungkinkan Anda menyesuaikan perilaku dan tampilannya. Misalnya, Anda dapat mengatur perilaku terbuka dan tutup, animasi, efek opasitas dan bitmap, serta Popup ukuran dan posisi.

Perilaku Buka dan Tutup

Popup Kontrol menampilkan kontennya saat IsOpen properti diatur ke true. Secara default, Popup tetap terbuka hingga IsOpen properti diatur ke false. Namun, Anda dapat mengubah perilaku default dengan mengatur StaysOpen properti ke false. Ketika Anda mengatur properti ini ke false, jendela Popup konten memiliki tangkapan mouse. Penangkapan Popup mouse hilang dan jendela ditutup ketika peristiwa mouse terjadi di Popup luar jendela.

Peristiwa Opened dan Closed dimunculkan saat Popup jendela konten terbuka atau tertutup.

Animasi

Kontrol Popup ini memiliki dukungan bawaan untuk animasi yang biasanya terkait dengan perilaku seperti pudar masuk dan slide-in. Anda dapat mengaktifkan animasi ini dengan mengatur PopupAnimation properti ke PopupAnimation nilai enumerasi. Agar Popup animasi berfungsi dengan benar, Anda harus mengatur properti ke AllowsTransparencytrue.

Anda juga dapat menerapkan animasi seperti Storyboard ke Popup kontrol.

Efek Opasitas dan Bitmap

Properti Opacity untuk Popup kontrol tidak berpengaruh pada isinya. Secara default, jendela Popup konten buram. Untuk membuat transparan Popup, atur properti ke AllowsTransparencytrue.

Konten dari Popup tidak mewarisi efek bitmap, seperti DropShadowBitmapEffect, yang Anda langsung atur pada Popup kontrol atau pada elemen lain di jendela induk. Agar efek bitmap muncul pada konten Popup, Anda harus mengatur efek bitmap langsung pada kontennya. Misalnya, jika anak dari adalah PopupStackPanel, atur efek bitmap pada StackPanel.

Secara default, ukurannya Popup secara otomatis ke kontennya. Ketika ukuran otomatis terjadi, beberapa efek bitmap mungkin disembunyikan karena ukuran default area layar yang ditentukan untuk Popup konten tidak memberikan ruang yang cukup untuk efek bitmap untuk ditampilkan.

Popup konten juga dapat dikaburkan saat Anda mengatur RenderTransform pada konten. Dalam skenario ini, beberapa konten mungkin disembunyikan jika konten yang diubah Popup meluas di luar area asli Popup. Jika efek bitmap atau transformasi membutuhkan lebih banyak ruang, Anda dapat menentukan margin di sekitar Popup konten untuk menyediakan lebih banyak area untuk kontrol.

Menentukan Posisi Popup

Anda dapat memposisikan popup dengan mengatur PlacementTargetproperti , , PlacementRectanglePlacement, HorizontalOffset, dan VerticalOffsetProperty . Untuk informasi selengkapnya, lihat Perilaku Penempatan Popup. Ketika Popup ditampilkan di layar, ia tidak memposisikan ulang dirinya sendiri jika induknya diposisikan ulang.

Menyesuaikan Penempatan Popup

Anda dapat menyesuaikan penempatan Popup kontrol dengan menentukan sekumpulan koordinat yang relatif terhadap PlacementTarget tempat Anda ingin menampilkannya Popup .

Untuk menyesuaikan penempatan, atur properti ke PlacementCustom. Kemudian tentukan CustomPopupPlacementCallback delegasi yang mengembalikan serangkaian kemungkinan titik penempatan dan sumbu utama (dalam urutan preferensi) untuk Popup. Titik yang menunjukkan bagian terbesar dari Popup dipilih secara otomatis. Misalnya, lihat Menentukan Posisi Popup Kustom.

Popup Kontrol tidak memiliki pohon visual sendiri; sebaliknya mengembalikan ukuran 0 (nol) ketika MeasureOverride metode untuk Popup dipanggil. Namun, ketika Anda mengatur IsOpen properti ke Popuptrue, jendela baru dengan pohon visualnya sendiri dibuat. Jendela baru berisi Child konten Popup. Lebar dan tinggi jendela baru tidak boleh lebih besar dari 75 persen dari lebar atau tinggi layar.

Popup Kontrol mempertahankan referensi ke kontennya Child sebagai anak logis. Ketika jendela baru dibuat, konten Popup menjadi anak visual jendela dan tetap menjadi anak logis dari Popup. Sebaliknya, Popup tetap menjadi induk logis dari kontennya Child .

Baca juga