Komut çubuğu

Komut çubukları, kullanıcılara uygulamanızın en yaygın görevlerine kolay erişim sağlar. Komut çubukları, uygulama düzeyi veya sayfaya özgü komutlara erişim sağlayabilir ve herhangi bir gezinti düzeniyle kullanılabilir.

Doğru kontrol bu mu?

CommandBar denetimi, hem resimler veya metin blokları gibi karmaşık içerikleri hem de AppBarButton, AppBarToggleButtonve AppBarSeparator denetimleri gibi basit komutları görüntüleyebilen genel amaçlı, esnek, hafif bir denetimdir.

Uyarı

XAML hem AppBar denetimini hem de CommandBar denetimini sağlar. AppBar'ı yalnızca AppBar kullanan bir Evrensel Windows 8 uygulamasını yükseltirken kullanmanız ve değişiklikleri en aza indirmeniz gerekir. Windows 10'daki yeni uygulamalar için bunun yerine CommandBar denetimini kullanmanızı öneririz. Bu belgede CommandBar denetimini kullandığınız varsayılır.

Anatomi

Varsayılan olarak, komut çubuğunda bir simge düğmeleri satırı ve üç nokta [...] ile temsil edilen isteğe bağlı "daha fazlası" düğmesi gösterilir. Aşağıda, daha sonra gösterilen örnek kod tarafından oluşturulan komut çubuğu yer alır. Kapalı kompakt haliyle gösteriliyor.

kapalı komut çubuğunu gösteren ekran görüntüsü

Komut çubuğu, şuna benzer kapalı bir minimal durumda da gösterilebilir. Daha fazla bilgi için açık ve kapalı durumlar bölümüne bakın.

Açık durumda aynı komut çubuğu aşağıdadır. Etiketler denetimin ana bölümlerini tanımlar.

Komut çubuğu 4 ana alana ayrılır:

• İçerik alanı çubuğun sol tarafına hizalanır. İçerik özelliği doldurulmuşsa gösterilir.
• Birincil komut alanı çubuğun sağ tarafına hizalanır. PrimaryCommands özelliği doldurulmuşsa gösterilir.
• Çubuğun sağ tarafında "daha fazlası" [...] düğmesi gösterilir. "Daha fazlasını gör" [...] düğmesine basıldığında ana komut etiketleri gösterilir ve ikincil komutlar varsa ek menü açılır. Birincil komut etiketleri veya ikincil etiketler olmadığında düğme görünmez. Varsayılan davranışı değiştirmek için OverflowButtonVisibility özelliğini kullanın.
• Taşma menüsü yalnızca komut çubuğu açıkken ve SecondaryCommands özelliği doldurulduğunda gösterilir. Alan sınırlı olduğunda birincil komutlar SecondaryCommands alanına taşınır. Varsayılan davranışı değiştirmek için IsDynamicOverflowEnabled özelliğini kullanın.

FlowDirectionRightToLeftolduğunda düzen tersine çevrilir.

Yerleştirme

Komut çubukları, uygulama penceresinin en üstüne, uygulama penceresinin en altına ve satır içi olarak Grid.rowgibi bir düzen denetimine eklenerek yerleştirilebilir.

Örnek 1

• Küçük el cihazları için, kolay ulaşılabilirlik için komut çubuklarını ekranın en altına yerleştirmenizi öneririz.
• Daha büyük ekranlara sahip cihazlar için, komut çubuklarının pencerenin üst kısmına yerleştirilmesi onları daha belirgin ve bulunabilir hale getirir.

Fiziksel ekran boyutunu belirlemek için DiagonalSizeInches API'sini kullanın.

Komut çubukları, tek görünümlü ekranlarda (sol örnek) aşağıdaki ekran bölgelerine ve çok görünümlü ekranlara (sağ örnek) yerleştirilebilir. Satır içi komut çubukları, eylem alanının herhangi bir yerine yerleştirilebilir.

Örnek 2

Dokunmatik cihazlar: Dokunmatik klavye veya Yumuşak Giriş Paneli (SIP) görüntülendiğinde komut çubuğunun bir kullanıcı tarafından görünür kalması gerekiyorsa, komut çubuğunu Sayfanın BottomAppBar özelliğine atayabilirsiniz ve SIP mevcut olduğunda görünür kalacak şekilde hareket eder. Aksi takdirde, komut çubuğunu satır içi konuma yerleştirmeniz ve uygulama içeriğinize göre konumlandırmanız gerekir.

