Buttons

Düğme, kullanıcıya anında bir eylemi tetiklemenin bir yolunu sunar. Bazı düğmeler gezinti, yinelenen eylemler veya menüleri sunma gibi belirli görevler için özeldir.

örneği

Genişletilebilir Uygulama biçimlendirme dili (XAML) çerçevesi, standart bir düğme denetiminin yanı sıra çeşitli özel düğme denetimleri sağlar.

Yönetim	Description
Düğmesi	Anında eylem başlatan bir düğme. Click olayı veya Command bağlama ile kullanılabilir.
TekrarButonu	Basıldığında Click etkinliğini sürekli başlatan bir düğme.
Köprü Düğmesi	Hiperlink gibi görünen ve gezinti için kullanılan düğme. Daha fazla bilgi için Hipermetin Bağlantılarıbölümüne bakın.
Açılır Düğme	Bağlı bir açılır pencereyi açmak için şevronlu düğme.
BölmeDüğmesi	İki tarafı olan bir düğme. Bir taraf bir eylem başlatır ve diğer taraf bir menü açar.
Açma/KapatmaBölmeDüğmesi	İki taraflı bir düğme. Bir taraf açılır/kapatılır ve diğer taraf ise bir menü açar.
Geçiş Düğmesi	Açık veya kapalı olabilecek bir düğme.

Doğru kontrol bu mu?

Kullanıcının form gönderme gibi anında bir eylem başlatmasına izin vermek için Düğmesi denetimi kullanın.

Başka bir sayfaya gitmek için yapılıyorsa Button denetimini kullanmayın; bunun yerine HyperlinkButton denetimini kullanın. Daha fazla bilgi için Hipermetin Bağlantılarıbölümüne bakın.

Önemli

Sihirbaz gezintisi için Geri ve İlerietiketli düğmeleri kullanın. Diğer geri gezinti veya üst düzey gezinti türleri için geri düğmesini kullanın.

Kullanıcının bir eylemi tekrar tekrar tetiklemesini isteyebileceği durumlarda RepeatButton denetimi kullanın. Örneğin, sayaçtaki bir değeri artırmak veya azaltmak için RepeatButton denetimi kullanın.

DropDownButton denetimini, düğmenin daha fazla seçenek içeren bir açılır öğesi olduğunda kullanın. Varsayılan chevron, düğmenin bir açılır pencere içerdiğini gösteren bir görsel işaret sağlar.

Kullanıcının anında eylem başlatabilmesini veya ek seçenekler arasından bağımsız olarak seçim yapabilmesini istediğinizde SplitButton denetimi kullanın.

Kullanıcının birbirini dışlayan iki durum arasında hemen geçiş yapabilmesini istediğinizde ToggleButton denetimini, kullanıcı arabirimi gereksinimlerinize en uygun seçenek olduğunda kullanın. Kullanıcı arabiriminiz bir düğmeden yararlanmadığı sürece, AppBarToggleButton, CheckBox, RadioButtonveya ToggleSwitchkullanmak daha iyi bir seçim olabilir.

Recommendations

Düğmenin amacının ve durumunun kullanıcıya açık olduğundan emin olun.
Aynı karar için birden çok düğme olduğunda (onay iletişim kutusunda olduğu gibi), işleme düğmelerini şu sırayla sunun; burada [Yap] ve [Yapma], ana yönergeye özel yanıtlardır:
- Tamam/[Yap]/Evet
  - [Yapma]/Hayır
  - İptal
Aynı anda yalnızca bir veya iki düğmeyi kullanıma sunma, örneğin Kabul Et ve İptal. Kullanıcıya daha fazla eylem sunmanız gerekiyorsa, onay kutularını veya kullanıcının eylemleri seçebileceği radyo düğmelerini ve bu eylemleri tetikleyen tek bir komut düğmesi kullanmayı göz önünde bulundurun.
Uygulamanızın içindeki birden çok sayfada kullanılabilir olması gereken bir eylem için, birden çok sayfada bir düğmeyi yinelemek yerine, bir alt uygulama çubuğu kullanmayı göz önünde bulundurun.

Düğme metni

