Menü açılır penceresi ve menü çubuğu

Menü açılır listeleri, kullanıcı tarafından istendiğinde komutların veya seçeneklerin listesini görüntülemek için menü ve bağlam menüsü senaryolarında kullanılır. Menü açılır öğesinde, menü öğeleri ve alt menüleri olabilecek tek, satır içi, üst düzey bir menü gösterilir. Yatay bir satırda birden çok üst düzey menü kümesini göstermek için menü çubuğunu kullanın (genellikle uygulama penceresinin en üstüne yerleştirirsiniz).

Tipik bir bağlam menüsü örneği

Doğru kontrol bu mu?

Menü ve bağlam menüsü senaryolarını tanımlama ve menü açılır öğesinin ne zaman kullanılacağı ve komut çubuğu açılır öğesihakkında yönergeler için menülere ve bağlam menülerine bakın.

Menü açılır menüleri, komutları düzenlemek için menüler ve bağlam menüleri olarak kullanılabilir. Bildirim veya onay isteği gibi rastgele içerik görüntülemek için iletişim kutusunu veya açılır öğekullanın.

Belirli bir komut sık sık kullanılacaksa ve yeterli alanınız varsa, komutu doğrudan kendi öğesine yerleştirmeye dair örnekler için koleksiyon komutları bölümüne bakın. Böylece kullanıcıların bu komuta erişmek için bir menüden geçmesine gerek kalmaz.

Önemli API'ler:MenuFlyout sınıfı, ContextFlyout özelliği, FlyoutBase.AttachedFlyout özelliği

WinUI 3 Galeri uygulamasını açın ve MenuFlyout'un nasıl çalıştığını görün

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.

Menü açılır öğesi oluşturmak için MenuFlyout sınıfınıkullanırsınız. MenuFlyout'a MenuFlyoutItem, MenuFlyoutSubItem, SplitMenuFlyoutItem, ToggleMenuFlyoutItem, RadioMenuFlyoutItem ve MenuFlyoutSeparator nesneleri ekleyerek menünün içeriğini tanımlarsınız.

Bu nesneler şunlar içindir:

MenuFlyoutItem— Anında eylem gerçekleştirme.
MenuFlyoutSubItem— Menü öğelerinin basamaklı listesini içerir.
SplitMenuFlyoutItem—Basamaklı bir listede ilgili eylemlerle varsayılan bir eylem gerçekleştirme. Daha fazla bilgi için bkz. Bölünmüş menü öğesi ekleme.
ToggleMenuFlyoutItem— Bir seçeneği açma veya kapatma.
RadioMenuFlyoutItem— Birbirini dışlayan menü öğeleri arasında geçiş yapma.
MenuFlyoutSeparator— Menü öğelerini görsel olarak ayırmak için kullanılan bir ayırıcı.

Bu örnek bir MenuFlyout oluşturur ve MenuFlyout'u bağlam menüsü olarak göstermek için çoğu denetimin kullanabileceği bir özellik olan ContextFlyout özelliğini kullanır.

<Rectangle
  Height="100" Width="100">
  <Rectangle.ContextFlyout>
    <MenuFlyout>
      <MenuFlyoutItem Text="Change color" Click="ChangeColorItem_Click" />
    </MenuFlyout>
  </Rectangle.ContextFlyout>
  <Rectangle.Fill>
    <SolidColorBrush x:Name="rectangleFill" Color="Red" />
  </Rectangle.Fill>
</Rectangle>

private void ChangeColorItem_Click(object sender, RoutedEventArgs e)
{
    // Change the color from red to blue or blue to red.
    if (rectangleFill.Color == Microsoft.UI.Colors.Red)
    {
        rectangleFill.Color = Microsoft.UI.Colors.Blue;
    }
    else
    {
        rectangleFill.Color = Microsoft.UI.Colors.Red;
    }
}

Sonraki örnek neredeyse aynıdır ancak bağlam menüsü olarak MenuFlyout sınıfını göstermek için ContextFlyout özelliğini kullanmak yerine FlyoutBase.ShowAttachedFlyout özelliğini kullanarak menü olarak gösterir.

<Rectangle
  Height="100" Width="100"
  Tapped="Rectangle_Tapped">
  <FlyoutBase.AttachedFlyout>
    <MenuFlyout>
      <MenuFlyoutItem Text="Change color" Click="ChangeColorItem_Click" />
    </MenuFlyout>
  </FlyoutBase.AttachedFlyout>
  <Rectangle.Fill>
    <SolidColorBrush x:Name="rectangleFill" Color="Red" />
  </Rectangle.Fill>
</Rectangle>

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

private void ChangeColorItem_Click(object sender, RoutedEventArgs e)
{
    // Change the color from red to blue or blue to red.
    if (rectangleFill.Color == Microsoft.UI.Colors.Red)
    {
        rectangleFill.Color = Microsoft.UI.Colors.Blue;
    }
    else
    {
        rectangleFill.Color = Microsoft.UI.Colors.Red;
    }
}