Komut çubuğu oluşturma

• Önemli API'ler:CommandBar sınıfı, AppBarButton sınıfı, AppBarToggleButton sınıfı, AppBarSeparator sınıfı

WinUI 3 Galeri uygulamasını açın ve Komut Çubuğu'nun 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

Bu örnek, daha önce gösterilen komut çubuğunu oluşturur.

<CommandBar>
    <AppBarToggleButton Icon="Shuffle" Label="Shuffle" Click="AppBarButton_Click" />
    <AppBarToggleButton Icon="RepeatAll" Label="Repeat" Click="AppBarButton_Click"/>
    <AppBarSeparator/>
    <AppBarButton Icon="Back" Label="Back" Click="AppBarButton_Click"/>
    <AppBarButton Icon="Stop" Label="Stop" Click="AppBarButton_Click"/>
    <AppBarButton Icon="Play" Label="Play" Click="AppBarButton_Click"/>
    <AppBarButton Icon="Forward" Label="Forward" Click="AppBarButton_Click"/>

    <CommandBar.SecondaryCommands>
        <AppBarButton Label="Like" Click="AppBarButton_Click"/>
        <AppBarButton Label="Dislike" Click="AppBarButton_Click"/>
    </CommandBar.SecondaryCommands>

    <CommandBar.Content>
        <TextBlock Text="Now playing..." Margin="12,14"/>
    </CommandBar.Content>
</CommandBar>

Komutlar ve içerik

CommandBar denetiminin komut ve içerik eklemek için kullanabileceğiniz 3 özelliği vardır: PrimaryCommands, SecondaryCommandsve Content.

Commands

Varsayılan olarak, komut çubuğu öğeleri PrimaryCommands koleksiyonuna eklenir. En önemli komutların her zaman görünür olması için komutları önem sırasına göre eklemeniz gerekir. Kullanıcılar uygulama pencerelerini yeniden boyutlandırdığında olduğu gibi komut çubuğu genişliği değiştiğinde, birincil komutlar komut çubuğu ile kesme noktalarında taşma menüsü arasında dinamik olarak hareket eder. Bu varsayılan davranışı değiştirmek için IsDynamicOverflowEnabled özelliğini kullanın.

En küçük ekranlarda (320 epx genişlik), komut çubuğuna en fazla 4 birincil komut sığar.

Taşma menüsünde gösterilen SecondaryCommands koleksiyonuna komutlar da ekleyebilirsiniz.

komut çubuğu örneği

Komutları gerektiği gibi PrimaryCommands ve SecondaryCommands arasında program aracılığıyla taşıyabilirsiniz.

• Sayfalar arasında tutarlı bir şekilde görünecek bir komut varsa, bu komutu tutarlı bir konumda tutmak en iyisidir.
• Kabul Et, Evet ve Tamam komutlarını Reddet, Hayır ve İptal'in soluna yerleştirmenizi öneririz. Tutarlılık, kullanıcılara sistemde gezinme güveni sağlar ve uygulama gezintisi bilgilerini uygulamadan uygulamaya aktarmalarına yardımcı olur.

Uygulama çubuğu düğmeleri

Hem PrimaryCommands hem de SecondaryCommands yalnızca AppBarButton, AppBarToggleButtonve AppBarSeparator komut öğelerini içeren ICommandBarElement arabirimini uygulayan türlerle doldurulabilir.

PrimaryCommands veya SecondaryCommands öğelerinize farklı türde bir öğe eklemek isterseniz, AppBarElementContainer sınıfını kullanabilirsiniz. Bu, öğeniz için sarmalayıcı işlevi görür ve öğesinin CommandBar'da görüntülenmesini sağlar.

Uygulama çubuğu düğme denetimleri bir simge ve metin etiketiyle karakterize edilir. Bu denetimler bir komut çubuğunda kullanım için iyileştirilmiştir ve bunların görünümü denetimin komut çubuğunda mı yoksa taşma menüsünde mi kullanıldığına bağlı olarak değişir.

