CommandBar CommandBar CommandBar CommandBar Class

Initializes a new instance of the CommandBar class.

public : CommandBar()public CommandBar()Public Sub New()// This API is not available in Javascript.

Gets or sets the Style applied to the overflow content of the CommandBar.

public : Style CommandBarOverflowPresenterStyle { get; set; }public Style CommandBarOverflowPresenterStyle { get; set; }Public ReadWrite Property CommandBarOverflowPresenterStyle As Style// This API is not available in Javascript.

<CommandBar CommandBarOverflowPresenterStyle={StaticResource styleResourceKey}/>

Remarks

The Style element you use for a CommandBarOverflowPresenter value must specify TargetType="CommandBarOverflowPresenter".

You can style the properties of the internal CommandBarOverflowPresenter that is presenting the overflow content (SecondaryCommands ) of a CommandBar. The properties that can be styled are the dependency properties of the base ItemsControl class or Control class, such as FontSize or Padding, or base element properties such as FrameworkElement.Margin that the CommandBarOverflowPresenter class inherits.

See Also

SecondaryCommandsSecondaryCommandsSecondaryCommandsSecondaryCommands

Identifies the CommandBarOverflowPresenterStyle dependency property.

public : static DependencyProperty CommandBarOverflowPresenterStyleProperty { get; }public static DependencyProperty CommandBarOverflowPresenterStyleProperty { get; }Public Static ReadOnly Property CommandBarOverflowPresenterStyleProperty As DependencyProperty// This API is not available in Javascript.

Gets an object that provides calculated values that can be referenced as {TemplateBinding} markup extension sources when defining templates for a CommandBar control.

public : CommandBarTemplateSettings CommandBarTemplateSettings { get; }public CommandBarTemplateSettings CommandBarTemplateSettings { get; }Public ReadOnly Property CommandBarTemplateSettings As CommandBarTemplateSettings// This API is not available in Javascript.

Gets or sets a value that indicates the placement and visibility of the labels on the command bar's buttons.

public : CommandBarDefaultLabelPosition DefaultLabelPosition { get; set; }public CommandBarDefaultLabelPosition DefaultLabelPosition { get; set; }Public ReadWrite Property DefaultLabelPosition As CommandBarDefaultLabelPosition// This API is not available in Javascript.

<CommandBar DefaultLabelPosition="commandBarDefaultLabelPositionMemberName" />

Remarks

By default, an app bar button's label is displayed below the icon. You can set this property to show labels to the right of the icon, or to hide labels.

You can set the AppBarButton.LabelPosition property to override this value and make the label always collapsed for a specific app bar button.

Version compatibility

The DefaultLabelPosition property is not available prior to Windows 10, version 1607. If your app’s 'minimum platform version' setting in Microsoft Visual Studio is less than the 'introduced version' shown in the Requirements block later in this page, you must design and test your app to account for this. For more info, see Version adaptive code.

To avoid exceptions when your app runs on previous versions of Windows 10, do not set this property in XAML or use it without performing a runtime check. This example shows how to use the ApiInformation class to check for the presence of this property before you set it.

<CommandBar x:Name="commandBar1" Loaded="CommandBar_Loaded">
    ...
</CommandBar>

private void CommandBar_Loaded(object sender, RoutedEventArgs e)
{
    if (ApiInformation.IsPropertyPresent("Windows.UI.Xaml.Controls.CommandBar", "DefaultLabelPosition"))
    {
        commandBar1.DefaultLabelPosition = CommandBarDefaultLabelPosition.Right;
    }
}

Identifies the DefaultLabelPosition dependency property.

public : static DependencyProperty DefaultLabelPositionProperty { get; }public static DependencyProperty DefaultLabelPositionProperty { get; }Public Static ReadOnly Property DefaultLabelPositionProperty As DependencyProperty// This API is not available in Javascript.

Gets or sets a value that indicates whether primary commands automatically move to the overflow menu when space is limited.

public : PlatForm::Boolean IsDynamicOverflowEnabled { get; set; }public bool IsDynamicOverflowEnabled { get; set; }Public ReadWrite Property IsDynamicOverflowEnabled As bool// This API is not available in Javascript.

<CommandBar IsDynamicOverflowEnabled="bool"/>

Remarks

For more info and guidelines, see the App bar and command bar article.

Starting in Windows 10, version 1607, CommandBar introduces a dynamic overflow feature. By default, PrimaryCommands automatically move in or out of the overflow area as the command bar width changes, for example, when users resize their app window. You can set the IsDynamicOverflowEnabled property to false to disable this behavior.

Dynamic overflow affects only the UI presentation of the commands, it doesn’t move commands from the PrimaryCommands collection to SecondaryCommands.

Version compatibility

The IsDynamicOverflowEnabled property is not available prior to Windows 10, version 1607. If your app’s 'minimum platform version' setting in Microsoft Visual Studio is less than the 'introduced version' shown in the Requirements block later in this page, you must design and test your app to account for this. For more info, see Version adaptive code.

To avoid exceptions when your app runs on previous versions of Windows 10, do not use this property without first performing a runtime check. This example shows how to use the ApiInformation class to check for the presence of this property before you use it.

<CommandBar x:Name="commandBar1" Loaded="CommandBar_Loaded">
    ...
</CommandBar>

private void CommandBar_Loaded(object sender, RoutedEventArgs e)
{
    if (ApiInformation.IsPropertyPresent("Windows.UI.Xaml.Controls.CommandBar", "IsDynamicOverflowEnabled"))
    {
        commandBar1.IsDynamicOverflowEnabled = true;
    }
}

