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ı çoğu WinUI 3 denetimi, özelliği ve işlevselliğine ilişkin etkileşimli örnekler içerir. Uygulamayı Microsoft Store'dan alın veya GitHub'dan kaynak kodunu alın

Menü açılır öğesi oluşturmak için MenuFlyout sınıfınıkullanırsınız. MenuFlyoutItem , MenuFlyoutSubItem, ToggleMenuFlyoutItem, RadioMenuFlyoutItem ve MenuFlyoutSeparator nesneleri MenuFlyout'a 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.
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 == Windows.UI.Colors.Red)
    {
        rectangleFill.Color = Windows.UI.Colors.Blue;
    }
    else
    {
        rectangleFill.Color = Windows.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 == Windows.UI.Colors.Red)
    {
        rectangleFill.Color = Windows.UI.Colors.Blue;
    }
    else
    {
        rectangleFill.Color = Windows.UI.Colors.Red;
    }
}

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ışla ilgili görsel bir ipucu sağlamak için Xbox'ta ışık kapatma denetimleri kapsam dışı kullanıcı arabiriminin görünürlüğünü azaltan bir katman çizer. Bu davranış LightDismissOverlayMode özelliğiyle değiştirilebilir. Varsayılan olarak, geçici kullanıcı arayüzleri Xbox'ta (Otomatik) ışık geçiş katmanını görüntüler, ancak diğer cihaz ailelerinde görüntülemez. 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ı çoğu WinUI 3 denetimi, özelliği ve işlevselliğine ilişkin etkileşimli örnekler içerir. Uygulamayı Microsoft Store'dan alın veya GitHub'dan kaynak kodunu alı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.

<muxc:MenuBar>
    <muxc: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"/>
    </muxc:MenuBarItem>

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

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

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

UWP ve WinUI 2

Önemli

Bu makaledeki bilgiler ve örnekler, Windows Uygulama SDK'sı ve WinUI 3kullanan uygulamalar için iyileştirilmiştir, ancak genellikle WinUI 2kullanan UWP uygulamaları için geçerlidir. Platforma özgü bilgiler ve örnekler için UWP API başvurusuna bakın.

Bu bölüm, denetimi bir UWP veya WinUI 2 uygulamasında kullanmak için ihtiyacınız olan bilgileri içerir.

MenuBar için Windows 10, sürüm 1809 (SDK 17763) veya üzeri ya da WinUI 2gerekir.

UWP uygulamaları için MenuFlyout ve MenuBar denetimleri WinUI 2'nin bir parçası olarak eklenir. Yükleme yönergeleri de dahil olmak üzere daha fazla bilgi için bkz. WinUI 2. Bu denetimlerin API'leri hem Windows.UI.Xaml.Controls hem de Microsoft.UI.Xaml.Controls ad alanında bulunur.

UWP API'leri:MenuFlyout sınıfı, MenuBar sınıfı, ContextFlyout özelliği FlyoutBase.AttachedFlyout özelliği
WinUI 2 API'leri:MenuBar sınıfı, ContextFlyout özelliği, FlyoutBase.AttachedFlyout özelliği
WinUI 2 Galeri uygulamasını açın ve MenuBar'ı aksiyonda görün. WinUI 2 Galeri uygulaması çoğu WinUI 2 denetimi, özelliği ve işlevselliğine ilişkin etkileşimli örnekler içerir. Uygulamayı Microsoft Store'dan alın veya GitHub'dan kaynak kodunu alın.

Tüm denetimler için en güncel stilleri ve şablonları almak için en son WinUI 2'yi kullanmanızı öneririz. WinUI 2.2 veya üzeri, yuvarlatılmış köşeler kullanan bu denetimler için yeni bir şablon içerir. Daha fazla bilgi için bkz . Köşe yarıçapı.

Bu makaledeki kodu WinUI 2 ile kullanmak için, projenize dahil edilen Windows UI Kitaplığı API'lerini temsil etmek için XAML'de bir diğer ad kullanın (muxckullanıyoruz). Daha fazla bilgi için WinUI 2'yi kullanmaya başlama hakkında bölümüne bakın.

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:MenuFlyout />
<muxc:MenuBar />

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

Geri Bildirim

Bu sayfayı yararlı buldunuz mu?

Last updated on 2025-11-25

Aracılığıyla paylaş

Doğru kontrol bu mu?

Açılır menü oluşturma

Icons

Işığı kapatma

Menü çubuğu oluşturma

UWP ve WinUI 2

İlgili makaleler

Geri Bildirim

Ek kaynaklar