ColorPicker

in namespace DotVVM.BusinessPack.Controls

Renders a control that allows the users to select a color from a palette.

Usage & Scenarios

Allows the user to pick a color using a color palette.

Sample 1: Basic Usage

The SelectedRgbaColor property should be bound to an object of type RgbaColor with the Red, Green, Blue and Alpha properties. The Red, Green and Blue properties are byte (0 - 255), the Alpha property is double (0 - 1).

The Placeholder property specifies a watermark text which is displayed when no color is selected.

page.dothtml
ViewModel.cs

<bp:ColorPicker SelectedRgbaColor="{value: Color}"
                Placeholder="Select color" />

<p>R: {{value: Color.Red}}, G: {{value: Color.Green}}, B: {{value: Color.Blue}}, A: {{value: Color.Alpha}}</p>

using DotVVM.BusinessPack;
using DotVVM.BusinessPack.Controls;
using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.ColorPicker.sample1
{
    public class ViewModel : DotvvmViewModelBase
    {
        public RgbaColor Color { get; set; } = new RgbaColor(0, 0, 0, 1);
    }
}

Sample 2: Predefined Colors

The PredefinedColors property can be bound to a collection of colors that display under the color scale and can be easily selected by the user.

Using the AllowCustomColors property, you can turn the standard color scale off and keep only the list of predefined colors.

page.dothtml
ViewModel.cs

<p>Custom and predefined colors</p>
<bp:ColorPicker SelectedRgbaColor="{value: Color}"
                PredefinedColors="{value: MyColors}"
                Placeholder="Select color" />

<br />

<p>Only predefined colors</p>
<bp:ColorPicker SelectedRgbaColor="{value: Color}"
                PredefinedColors="{value: MyColors}"
                AllowCustomColors="false"
                Placeholder="Select color" />

using System.Collections.Generic;
using DotVVM.BusinessPack;
using DotVVM.BusinessPack.Controls;
using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.ColorPicker.sample2
{
    public class ViewModel : DotvvmViewModelBase
    {
        public RgbaColor Color { get; set; } = new RgbaColor(0, 0, 0, 1);

        public List<string> MyColors { get; set; } = new List<string> {
            "#FFFFFF", "#000", "C00000", "#E6E6E6", "44546A", "447260",
            "ED7D31", "FFC000", "5B9BD5", "70AD47", "#FF0000"
        };
    }
}

Sample 3: Alpha Channel

The AllowAlphaChannel property can be used to display an additional slider with the alpha values. The user can then select also the Alpha channel of the color.

The default value is false.

page.dothtml
ViewModel.cs

<bp:ColorPicker SelectedRgbaColor="{value: Color}"
                AllowAlphaChannel="true"
                Placeholder="Select color" />

<p>R: {{value: Color.Red}}, G: {{value: Color.Green}}, B: {{value: Color.Blue}}, A: {{value: Color.Alpha}}</p>

using DotVVM.BusinessPack;
using DotVVM.BusinessPack.Controls;
using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.ColorPicker.sample3
{
    public class ViewModel : DotvvmViewModelBase
    {
        public RgbaColor Color { get; set; } = new RgbaColor(0, 0, 0, 1);
    }
}

Sample 4: Changed Event

The Changed event can be used to trigger a command in the viewmodel whenever the control value changes.

