Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Collapse]WinForms Controls
  Prerequisites
 [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]Pivot Grid
  [Expand]Tree List
  [Expand]Chart Control
  [Expand]Diagrams
  [Expand]Gauges
  [Expand]Map Control
  [Expand]Scheduler
  [Expand]Spreadsheet
  [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]TileNav Pane
    WindowsUI Button Panel
   [Expand]Office Navigation Bar
   [Expand]Tile Control
  [Expand]Printing-Exporting
  [Expand]PDF Viewer
   Reporting
  [Expand]Snap
  [Expand]TreeMap Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

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.

How would you rate this topic?​​​​​​​