Skip to main content

CommandBarFlyout

Description​

Use CommandBarFlyout for a compact command strip with an overflow menu; commands dismiss the flyout when invoked.

CommandBarFlyout in light mode CommandBarFlyout in dark mode

Captured state changes​

Closed trigger

CommandBarFlyout closed trigger in light mode CommandBarFlyout closed trigger in dark mode

Example usage​

<fluence:Button Content="Commands" Click="ShowFlyoutButton_Click">
    <fluence:FlyoutBase.AttachedFlyout>
        <fluence:CommandBarFlyout>
            <fluence:CommandBarFlyout.PrimaryCommands>
                <fluence:AppBarButton Label="Copy" Command="{Binding CopyCommand}" />
            </fluence:CommandBarFlyout.PrimaryCommands>
            <fluence:CommandBarFlyout.SecondaryCommands>
                <fluence:AppBarButton Label="Delete" Command="{Binding DeleteCommand}" />
            </fluence:CommandBarFlyout.SecondaryCommands>
        </fluence:CommandBarFlyout>
    </fluence:FlyoutBase.AttachedFlyout>
</fluence:Button>

In the window or page code-behind:

private void ShowFlyoutButton_Click(object sender, System.Windows.RoutedEventArgs e)
{
    if (sender is System.Windows.FrameworkElement target)
    {
        Fluence.Wpf.Controls.FlyoutBase.ShowAttachedFlyout(target);
    }
}

Bind CopyCommand and DeleteCommand on the page's data context.

State and behavior​

Primary commands appear on the strip; secondary commands appear in overflow.

Reference​