The RgbaColor object contains the ToHexColor and the ToCssColor which can be used to generate the values in hex (#112233) or CSS format (rgba(10, 20, 30, 1)).

There are also the TryParseHexColor and ParseHexColor methods that can be used to transform the hex string representation of the color back to the RgbaColor object.

page.dothtml
ViewModel.cs

<p style="{value: "color: " + CssColor}">Custom colored text</p>

<bp:ColorPicker SelectedRgbaColor="{value: Color}"
                Changed="{command: ColorChanged()}"
                Placeholder="Select color" />

using DotVVM.BusinessPack;
using DotVVM.BusinessPack.Controls;
using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.ColorPicker.sample4
{
    public class ViewModel : DotvvmViewModelBase
    {
        public RgbaColor Color { get; set; } = new RgbaColor(0, 0, 0, 1);
        public string CssColor { get; set; }

        public void ColorChanged()
        {
            if( Color != null )
            {
                CssColor = Color.ToHexColor();
            }
        }
    }
}

Sample 5: Customizing Icons

The icons used by the control can be customized using the following inner elements:

ToggleIcon represents an icon that opens the popup with color scale and predefined colors. The default is Palette icon.
UnselectIcon represents an icon that allows the user to deselect the color. The default is Close icon.
EditorSwitchIcon represents an icon that allows the user to switch between the RGB editor fields and one text field with the hex representation of the color. The default is Switch icon.

See the Icon documentation to find about using other icon packs.

page.dothtml
ViewModel.cs

<bp:ColorPicker SelectedRgbaColor="{value: Color}"
                Placeholder="Select color" >
    <ToggleIcon>
       <bp:Icon Icon="Pallete"></bp:Icon>
    </ToggleIcon>
    <UnselectIcon>
        <bp:Icon Icon="Close"></bp:Icon>
    </UnselectIcon>
    <EditorSwitchIcon>
        <bp:Icon Icon="Switch"></bp:Icon>
    </EditorSwitchIcon>
</bp:ColorPicker>

using DotVVM.BusinessPack;
using DotVVM.BusinessPack.Controls;
using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.ColorPicker.sample5
{
    public class ViewModel : DotvvmViewModelBase
    {
        public RgbaColor Color { get; set; } = new RgbaColor(0, 0, 0, 1);
    }
}

Sample 6: HEX Colors

If you prefer to work with HEX colors, use the SelectedColor property instead of the SelectedRgbaColor property. We support #RGB and #RRGGBB color formats (the # is optional).

When the AllowAlphaChannel property is set to true, you can also use #RGBA HEX colors.

page.dothtml
ViewModel.cs

<bp:ColorPicker SelectedColor="{value: Color}"
                Placeholder="Select color" />

<p>Color: {{value: Color}}</p>

using DotVVM.BusinessPack.Controls;
using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.ColorPicker.sample6
{
    public class ViewModel : DotvvmViewModelBase
    {
        public string Color { get; set; } = "#000";
    }
}

Show all inherited properties

Properties

Name	Type	Description	Notes	Default Value
AllowAlphaChannel	Boolean	Gets or sets whether translucent colors (with Alpha channel value lower than 1) can be selected. The default value is false.	attribute inner element static value bindable default	False
AllowCustomColors	Boolean	Gets or sets whether colors other than PredefinedColors can be selected. The default value is true.	attribute inner element static value bindable default	True
AllowUnselect	Boolean	Gets or sets whether the selected color can be unselected. The default value is true.	attribute inner element static value bindable default	True
Appearance	ColorPickerAppearance	Gets or sets the picker appearance on page (either popup or inline).	attribute inner element static value bindable default	Popup
AutoFocus	Boolean	Gets or sets whether the control should have focus when page loads or when a dialog is opened. The default value is false.	attribute inner element static value bindable default	False
ClientIDMode	ClientIDMode	Gets or sets the client ID generation algorithm.	attribute inner element static value bindable default	Static
DataContext	Object	Gets or sets a data context for the control and its children. All value and command bindings are evaluated in context of this value. The DataContext is null in client-side templates.	attribute inner element static value bindable default	null
EditorSwitchIcon	IconBase	Gets or sets the icon displayed on the button switching RGBA and HEX editors.	attribute inner element static value bindable default	null
Enabled	Boolean	Gets or sets a value indicating whether the control is enabled and can be modified.	attribute inner element static value bindable default	True
ID	String	Gets or sets the control client ID within its naming container.	attribute inner element static value bindable default	null
IncludeInPage	Boolean	Gets or sets whether the control is included in the DOM of the page.	attribute inner element static value bindable default	True
Placeholder	String	Gets or sets the text displayed when color is not selected.	attribute inner element static value bindable default	null
PredefinedColors	IEnumerable<String>	Gets or sets an enumeration of predefined HEX colors the user can select from.	attribute inner element static value bindable default	null
SelectedColor	String	Gets or sets the HEX color selected by user.	attribute inner element static value bindable default	null
SelectedRgbaColor	RgbaColor	Gets or sets the RGBA color selected by user.	attribute inner element static value bindable default	null
TabIndex	Int32	Gets or sets the order in which the control is reachable in sequential keyboard navigation. The default value is 0 which means the document order.	attribute inner element static value bindable default	0
ToggleIcon	IconBase	Gets or sets the icon displayed on the toggle button.	attribute inner element static value bindable default	null
UnselectIcon	IconBase	Gets or sets the icon displayed on the unselect button.	attribute inner element static value bindable default	null
Visible	Boolean		attribute inner element static value bindable default	True

Events

	Name	Type	Description
	Changed	Command	Gets or sets the command triggered when the value is changed.

Edit on Github