Düğmenin içeriği genellikle metindir. Bu metni tasarlarken aşağıdaki önerileri kullanın:

Düğmenin gerçekleştirdiği eylemi açıkça açıklayan kısa, belirli, açıklayıcı bir metin kullanın. Düğme metni genellikle fiil olan tek bir sözcükdür.
Marka yönergeleriniz farklı bir şey kullanmanızı söylemiyorsa varsayılan yazı tipini kullanın.
Daha kısa metinler için, en az 120 piksel düğme genişliği kullanarak dar komut düğmelerinden kaçının.
Daha uzun metinler için, metni en fazla 26 karakter uzunluğunda sınırlayarak geniş komut düğmelerinden kaçının.
Düğmenin metin içeriği dinamikse (yani, yerelleştirilmiş ), düğmenin nasıl yeniden boyutlandırılacağını ve çevresindeki denetimlere ne olacağını düşünün.

Düzeltilmesi gerekiyor: Taşan metin içeren düğmeler.
Seçenek 1: Metin uzunluğu 26 karakterden büyükse düğme genişliğini, yığın düğmelerini ve kaydırmayı artırın.
Seçenek 2: Düğme yüksekliğini artırın ve metni sarmalayın.

Önerilen tek düğmeli düzen

Düzeniniz yalnızca bir düğme gerektiriyorsa, kapsayıcı bağlamı temelinde sola veya sağa hizalanmış olmalıdır.

Tek düğmeli iletişim kutuları düğmeye sağa hizalanmalıdır. İletişim kutunuzda tek bir düğme varsa, düğmenin güvenli, yıkıcı olmayan eylemi gerçekleştirdiğinden emin olun. ContentDialog kullanır ve tek bir düğme belirtirseniz, otomatik olarak sağa hizalanır.

Diyalog içindeki bir düğmeA button within a dialog
Düğmeniz bir kapsayıcı kullanıcı arabiriminde (örneğin, kısa bildirim, açılır menü veya liste görünümü öğesi içinde) görünüyorsa, düğmeyi kapsayıcının içinde sağa hizalamanız gerekir.

KapsayıcıA button within a containeriçinde bir düğme
Tek bir düğme içeren sayfalarda (örneğin, ayarlar sayfasının en altındaki uygula düğmesi), düğmeyi sola hizalamanız gerekir. Bu, düğmenin sayfa içeriğinin geri kalanıyla hizalanmasını sağlar.

Geri düğmeleri

Geri düğmesi, kullanıcının arka yığınında veya gezinti geçmişinde geriye doğru gezintiyi etkinleştiren sistem tarafından sağlanan bir kullanıcı arabirimi öğesidir. Kendi geri düğmenizi oluşturmanız gerekmez, ancak iyi bir geriye dönük gezinti deneyimi sağlamak için bazı çalışmalar yapmanız gerekebilir. Daha fazla bilgi için bkz. Windows uygulamaları için gezinti geçmişi ve geriye doğru gezinti.

Örnekler

Bu örnekte, kullanıcılara çalışmaları kaydetmek isteyip istemediklerini soran bir iletişim kutusunda Kaydet, Kaydetmeve İptal Etolmak üzere üç düğme kullanılır.

Düğme oluşturma

Önemli API'ler:Button sınıfı, Tıklama olayı, Command özelliği, Content özelliği

WinUI 3 Galeri uygulamasını açın ve düğmelerin 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 örnekte, tıklamaya yanıt veren bir düğme gösterilir.

XAML'de düğmeyi oluşturun.

<Button Content="Subscribe" Click="SubscribeButton_Click"/>

Veya kodda düğmeyi oluşturun.

Button subscribeButton = new Button();
subscribeButton.Content = "Subscribe";
subscribeButton.Click += SubscribeButton_Click;

// Add the button to a parent container in the visual tree.
stackPanel1.Children.Add(subscribeButton);

Tıklama olayını işle.

