Skip to main content

CommandBarFlyoutPresenter

Description​

CommandBarFlyoutPresenter draws the primary strip and overflow surface of CommandBarFlyout. CommandBarFlyoutPresenter is shown within CommandBarFlyout; it is not a separate gallery destination.

Use it through CommandBarFlyout when a command strip needs an overflow surface.

CommandBarFlyoutPresenter in light mode CommandBarFlyoutPresenter 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​

The presenter displays command bar content and switches between collapsed and expanded overflow states.

Reference​