Önemli API'ler:SplitMenuFlyoutItem sınıfı, Items özelliği

WinUI 3 Galeri uygulamasını açın ve SplitMenuFlyoutItem öğesini çalışırken görün

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.

SplitMenuFlyoutItem, menü açılır öğesinde bölünmüş düğme deneyimi sağlar. İki bölümü vardır:

Birincil bölüm, MenuFlyoutItem gibi varsayılan bir eylem gerçekleştirir. Kullanıcı seçtiğinde yanıt vermek için Click olayını işleyin veya Command özelliğini ayarlayın.
İkincil bölüm, MenuFlyoutSubItem gibi ilgili seçeneklerin bir alt menüsünü açar.

Bir komutun ortak bir varsayılan eylemi ve dosyayı farklı biçimlerde kaydetme gibi birkaç varyasyonu olduğunda bölünmüş menü öğesini kullanın. Her varyasyonu ayrı bir öğe olarak listeleseydiniz menünüzü olduğundan daha kısa tutar.

Uyarı

SplitMenuFlyoutItem için Windows Uygulama SDK'sı 1.8.6 veya üzeri gerekir.

Bu örnek, WinUI 3 Galeri uygulamasından MenuFlyout'a iki bölünmüş menü öğesi ekler. Alt menü öğeleri Items özelliğindedir. Items, SplitMenuFlyoutItem öğesinin XAML içerik özelliği olduğundan, alt menü öğelerini doğrudan SplitMenuFlyoutItem öğesinin içine ekleyebilirsiniz.

<StackPanel Orientation="Horizontal" Spacing="12">
    <Button Content="File Options">
        <Button.Flyout>
            <MenuFlyout>
                <SplitMenuFlyoutItem Text="Save" Click="SplitMenuFlyoutItem_Click">
                    <SplitMenuFlyoutItem.Icon>
                        <FontIcon Glyph="&#xE74E;" />
                    </SplitMenuFlyoutItem.Icon>
                    <MenuFlyoutItem Text="Save as .docx" Click="SplitMenuFlyoutItem_Click" />
                    <MenuFlyoutItem Text="Save as .pdf" Click="SplitMenuFlyoutItem_Click" />
                    <MenuFlyoutItem Text="Save as .txt" Click="SplitMenuFlyoutItem_Click" />
                </SplitMenuFlyoutItem>
                <SplitMenuFlyoutItem Text="Share" Icon="Share" Click="SplitMenuFlyoutItem_Click">
                    <MenuFlyoutItem Text="Share via email" Click="SplitMenuFlyoutItem_Click" />
                    <MenuFlyoutItem Text="Share via link" Click="SplitMenuFlyoutItem_Click" />
                </SplitMenuFlyoutItem>
            </MenuFlyout>
        </Button.Flyout>
    </Button>
    <TextBlock x:Name="SelectedCommandText" VerticalAlignment="Center" />
</StackPanel>

private void SplitMenuFlyoutItem_Click(object sender, RoutedEventArgs e)
{
    // SplitMenuFlyoutItem derives from MenuFlyoutItem, so one handler works for both.
    if (sender is MenuFlyoutItem selectedItem)
    {
        SelectedCommandText.Text = "Clicked: " + selectedItem.Text;
    }
}

Alt menü MenuFlyoutSeparator nesnelerini ve diğer SplitMenuFlyoutItem nesnelerini de içerebilir. Items Koleksiyon boşsa ikincil bölüm devre dışı bırakılır.

Alt menüyü özelleştirmek için SubMenuPresenterStyle öğesini alt menü sunucusu için bir stile, SubMenuItemStyle öğesini ise alt menüdeki öğeler için bir stile ayarlayın.

Kullanıcılar, klavyeyi kullandıklarında iki bölümle ayrı olarak etkileşim kurar:

Birincil bölüm odaktayken, varsayılan eylemi gerçekleştirmek için Enter veya Ara Çubuğu'na basın veya odağı ikincil bölüme taşımak için Sağ ok tuşuna basın.
İkincil bölüm odakta olduğunda, alt menüyü açmak için Enter tuşuna veya Sağ ok tuşuna basın.
Alt menü açıkken, kapatmak için Esc tuşuna veya Sol ok tuşuna basın.

Ekran okuyucular ayrıca iki bölümü ayrı olarak duyurur. İkincil bölüm, menü öğesi için daha fazla seçenek sağlayan bir düğme olarak duyurulur.

Icons

Aşağıdakiler için menü öğesi simgeleri sağlamayı göz önünde bulundurun:

En yaygın kullanılan öğeler.
Simgesi standart veya iyi bilinen menü öğeleri.
Komutun işlevini iyi bir şekilde gösteren simgelere sahip menü öğeleri.

Standart görselleştirmesi olmayan komutlar için simgeler sağlamak zorunda değilsiniz. Şifreleme simgeleri yararlı değildir, görsel dağınıklık oluşturur ve kullanıcıların önemli menü öğelerine odaklanmasını önler.