private async void SubscribeButton_Click(object sender, RoutedEventArgs e)
{
    // Call app specific code to subscribe to the service. For example:
    ContentDialog subscribeDialog = new ContentDialog
    {
        Title = "Subscribe to App Service?",
        Content = "Listen, watch, and play in high definition for only $9.99/month. Free to try, cancel anytime.",
        CloseButtonText = "Not Now",
        PrimaryButtonText = "Subscribe",
        SecondaryButtonText = "Try it"
    };

    ContentDialogResult result = await subscribeDialog.ShowAsync();
}

Düğme etkileşimi

Bir Düğmesine dokunduğunuzda bir parmak veya ekran kalemiyle denetime dokunduğunuzda veya işaretçi üzerindeyken sol fare düğmesine bastığınızda, düğme tıklayın olayını açar. Bir düğmede klavye odağı varsa, Enter tuşuna veya Boşluk Çubuğuna basıldığında Tıklama olayı da tetiklenir.

Düğme nesnesinin bunun yerine Tıklama davranışına sahip olması nedeniyle PointerPressed düşük düzey olaylarını genellikle işleyemezsiniz. Daha fazla bilgi için bkz. Olaylara ve yönlendirilen olaylara genel bakış.

ClickMode özelliğini değiştirerek bir düğmenin Tıklama olayını nasıl yükselttiğini değiştirebilirsiniz. ClickMode varsayılan değeri Release'dır, ancak bir düğmenin ClickMode değerini Hover olarak da ayarlayabilir veya tuşuna basın. Eğer ClickModeHoverise, Click olayı klavye tuşları veya dokunma yoluyla tetiklenemez.

Düğme içeriği

Düğme, ContentControl sınıfının içerik denetimidir. XAML içerik özelliği Content'dır ve XAML: <Button>A button's content</Button>için bunun gibi bir söz dizimini etkinleştirir. Herhangi bir nesneyi düğmenin içeriği olarak ayarlayabilirsiniz. İçerik bir UIElement nesnesiyse, düğmede görüntülenir. İçerik başka bir nesne türüyse, dize gösterimi düğmede gösterilir.

Düğmenin içeriği genellikle metindir. Bu metni tasarlarken, daha önce listelenen Düğmesi metin önerilerini izleyin.

Düğmenin görünümünü oluşturan görselleri de özelleştirebilirsiniz. Örneğin, metni bir simgeyle değiştirebilir veya metne ek olarak bir simge kullanabilirsiniz.

Burada, resim ve metin içeren bir StackPanel bir düğmenin içeriği olarak belirlenir.

<Button x:Name="Button2" Click="Button_Click" Width="80" Height="90">
    <StackPanel>
        <Image Source="/Assets/Slices.png" Height="52"/>
        <TextBlock Text="Slices" Foreground="Black" HorizontalAlignment="Center"/> 
    </StackPanel>
</Button>

Düğme şöyle görünür.

Yinele düğmesi oluşturma

Önemli API'ler:RepeatButton sınıfı, Tıklama olayı, Content özelliği

WinUI 3 Galeri uygulamasını açın ve Tekrarlama Düğmesi'ni eylem halinde 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

RepeatButton denetimi, basıldığı andan bırakıldığı ana kadar art arda Tıklama olayları oluşturan bir düğmedir. RepeatButton denetiminin tıklama eylemini yinelemeye başlamadan önce basıldıktan sonra bekleyeceği süreyi belirtmek için Gecikme özelliğini ayarlayın. Tıklama eyleminin yinelemeleri arasındaki süreyi belirtmek için Interval özelliğini ayarlayın. Her iki özelliğin de süreleri milisaniye cinsinden belirtilir.

Aşağıdaki örnekte, bir metin bloğunda gösterilen değeri artırmak ve azaltmak amacıyla sırasıyla Tıklama olayları kullanılan iki RepeatButton denetimi gösterilmektedir.

<StackPanel>
    <RepeatButton Width="100" Delay="500" Interval="100" Click="Increase_Click">Increase</RepeatButton>
    <RepeatButton Width="100" Delay="500" Interval="100" Click="Decrease_Click">Decrease</RepeatButton>
    <TextBlock x:Name="clickTextBlock" Text="Number of Clicks:" />
</StackPanel>

