Under construction

(?)

This content is not available in your language. Here's one version in another language that is currently available.

Request Translation

DropDownButton

A DropDownButton is a button that shows a chevron as a visual indicator that it has an attached flyout that contains more options. It has the same behavior as a standard Button control with a flyout; only the appearance is different.

The drop down button inherits the Click event, but you typically don't use it. Instead, you use the Flyout property to attach a flyout and invoke actions by using menu options in the flyout. The flyout opens automatically when the button is clicked. Be sure to specify the Placement property of your flyout to ensure the desired placement in relation to the button. The default placement algorithm might not produce the intended placement in all situations. For more info about flyouts, see Flyout and MenuFlyout.

Examples
 ​ 

Basic DropDownButton
 ​ 

This code makes a DropDownButton that has a flyout which opens when the button is clicked:

<ui:DropDownButton Content="Click me!">
    <ui:DropDownButton.Flyout>
        <ui:Flyout Placement="Bottom">
            <TextBlock Text="Hi there!" Width="200" Height="120"/>
        </ui:Flyout>
    </ui:DropDownButton.Flyout>
</ui:DropDownButton>

With MenuFlyout
 ​ 

This example shows how to create a drop down button with a MenuFlyout that contains commands for paragraph alignment in a TextBox.

<ui:DropDownButton x:Name="DropDownButton_Align">

    <ui:FontIcon x:Name="FontIcon_Align" Icon="{x:Static ui:SegoeFluentIcons.AlignLeft}"/>

    <ui:DropDownButton.Flyout>
        <ui:MenuFlyout>
            
            <MenuItem Header="Align Left" Tag="left" Click="MenuItem_Click">
                <MenuItem.Icon>
                    <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.AlignLeft}"/>
                </MenuItem.Icon>
            </MenuItem>
            <MenuItem Header="Align Center" Tag="center" Click="MenuItem_Click">
                <MenuItem.Icon>
                    <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.AlignCenter}"/>
                </MenuItem.Icon>
            </MenuItem>
            <MenuItem Header="Align Right" Tag="right" Click="MenuItem_Click">
                <MenuItem.Icon>
                    <ui:FontIcon Icon="{x:Static ui:SegoeFluentIcons.AlignRight}"/>
                </MenuItem.Icon>
            </MenuItem>
            
        </ui:MenuFlyout>
    </ui:DropDownButton.Flyout>
</ui:DropDownButton>

<TextBox x:Name="TextBox_Text" Text="Text!" Width="200" Padding="10,6,6,6"/>
private void Button_SaveScreenshot_Click(object sender, RoutedEventArgs e)
{
    RenderTargetBitmap targetBitmap = new RenderTargetBitmap(
        (int)Viewbox_Viewport.ActualWidth,
        (int)Viewbox_Viewport.ActualHeight,
        96d,
        96d,
        PixelFormats.Default);

    targetBitmap.Render(Viewbox_Viewport);


    if (saveFileDialog.ShowDialog() == true)
    {
        BmpBitmapEncoder encoder = new BmpBitmapEncoder();
        encoder.Frames.Add(BitmapFrame.Create(targetBitmap));
        // save file to disk
        using (FileStream fs = File.Open(saveFileDialog.FileName, FileMode.OpenOrCreate))
        {
            encoder.Save(fs);
        }
    }
}

Remarks
 ​ 

Elevation
 ​ 

COMING_SOON

Flyout Service
 ​ 

COMING_SOON

Styles
 ​ 

There is one built-in style for DropDownButton control. Since this is a control directly from iNKORE.UI.WPF.Modern.Controls.dll, the default style key is null, you can use {x:Null} to apply the default style.

See also
 ​ 

Microsoft Learn
 ​