Catatan
Akses ke halaman ini memerlukan otorisasi. Anda dapat mencoba masuk atau mengubah direktori.
Akses ke halaman ini memerlukan otorisasi. Anda dapat mencoba mengubah direktori.
Flyout bilah perintah memungkinkan Anda memberi pengguna akses mudah ke tugas-tugas umum dengan menampilkan perintah di bilah alat mengambang yang terkait dengan elemen di kanvas UI Anda.
Seperti CommandBar , CommandBarFlyout memiliki properti-properti PrimaryCommands dan SecondaryCommands yang dapat Anda gunakan untuk menambahkan perintah. Anda dapat menempatkan perintah dalam salah satu koleksi, atau keduanya. Kapan dan bagaimana perintah utama dan sekunder ditampilkan tergantung pada mode tampilan.
Menu bilah perintah memiliki dua mode tampilan: diciutkan dan diperluas.
- Dalam mode ringkas, hanya perintah utama yang ditampilkan. Jika bilah perintah flyout Anda memiliki perintah utama dan tambahan, tombol "lihat lebih banyak", yang diwakili oleh titik tiga [...], akan ditampilkan. Ini memungkinkan pengguna mendapatkan access ke perintah sekunder dengan beralih ke mode yang diperluas.
- Dalam mode diperluas, perintah utama 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 perintah pilihan teks) yang paling relevan secara kontekstual untuk ditambahkan sebagai perintah utama sehingga ditampilkan sebagai satu baris horizontal 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 saat 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 sedang pengguna interaksi. 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.
Memunculkan bilah perintah flyout
Aplikasi Galeri WinUI 3 mencakup contoh interaktif kontrol dan fitur WinUI. Dapatkan aplikasi dari Microsoft Store atau telusuri kode sumber pada GitHub.
Contoh ini menunjukkan cara membuat tampilan mengambang bilah perintah dan menggunakannya secara proaktif dan reaktif. Saat gambar diketuk, flyout ditampilkan dalam mode tersembunyi. Saat ditampilkan sebagai menu konteks, flyout ditampilkan dalam mode diperluas. Dalam kedua kasus, pengguna dapat memperluas atau menciutkan menu pop-up setelah dibuka.
<Grid>
<Grid.Resources>
<CommandBarFlyout x:Name="ImageCommandsFlyout">
<AppBarButton Label="Favorite" Icon="OutlineStar" ToolTipService.ToolTip="Favorite"/>
<AppBarButton Label="Copy" Icon="Copy" ToolTipService.ToolTip="Copy"/>
<AppBarButton Label="Share" Icon="Share" ToolTipService.ToolTip="Share"/>
<CommandBarFlyout.SecondaryCommands>
<AppBarButton Label="Rotate" Icon="Rotate"/>
<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 menu kembang bilah perintah yang sama dalam keadaan diperluas yang menunjukkan perintah sekunder.
Tampilkan perintah secara proaktif
Saat Anda menampilkan perintah kontekstual, hanya perintah utama yang harus ditampilkan secara default (menu bilah perintah harus ditutup). 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 Transient (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, menu tarik turun 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 diatur oleh elemen dan Anda tidak perlu melakukan apa-apa lagi.
Jika Anda menangani penampilan flyout sendiri (misalnya, pada event RightTapped), atur ShowMode dari flyout ke Standar untuk membuka flyout dalam mode yang diperluas dan memberinya fokus.
Petunjuk / Saran
Untuk informasi lebih lanjut tentang opsi ketika menampilkan flyout dan cara mengontrol penempatan flyout, lihat Flyouts.
Menampilkan CommandBarFlyout yang selalu diperluas
Ketika Anda memiliki perintah utama dan sekunder dalam CommandBarFlyout, tombol "lihat lebih lanjut" [...] 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 akan menutup seperti biasanya 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 tersembunyi.
Petunjuk / Saran
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 bawaan, item pada bilah perintah ditambahkan ke koleksi PrimaryCommands. Perintah ini ditampilkan di bilah perintah dan terlihat dalam mode yang diperkecil dan diperbesar. 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 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.
-
In Windows App SDK 1.5 dan yang lebih baru: Tombol bilah aplikasi yang digunakan sebagai perintah utama ditampilkan di bilah perintah dengan label teks dan ikon (jika keduanya diatur).
<AppBarButton Icon="Copy" Label="Copy"/> -
In Windows App SDK 1.4 dan yang lebih lama: 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.
Icons
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 bilah perintah flyout dengan cara 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 kumpulan perintah utama 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 bilah perintah flyout. SplitButton ditambahkan ke perintah utama untuk mengaktifkan perataan teks. StackPanel ditambahkan ke perintah sekunder untuk memungkinkan tata letak yang lebih kompleks untuk kontrol zoom.
Petunjuk / Saran
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.
- Bungkus ikon dalam Kotak Tampilan dengan Lebar dan Tinggi 16px.
Nota
Contoh ini hanya menunjukkan UI flyout bilah perintah dan tidak mengimplementasikan perintah yang ditampilkan. Untuk informasi selengkapnya tentang menerapkan perintah, lihat Tombol dan Dasar-dasar desain perintah.
<CommandBarFlyout>
<AppBarButton Icon="Cut" Label="Cut" ToolTipService.ToolTip="Cut"/>
<AppBarButton Icon="Copy" Label="Copy" ToolTipService.ToolTip="Copy"/>
<AppBarButton Icon="Paste" Label="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 bilah perintah yang diciutkan dengan flyout 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 dengan hanya perintah sekunder untuk membuat menu konteks yang memiliki tampilan dan perilaku yang sama dengan flyout menu .
<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 tarik-turun di munculan bilah perintah.
Jendela pop-out bilah perintah untuk teks kontrol
TextCommandBarFlyout adalah bilah perintah yang dikhususkan 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 jendela pop-up bilah teks perintah yang diperluas yang memperlihatkan perintah sekunder.
Perintah yang tersedia
Tabel ini memperlihatkan perintah yang disertakan dalam TextCommandBarFlyout, dan kapan perintah ditampilkan.
| Command | Ditunjukkan... |
|---|---|
| Bold | ketika kontrol teks tidak baca-saja (RichEditBox saja). |
| Cetak miring | ketika kontrol teks tidak baca-saja (RichEditBox saja). |
| Garisbawah | ketika kontrol teks tidak baca-saja (RichEditBox saja). |
| Pemeriksaan | ketika IsSpellCheckEnabled diaktifkan dan teks yang salah eja dipilih. |
| Memotong | Ketika pengaturan teks tidak bersifat baca-saja dan teks telah dipilih. |
| Menyalin | saat teks dipilih. |
| Pasta | ketika kontrol teks tidak bersifat baca-saja dan clipboard mengandung konten. |
| Batalkan | ketika ada tindakan yang dapat dibatalkan. |
| Pilih semua | ketika teks dapat dipilih. |
Jendela pop-up 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.
Penutupan otomatis
Kontrol yang mudah ditutup — seperti menu, menu konteks, dan flyout lainnya — mengunci fokus keyboard dan gamepad di dalam UI sementara hingga dihentikan. Untuk memberikan isyarat visual untuk perilaku ini, kontrol pengabaian cahaya pada Xbox akan menarik overlay yang meringankan visibilitas UI di luar cakupan. Perilaku ini dapat dimodifikasi dengan properti LightDismissOverlayMode . Secara bawaan, UI sementara akan menggambar overlay pengabaian cahaya pada Xbox (Auto) tetapi tidak pada keluarga perangkat lainnya. Anda dapat memilih untuk memaksa overlay menjadi selalu Aktif atau selalu Nonaktif.
<CommandBarFlyout LightDismissOverlayMode="Off" /> >
Artikel terkait
Berkolaborasi dengan kami di GitHub
Sumber untuk konten ini dapat ditemukan di GitHub, yang juga dapat Anda gunakan untuk membuat dan meninjau masalah dan menarik permintaan. Untuk informasi selengkapnya, lihat panduan kontributor kami.
Windows developer