Icons

Birincil komut alanında gösterilen simgelerin boyutu 20x20px'tir; taşma menüsünde simgeler 16x16px olarak görüntülenir. SymbolIcon, FontIconveya PathIconkullanırsanız, komut ikincil komut alanına girdiğinde simge otomatik olarak doğru boyuta ölçeklendirilir ve aslına uygunluk kaybı olmaz.

Simgeyi ayarlama hakkında daha fazla bilgi ve örnek için AppBarButton sınıfının belgelerine bakın.

Etiketler

Etiketin gösterilip gösterilmediğini AppBarButton IsCompact özelliği belirler. CommandBar denetiminde, komut çubuğu açılır ve kapatılırken komut çubuğu düğmenin IsCompact özelliğinin üzerine otomatik olarak yazar.

Uygulama çubuğu düğme etiketlerini konumlandırmak için CommandBar'ın DefaultLabelPosition özelliğini kullanın.

<CommandBar DefaultLabelPosition="Right">
    <AppBarToggleButton Icon="Edit" Label="Edit"/>
    <AppBarToggleButton Icon="Share" Label="Share"/>
</CommandBar>

Komut çubuğu, etiketlerin sağda olduğu

Daha büyük pencerelerde, okunaklılığı geliştirmek için etiketleri uygulama çubuğu düğmesi simgelerinin sağında taşımayı göz önünde bulundurun. Alttaki etiketler, kullanıcıların etiketleri ortaya çıkarmak için komut çubuğunu açmasını gerektirirken, komut çubuğu kapatıldığında bile sağ taraftaki etiketler görünür.

Taşma menülerinde etiketler varsayılan olarak simgelerin sağında konumlandırılır ve LabelPosition dikkate alınmaz. CommandBarOverflowPresenterStyle özelliğini CommandBarOverflowPresenterhedefleyen bir Stil olarak ayarlayarak stili ayarlayabilirsiniz.

Düğme etiketleri kısa, tercihen tek bir sözcük olmalıdır. Bir simgenin altındaki daha uzun etiketler birden çok satıra kaydırılır ve açılan komut çubuğunun genel yüksekliğini artırır. Bir etikette, sözcük bölünmesinin gerçekleşmesi gereken karakter sınırına ipucu vermek üzere yumuşak kısa çizgi karakteri (0x00AD) ekleyebilirsiniz. XAML'de bunu aşağıdaki gibi bir kaçış dizisi kullanarak ifade edebilirsiniz:

<AppBarButton Icon="Back" Label="Areally&#x00AD;longlabel"/>

Etiket, ipucu bulunan konuma kaydırıldığında şöyle görünür.

SplitButton

Yerleşik ve SplitButtonCommandBarStyle sınıfını kullanarak bir CommandBar'da SplitButton görüntüleyebilirsiniz. SplitButtonCommandBarStyle, SplitButton'ın AppBarButton gibi görünmesi ve hissetmesi için görseller sağlarken AppBarElementContainer, SplitButton'ın AppBarButton gibi davranması için gereken işlevselliği sağlayan bir sarmalayıcı sınıfıdır.

SplitButton'ı bir AppBarElementContainer sarmalayıp CommandBar'a yerleştirdiğinizde, SplitButtonCommandBarStyle kaynağı otomatik olarak uygulanır.

Bu örnek kod, CommandBar içinde bir SplitButton oluşturur ve görüntüler:

<CommandBar>
    <AppBarButton Icon="Copy" ToolTipService.ToolTip="Copy" Label="Copy"/>
    <AppBarElementContainer>
        <muxc:SplitButton ToolTipService.ToolTip="Insert" Content="Insert">
            <muxc:SplitButton.Flyout>
                <MenuFlyout Placement="RightEdgeAlignedTop">
                    <MenuFlyoutItem Text="Insert above"/>
                    <MenuFlyoutItem Text="Insert between"/>
                    <MenuFlyoutItem  Text="Insert below"/>
                </MenuFlyout>
            </muxc:SplitButton.Flyout>
        </muxc:SplitButton>
    </AppBarElementContainer>
    <AppBarButton Label="Select all"/>
    <AppBarButton Label="Delete" Icon="Delete"/>
</CommandBar>