private static int _clicks = 0;
private void Increase_Click(object sender, RoutedEventArgs e)
{
    _clicks += 1;
    clickTextBlock.Text = "Number of Clicks: " + _clicks;
}

private void Decrease_Click(object sender, RoutedEventArgs e)
{
    if(_clicks > 0)
    {
        _clicks -= 1;
        clickTextBlock.Text = "Number of Clicks: " + _clicks;
    }
}

Açılır düğme oluştur

Önemli API'ler: DropDownButton sınıfı, Flyout özelliği

WinUI 3 Galeri uygulamasını açın ve açılır menü düğmesinin 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

DropDownButton, daha fazla seçenek içeren ekli bir açılır öğeye sahip olduğunu görsel bir gösterge olarak köşeli çift ayraç gösteren bir düğmedir. Standart bir Düğmesi ile aynı davranışa sahiptir açılır menü ile denetime sahiptir; yalnızca görünüm farklıdır.

Açılan düğme Tıklama olayını devralır, ancak genellikle bunu kullanmazsınız. Bunun yerine, açılır öğe eklemek ve açılır öğedeki menü seçeneklerini kullanarak eylemleri çağırmak için Flyout özelliğini kullanırsınız. Düğmeye tıklandığında açılır pencere otomatik olarak gösterilir. Lütfen düğmeyle ilgili olarak istenen yerleştirmeyi sağlamak için açılır menünüzün Yerleştirme özelliğini belirttiğinizden emin olun. Varsayılan yerleştirme algoritması her durumda hedeflenen yerleştirmeyi üretmeyebilir. Açılır menüler hakkında daha fazla bilgi için bkz. Açılır menüler ve Menü açılır menüsü ile menü çubuğu.

Örnek - Açılan düğme

Bu örnekte, bir RichEditBox denetiminde paragraf hizalama komutlarını içeren bir açılır düğmenin nasıl oluşturulacağı gösterilmektedir. (Daha fazla bilgi ve kod için bkz. Zengin düzenleme kutusu).

<DropDownButton ToolTipService.ToolTip="Alignment">
    <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="14" Text="&#xE8E4;"/>
    <DropDownButton.Flyout>
        <MenuFlyout Placement="BottomEdgeAlignedLeft">
            <MenuFlyoutItem Text="Left" Icon="AlignLeft" Tag="left"
                            Click="AlignmentMenuFlyoutItem_Click"/>
            <MenuFlyoutItem Text="Center" Icon="AlignCenter" Tag="center"
                            Click="AlignmentMenuFlyoutItem_Click"/>
            <MenuFlyoutItem Text="Right" Icon="AlignRight" Tag="right"
                            Click="AlignmentMenuFlyoutItem_Click"/>
        </MenuFlyout>
    </DropDownButton.Flyout>
</DropDownButton>

private void AlignmentMenuFlyoutItem_Click(object sender, RoutedEventArgs e)
{
    var option = ((MenuFlyoutItem)sender).Tag.ToString();

    Windows.UI.Text.ITextSelection selectedText = editor.Document.Selection;
    if (selectedText != null)
    {
        // Apply the alignment to the selected paragraphs.
        var paragraphFormatting = selectedText.ParagraphFormat;
        if (option == "left")
        {
            paragraphFormatting.Alignment = Windows.UI.Text.ParagraphAlignment.Left;
        }
        else if (option == "center")
        {
            paragraphFormatting.Alignment = Windows.UI.Text.ParagraphAlignment.Center;
        }
        else if (option == "right")
        {
            paragraphFormatting.Alignment = Windows.UI.Text.ParagraphAlignment.Right;
        }
    }
}

Bölünmüş düğme oluşturma

Önemli API'ler: SplitButton sınıfı, Tıklama olayı, Flyout özelliği

WinUI 3 Galeri uygulamasını açın ve SplitButton'ı çalışırken 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

SplitButton denetimi ayrı ayrı çağrılabilen iki bölüme sahiptir. Bir bölüm standart bir düğme gibi davranır ve hemen bir eylem çağırır. Diğer bölüm, kullanıcının seçebileceği ek seçenekler içeren bir açılır öğe çağırır.

Uyarı

