Flyouts

Flyout adalah kontainer pengabaian ringan yang dapat menampilkan UI arbitrer sebagai kontennya. Flyout dapat berisi flyout atau menu konteks lainnya untuk menciptakan pengalaman berlapis.

Apakah ini kontrol yang tepat?

• Jangan gunakan flyout alih-alih tipsalat atau menu konteks. Gunakan tipsalat untuk menampilkan deskripsi singkat yang bersembunyi setelah waktu tertentu. Gunakan menu konteks untuk tindakan kontekstual yang terkait dengan elemen UI, seperti salin dan tempel.

Untuk rekomendasi tentang kapan harus menggunakan flyout vs. kapan menggunakan dialog (kontrol serupa), lihat Dialog dan flyout.

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.

API untuk kontrol ini ada di namespace Windows.UI.Xaml.Controls .

• API UWP:Kelas flyout, properti Button.Flyout
• Buka aplikasi Galeri WinUI 2 dan lihat Flyout 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.

Membuat flyout

• API penting: Kelas flyout, properti Button.Flyout

Buka aplikasi Galeri WinUI 3 dan lihat Flyout beraksi.

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

Flyout dilampirkan ke kontrol tertentu. Anda dapat menggunakan properti Penempatan untuk menentukan tempat flyout muncul: Atas, Kiri, Bawah, Kanan, atau Penuh. Jika Anda memilih mode Penempatan penuh, aplikasi membentangkan flyout dan memusatkannya di dalam jendela aplikasi. Beberapa kontrol, seperti Tombol, menyediakan properti Flyout yang dapat Anda gunakan untuk mengaitkan flyout atau menu konteks.

Contoh ini membuat flyout sederhana yang menampilkan beberapa teks saat tombol ditekan.

<Button Content="Click me">
  <Button.Flyout>
     <Flyout>
        <TextBlock Text="This is a flyout!"/>
     </Flyout>
  </Button.Flyout>
</Button>

Jika kontrol tidak memiliki properti flyout, Anda dapat menggunakan properti terpasang FlyoutBase.AttachedFlyout sebagai gantinya. Ketika Anda melakukan ini, Anda juga perlu memanggil metode FlyoutBase.ShowAttachedFlyout untuk menunjukkan flyout.

Contoh ini menambahkan flyout sederhana ke gambar. Saat pengguna mengetuk gambar, aplikasi akan menampilkan flyout.

<Image Source="Assets/cliff.jpg" Width="50" Height="50"
  Margin="10" Tapped="Image_Tapped">
  <FlyoutBase.AttachedFlyout>
    <Flyout>
      <TextBlock Text="This is some text in a flyout."  />
    </Flyout>
  </FlyoutBase.AttachedFlyout>
</Image>

private void Image_Tapped(object sender, TappedRoutedEventArgs e)
{
    FlyoutBase.ShowAttachedFlyout((FrameworkElement)sender);
}

Contoh sebelumnya mendefinisikan flyout mereka sebaris. Anda juga dapat menentukan flyout sebagai sumber daya statis lalu menggunakannya dengan beberapa elemen. Contoh ini membuat flyout yang lebih rumit yang menampilkan versi gambar yang lebih besar saat gambar mininya diketuk.

<!-- Declare the shared flyout as a resource. -->
<Page.Resources>
    <Flyout x:Key="ImagePreviewFlyout" Placement="Right">
        <!-- The flyout's DataContext must be the Image Source
             of the image the flyout is attached to. -->
        <Image Source="{Binding Path=Source}"
            MaxHeight="400" MaxWidth="400" Stretch="Uniform"/>
    </Flyout>
</Page.Resources>

<!-- Assign the flyout to each element that shares it. -->
<StackPanel>
    <Image Source="Assets/cliff.jpg" Width="50" Height="50"
           Margin="10" Tapped="Image_Tapped"
           FlyoutBase.AttachedFlyout="{StaticResource ImagePreviewFlyout}"
           DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"/>
    <Image Source="Assets/grapes.jpg" Width="50" Height="50"
           Margin="10" Tapped="Image_Tapped"
           FlyoutBase.AttachedFlyout="{StaticResource ImagePreviewFlyout}"
           DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"/>
    <Image Source="Assets/rainier.jpg" Width="50" Height="50"
           Margin="10" Tapped="Image_Tapped"
           FlyoutBase.AttachedFlyout="{StaticResource ImagePreviewFlyout}"
           DataContext="{Binding RelativeSource={RelativeSource Mode=Self}}"/>
</StackPanel>

private void Image_Tapped(object sender, TappedRoutedEventArgs e)
{
    FlyoutBase.ShowAttachedFlyout((FrameworkElement)sender);
}

Gaya flyout

Untuk menata Flyout, ubah FlyoutPresenterStyle-nya. Contoh ini memperlihatkan paragraf membungkus teks dan membuat blok teks dapat diakses oleh pembaca layar.

