AppBarToggleButton
AppBarToggleButton
AppBarToggleButton
AppBarToggleButton
Class
Definition
public : class AppBarToggleButton : ToggleButton, IAppBarToggleButton, IAppBarToggleButton3, ICommandBarElement, ICommandBarElement2public class AppBarToggleButton : ToggleButton, IAppBarToggleButton, IAppBarToggleButton3, ICommandBarElement, ICommandBarElement2Public Class AppBarToggleButton Inherits ToggleButton Implements IAppBarToggleButton, IAppBarToggleButton3, ICommandBarElement, ICommandBarElement2// This API is not available in Javascript.
<AppBarToggleButton .../>
- Inheritance
-
AppBarToggleButtonAppBarToggleButtonAppBarToggleButtonAppBarToggleButton
- Attributes
| Device family |
Windows 10 (introduced v10.0.10240.0)
|
| API contract |
Windows.Foundation.UniversalApiContract (introduced v1)
|
Inherited Members
Inherited properties
Inherited events
Inherited methods
Remarks
An AppBarToggleButton is similar to an AppBarButton with an additional toggle state. When used inside a CommandBar. the visual appearance changes based on whether the control appears in the primary commands or the overflow menu. Here is an example of a toggled button as both a primary command and secondary command.

Control style and template
You can modify the default Style and ControlTemplate to give the control a unique appearance. For information about modifying a control's style and template, see Styling controls. The default style, template, and resources that define the look of the control are included in the generic.xaml file. For design purposes, generic.xaml is available in the (Program Files)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP<SDK version>\Generic folder from a Windows Software Development Kit (SDK) installation. Styles and resources from different versions of the SDK might have different values.
Starting in Windows 10, version 1607 (Windows Software Development Kit (SDK) version 10.0.14393.0), generic.xaml includes resources that you can use to modify the colors of a control in different visual states without modifying the control template. In apps that target this software development kit (SDK) or later, modifying these resources is preferred to setting properties such as Background and Foreground. For more info, see the Light-weight styling section of the Styling controls article.
This table shows the resources used by the AppBarToggleButton control.
| Resource key | Description |
|---|---|
| AppBarToggleButtonBackground | Background color at rest |
| AppBarToggleButtonBackgroundDisabled | Background color when disabled |
| AppBarToggleButtonBackgroundChecked | Background color at rest and checked |
| AppBarToggleButtonBackgroundCheckedPointerOver | Background color on hover and checked |
| AppBarToggleButtonBackgroundCheckedPressed | Background color when pressed and checked |
| AppBarToggleButtonBackgroundCheckedDisabled | Background color when disabled and checked |
| AppBarToggleButtonBackgroundHighLightOverlay | Overlay background color at rest |
| AppBarToggleButtonBackgroundHighLightOverlayPointerOver | Overlay background color on hover |
| AppBarToggleButtonBackgroundHighLightOverlayPressed | Overlay background color when pressed |
| AppBarToggleButtonBackgroundHighLightOverlayCheckedPointerOver | Overlay background color on hover and checked |
| AppBarToggleButtonBackgroundHighLightOverlayCheckedPressed | Overlay background color when pressed and checked |
| AppBarToggleButtonForeground | Label text color at rest |
| AppBarToggleButtonForegroundPointerOver | Label text color on hover |
| AppBarToggleButtonForegroundPressed | Label text color when pressed |
| AppBarToggleButtonForegroundDisabled | Label text color when disabled |
| AppBarToggleButtonForegroundChecked | Label text color at rest and checked |
| AppBarToggleButtonForegroundCheckedPointerOver | Label text color on hover and checked |
| AppBarToggleButtonForegroundCheckedPressed | Label text color when pressed and checked |
| AppBarToggleButtonForegroundCheckedDisabled | Label text color when disabled and checked |
| AppBarToggleButtonBorderBrush | Border color at rest |
| AppBarToggleButtonBorderBrushPointerOver | Border color on hover |
| AppBarToggleButtonBorderBrushPressed | Border color when pressed |
| AppBarToggleButtonBorderBrushDisabled | Border color when disabled |
| AppBarToggleButtonBorderBrushChecked | Border color at rest and checked |
| AppBarToggleButtonBorderBrushCheckedPointerOver | Border color on hover and checked |
| AppBarToggleButtonBorderBrushCheckedPressed | Border color when pressed and checked |
| AppBarToggleButtonBorderBrushCheckedDisabled | Border color when disabled and checked |
| AppBarToggleButtonCheckGlyphForeground | Check mark color at rest (in overflow) |
| AppBarToggleButtonCheckGlyphForegroundPointerOver | Check mark color on hover (in overflow) |
| AppBarToggleButtonCheckGlyphForegroundPressed | Check mark color when pressed (in overflow) |
| AppBarToggleButtonCheckGlyphForegroundDisabled | Check mark color when disabled (in overflow) |
| AppBarToggleButtonCheckGlyphForegroundChecked | Check mark color at rest and checked (in overflow) |
| AppBarToggleButtonCheckGlyphForegroundCheckedPointerOver | Check mark color on hover and checked (in overflow) |
| AppBarToggleButtonCheckGlyphForegroundCheckedPressed | Check mark color when pressed and checked (in overflow) |
| AppBarToggleButtonCheckGlyphForegroundCheckedDisabled | Check mark color when disabled and checked (in overflow) |
| AppBarToggleButtonOverflowLabelForegroundPointerOver | Label text color on hover (in overflow) |
| AppBarToggleButtonOverflowLabelForegroundPressed | Label text color when pressed (in overflow) |
| AppBarToggleButtonOverflowLabelForegroundDisabled | Label text color when disabled (in overflow) |
| AppBarToggleButtonOverflowLabelForegroundCheckedPointerOver | Label text color on hover and checked (in overflow) |
| AppBarToggleButtonOverflowLabelForegroundCheckedPressed | Label text color when pressed and checked (in overflow) |
| AppBarToggleButtonOverflowLabelForegroundCheckedDisabled | Label text color when disabled and checked (in overflow) |
Constructors
AppBarToggleButton() AppBarToggleButton() AppBarToggleButton() AppBarToggleButton()
Initializes a new instance of the AppBarToggleButton class.
public : AppBarToggleButton()public AppBarToggleButton()Public Sub New()// This API is not available in Javascript.
Properties
DynamicOverflowOrder DynamicOverflowOrder DynamicOverflowOrder DynamicOverflowOrder
Gets or sets the order in which this item is moved to the CommandBar overflow menu.
public : int DynamicOverflowOrder { get; set; }public int DynamicOverflowOrder { get; set; }Public ReadWrite Property DynamicOverflowOrder As int// This API is not available in Javascript.
<AppBarToggleButton DynamicOverflowOrder="int" .../>
- Value
- int int int int
The order in which this item is moved to the overflow menu relative to other items.
| Device family |
Windows 10 Anniversary Edition (introduced v10.0.14393.0)
|
| API contract |
Windows.Foundation.UniversalApiContract (introduced v3)
|
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.
This property has an effect only when this element is in the CommandBar.PrimaryCommands collection and CommandBar.IsDynamicOverflowEnabled is true.
You can assign the same DynamicOverflowOrder value to more than one element. Elements with the same value move in and out of the overflow area at the same time.
Version compatibility
The DynamicOverflowOrder 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.
Note
Dynamic overflow is available when your app is compiled for Windows 10, version 1607 and running on version 1607 (or later). Dynamic overflow is not available when your app is compiled for a previous version or is running on a previous version.
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">
<AppBarToggleButton x:Name="appBarButtonShuffle" Icon="Shuffle" Label="Shuffle"/>
<AppBarToggleButton x:Name="appBarButtonRepeat" Icon="RepeatAll" Label="Repeat"/>
</CommandBar>
private void CommandBar_Loaded(object sender, RoutedEventArgs e)
{
if (ApiInformation.IsPropertyPresent("Windows.UI.Xaml.Controls.AppBarToggleButton", "DynamicOverflowOrder"))
{
commandBar1.IsDynamicOverflowEnabled = true;
appBarButtonShuffle.DynamicOverflowOrder = 1;
appBarButtonRepeat.DynamicOverflowOrder = 2;
}
}
DynamicOverflowOrderProperty DynamicOverflowOrderProperty DynamicOverflowOrderProperty DynamicOverflowOrderProperty
Identifies the DynamicOverflowOrder dependency property.
public : static DependencyProperty DynamicOverflowOrderProperty { get; }public static DependencyProperty DynamicOverflowOrderProperty { get; }Public Static ReadOnly Property DynamicOverflowOrderProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the DynamicOverflowOrder dependency property.
| Device family |
Windows 10 Anniversary Edition (introduced v10.0.14393.0)
|
| API contract |
Windows.Foundation.UniversalApiContract (introduced v3)
|
Icon Icon Icon Icon
Gets or sets the graphic content of the app bar toggle button.
public : IconElement Icon { get; set; }public IconElement Icon { get; set; }Public ReadWrite Property Icon As IconElement// This API is not available in Javascript.
<AppBarToggleButton Icon="symbolName" .../>
The graphic content of the app bar toggle button.
- See Also
IconProperty IconProperty IconProperty IconProperty
Identifies the Icon dependency property.
public : static DependencyProperty IconProperty { get; }public static DependencyProperty IconProperty { get; }Public Static ReadOnly Property IconProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the Icon dependency property.
IsCompact IsCompact IsCompact IsCompact
Gets or sets a value that indicates whether the button is shown with no label and reduced padding.
public : PlatForm::Boolean IsCompact { get; set; }public bool IsCompact { get; set; }Public ReadWrite Property IsCompact As bool// This API is not available in Javascript.
<AppBarToggleButton IsCompact="bool" .../>
- Value
- PlatForm::Boolean bool bool bool
True if the button is shown in its compact state; otherwise, false. The default is false.
IsCompactProperty IsCompactProperty IsCompactProperty IsCompactProperty
Identifies the IsCompact dependency property.
public : static DependencyProperty IsCompactProperty { get; }public static DependencyProperty IsCompactProperty { get; }Public Static ReadOnly Property IsCompactProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the IsCompact dependency property.
IsInOverflow IsInOverflow IsInOverflow IsInOverflow
Gets a value that indicates whether this item is in the overflow menu.
public : PlatForm::Boolean IsInOverflow { get; }public bool IsInOverflow { get; }Public ReadOnly Property IsInOverflow As bool// This API is not available in Javascript.
- Value
- PlatForm::Boolean bool bool bool
true if this item is in the overflow menu; otherwise, false.
| Device family |
Windows 10 Anniversary Edition (introduced v10.0.14393.0)
|
| API contract |
Windows.Foundation.UniversalApiContract (introduced v3)
|
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 IsInOverflow 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.
Note
Dynamic overflow is available when your app is compiled for Windows 10, version 1607 and running on version 1607 (or later). Dynamic overflow is not available when your app is compiled for a previous version or is running on a previous version.
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.
if (ApiInformation.IsPropertyPresent("Windows.UI.Xaml.Controls.AppBarToggleButton", "IsInOverflow"))
{
bool overflow = appBarToggleButton1.IsInOverflow;
}
IsInOverflowProperty IsInOverflowProperty IsInOverflowProperty IsInOverflowProperty
Identifies the IsInOverflow dependency property.
public : static DependencyProperty IsInOverflowProperty { get; }public static DependencyProperty IsInOverflowProperty { get; }Public Static ReadOnly Property IsInOverflowProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the IsInOverflow dependency property.
| Device family |
Windows 10 Anniversary Edition (introduced v10.0.14393.0)
|
| API contract |
Windows.Foundation.UniversalApiContract (introduced v3)
|
Label Label Label Label
Gets or sets the text description displayed on the app bar toggle button.
public : PlatForm::String Label { get; set; }public string Label { get; set; }Public ReadWrite Property Label As string// This API is not available in Javascript.
<AppBarToggleButton Label="stringContent" .../>
- Value
- PlatForm::String string string string
The text description displayed on the app bar toggle button.
LabelPosition LabelPosition LabelPosition LabelPosition
Gets or sets a value that indicates the placement and visibility of the button's label.
public : CommandBarLabelPosition LabelPosition { get; set; }public CommandBarLabelPosition LabelPosition { get; set; }Public ReadWrite Property LabelPosition As CommandBarLabelPosition// This API is not available in Javascript.
<AppBarToggleButton LabelPosition="commandBarLabelPositionMemberName" />
- Value
- CommandBarLabelPosition CommandBarLabelPosition CommandBarLabelPosition CommandBarLabelPosition
An enumeration value that specifies the placement and visibility of the button's label. The default is Default.
| Device family |
Windows 10 Anniversary Edition (introduced v10.0.14393.0)
|
| API contract |
Windows.Foundation.UniversalApiContract (introduced v3)
|
Remarks
By default, the app bar button's label is displayed in the position specified by the CommandBar.DefaultLabelPosition property. You can set the LabelPosition property to override this value and make the label always collapsed for a specific app bar button.
Version compatibility
The LabelPosition 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">
<AppBarToggleButton x:Name="appBarButtonShuffle" Icon="Shuffle" Label="Shuffle"/>
</CommandBar>
private void CommandBar_Loaded(object sender, RoutedEventArgs e)
{
if (ApiInformation.IsPropertyPresent("Windows.UI.Xaml.Controls.AppBarToggleButton", "LabelPosition"))
{
appBarButtonShuffle.LabelPosition = CommandBarLabelPosition.Collapsed;
}
}
LabelPositionProperty LabelPositionProperty LabelPositionProperty LabelPositionProperty
Identifies the LabelPosition dependency property.
public : static DependencyProperty LabelPositionProperty { get; }public static DependencyProperty LabelPositionProperty { get; }Public Static ReadOnly Property LabelPositionProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the LabelPosition dependency property.
| Device family |
Windows 10 Anniversary Edition (introduced v10.0.14393.0)
|
| API contract |
Windows.Foundation.UniversalApiContract (introduced v3)
|
LabelProperty LabelProperty LabelProperty LabelProperty
Identifies the Label dependency property.
public : static DependencyProperty LabelProperty { get; }public static DependencyProperty LabelProperty { get; }Public Static ReadOnly Property LabelProperty As DependencyProperty// This API is not available in Javascript.
The identifier for the Label dependency property.