Aracılığıyla paylaş

Açılır Pencereler

Açılır pencere, içeriği olarak rastgele kullanıcı arabirimi gösterebilen basit bir kapatma kapsayıcısıdır. Açılır pencereler, iç içe bir yapı oluşturmak için diğer açılır pencereleri veya bağlam menülerini içerebilir.

Doğru kontrol bu mu?

  • araç ipucu veya bağlam menüsüyerine açılır menü kullanmayın. Belirtilen süreden sonra gizlenen kısa bir açıklama göstermek için araç ipucu kullanın. Kullanıcı arabirimi öğesiyle ilgili kopyalama ve yapıştırma gibi bağlamsal eylemler için bağlam menüsünü kullanın.

Açılır pencere ile iletişim kutusunun (benzer bir denetim) ne zaman kullanılacağına yönelik öneriler için bkz. İletişim kutuları ve açılır pencereler.

Açılır öğe oluştur

WinUI 3 Galeri uygulamasını açın ve açılır öğeyi çalışır durumda görün

WinUI 3 Galeri simgesi WinUI 3 Galeri uygulaması, WinUI denetimlerinin ve özelliklerinin etkileşimli örneklerini içerir. uygulamayı Microsoft Store adresinden alın veya GitHub üzerindeki kaynak koduna göz atın.

Açılır öğeler belirli denetimlere eklenir. Açılır pencerenin nerede görüneceğini belirtmek için Yerleştirme özelliğini kullanabilirsiniz: Üstte, Solda, Altta, Sağda veya Tam. Tam yerleştirme modunu seçerseniz, uygulama açılır öğeyi genişletir ve uygulama penceresinin içine ortalar. Düğmesigibi bazı denetimler, bir açılır pencereyi veya bağlam menüsünüilişkilendirmek için kullanabileceğiniz Açılır özelliği sağlar.

Bu örnek, düğmeye basıldığında metin görüntüleyen basit bir açılır öğe oluşturur.

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

Denetimin flyout özelliği yoksa, bunun yerine FlyoutBase.AttachedFlyout iliştirilmiş özelliğini kullanabilirsiniz. Bunu yaptığınızda, açılır pencereyi göstermek için FlyoutBase.ShowAttachedFlyout yöntemini de çağırmanız gerekir.

Bu örnek, bir görüntüye basit bir açılır menü ekler. Kullanıcı ekrana dokunduğunda uygulama açılır menüyü gösterir.

<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);
}

Önceki örnekler, açılır menülerini satır içi olarak tanımlamıştı. Ayrıca bir açılır öğeyi statik kaynak olarak tanımlayıp birden çok öğeyle kullanabilirsiniz. Bu örnek, küçük resmine dokunulduğunda görüntünün daha büyük bir sürümünü görüntüleyen daha karmaşık bir açılır öğe oluşturur.

<!-- 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);
}

Açılır pencereyi biçimlendir

Bir Flyout'a stil eklemek için flyoutpresenterStyledeğiştirin. Bu örnek, sarılan metin paragrafını gösterir ve metin bloğunu ekran okuyucu için erişilebilir hale getirir.

Erişilebilir açılır menü ile metin kaydırma 

<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>

10 ayaklık deneyimler için açılır pencere stilini oluşturma

Kapatılana kadar, geçici kullanıcı arabiriminde hafif kapatma denetimleri klavye ve oyun kumandası ile odağı içeride sıkışmış halde tutar. Bu davranış için görsel bir ipucu sağlamak amacıyla, Xbox'taki ışıkla kapatma kontrolü, kapsam dışı kalan kullanıcı arabiriminin karşıtlığını ve görünürlüğünü azaltan bir katman çizer. Bu davranış özelliğiyle LightDismissOverlayMode değiştirilebilir. Varsayılan olarak, açılır pencereler Xbox'ta ışığı kapatma katmanını çizer, ancak diğer cihaz ailesinde bu katman yoktur. Ancak, uygulamalar katmanı her zaman Açık veya her zaman Kapalı yapmayı seçebilir.

Soluk katmanlı açılır öğe 

<MenuFlyout LightDismissOverlayMode="On">

Işık kapatma davranışı

Açılırlar, hızlı bir ışık kapatma eylemiyle kapatılabilir, örneğin

  • Açılır pencerenin dışına dokunun
  • Escape klavye tuşuna basın
  • Donanım veya yazılım sistemi Geri düğmesine basma
  • Oyun çubuğu B düğmesine basma

Bir dokunuşla kapatılırken, bu hareket genellikle emilir ve altındaki kullanıcı arabirimine geçirilmez. Örneğin, açık bir açılır ögenin arkasında görünür bir düğme varsa, kullanıcının ilk dokunuşu açılır öğeyi kapatsa da bu düğmeyi etkinleştirmez. Düğmeye basmak için ikinci bir dokunma gerekir.

Düğmeyi açılır öğe için giriş geçiş öğesi olarak belirterek bu davranışı değiştirebilirsiniz. Yukarıda açıklanan hafif kapatma eylemlerinin sonucu olarak açılır menü kapanır ve ayrıca dokunma olayını atanan OverlayInputPassThroughElement'a geçirir. İşlevsel olarak benzer öğelerdeki kullanıcı etkileşimlerini hızlandırmak için bu davranışı benimsemeyi göz önünde bulundurun. Uygulamanızın sık kullanılanlar koleksiyonu varsa ve koleksiyondaki her öğe ekli bir açılır öğe içeriyorsa, kullanıcıların birden çok açılır öğeyle hızlı bir şekilde etkileşime geçmek istemelerini beklemek mantıklıdır.

Uyarı

Yıkıcı bir eylemle sonuçlanan bir katman girişi geçiş öğesi belirlememeye dikkat edin. Kullanıcılar, birincil kullanıcı arabirimini etkinleştirmeyen tedbirli hafif kapatma eylemlerine alıştı. Kapat, Sil veya benzer yıkıcı düğmeler beklenmedik ve kesintiye neden olan davranışlardan kaçınmak için ışık kapatmada etkinleştirilmemelidir.

Aşağıdaki örnekte, Sık Kullanılanlar Çubuğu'ndaki üç düğme de ilk dokunmada etkinleştirilecektir.

<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