Dokunduğunda, böl düğmesi açılan düğme gibi davranır; düğmenin her iki yarısı da açılır pencereyi çağırır. Diğer giriş yöntemleriyle, kullanıcı düğmenin iki yarısından birini ayrı ayrı çağırabilir.

Bölünmüş düğmenin tipik davranışı şöyledir:

Kullanıcı düğmeye tıkladığında, açılır listede şu anda seçili olan seçeneği çağırmak için Click olayını işleyin.
Açılır menü açıkken, menüdeki öğelerin işleyişini düzenleyin; hangi seçeneğin seçileceğini değiştirin ve ardından bu seçeneği seçin. Açılır öğeyi çağırmak önemlidir çünkü dokunma kullanırken Tıklayın düğme olayı meydana gelmez.

İpucu

Öğeleri açılan menüye yerleştirmenin ve çağrılarını işlemenin birçok yolu vardır. ListView veya GridViewkullanıyorsanız, bunun bir yolu SelectionChanged olayını işlemektir. Bunu yaparsanız, SingleSelectionFollowsFocus değerini falseolarak ayarlayın. Bu, kullanıcıların öğeyi her değişiklikte çağırmadan klavye kullanarak seçeneklerde gezinmesine olanak tanır.

Örnek - Böl düğmesi

Bu örnekte, bir RichEditBox denetiminde seçili metnin ön plan rengini değiştirmek için kullanılan bölünmüş düğmenin nasıl oluşturulacağı gösterilmektedir. (Daha fazla bilgi ve kod için bkz. Zengin düzenleme kutusu). Böl düğmesinin açılır menüsü, Yerleştirme özelliği için varsayılan değer olarak BottomEdgeAlignedLeft kullanır. Bu değeri geçersiz kılamazsınız.

seçmek için bölünmüş düğme

<SplitButton ToolTipService.ToolTip="Foreground color"
             Click="BrushButtonClick">
    <Border x:Name="SelectedColorBorder" Width="20" Height="20"/>
    <SplitButton.Flyout>
        <Flyout x:Name="BrushFlyout">
            <!-- Set SingleSelectionFollowsFocus="False"
                 so that keyboard navigation works correctly. -->
            <GridView ItemsSource="{x:Bind ColorOptions}"
                      SelectionChanged="BrushSelectionChanged"
                      SingleSelectionFollowsFocus="False"
                      SelectedIndex="0" Padding="0">
                <GridView.ItemTemplate>
                    <DataTemplate>
                        <Rectangle Fill="{Binding}" Width="20" Height="20"/>
                    </DataTemplate>
                </GridView.ItemTemplate>
                <GridView.ItemContainerStyle>
                    <Style TargetType="GridViewItem">
                        <Setter Property="Margin" Value="2"/>
                        <Setter Property="MinWidth" Value="0"/>
                        <Setter Property="MinHeight" Value="0"/>
                    </Style>
                </GridView.ItemContainerStyle>
            </GridView>
        </Flyout>
    </SplitButton.Flyout>
</SplitButton>

public sealed partial class MainPage : Page
{
    // Color options that are bound to the grid in the split button flyout.
    private List<SolidColorBrush> ColorOptions = new List<SolidColorBrush>();
    private SolidColorBrush CurrentColorBrush = null;

    public MainPage()
    {
        this.InitializeComponent();

        // Add color brushes to the collection.
        ColorOptions.Add(new SolidColorBrush(Colors.Black));
        ColorOptions.Add(new SolidColorBrush(Colors.Red));
        ColorOptions.Add(new SolidColorBrush(Colors.Orange));
        ColorOptions.Add(new SolidColorBrush(Colors.Yellow));
        ColorOptions.Add(new SolidColorBrush(Colors.Green));
        ColorOptions.Add(new SolidColorBrush(Colors.Blue));
        ColorOptions.Add(new SolidColorBrush(Colors.Indigo));
        ColorOptions.Add(new SolidColorBrush(Colors.Violet));
        ColorOptions.Add(new SolidColorBrush(Colors.White));
    }

    private void BrushButtonClick(object sender, object e)
    {
        // When the button part of the split button is clicked,
        // apply the selected color.
        ChangeColor();
    }