Identifies the IsDynamicOverflowEnabled dependency property.

public : static DependencyProperty IsDynamicOverflowEnabledProperty { get; }public static DependencyProperty IsDynamicOverflowEnabledProperty { get; }Public Static ReadOnly Property IsDynamicOverflowEnabledProperty As DependencyProperty// This API is not available in Javascript.

Gets or sets a value that indicates when a command bar's overflow button is shown.

public : CommandBarOverflowButtonVisibility OverflowButtonVisibility { get; set; }public CommandBarOverflowButtonVisibility OverflowButtonVisibility { get; set; }Public ReadWrite Property OverflowButtonVisibility As CommandBarOverflowButtonVisibility// This API is not available in Javascript.

<CommandBar OverflowButtonVisibility="commandBarOverflowButtonVisibilityMemberName" />

Identifies the OverflowButtonVisibility dependency property.

public : static DependencyProperty OverflowButtonVisibilityProperty { get; }public static DependencyProperty OverflowButtonVisibilityProperty { get; }Public Static ReadOnly Property OverflowButtonVisibilityProperty As DependencyProperty// This API is not available in Javascript.

Gets the collection of primary command elements for the CommandBar.

public : IObservableVector<ICommandBarElement> PrimaryCommands { get; }public IObservableVector<ICommandBarElement> PrimaryCommands { get; }Public ReadOnly Property PrimaryCommands As IObservableVector<ICommandBarElement>// This API is not available in Javascript.

<CommandBar>
    <CommandBar.PrimaryCommands>
      commandBarElements
    </CommandBar.PrimaryCommands>
</CommandBar>

Remarks

The PrimaryCommands collection can contain only AppBarButton, AppBarToggleButton, or AppBarSeparator command elements. The primary commands are shown on the right side of the CommandBar, to the left of the More button (...) when the FlowDirection is LeftToRight. The layout is reversed when the FlowDirection is RightToLeft.

See Also

SecondaryCommandsSecondaryCommandsSecondaryCommandsSecondaryCommands

Identifies the PrimaryCommands dependency property.

public : static DependencyProperty PrimaryCommandsProperty { get; }public static DependencyProperty PrimaryCommandsProperty { get; }Public Static ReadOnly Property PrimaryCommandsProperty As DependencyProperty// This API is not available in Javascript.

Gets the collection of secondary command elements for the CommandBar.

public : IObservableVector<ICommandBarElement> SecondaryCommands { get; }public IObservableVector<ICommandBarElement> SecondaryCommands { get; }Public ReadOnly Property SecondaryCommands As IObservableVector<ICommandBarElement>// This API is not available in Javascript.

<CommandBar>
    <CommandBar.SecondaryCommands>
       commandBarElements
    </CommandBar.SecondaryCommands>
</CommandBar>

Remarks

The SecondaryCommands collection can contain only AppBarButton, AppBarToggleButton, or AppBarSeparator command elements. The secondary commands are shown in the overflow menu when the CommandBar is open.

See Also

PrimaryCommandsPrimaryCommandsPrimaryCommandsPrimaryCommands

Identifies the SecondaryCommands dependency property.

public : static DependencyProperty SecondaryCommandsProperty { get; }public static DependencyProperty SecondaryCommandsProperty { get; }Public Static ReadOnly Property SecondaryCommandsProperty As DependencyProperty// This API is not available in Javascript.

Occurs when items move into or out of the overflow menu.

public : event TypedEventHandler DynamicOverflowItemsChanging<CommandBar,  DynamicOverflowItemsChangingEventArgs>public event TypedEventHandler DynamicOverflowItemsChanging<CommandBar,  DynamicOverflowItemsChangingEventArgs>Public Event DynamicOverflowItemsChanging<CommandBar,  DynamicOverflowItemsChangingEventArgs>// This API is not available in Javascript.

<CommandBar DynamicOverflowItemsChanging="eventhandler"/>

Remarks

For event data, see DynamicOverflowItemsChangingEventArgs.

Starting in Windows 10, version 1607, CommandBar introduces a dynamic overflow feature. By default, PrimaryCommands automatically move in or out of the overflow area as the command bar width changes, for example, when users resize their app window. You can set the IsDynamicOverflowEnabled property to false to disable this behavior.

Dynamic overflow affects only the UI presentation of the commands, it doesn’t move commands from the PrimaryCommands collection to SecondaryCommands.

Version compatibility

The IsDynamicOverflowEnabled event is not available prior to Windows 10, version 1607. If your app’s 'minimum platform version' setting in Microsoft Visual Studio is less than the 'introduced version' shown in the Requirements block later in this page, you must design and test your app to account for this. For more info, see Version adaptive code.

To avoid exceptions when your app runs on previous versions of Windows 10, do not connect this event without first performing a runtime check. This example shows how to use the ApiInformation class to check for the presence of this event before you use it.

<CommandBar x:Name="commandBar1" Loaded="CommandBar_Loaded">
    ...
</CommandBar>

private void CommandBar_Loaded(object sender, RoutedEventArgs e)
{
    if (ApiInformation.IsEventPresent("Windows.UI.Xaml.Controls.CommandBar", "DynamicOverflowItemsChanging"))
    {
        commandBar1.DynamicOverflowItemsChanging += CommandBar1_DynamicOverflowItemsChanging;
    }
}

See Also

App bar and command bar