Menüler ve açılır menüler

Yanıtla, Tümünü Yanıtla ve İlet'i yanıtla menüsüne yerleştirme gibi komutlar için mantıksal gruplandırmalar kullanmayı göz önünde bulundurun. Genellikle bir uygulama çubuğu düğmesi tek bir komutu etkinleştirirken, uygulama çubuğu düğmesi özel içerik içeren bir MenuFlyout veya Flyout göstermek için kullanılabilir.

Diğer içerik

content özelliğini ayarlayarak içerik alanına herhangi bir XAML öğesi ekleyebilirsiniz. Birden fazla öğe eklemek istiyorsanız, bunları bir panel kapsayıcısına yerleştirmeniz ve paneli content özelliğinin tek alt öğesi yapmanız gerekir.

Dinamik taşma etkinleştirildiğinde içerik kırpılmaz çünkü birincil komutlar taşma menüsüne taşınabilir. Aksi takdirde, birincil komutlar önceliklidir ve içeriğin kırpılmasına neden olabilir.

ClosedDisplayModeCompactolduğunda, içerik komut çubuğunun küçük boyutundan büyükse kırpılabilir. İlgili kullanıcı arabirimi öğelerinin içerik alanında kesilmemesi için Açma ve Kapatma olaylarını ele alarak çeşitli bölümleri gösterebilir veya gizleyebilirsiniz. Daha fazla bilgi için açık ve kapalı durumlar bölümüne bakın.

Açık ve kapalı durumlar

Komut çubuğu açık veya kapalı olabilir. Açık olduğunda, metin etiketleri içeren birincil komut düğmelerini gösterir ve taşma menüsünü açar (ikincil komutlar varsa). Komut çubuğu taşma menüsünü yukarı (birincil komutların üzerinde) veya aşağı doğru (birincil komutların altında) açar. Varsayılan yön yukarıdır, ancak taşma menüsünü yukarı doğru açmak için yeterli alan yoksa, komut çubuğu onu aşağı doğru açar.

Bir kullanıcı "daha fazlası" [...] düğmesine basarak bu durumlar arasında geçiş yapabilir. IsOpen özelliğini ayarlayarak bunlar arasında program aracılığıyla geçiş yapabilirsiniz.

Açılan veya kapatılan komut çubuğuna yanıt vermek için Açma, Açık, Kapanışve Kapalı olaylarını kullanabilirsiniz.

• Açma ve Kapatma olayları, geçiş animasyonu başlamadan önce gerçekleşir.
• Açılmış ve Kapanmış olayları, geçiş tamamlandıktan sonra gerçekleşir.

Bu örnekte, komut çubuğunun opaklığını değiştirmek için Açma ve Kapatma olayları kullanılır. Komut çubuğu kapatıldığında, yarı saydam hale gelir, böylece uygulamanın arka planı görünür olur. Komut çubuğu açıldığında, kullanıcının komutlara odaklanması için komut çubuğu opak hale getirilir.

<CommandBar Opening="CommandBar_Opening"
            Closing="CommandBar_Closing">
    <AppBarButton Icon="Accept" Label="Accept"/>
    <AppBarButton Icon="Edit" Label="Edit"/>
    <AppBarButton Icon="Save" Label="Save"/>
    <AppBarButton Icon="Cancel" Label="Cancel"/>
</CommandBar>

private void CommandBar_Opening(object sender, object e)
{
    CommandBar cb = sender as CommandBar;
    if (cb != null) cb.Background.Opacity = 1.0;
}

private void CommandBar_Closing(object sender, object e)
{
    CommandBar cb = sender as CommandBar;
    if (cb != null) cb.Background.Opacity = 0.5;
}

Yapışkan

Kullanıcı bir komut çubuğu açıkken uygulamanın diğer bölümleriyle etkileşime geçtiğinde, komut çubuğu otomatik olarak kapanır. Buna hafif kapatmadenir. IsSticky özelliğini ayarlayarak ışık kapatma davranışını denetleyebilirsiniz. IsSticky="true"olduğunda, kullanıcı "daha fazlasını gör" [...] düğmesine basana veya taşma menüsünden bir öğe seçene kadar çubuk açık kalır.

