Flyout bilah perintah
Flyout bilah perintah memungkinkan Anda memberi pengguna akses mudah ke tugas umum dengan menampilkan perintah di toolbar mengambang yang terkait dengan elemen di kanvas UI Anda.
Seperti CommandBar, CommandBarFlyout memiliki properti PrimaryCommands dan SecondaryCommands yang dapat Anda gunakan untuk menambahkan perintah. Anda dapat menempatkan perintah dalam koleksi, atau keduanya. Kapan dan bagaimana perintah primer dan sekunder ditampilkan tergantung pada mode tampilan.
Flyout bilah perintah memiliki dua mode tampilan: diciutkan dan diperluas.
- Dalam mode diciutkan, hanya perintah utama yang ditampilkan. Jika flyout bilah perintah Anda memiliki perintah primer dan sekunder, tombol "lihat lebih banyak", yang diwakili oleh elipsis [...], ditampilkan. Ini memungkinkan pengguna mendapatkan akses ke perintah sekunder dengan beralih ke mode yang diperluas.
- Dalam mode yang diperluas, perintah primer dan sekunder ditampilkan. (Jika kontrol hanya memiliki item sekunder, item tersebut ditampilkan dengan cara yang mirip dengan kontrol MenuFlyout.)
Apakah ini kontrol yang tepat?
Gunakan kontrol flyout bilah perintah untuk menampilkan kumpulan perintah kepada pengguna, seperti tombol dan item menu, dalam konteks elemen di kanvas aplikasi.
Flyout bilah perintah adalah kontrol yang direkomendasikan untuk membuat menu konteks. Ini memungkinkan perintah umum (seperti perintah Salin, Potong, Tempel, Hapus, Bagikan, atau pilihan teks) yang paling relevan secara kontekstual agar skenario menu konteks ditambahkan sebagai perintah utama sehingga akan ditampilkan sebagai baris horizontal tunggal di flyout bilah perintah. TextCommandBarFlyout sudah dikonfigurasi dengan tepat untuk menampilkan perintah teks secara otomatis di kontrol TextBox, TextBlock, RichEditBox, RichTextBlock, dan PasswordBox. CommandBarFlyout dapat digunakan untuk mengganti perintah teks default pada kontrol teks.
Untuk menampilkan perintah kontekstual pada item daftar, ikuti panduan dalam Perintah kontekstual untuk koleksi dan daftar.
Pemanggilan proaktif vs. reaktif
Biasanya ada dua cara untuk memanggil flyout atau menu yang terkait dengan elemen di kanvas UI Anda: pemanggilan proaktif dan pemanggilan reaktif.
Dalam pemanggilan proaktif, perintah muncul secara otomatis ketika pengguna berinteraksi dengan item yang dikaitkan dengan perintah. Misalnya, perintah pemformatan teks mungkin muncul saat pengguna memilih teks dalam kotak teks. Dalam hal ini, flyout bilah perintah tidak mengambil fokus. Sebaliknya, ini menyajikan perintah yang relevan dekat dengan item yang berinteraksi dengan pengguna. Jika pengguna tidak berinteraksi dengan perintah, mereka akan diberhentikan.
Dalam pemanggilan reaktif, perintah ditampilkan sebagai respons terhadap tindakan pengguna eksplisit untuk meminta perintah; misalnya, klik kanan. Ini sesuai dengan konsep tradisional menu konteks.
Anda dapat menggunakan CommandBarFlyout dengan cara apa pun, atau bahkan campuran keduanya.
UWP dan WinUI 2
Penting
Informasi dan contoh dalam artikel ini dioptimalkan untuk aplikasi yang menggunakan SDK Aplikasi Windows dan WinUI 3, tetapi umumnya berlaku untuk aplikasi UWP yang menggunakan WinUI 2. Lihat referensi API UWP untuk informasi dan contoh spesifik platform.
Bagian ini berisi informasi yang Anda butuhkan untuk menggunakan kontrol di aplikasi UWP atau WinUI 2.
Kontrol CommandBarFlyout untuk aplikasi UWP disertakan sebagai bagian dari Pustaka UI Windows 2. Untuk informasi selengkapnya, termasuk instruksi penginstalan, lihat Pustaka Windows UI. API untuk kontrol ini ada di namespace Windows.UI.Xaml.Controls (UWP) dan Microsoft.UI.Xaml.Controls (WinUI).
- UWP API:Kelas CommandBarFlyout, kelas TextCommandBarFlyout, kelas AppBarButton, kelas AppBarToggleButton, kelas AppBarSeparator
- WinUI 2 Apis:Kelas CommandBarFlyout, kelas TextCommandBarFlyout
- Buka aplikasi Galeri WinUI 2 dan lihat CommandBarFlyout 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.
Sebaiknya gunakan WinUI 2 terbaru untuk mendapatkan gaya dan templat terbaru untuk semua kontrol. WinUI 2.2 atau yang lebih baru menyertakan templat baru untuk kontrol ini yang menggunakan sudut bulat. Untuk informasi selengkapnya, lihat Radius sudut.
Untuk menggunakan kode dalam artikel ini dengan WinUI 2, gunakan alias di XAML (kami menggunakan muxc) untuk mewakili API Pustaka Windows UI yang disertakan dalam proyek Anda. Lihat Mulai menggunakan WinUI 2 untuk informasi selengkapnya.
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
<muxc:CommandBarFlyout />
Membuat flyout bilah perintah
Aplikasi WinUI 3 Gallery mencakup contoh interaktif sebagian besar kontrol, fitur, dan fungsi WinUI 3. Dapatkan aplikasi dari Microsoft Store atau dapatkan kode sumber di GitHub
Contoh ini menunjukkan cara membuat flyout bilah perintah dan menggunakannya secara proaktif dan reaktif. Saat gambar diketuk, flyout ditampilkan dalam mode diciutkan. Saat ditampilkan sebagai menu konteks, flyout ditampilkan dalam mode yang diperluas. Dalam kedua kasus, pengguna dapat memperluas atau menciutkan flyout setelah dibuka.
<Grid>
<Grid.Resources>
<CommandBarFlyout x:Name="ImageCommandsFlyout">
<AppBarButton Icon="OutlineStar" ToolTipService.ToolTip="Favorite"/>
<AppBarButton Icon="Copy" ToolTipService.ToolTip="Copy"/>
<AppBarButton Icon="Share" ToolTipService.ToolTip="Share"/>
<CommandBarFlyout.SecondaryCommands>
<AppBarButton Label="Select all"/>
<AppBarButton Label="Delete" Icon="Delete"/>
</CommandBarFlyout.SecondaryCommands>
</CommandBarFlyout>
</Grid.Resources>
<Image Source="Assets/image1.png" Width="300"
Tapped="Image_Tapped" FlyoutBase.AttachedFlyout="{x:Bind ImageCommandsFlyout}"
ContextFlyout="{x:Bind ImageCommandsFlyout}"/>
</Grid>
private void Image_Tapped(object sender, TappedRoutedEventArgs e)
{
var flyout = FlyoutBase.GetAttachedFlyout((FrameworkElement)sender);
var options = new FlyoutShowOptions()
{
// Position shows the flyout next to the pointer.
// "Transient" ShowMode makes the flyout open in its collapsed state.
Position = e.GetPosition((FrameworkElement)sender),
ShowMode = FlyoutShowMode.Transient
};
flyout?.ShowAt((FrameworkElement)sender, options);
}
Berikut adalah flyout bilah perintah dalam keadaan runtuh.
Berikut adalah flyout bilah perintah yang sama dalam status diperluas yang menunjukkan perintah sekunder.
Tampilkan perintah secara proaktif
Saat Anda menampilkan perintah kontekstual secara proaktif, hanya perintah utama yang harus ditampilkan secara default (flyout bilah perintah harus diciutkan). Tempatkan perintah terpenting dalam koleksi perintah utama, dan perintah tambahan yang secara tradisional akan masuk ke menu konteks ke dalam koleksi perintah sekunder.
Untuk menampilkan perintah secara proaktif, Anda biasanya menangani peristiwa Klik atau Ketuk untuk menampilkan flyout bilah perintah. Atur ShowMode flyout ke Sementara atau TransientWithDismissOnPointerMoveAway untuk membuka flyout dalam mode yang diciutkan tanpa mengambil fokus.
Kontrol teks memiliki properti SelectionFlyout . Saat Anda menetapkan flyout ke properti ini, flyout akan ditampilkan secara otomatis saat teks dipilih.
Tampilkan perintah secara reaktif
Saat Anda menampilkan perintah kontekstual secara reaktif, sebagai menu konteks, perintah sekunder ditampilkan secara default (flyout bilah perintah harus diperluas). Dalam hal ini, flyout bilah perintah mungkin memiliki perintah primer dan sekunder, atau perintah sekunder saja.
Untuk menampilkan perintah dalam menu konteks, Anda biasanya menetapkan flyout ke properti ContextFlyout dari elemen UI. Dengan cara ini, membuka flyout ditangani oleh elemen , dan Anda tidak perlu melakukan apa pun lagi.
Jika Anda menangani menampilkan flyout sendiri (misalnya, pada peristiwa RightTapped ), atur ShowMode flyout ke Standar untuk membuka flyout dalam mode yang diperluas dan memberinya fokus.
Tip
Untuk informasi selengkapnya tentang opsi saat menampilkan flyout dan cara mengontrol penempatan flyout, lihat Flyout.
Tampilkan CommandBarFlyout yang selalu diperluas
Ketika Anda memiliki perintah primer dan sekunder dalam CommandBarFlyout, tombol "lihat selengkapnya" [...] ditampilkan secara default, dan dapat digunakan untuk memperluas dan menciutkan perintah sekunder. Jika Anda ingin mempertahankan CommandBarFlyout dalam mode diperluas dan menampilkan perintah sekunder setiap saat, Anda dapat menggunakan CommandBarFlyout.AlwaysExpanded properti .
AlwaysExpanded Ketika properti diatur ke true, tombol "lihat lebih banyak" tidak ditampilkan, dan pengguna tidak dapat mengalihkan status kontrol yang diperluas. CommandBarFlyout masih akan ditutup seperti biasa ketika perintah sekunder diklik atau pengguna mengklik di luar flyout.
Properti ini hanya memiliki efek jika CommandBarFlyout memiliki perintah sekunder. Jika tidak ada perintah sekunder, CommandBarFlyout akan selalu dalam mode diciutkan.
Tip
Anda masih dapat menciutkan dan memperluas CommandBarFlyout secara terprogram dengan mengatur properti IsOpen bahkan ketika AlwaysExpanded properti diatur ke true.
Perintah dan konten
Kontrol CommandBarFlyout memiliki 2 properti yang dapat Anda gunakan untuk menambahkan perintah dan konten: PrimaryCommands dan SecondaryCommands.
Secara default, item bilah perintah ditambahkan ke koleksi PrimaryCommands . Perintah ini ditampilkan di bilah perintah dan terlihat dalam mode yang diciutkan dan diperluas. Tidak seperti CommandBar, perintah utama tidak secara otomatis meluap ke perintah sekunder dan mungkin terpotong.
Anda juga dapat menambahkan perintah ke koleksi SecondaryCommands . Perintah sekunder ditampilkan di bagian menu kontrol dan hanya terlihat dalam mode yang diperluas.
Jika ada perintah umum (seperti perintah Salin, Potong, Tempel, Hapus, Bagikan, atau pilihan teks) yang penting untuk skenario, disarankan untuk menambahkannya sebagai perintah utama daripada perintah sekunder.
Tombol bilah aplikasi
Anda dapat mengisi kontrol PrimaryCommands dan SecondaryCommands secara langsung dengan kontrol AppBarButton, AppBarToggleButton, dan AppBarSeparator .
Kontrol tombol bilah aplikasi ditandai oleh ikon dan label teks. Kontrol ini dioptimalkan untuk digunakan di bilah perintah, dan tampilannya berubah tergantung pada apakah kontrol ditampilkan di bilah perintah atau menu luapan.
- Tombol bilah aplikasi yang digunakan sebagai perintah utama ditampilkan di bilah perintah hanya dengan ikonnya; label teks tidak ditampilkan. Kami menyarankan agar Anda menggunakan tipsalat untuk menampilkan deskripsi teks perintah, seperti yang ditunjukkan di sini.
<AppBarButton Icon="Copy" ToolTipService.ToolTip="Copy"/> - Tombol bilah aplikasi yang digunakan sebagai perintah sekunder ditampilkan di menu, dengan label dan ikon terlihat.
Ikon
Pertimbangkan untuk menyediakan ikon item menu untuk:
- Item yang paling umum digunakan.
- Item menu yang ikonnya standar atau terkenal.
- Item menu yang ikonnya menggambarkan dengan baik apa yang dilakukan perintah.
Jangan merasa berkewajiban untuk menyediakan ikon untuk perintah yang tidak memiliki visualisasi standar. Ikon kripto tidak membantu, membuat kekacauan visual, dan mencegah pengguna berfokus pada item menu penting.
Konten lainnya
Anda dapat menambahkan kontrol lain ke flyout bilah perintah dengan membungkusnya dalam AppBarElementContainer. Ini memungkinkan Anda menambahkan kontrol seperti DropDownButton atau SplitButton, atau menambahkan kontainer seperti StackPanel untuk membuat UI yang lebih kompleks.
Untuk ditambahkan ke koleksi perintah primer atau sekunder dari flyout bilah perintah, elemen harus mengimplementasikan antarmuka ICommandBarElement . AppBarElementContainer adalah pembungkus yang mengimplementasikan antarmuka ini sehingga Anda dapat menambahkan elemen ke bilah perintah meskipun tidak mengimplementasikan antarmuka itu sendiri.
Di sini, AppBarElementContainer digunakan untuk menambahkan elemen tambahan ke flyout bilah perintah. SplitButton ditambahkan ke perintah utama untuk memungkinkan pemilihan warna. StackPanel ditambahkan ke perintah sekunder untuk memungkinkan tata letak yang lebih kompleks untuk kontrol zoom.
Tip
Secara default, elemen yang dirancang untuk kanvas aplikasi mungkin tidak terlihat tepat di bilah perintah. Saat Anda menambahkan elemen menggunakan AppBarElementContainer, ada beberapa langkah yang harus Anda ambil untuk membuat elemen cocok dengan elemen bilah perintah lainnya:
- Ganti kuas default dengan gaya ringan untuk membuat latar belakang dan batas elemen cocok dengan tombol bilah aplikasi.
- Sesuaikan ukuran dan posisi elemen.
- Membungkus ikon dalam Kotak Tampilan dengan Lebar dan Tinggi 16px.
Catatan
Contoh ini hanya menunjukkan UI flyout bilah perintah, tidak mengimplementasikan perintah apa pun yang ditampilkan. Untuk informasi selengkapnya tentang menerapkan perintah, lihat Dasar-dasar desainTombol dan Perintah.
<CommandBarFlyout>
<AppBarButton Icon="Cut" ToolTipService.ToolTip="Cut"/>
<AppBarButton Icon="Copy" ToolTipService.ToolTip="Copy"/>
<AppBarButton Icon="Paste" ToolTipService.ToolTip="Paste"/>
<!-- Alignment controls -->
<AppBarElementContainer>
<SplitButton ToolTipService.ToolTip="Alignment">
<SplitButton.Resources>
<!-- Override default brushes to make the SplitButton
match other command bar elements. -->
<Style TargetType="SplitButton">
<Setter Property="Height" Value="38"/>
</Style>
<SolidColorBrush x:Key="SplitButtonBackground"
Color="Transparent"/>
<SolidColorBrush x:Key="SplitButtonBackgroundPressed"
Color="{ThemeResource SystemListMediumColor}"/>
<SolidColorBrush x:Key="SplitButtonBackgroundPointerOver"
Color="{ThemeResource SystemListLowColor}"/>
<SolidColorBrush x:Key="SplitButtonBorderBrush" Color="Transparent"/>
<SolidColorBrush x:Key="SplitButtonBorderBrushPointerOver"
Color="Transparent"/>
<SolidColorBrush x:Key="SplitButtonBorderBrushChecked"
Color="Transparent"/>
</SplitButton.Resources>
<SplitButton.Content>
<Viewbox Width="16" Height="16" Margin="0,2,0,0">
<SymbolIcon Symbol="AlignLeft"/>
</Viewbox>
</SplitButton.Content>
<SplitButton.Flyout>
<MenuFlyout>
<MenuFlyoutItem Icon="AlignLeft" Text="Align left"/>
<MenuFlyoutItem Icon="AlignCenter" Text="Center"/>
<MenuFlyoutItem Icon="AlignRight" Text="Align right"/>
</MenuFlyout>
</SplitButton.Flyout>
</SplitButton>
</AppBarElementContainer>
<!-- end Alignment controls -->
<CommandBarFlyout.SecondaryCommands>
<!-- Zoom controls -->
<AppBarElementContainer>
<AppBarElementContainer.Resources>
<!-- Override default brushes to make the Buttons
match other command bar elements. -->
<SolidColorBrush x:Key="ButtonBackground"
Color="Transparent"/>
<SolidColorBrush x:Key="ButtonBackgroundPressed"
Color="{ThemeResource SystemListMediumColor}"/>
<SolidColorBrush x:Key="ButtonBackgroundPointerOver"
Color="{ThemeResource SystemListLowColor}"/>
<SolidColorBrush x:Key="ButtonBorderBrush"
Color="Transparent"/>
<SolidColorBrush x:Key="ButtonBorderBrushPointerOver"
Color="Transparent"/>
<SolidColorBrush x:Key="ButtonBorderBrushChecked"
Color="Transparent"/>
<Style TargetType="TextBlock">
<Setter Property="VerticalAlignment" Value="Center"/>
</Style>
<Style TargetType="Button">
<Setter Property="Height" Value="40"/>
<Setter Property="Width" Value="40"/>
</Style>
</AppBarElementContainer.Resources>
<Grid Margin="12,-4">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="76"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Viewbox Width="16" Height="16" Margin="0,2,0,0">
<SymbolIcon Symbol="Zoom"/>
</Viewbox>
<TextBlock Text="Zoom" Margin="10,0,0,0" Grid.Column="1"/>
<StackPanel Orientation="Horizontal" Grid.Column="2">
<Button ToolTipService.ToolTip="Zoom out">
<Viewbox Width="16" Height="16">
<SymbolIcon Symbol="ZoomOut"/>
</Viewbox>
</Button>
<TextBlock Text="50%" Width="40"
HorizontalTextAlignment="Center"/>
<Button ToolTipService.ToolTip="Zoom in">
<Viewbox Width="16" Height="16">
<SymbolIcon Symbol="ZoomIn"/>
</Viewbox>
</Button>
</StackPanel>
</Grid>
</AppBarElementContainer>
<!-- end Zoom controls -->
<AppBarSeparator/>
<AppBarButton Label="Undo" Icon="Undo"/>
<AppBarButton Label="Redo" Icon="Redo"/>
<AppBarButton Label="Select all" Icon="SelectAll"/>
</CommandBarFlyout.SecondaryCommands>
</CommandBarFlyout>
Berikut adalah flyout bilah perintah yang diciutkan dengan SplitButton terbuka.
Berikut adalah flyout bilah perintah yang diperluas dengan UI zoom kustom di menu.
Membuat menu konteks hanya dengan perintah sekunder
Anda dapat menggunakan flyout bilah perintah hanya dengan perintah sekunder untuk membuat menu konteks yang mencapai tampilan dan perilaku flyout menu yang sama.
<Grid>
<Grid.Resources>
<!-- A command bar flyout with only secondary commands. -->
<CommandBarFlyout x:Name="ContextMenu">
<CommandBarFlyout.SecondaryCommands>
<AppBarButton Label="Copy" Icon="Copy"/>
<AppBarButton Label="Save" Icon="Save"/>
<AppBarButton Label="Print" Icon="Print"/>
<AppBarSeparator />
<AppBarButton Label="Properties"/>
</CommandBarFlyout.SecondaryCommands>
</CommandBarFlyout>
</Grid.Resources>
<Image Source="Assets/image1.png" Width="300"
ContextFlyout="{x:Bind ContextMenu}"/>
</Grid>
Berikut adalah flyout bilah perintah sebagai menu konteks.
Anda juga dapat menggunakan CommandBarFlyout dengan DropDownButton untuk membuat menu standar.
<CommandBarFlyout>
<AppBarButton Icon="Placeholder"/>
<AppBarElementContainer>
<DropDownButton Content="Mail">
<DropDownButton.Resources>
<!-- Override default brushes to make the DropDownButton
match other command bar elements. -->
<Style TargetType="DropDownButton">
<Setter Property="Height" Value="38"/>
</Style>
<SolidColorBrush x:Key="ButtonBackground"
Color="Transparent"/>
<SolidColorBrush x:Key="ButtonBackgroundPressed"
Color="{ThemeResource SystemListMediumColor}"/>
<SolidColorBrush x:Key="ButtonBackgroundPointerOver"
Color="{ThemeResource SystemListLowColor}"/>
<SolidColorBrush x:Key="ButtonBorderBrush"
Color="Transparent"/>
<SolidColorBrush x:Key="ButtonBorderBrushPointerOver"
Color="Transparent"/>
<SolidColorBrush x:Key="ButtonBorderBrushChecked"
Color="Transparent"/>
</DropDownButton.Resources>
<DropDownButton.Flyout>
<CommandBarFlyout Placement="BottomEdgeAlignedLeft">
<CommandBarFlyout.SecondaryCommands>
<AppBarButton Icon="MailReply" Label="Reply"/>
<AppBarButton Icon="MailReplyAll" Label="Reply all"/>
<AppBarButton Icon="MailForward" Label="Forward"/>
</CommandBarFlyout.SecondaryCommands>
</CommandBarFlyout>
</DropDownButton.Flyout>
</DropDownButton>
</AppBarElementContainer>
<AppBarButton Icon="Placeholder"/>
<AppBarButton Icon="Placeholder"/>
</CommandBarFlyout>
Berikut adalah menu tombol drop-down di flyout bilah perintah.
Flyout bilah perintah untuk kontrol teks
TextCommandBarFlyout adalah flyout bilah perintah khusus yang berisi perintah untuk mengedit teks. Setiap kontrol teks memperlihatkan TextCommandBarFlyout secara otomatis sebagai menu konteks (klik kanan), atau saat teks dipilih. Flyout bilah perintah teks beradaptasi dengan pilihan teks untuk hanya menampilkan perintah yang relevan.
Berikut adalah flyout bilah perintah teks pada pilihan teks.
Berikut adalah flyout bilah perintah teks yang diperluas yang memperlihatkan perintah sekunder.
Perintah yang tersedia
Tabel ini memperlihatkan perintah yang disertakan dalam TextCommandBarFlyout, dan kapan perintah tersebut ditampilkan.
| Perintah | Ditunjukkan... |
|---|---|
| Tebal | ketika kontrol teks tidak baca-saja (RichEditBox saja). |
| Miring | ketika kontrol teks tidak baca-saja (RichEditBox saja). |
| Menggarisbawahi | ketika kontrol teks tidak baca-saja (RichEditBox saja). |
| Pemeriksaan | ketika IsSpellCheckEnabled adalah benar dan teks salah eja dipilih. |
| Potong | saat kontrol teks tidak baca-saja dan teks dipilih. |
| Menyalin | saat teks dipilih. |
| Tempel | ketika kontrol teks tidak baca-saja dan clipboard memiliki konten. |
| Undo | ketika ada tindakan yang dapat dibatalkan. |
| Memilih semua | ketika teks dapat dipilih. |
Flyout bilah perintah teks kustom
TextCommandBarFlyout tidak dapat dikustomisasi, dan dikelola secara otomatis oleh setiap kontrol teks. Namun, Anda dapat mengganti TextCommandBarFlyout default dengan perintah kustom.
- Untuk mengganti TextCommandBarFlyout default yang ditampilkan pada pilihan teks, Anda dapat membuat CommandBarFlyout kustom (atau jenis flyout lainnya) dan menetapkannya ke properti SelectionFlyout . Jika Anda mengatur SelectionFlyout ke null, tidak ada perintah yang ditampilkan pada pilihan.
- Untuk mengganti TextCommandBarFlyout default yang ditampilkan sebagai menu konteks, tetapkan CommandBarFlyout kustom (atau jenis flyout lainnya) ke properti ContextFlyout pada kontrol teks. Jika Anda mengatur ContextFlyout ke null, flyout menu yang ditampilkan di versi kontrol teks sebelumnya ditampilkan alih-alih TextCommandBarFlyout.
Pengaktifan cahaya
Lampu mematikan kontrol–seperti menu, menu konteks, dan fokus papan ketik dan gamepad flyouts–trap lainnya di dalam UI sementara hingga ditutup. Untuk memberikan isjin visual untuk perilaku ini, kontrol pengabaian cahaya pada Xbox akan menggambar overlay yang meringkas visibilitas UI di luar cakupan. Perilaku ini dapat dimodifikasi dengan properti LightDismissOverlayMode . Secara default, UI sementara akan menggambar overlay pengabaian lampu pada Xbox (Otomatis) tetapi bukan keluarga perangkat lainnya. Anda dapat memilih untuk memaksa overlay untuk selalu Aktif atau selalu Nonaktif.
<CommandBarFlyout LightDismissOverlayMode="Off" /> >
Dapatkan kode sampel
- Sampel Galeri WinUI - Lihat semua kontrol XAML dalam format interaktif.
- Sampel Perintah XAML
Artikel terkait
Windows developer
Saran dan Komentar
Segera hadir: Sepanjang tahun 2024 kami akan menghentikan penggunaan GitHub Issues sebagai mekanisme umpan balik untuk konten dan menggantinya dengan sistem umpan balik baru. Untuk mengetahui informasi selengkapnya, lihat: https://aka.ms/ContentUserFeedback.
Kirim dan lihat umpan balik untuk