DOT

VVM

 DOCS

Version: 1.0 | 1.1 |

ColorPicker

in namespace DotVVM.BusinessPack.Controls

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

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
Attributes Dictionary<String,Object>
attribute
inner element
static value
bindable
default
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.
attribute
inner element
static value
bindable
default
EditorSwitchIconCssClass String Gets or sets the CSS class for the icon displayed on the button switching RGBA and HEX editors. The default value is FaArrowsV.
attribute
inner element
static value
bindable
default
fa fa-arrows-v
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 unique control ID.
attribute
inner element
static value
bindable
default
InnerText String Gets or sets the inner text of the HTML element.
attribute
inner element
static value
bindable
default
Placeholder String Gets or sets the text displayed when color is not selected.
attribute
inner element
static value
bindable
default
PredefinedColors IEnumerable<String> Gets or sets an enumeration of predefined HEX colors the user can select from.
attribute
inner element
static value
bindable
default
SelectedColor String Gets or sets the HEX color selected by user.
attribute
inner element
static value
bindable
default
SelectedRgbaColor RgbaColor Gets or sets the RGBA color selected by user.
attribute
inner element
static value
bindable
default
ToggleIconCssClass String Gets or sets the CSS class for the icon displayed on the toggle button. The default value is FaChevronDown.
attribute
inner element
static value
bindable
default
fa fa-chevron-down
UnselectIconCssClass String Gets or sets the CSS class for the icon displayed on the unselect button. The default value is FaClose.
attribute
inner element
static value
bindable
default
fa fa-close
Visible Boolean Gets or sets whether the control is visible.
attribute
inner element
static value
bindable
default
True

Events

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

Usage & Scenarios

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

HTML Rendered by the Control

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.

<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.Controls;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.ColorPicker.sample1
{
    public class ViewModel
    {
        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.

<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.Controls;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.ColorPicker.sample2
{
    public class ViewModel
    {
        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.

<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.Controls;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.ColorPicker.sample3
{
    public class ViewModel
    {
        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.

<p><font color="{value: CssColor}">Custom color text</font></p>

<bp:ColorPicker SelectedRgbaColor="{value: Color}"
                Changed="{command: ColorChanged()}"
                Placeholder="Select color" />
using DotVVM.BusinessPack.Controls;

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

        public void ColorChanged()
        {
            CssColor = Color.ToCssColor();
        }
    }
}

Sample 5: Customizing Icons

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

  • ToggleIconCssClass represents an icon that opens the popup with color scale and predefined colors. The default value is fa fa-chevron-down (FontAwesome).

  • UnselectIconCssClass represents an icon that allows the user to deselect the color. The default value is fa fa-close (FontAwesome).

  • EditorSwitchIconCssClass 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 value is fa-arrows-v (FontAwesome).

<bp:ColorPicker SelectedRgbaColor="{value: Color}"
                ToggleIconCssClass="toggle"
                UnselectIconCssClass="unselect"
                EditorSwitchIconCssClass="switch"
                Placeholder="Select color" />
using DotVVM.BusinessPack.Controls;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.ColorPicker.sample5
{
    public class ViewModel
    {
        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.

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

<p>Color: {{value: Color}}</p>
using DotVVM.BusinessPack.Controls;

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

Suggestions


Help & Contribute

The documentation is maintained on GitHub.
We'll be happy if you edit the page and create a pull request.

Send message