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

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.

Açılır menü oluşturma

• Ö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. 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.

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

Menü çubuğu oluşturma

• Ö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.

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

İlgili makaleler

• 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ı
• MenuBar sınıfı