Loading...
Loading...
Guide for implementing Syncfusion ColorUIControl in Windows Forms applications. Use this when working with color selection UI, color pickers, or color palette controls. Covers color groups (System, Standard, Custom, User), appearance customization, and popup menu integration in .NET Windows Forms applications.
npx skill4agent add syncfusion/winforms-ui-components-skills syncfusion-winforms-color-ui-controlusing System;
using System.Drawing;
using System.Windows.Forms;
using Syncfusion.Windows.Forms;
public class ColorPickerForm : Form
{
private ColorUIControl colorUIControl1;
public ColorPickerForm()
{
InitializeComponent();
}
private void InitializeComponent()
{
// Create ColorUIControl instance
this.colorUIControl1 = new ColorUIControl();
// Set size
this.colorUIControl1.Size = new Size(210, 200);
this.colorUIControl1.Location = new Point(20, 20);
// Set initial color and group
this.colorUIControl1.SelectedColor = Color.OrangeRed;
this.colorUIControl1.SelectedColorGroup =
ColorUISelectedGroup.StandardColors;
// Handle color selection
this.colorUIControl1.ColorSelected += ColorUIControl1_ColorSelected;
// Add to form
this.Controls.Add(this.colorUIControl1);
// Form settings
this.Text = "Color Picker Example";
this.Size = new Size(300, 300);
}
private void ColorUIControl1_ColorSelected(object sender, EventArgs e)
{
Color selectedColor = this.colorUIControl1.SelectedColor;
MessageBox.Show($"Selected Color: {selectedColor.Name}");
}
}Imports System.Drawing
Imports System.Windows.Forms
Imports Syncfusion.Windows.Forms
Public Class ColorPickerForm
Inherits Form
Private colorUIControl1 As ColorUIControl
Public Sub New()
InitializeComponent()
End Sub
Private Sub InitializeComponent()
' Create ColorUIControl instance
Me.colorUIControl1 = New ColorUIControl()
' Set size
Me.colorUIControl1.Size = New Size(210, 200)
Me.colorUIControl1.Location = New Point(20, 20)
' Set initial color and group
Me.colorUIControl1.SelectedColor = Color.OrangeRed
Me.colorUIControl1.SelectedColorGroup = _
ColorUISelectedGroup.StandardColors
' Handle color selection
AddHandler Me.colorUIControl1.ColorSelected, _
AddressOf ColorUIControl1_ColorSelected
' Add to form
Me.Controls.Add(Me.colorUIControl1)
' Form settings
Me.Text = "Color Picker Example"
Me.Size = New Size(300, 300)
End Sub
Private Sub ColorUIControl1_ColorSelected(sender As Object, e As EventArgs)
Dim selectedColor As Color = Me.colorUIControl1.SelectedColor
MessageBox.Show($"Selected Color: {selectedColor.Name}")
End Sub
End Class// Display only Standard and Custom color groups
this.colorUIControl1.ColorGroups =
ColorUIGroups.StandardColors | ColorUIGroups.CustomColors;
// Enable panel stretching for better visual layout
this.colorUIControl1.CustomColorsStretchOnResize = true;
// Set border style
this.colorUIControl1.BorderStyle = BorderStyle.FixedSingle;// Customize tab names
this.colorUIControl1.StandardTabName = "Web Colors";
this.colorUIControl1.SystemTabName = "System";
this.colorUIControl1.UserTabName = "My Colors";
this.colorUIControl1.CustomTabName = "Theme Palette";
// Customize font
this.colorUIControl1.Font = new Font("Segoe UI", 9F);// Setup: Create PopupMenu, PopupControlContainer, and ColorUIControl
private PopupMenu popupMenu1;
private PopupControlContainer popupContainer1;
private ColorUIControl colorUIControl1;
private Panel colorButton;
private void InitializePopupColorPicker()
{
// Create and configure ColorUIControl
colorUIControl1 = new ColorUIControl();
colorUIControl1.Size = new Size(210, 200);
// Create PopupControlContainer and add ColorUI
popupContainer1 = new PopupControlContainer();
popupContainer1.Controls.Add(colorUIControl1);
// Create PopupMenu
popupMenu1 = new PopupMenu();
// Add DropDownBarItem to popup menu
var dropDownItem = new DropDownBarItem();
dropDownItem.PopupControlContainer = popupContainer1;
popupMenu1.ParentBarItem.Items.Add(dropDownItem);
// Handle panel click to show popup
colorButton.MouseUp += ColorButton_MouseUp;
// Close popup when color selected
colorUIControl1.ColorSelected += ColorUIControl1_ColorSelected;
}
private void ColorButton_MouseUp(object sender, MouseEventArgs e)
{
popupMenu1.Show(colorButton, new Point(e.X, e.Y));
}
private void ColorUIControl1_ColorSelected(object sender, EventArgs e)
{
// Update UI with selected color
colorButton.BackColor = colorUIControl1.SelectedColor;
// Close the popup
var cuiControl = sender as ColorUIControl;
var pcc = cuiControl.Parent as PopupControlContainer;
pcc.HidePopup(PopupCloseType.Done);
}// Customize UserColors collection with blue gradient
for (int i = 0; i < colorUIControl1.UserColors.Count; i++)
{
colorUIControl1.UserColors[i] = Color.FromArgb(0, 0, i * 5);
}
// Customize UserCustomColors collection with red gradient
for (int i = 0; i < colorUIControl1.UserCustomColors.Count; i++)
{
colorUIControl1.UserCustomColors[i] = Color.FromArgb(i * 15, 0, 0);
}
// Make sure UserColors group is displayed
colorUIControl1.ColorGroups =
ColorUIGroups.StandardColors |
ColorUIGroups.CustomColors |
ColorUIGroups.UserColors;
// Select UserColors group by default
colorUIControl1.SelectedColorGroup = ColorUISelectedGroup.UserColors;
// Enable stretching
colorUIControl1.UserColorsStretchOnResize = true;SelectedColorSelectedColorGroupSystemColorsStandardColorsCustomColorsUserColorsNoneColorGroupsColorUIGroups.StandardColors | ColorUIGroups.CustomColorsBorderStyleFixedSingleFixed3DNoneCustomColorsStretchOnResizeUserColorsStretchOnResizeStandardTabNameSystemTabNameCustomTabNameUserTabNameFontUserColorsUserCustomColorsColorSelectedCustomColorsStretchOnResizeUserColorsStretchOnResizeColorGroupsResetSelectedColor()ResetSelectedColorGroup()