[Expand]General Information
[Collapse]WinForms Controls
  .NET Core Support
 [Expand]What's Installed
 [Expand]Build an Application
 [Collapse]Controls and Libraries
  [Expand]Forms and User Controls
  [Expand]Messages, Notifications, and Dialogs
  [Expand]Editors and Simple Controls
  [Expand]Ribbon, Bars and Menu
  [Expand]Application UI Manager
  [Expand]Docking Library
  [Expand]Data Grid
  [Expand]Vertical Grid
  [Expand]Property Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Gantt Control
  [Expand]Chart Control
  [Expand]Map Control
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Collapse]Navigation Controls
   [Expand]Navigation Bar
   [Expand]Accordion Control
    Navigation Frame and Tab Pane
    Navigation Pane
    Tile Bar
   [Expand]Tile Nav Pane
    WindowsUI Button Panel
   [Expand]Office Navigation Bar
   [Expand]Tile Control
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Sunburst Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

WindowsUI Button Panel

The WindowsUI Button Panel is a stand-alone container for buttons painted in the Windows 10-inspired flat style. In code, these panels are represented by the WindowsUIButtonPanel class instances.

The "Edit Buttons" link in the control's smart tag invokes the Collection Editor dialog. Using this dialog, you can add buttons and separators (non-clickable elements that visually delimit neighboring buttons). To select which element to add, use the Collection Editor's combo box editor as shown below. The property grid on the dialog's right allows you to modify appearance and behavior settings for any element added. For instance, you can utilize the Style property for a button to specify whether it should act as a regular push button or as a check button.

To populate a panel in code, use the WindowsUIButtonPanel.Buttons collection. This collection accepts child elements of the WindowsUIButton and WindowsUISeparator classes. A code sample below illustrates the example.

The figure below illustrates the result.

To customize button appearance settings, see the WindowsUIButtonPanel.AppearanceButton property.

Expanded Example

This code sample illustrates how to use the WindowsUIButtonPanel control to create a compact Windows-inspired content navigator (see the animation below). You can use this navigator to switch modules within any content container, e.g., a Navigation Frame.

To implement this navigator you need to do the following.

  1. Create the required number of WindowsUIButton objects and add them to the panel's WindowsUIButtonPanel.Buttons collection.
  2. Set the Style property for each button to CheckButton and the GroupIndex property to the same integer value. This will unite all your buttons into a radio group: end-users will be able to check only one button at a time.
  3. Set the UseCaption property to false for all buttons.
  4. Specify required button images.
  5. Hide circular button borders by setting the WindowsUIButtonPanel.UseButtonBackgroundImages property to false. Now when your buttons have neither borders nor captions, they will shrink to the size of their images.
  6. Specify the WindowsUIButtonPanel.ButtonInterval property to move buttons close or further to (from) each other.
  7. Handle the WindowsUIButtonPanel.ButtonChecked event. The e.Button property allows you to identify which exact button has been checked.

Expanded Pager Navigation

The RadioGroup and WindowsUIButtonPanel can be used as a pager for the following controls:

The pager automatically splits the target control's content into pages, and provides navigation buttons to scroll to corresponding pages. The pager navigation functionality is implemented as a Behavior and can be added to your controls using the BehaviorManager component.

Is this topic helpful?​​​​​​​