    private void BrushSelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        // When the flyout part of the split button is opened and the user selects
        // an option, set their choice as the current color, apply it, then close the flyout.
        CurrentColorBrush = (SolidColorBrush)e.AddedItems[0];
        SelectedColorBorder.Background = CurrentColorBrush;
        ChangeColor();
        BrushFlyout.Hide();
    }

    private void ChangeColor()
    {
        // Apply the color to the selected text in a RichEditBox.
        Windows.UI.Text.ITextSelection selectedText = editor.Document.Selection;
        if (selectedText != null)
        {
            Windows.UI.Text.ITextCharacterFormat charFormatting = selectedText.CharacterFormat;
            charFormatting.ForegroundColor = CurrentColorBrush.Color;
            selectedText.CharacterFormat = charFormatting;
        }
    }
}

Açılır kapanır düğme oluştur

Önemli API'ler: ToggleSplitButton sınıfı, IsCheckedChanged olayı, IsChecked özelliği

WinUI 3 Galeri uygulamasını açın ve ToggleSplitButton düğmesini aksiyonda 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

ToggleSplitButton denetimi ayrı ayrı çağrılabilen iki bölüme sahiptir. Bir bölüm işlevi, aç-kapa düğmesi gibi hareket eder ve açık veya kapalı olabilir. Diğer bölüm, kullanıcının seçebileceği ek seçenekler içeren bir açılır öğe çağırır.

Özellikte kullanıcının seçebileceği birden çok seçenek olduğunda özelliği etkinleştirmek veya devre dışı bırakmak için genellikle iki durumlu bölme düğmesi kullanılır. Örneğin, bir belge düzenleyicisinde listeleri açmak veya kapatmak için kullanılabilir, açılır liste ise listenin stilini seçmek için kullanılır.

Uyarı

Dokunarak çağrıldığında aç/kapa bölme düğmesi, açılır menü düğmesi gibi davranır. Diğer giriş yöntemleriyle, kullanıcı düğmenin iki yarısını ayrı olarak açıp çağırabilir. Dokunarak, düğmenin her iki yarısı da açılır pencereyi açar. Bu nedenle, düğmeyi açmak veya kapatmak için açılır öğe içeriğinize bir seçenek eklemeniz gerekir.

ToggleButton ile farklar

ToggleButtonaksine, ToggleSplitButton belirsiz bir duruma sahip değildir. Sonuç olarak, şu farklılıkları aklınızda bulundurmanız gerekir:

ToggleSplitButton, IsThreeState özelliğine veya Indeterminate olayına sahip değildir.
ToggleSplitButton.IsChecked özelliği yalnızca bir boolean'dır, nullable<bool>değildir.
ToggleSplitButton yalnızca IsCheckedChanged olayına sahiptir; ayrı Checked ve Unchecked olayı yoktur.

Örnek - Bölme düğmesini açma/kapatma

Aşağıdaki örnek, RichEditBox denetiminde liste biçimlendirmesini açmak veya kapatmak ve listenin stilini değiştirmek için bir iki işlevli düğmenin nasıl kullanılabileceğini gösterir. (Daha fazla bilgi ve kod için bkz. Zengin düzenleme kutusu). Geçiş bölme düğmesinin açılır menüsü, Yerleştirme özelliği için varsayılan değer olarak BottomEdgeAlignedLeft kullanır. Bu değeri geçersiz kılamazsınız.

<ToggleSplitButton x:Name="ListButton"
                   ToolTipService.ToolTip="List style"
                   Click="ListButton_Click"
                   IsCheckedChanged="ListStyleButton_IsCheckedChanged">
    <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="14" Text="&#xE8FD;"/>
    <ToggleSplitButton.Flyout>
        <Flyout>
            <ListView x:Name="ListStylesListView"
                      SelectionChanged="ListStylesListView_SelectionChanged"
                      SingleSelectionFollowsFocus="False">
                <StackPanel Tag="bullet" Orientation="Horizontal">
                    <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE7C8;"/>
                    <TextBlock Text="Bullet" Margin="8,0"/>
                </StackPanel>
                <StackPanel Tag="alpha" Orientation="Horizontal">
                    <TextBlock Text="A" FontSize="24" Margin="2,0"/>
                    <TextBlock Text="Alpha" Margin="8"/>
                </StackPanel>
                <StackPanel Tag="numeric" Orientation="Horizontal">
                    <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xF146;"/>
                    <TextBlock Text="Numeric" Margin="8,0"/>
                </StackPanel>
                <TextBlock Tag="none" Text="None" Margin="28,0"/>
            </ListView>
        </Flyout>
    </ToggleSplitButton.Flyout>