Kullanıcıların ışık kapatma ve klavye odaklama davranışıbeklentilerine uymadığından, yapışkan komut çubuklarından kaçınmanızı öneririz.

Görüntü Modu

ClosedDisplayMode özelliğini ayarlayarak komut çubuğunun kapalı durumda nasıl gösterileceğini denetleyebilirsiniz. Aralarından seçim yapabileceğiniz 3 kapalı ekran modu vardır:

• Compact: Varsayılan mod. İçeriği, etiketleri olmayan birincil komut simgelerini ve "daha fazlasına bakın" [...] düğmesini gösterir.
• Minimal: Yalnızca "daha fazlasını gör" [...] düğmesi gibi davranan ince bir çubuk gösterir. Kullanıcı, çubuğu açmak için çubuğun herhangi bir yerine basabilir.
• Gizli: Komut çubuğu kapatıldığında gösterilmez. Bu, bağlamsal komutları satır içi komut çubuğuyla göstermek için yararlı olabilir. Bu durumda, IsOpen özelliğini ayarlayarak veya ClosedDisplayMode değerini En Az veyaCompactolarak değiştirerek komut çubuğunu program aracılığıyla açmanız gerekir.

Burada, bir RichEditBoxiçin basit biçimlendirme komutlarını tutmak için bir komut çubuğu kullanılır. Düzenleme kutusunda odak olmadığında, biçimlendirme komutları dikkat dağıtıcı olabileceğinden gizlenebilir. Düzenleme kutusu kullanılırken, biçimlendirme komutlarının görünür olması için komut çubuğunun ClosedDisplayMode'u Kompakt olarak ayarlanır.

<StackPanel Width="300"
            GotFocus="EditStackPanel_GotFocus"
            LostFocus="EditStackPanel_LostFocus">
    <CommandBar x:Name="FormattingCommandBar" ClosedDisplayMode="Hidden">
        <AppBarButton Icon="Bold" Label="Bold" ToolTipService.ToolTip="Bold"/>
        <AppBarButton Icon="Italic" Label="Italic" ToolTipService.ToolTip="Italic"/>
        <AppBarButton Icon="Underline" Label="Underline" ToolTipService.ToolTip="Underline"/>
    </CommandBar>
    <RichEditBox Height="200"/>
</StackPanel>

private void EditStackPanel_GotFocus(object sender, RoutedEventArgs e)
{
    FormattingCommandBar.ClosedDisplayMode = AppBarClosedDisplayMode.Compact;
}

private void EditStackPanel_LostFocus(object sender, RoutedEventArgs e)
{
    FormattingCommandBar.ClosedDisplayMode = AppBarClosedDisplayMode.Hidden;
}

Uyarı

Düzenleme komutlarının uygulanması bu örneğin kapsamının dışındadır. Daha fazla bilgi için RichEditBox makalesine bakın.

Minimal ve Gizli modları bazı durumlarda yararlı olsa da, tüm eylemleri gizlemenin kullanıcıların kafasını karıştırabileceğini unutmayın.

ClosedDisplayMode'un kullanıcıya daha fazla veya daha az ipucu sağlayacak şekilde değiştirilmesi, çevresindeki öğelerin düzenini etkiler. Buna karşılık, CommandBar kapalı ve açık arasında geçiş yaparken diğer öğelerin düzenini etkilemez.

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.

Bu denetimin API'leri Windows.UI.Xaml.Controls ad alanında bulunur.

• UWP API'leri:CommandBar sınıfı, AppBarButton sınıfı, AppBarToggleButton sınıfı, AppBarSeparator sınıfı
• WinUI 2 Galeri uygulamasını açın veKomut Çubuğu'na bakı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, bu denetim için yuvarlatılmış köşeler kullanan yeni bir şablon içerir. Daha fazla bilgi için bkz . Köşe yarıçapı.

CommandBar'daki bir SplitButton otomatik olarak stil oluşturmak için WinUI 2.6 veya sonraki sürümlerden SplitButton denetimini kullanmanız gerekir.

İlgili makaleler

• Windows uygulamaları için komut tasarımının temelleri
• Komut çubuğu açılır menü
• Menü açılır öğesi ve menü çubuğu
• MenuFlyout sınıfı
• CommandBar sınıfı