İkonlarla örnek bağlam menüsü

<MenuFlyout>
  <MenuFlyoutItem Text="Share" >
    <MenuFlyoutItem.Icon>
      <FontIcon Glyph="&#xE72D;" />
    </MenuFlyoutItem.Icon>
  </MenuFlyoutItem>
  <MenuFlyoutItem Text="Copy" Icon="Copy" />
  <MenuFlyoutItem Text="Delete" Icon="Delete" />
  <MenuFlyoutSeparator />
  <MenuFlyoutItem Text="Rename" />
  <MenuFlyoutItem Text="Select" />
</MenuFlyout>

İpucu

MenuFlyoutItem içindeki simgenin boyutu 16x16px'tir. SymbolIcon, FontIcon veya PathIcon kullanıyorsanız simge, aslına uygunluk kaybı olmadan otomatik olarak doğru boyuta ölçeklendirilir. BitmapIcon kullanıyorsanız varlığınızın 16x16px olduğundan emin olun.

Işığı kapatma

Menüler, bağlam menüleri ve diğer açılır pencereler gibi "hafif kapatma denetimleri," kapatılana kadar geçici kullanıcı arabiriminde klavye ve oyun kumandası odağını içinde tutar. Bu davranış için görsel bir ipucu sağlamak için, Xbox üzerindeki ışık kapatma denetimleri kapsam dışı kullanıcı arabiriminin görünürlüğünü karartan bir katman çizer. Bu davranış LightDismissOverlayMode özelliğiyle değiştirilebilir. Varsayılan olarak, geçici kullanıcı arayüzleri Xbox'ta (Auto) hafif kapatma kaplamasını çizer, ancak diğer cihaz ailelerinde çizmez. Yer paylaşımını her zaman Açık veya her zaman Kapalıolarak ayarlamayı seçebilirsiniz.

<MenuFlyout LightDismissOverlayMode="Off" />

Önemli API'ler:MenuBar sınıfı. MenuBarItem sınıfı

WinUI 3 Galeri uygulamasını açın ve MenuBar'ın işleyişini görün

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.

Menü çubuğunda menü açılır öğesinde olduğu gibi menü oluşturmak için de aynı öğeleri kullanırsınız. Ancak, MenuFlyoutItem nesnelerini MenuFlyout öğesinde gruplandırma yerine, bunları bir MenuBarItem öğesinde gruplandırabilirsiniz. Her MenuBarItem, MenuBar'a üst düzey menü olarak eklenir.

Uyarı

Bu örnek yalnızca kullanıcı arabirimi yapısının nasıl oluşturulacağını gösterir, ancak komutlardan herhangi birinin uygulanmasını göstermez.

<MenuBar>
    <MenuBarItem Title="File">
        <MenuFlyoutSubItem Text="New">
            <MenuFlyoutItem Text="Plain Text Document"/>
            <MenuFlyoutItem Text="Rich Text Document"/>
            <MenuFlyoutItem Text="Other Formats..."/>
        </MenuFlyoutSubItem>
        <MenuFlyoutItem Text="Open..."/>
        <MenuFlyoutItem Text="Save"/>
        <MenuFlyoutSeparator />
        <MenuFlyoutItem Text="Exit"/>
    </MenuBarItem>

    <MenuBarItem Title="Edit">
        <MenuFlyoutItem Text="Undo"/>
        <MenuFlyoutItem Text="Cut"/>
        <MenuFlyoutItem Text="Copy"/>
        <MenuFlyoutItem Text="Paste"/>
    </MenuBarItem>

    <MenuBarItem Title="View">
        <MenuFlyoutItem Text="Output"/>
        <MenuFlyoutSeparator/>
        <RadioMenuFlyoutItem Text="Landscape" GroupName="OrientationGroup"/>
        <RadioMenuFlyoutItem Text="Portrait" GroupName="OrientationGroup" IsChecked="True"/>
        <MenuFlyoutSeparator/>
        <RadioMenuFlyoutItem Text="Small icons" GroupName="SizeGroup"/>
        <RadioMenuFlyoutItem Text="Medium icons" IsChecked="True" GroupName="SizeGroup"/>
        <RadioMenuFlyoutItem Text="Large icons" GroupName="SizeGroup"/>
    </MenuBarItem>

    <MenuBarItem Title="Help">
        <MenuFlyoutItem Text="About"/>
    </MenuBarItem>
</MenuBar>

Windows uygulamaları için temel tasarım
Menüler ve bağlam menüleri
Koleksiyonlar ve listeler için bağlamsal komut verme
MenuFlyout sınıfı
SplitMenuFlyoutItem sınıfı
MenuBar sınıfı

Geri Bildirim

Bu sayfayı yararlı buldunuz mu?

Son güncelleştirme: 2026-10-16

Doğru kontrol bu mu?

Açılır menü oluşturma

Bölünmüş menü öğesi ekleyin

Icons

Işığı kapatma

Menü çubuğu oluşturma

İlgili makaleler

Geri Bildirim

Ek kaynaklar