<Flyout>
  <Flyout.FlyoutPresenterStyle>
    <Style TargetType="FlyoutPresenter">
      <Setter Property="ScrollViewer.HorizontalScrollMode"
          Value="Disabled"/>
      <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
      <Setter Property="IsTabStop" Value="True"/>
      <Setter Property="TabNavigation" Value="Cycle"/>
    </Style>
  </Flyout.FlyoutPresenterStyle>
  <TextBlock Style="{StaticResource BodyTextBlockStyle}" Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."/>
</Flyout>

Menata flyout untuk pengalaman 10 kaki

Lampu mematikan kontrol seperti keyboard trap flyout dan fokus gamepad di dalam UI sementara mereka sampai dimatikan. Untuk memberikan isjin visual untuk perilaku ini, kontrol pengabaian cahaya pada Xbox menggambar overlay yang meringkas kontras dan visibilitas UI di luar cakupan. Perilaku ini dapat dimodifikasi dengan LightDismissOverlayMode properti . Secara default, flyout akan menggambar overlay pengabaian lampu pada Xbox tetapi bukan keluarga perangkat lain, tetapi aplikasi dapat memilih untuk memaksa overlay selalu Aktif atau selalu Nonaktif.

<MenuFlyout LightDismissOverlayMode="On">

Perilaku pengalihkan cahaya

Flyout dapat ditutup dengan tindakan mematikan lampu cepat, termasuk

• Ketuk di luar flyout
• Tekan tombol keyboard Escape
• Tekan tombol Kembali sistem perangkat keras atau perangkat lunak
• Tekan tombol gamepad B

Saat menutup dengan ketukan, gerakan ini biasanya diserap dan tidak diteruskan ke UI di bawahnya. Misalnya, jika ada tombol yang terlihat di belakang flyout terbuka, ketukan pertama pengguna mematikan flyout tetapi tidak mengaktifkan tombol ini. Menekan tombol memerlukan ketukan kedua.

Anda dapat mengubah perilaku ini dengan menunjuk tombol sebagai elemen pass-through input untuk flyout. Flyout akan ditutup sebagai akibat dari tindakan pengabaian cahaya yang dijelaskan di atas dan juga akan meneruskan peristiwa ketukan ke yang ditunjuk OverlayInputPassThroughElement. Pertimbangkan untuk mengadopsi perilaku ini untuk mempercepat interaksi pengguna pada item yang serupa secara fungsional. Jika aplikasi Anda memiliki koleksi favorit dan setiap item dalam koleksi menyertakan flyout terlampir, masuk akal untuk mengharapkan bahwa pengguna mungkin ingin berinteraksi dengan beberapa flyout secara berturut-turut dengan cepat.

Catatan

Berhati-hatilah untuk tidak menunjuk elemen pass-through input overlay yang menghasilkan tindakan destruktif. Pengguna telah dibiasakan untuk menghentikan tindakan mematikan cahaya diam-diam yang tidak mengaktifkan UI utama. Tutup, Hapus, atau tombol yang sama merusak tidak boleh diaktifkan pada pengabaian cahaya untuk menghindari perilaku yang tidak terduga dan mengganggu.

Dalam contoh berikut, ketiga tombol di dalam FavoritesBar akan diaktifkan pada ketukan pertama.

<Page>
    <Page.Resources>
        <Flyout x:Name="TravelFlyout" x:Key="TravelFlyout"
                OverlayInputPassThroughElement="{x:Bind FavoritesBar}">
            <StackPanel>
                <HyperlinkButton Content="Washington Trails Association"/>
                <HyperlinkButton Content="Washington Cascades - Go Northwest! A Travel Guide"/>
            </StackPanel>
        </Flyout>
    </Page.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <StackPanel x:Name="FavoritesBar" Orientation="Horizontal">
            <HyperlinkButton x:Name="PageLinkBtn">Bing</HyperlinkButton>
            <Button x:Name="Folder1" Content="Travel" Flyout="{StaticResource TravelFlyout}"/>
            <Button x:Name="Folder2" Content="Entertainment" Click="Folder2_Click"/>
        </StackPanel>
        <ScrollViewer Grid.Row="1">
            <WebView x:Name="WebContent"/>
        </ScrollViewer>
    </Grid>
</Page>

private void Folder2_Click(object sender, RoutedEventArgs e)
{
     Flyout flyout = new Flyout();
     flyout.OverlayInputPassThroughElement = FavoritesBar;
     ...
     flyout.ShowAt(sender as FrameworkElement);
{

Dapatkan kode sampel

• Sampel Galeri WinUI - Lihat semua kontrol XAML dalam format interaktif.

Artikel terkait

• Tipsalat
• Menu dan menu konteks
• Kelas flyout
• Kelas ContentDialog