Bagikan melalui

Flyouts

Flyout adalah kontainer yang mudah diabaikan dan dapat menunjukkan UI acak sebagai kontennya. Flyout dapat berisi flyout lain atau berbagai jenis menu konteks untuk menciptakan pengalaman berlapis.

Apakah ini kontrol yang tepat?

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

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

Membuat flyout

Buka aplikasi Galeri WinUI 3 dan lihat Flyout beraksi

Ikon Galeri WinUI 3 Aplikasi Galeri WinUI 3 mencakup contoh interaktif kontrol dan fitur WinUI. Dapatkan aplikasi dari Microsoft Store atau telusuri kode sumber pada GitHub.

Flyout dilampirkan pada 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 menu flyout atau 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 menampilkan 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 sebaris. Anda juga dapat menentukan flyout sebagai resource 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 menu jendela sembul

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

Flyout yang dapat diakses dengan teks pembungkusan 

<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

Kontrol pengabaian ringan seperti flyout menahan fokus keyboard dan gamepad di dalam UI sementara hingga dilepaskan. Untuk memberikan isyarat visual untuk perilaku ini, kontrol pengabaian ringan pada Xbox menggambar overlay yang mengurangi kontras dan visibilitas UI diluar area sasaran. Perilaku ini dapat dimodifikasi dengan LightDismissOverlayMode properti . Secara default, flyout pada Xbox akan menampilkan overlay pengabaian cahaya tetapi tidak pada keluarga perangkat lainnya, tetapi aplikasi dapat memilih untuk memaksa overlay selalu On atau selalu Off.

Menu Muncul dengan Lapisan Meredupkan 

<MenuFlyout LightDismissOverlayMode="On">

Perilaku mematikan cahaya

Flyout dapat ditutup dengan tindakan pengabaian cahaya cepat, termasuk

  • Ketuk di luar flyout
  • Tekan tombol 'Escape' pada keyboard
  • Tekan tombol Kembali pada 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 menutup flyout tersebut namun tidak mengaktifkan tombol tersebut. 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 ringan yang dijelaskan di atas dan juga akan meneruskan event tap ke elemen yang ditentukan 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, wajar jika pengguna mungkin ingin berinteraksi dengan beberapa flyout secara berurutan.

Nota

Berhati-hatilah untuk tidak menunjuk elemen pass-through input overlay yang menghasilkan tindakan destruktif. Pengguna telah terbiasa dengan tindakan penghapusan ringan yang tidak mencolok dan tidak mengaktifkan antarmuka 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);
{
  • Last updated on