</ToggleSplitButton>

private void ListStyleButton_IsCheckedChanged(ToggleSplitButton sender, ToggleSplitButtonIsCheckedChangedEventArgs args)
{
    // Use the toggle button to turn the selected list style on or off.
    if (((ToggleSplitButton)sender).IsChecked == true)
    {
        // On. Apply the list style selected in the drop down to the selected text.
        var listStyle = ((FrameworkElement)(ListStylesListView.SelectedItem)).Tag.ToString();
        ApplyListStyle(listStyle);
    }
    else
    {
        // Off. Make the selected text not a list,
        // but don't change the list style selected in the drop down.
        ApplyListStyle("none");
    }
}

private void ListStylesListView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    var listStyle = ((FrameworkElement)(e.AddedItems[0])).Tag.ToString();

    if (ListButton.IsChecked == true)
    {
        // Toggle button is on. Turn it off...
        if (listStyle == "none")
        {
            ListButton.IsChecked = false;
        }
        else
        {
            // or apply the new selection.
            ApplyListStyle(listStyle);
        }
    }
    else
    {
        // Toggle button is off. Turn it on, which will apply the selection
        // in the IsCheckedChanged event handler.
        ListButton.IsChecked = true;
    }
}

private void ApplyListStyle(string listStyle)
{
    Windows.UI.Text.ITextSelection selectedText = editor.Document.Selection;
    if (selectedText != null)
    {
        // Apply the list style to the selected text.
        var paragraphFormatting = selectedText.ParagraphFormat;
        if (listStyle == "none")
        {  
            paragraphFormatting.ListType = Windows.UI.Text.MarkerType.None;
        }
        else if (listStyle == "bullet")
        {
            paragraphFormatting.ListType = Windows.UI.Text.MarkerType.Bullet;
        }
        else if (listStyle == "numeric")
        {
            paragraphFormatting.ListType = Windows.UI.Text.MarkerType.Arabic;
        }
        else if (listStyle == "alpha")
        {
            paragraphFormatting.ListType = Windows.UI.Text.MarkerType.UppercaseEnglishLetter;
        }
        selectedText.ParagraphFormat = paragraphFormatting;
    }
}

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.

UWP uygulamaları için DropDownButton, SplitButton ve ToggleSplitButton 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:Button sınıfı, RepeatButton sınıfı, HyperlinkButton sınıfı, DropDownButton, SplitButton, ToggleSplitButton, ToggleButton, Click event, Command özelliği, Content özelliği
WinUI 2 API'lerini :DropDownButton, SplitButton, ToggleSplitButton
WinUI 2 Galeri uygulamasını açın ve düğmeyi çalışırken 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:DropDownButton />
<muxc:SplitButton />
<muxc:ToggleSplitButton />

Geri Bildirim

Bu sayfayı yararlı buldunuz mu?

Last updated on 2025-11-25

Aracılığıyla paylaş

Buttons

Doğru kontrol bu mu?

Recommendations

Düğme metni

Önerilen tek düğmeli düzen

Geri düğmeleri

Örnekler

Düğme oluşturma

Düğme etkileşimi

Düğme içeriği

Yinele düğmesi oluşturma

Açılır düğme oluştur

Örnek - Açılan düğme

Bölünmüş düğme oluşturma

Örnek - Böl düğmesi

Açılır kapanır düğme oluştur

ToggleButton ile farklar

Örnek - Bölme düğmesini açma/kapatma

UWP ve WinUI 2

İlgili makaleler

Geri Bildirim

Ek kaynaklar