Loading...
Loading...
Guide to implement and customize the Syncfusion WinForms ColorPickerUIAdv control. Use this when implementing color-selection interfaces with organized palettes (Recent, Standard, Theme), custom color groups, Office-style layouts, a 'More Colors' dialog, or runtime color additions in Windows Forms applications.
npx skill4agent add syncfusion/winforms-ui-components-skills syncfusion-winforms-color-picker| Feature | Description |
|---|---|
| Color Groups | Recent, Standard, Theme, and Custom groups |
| Sub-Items | Color variations/tints for each base color |
| Visual Styles | Office2007, Office2010, Office2016, Metro |
| Events | Picked (selection), ItemSelection (hover) |
| Dialog | "More Colors" option for advanced selection |
| Customization | Item sizing, spacing, headers, borders |
| Runtime | Dynamic color addition via dialog |
| Themes | Office color schemes (Blue, Silver, Black) |
using System;
using System.Drawing;
using System.Windows.Forms;
using Syncfusion.Windows.Forms.Tools;
public partial class ColorPickerForm : Form
{
private ColorPickerUIAdv colorPickerUIAdv1;
public ColorPickerForm()
{
InitializeComponent();
// Create ColorPickerUIAdv
colorPickerUIAdv1 = new ColorPickerUIAdv();
colorPickerUIAdv1.Size = new Size(200, 180);
colorPickerUIAdv1.Location = new Point(20, 20);
// Set initial selected color
colorPickerUIAdv1.SelectedColor = Color.Blue;
// Apply Office2016 style
colorPickerUIAdv1.Style = ColorPickerUIAdv.visualstyle.Office2016Colorful;
// Handle color selection
colorPickerUIAdv1.Picked += ColorPickerUIAdv1_Picked;
// Add to form
this.Controls.Add(colorPickerUIAdv1);
}
private void ColorPickerUIAdv1_Picked(object sender,
ColorPickerUIAdv.ColorPickedEventArgs args)
{
// Update form background with selected color
this.BackColor = args.Color;
MessageBox.Show($"Selected Color: {args.Color.Name}");
}
}Install-Package Syncfusion.Tools.Windows// Setup
private void SetupColorPicker()
{
colorPickerUIAdv1.SelectedColor = Color.White;
colorPickerUIAdv1.Picked += OnColorPicked;
}
// Event handler
private void OnColorPicked(object sender, ColorPickerUIAdv.ColorPickedEventArgs e)
{
// Apply color to target control
targetLabel.ForeColor = e.Color;
// Or update drawing operations
currentBrush = new SolidBrush(e.Color);
canvas.Invalidate();
}// Office2016 Colorful style
colorPickerUIAdv1.Style = ColorPickerUIAdv.visualstyle.Office2016Colorful;
// Or Office2016 White
colorPickerUIAdv1.Style = ColorPickerUIAdv.visualstyle.Office2016White;
// Or Office2016 Black
colorPickerUIAdv1.Style = ColorPickerUIAdv.visualstyle.Office2016Black;
// Or Office2016 DarkGray
colorPickerUIAdv1.Style = ColorPickerUIAdv.visualstyle.Office2016DarkGray;// Create custom color group
ColorUIAdvGroup customGroup = new ColorUIAdvGroup();
customGroup.Name = "Brand Colors";
customGroup.HeaderHeight = 25;
// Create color items
GroupColorItem primaryColor = new GroupColorItem(customGroup, Color.FromArgb(0, 120, 215));
primaryColor.Index = 0;
// Add tint variations as sub-items
primaryColor.SubItems.Add(new ColorItem(primaryColor, Color.FromArgb(204, 228, 247)));
primaryColor.SubItems.Add(new ColorItem(primaryColor, Color.FromArgb(153, 204, 239)));
primaryColor.SubItems.Add(new ColorItem(primaryColor, Color.FromArgb(102, 163, 224)));
// Add to group and control
customGroup.Items.Add(primaryColor);
customGroup.SubItemsDepth = 1;
customGroup.IsSubItemsVisible = true;
colorPickerUIAdv1.CustomGroups.Add(customGroup);// Set Managed theme
colorPickerUIAdv1.UseOffice2007Style = true;
colorPickerUIAdv1.Office2007Theme = Office2007Theme.Managed;
// Apply custom color scheme
Office2007Colors.ApplyManagedColors(this, Color.Teal);// Setup hover event
colorPickerUIAdv1.ItemSelection += ColorPickerUIAdv1_ItemSelection;
// Event handler for hover preview
private void ColorPickerUIAdv1_ItemSelection(object sender,
ColorPickerUIAdv.ColorPickedEventArgs e)
{
// Show preview without committing
previewPanel.BackColor = e.Color;
statusLabel.Text = $"Preview: {e.Color.Name} (RGB: {e.Color.R}, {e.Color.G}, {e.Color.B})";
}// Set automatic color (shown when "Automatic" button is clicked)
colorPickerUIAdv1.AutomaticColor = Color.Black;
// Adjust button height
colorPickerUIAdv1.ButtonHeight = 30;private void SetupTextColorPicker()
{
textColorPicker.Style = ColorPickerUIAdv.visualstyle.Office2016Colorful;
textColorPicker.SelectedColor = richTextBox.SelectionColor;
textColorPicker.Picked += (s, e) => richTextBox.SelectionColor = e.Color;
}private void SetupDrawingColorPicker()
{
colorPicker.Style = ColorPickerUIAdv.visualstyle.Office2016Black;
colorPicker.ItemSelection += (s, e) => ShowColorPreview(e.Color);
colorPicker.Picked += (s, e) => SetActiveBrushColor(e.Color);
}private void SetupThemeColorPicker()
{
// Add custom theme colors group
ColorUIAdvGroup themeGroup = new ColorUIAdvGroup();
themeGroup.Name = "Theme Colors";
// Add primary, accent, background colors
themeGroup.Items.Add(CreateColorItem(primaryColor, "Primary"));
themeGroup.Items.Add(CreateColorItem(accentColor, "Accent"));
themeGroup.Items.Add(CreateColorItem(backgroundColor, "Background"));
colorPicker.CustomGroups.Add(themeGroup);
colorPicker.Picked += ApplyThemeColor;
}private void ShowColorPickerForProperty(Control control, string propertyName)
{
ColorPickerUIAdv picker = new ColorPickerUIAdv();
picker.SelectedColor = (Color)control.GetType()
.GetProperty(propertyName)
.GetValue(control);
picker.Picked += (s, e) => {
control.GetType()
.GetProperty(propertyName)
.SetValue(control, e.Color);
};
ShowPickerInPopup(picker);
}private void SetupConditionalFormatColorPicker()
{
// Create custom group with warning/info/success colors
ColorUIAdvGroup formatGroup = new ColorUIAdvGroup();
formatGroup.Name = "Formatting Colors";
formatGroup.Items.Add(new GroupColorItem(formatGroup, Color.Red)); // Error
formatGroup.Items.Add(new GroupColorItem(formatGroup, Color.Orange)); // Warning
formatGroup.Items.Add(new GroupColorItem(formatGroup, Color.Yellow)); // Caution
formatGroup.Items.Add(new GroupColorItem(formatGroup, Color.LightGreen)); // Success
colorPicker.CustomGroups.Add(formatGroup);
colorPicker.Picked += ApplyConditionalFormatting;
}