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.
<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.
<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
.
<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.
<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 isPallete
icon.UnselectIcon
represents an icon that allows the user to deselect the color. The default isClose
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 isSwitch
icon.
See the Icon documentation to find about using other icon packs.
<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.
<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";
}
}
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
static value
|
False | |
AllowCustomColors | Boolean | Gets or sets whether colors other than PredefinedColors can be selected. The default value is true. |
attribute
static value
|
True | |
AllowUnselect | Boolean | Gets or sets whether the selected color can be unselected. The default value is true. |
attribute
static value
bindable
|
True | |
Attributes | Dictionary<String,Object> |
attribute
static value
|
null | ||
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
static value
|
False | |
ClientIDMode | ClientIDMode | Gets or sets the client ID generation algorithm. |
attribute
static value
|
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
static value
bindable
|
null | |
EditorSwitchIcon | IconBase |
inner element
static value
bindable
|
null | ||
Enabled | Boolean | Gets or sets a value indicating whether the control is enabled and can be modified. |
attribute
static value
bindable
|
False | |
ID | String | Gets or sets the unique control ID. |
attribute
static value
bindable
|
null | |
IncludeInPage | Boolean | Gets or sets whether the control is included in the DOM of the page. |
attribute
bindable
|
True | |
InnerText | String | Gets or sets the inner text of the HTML element. |
attribute
static value
bindable
|
null | |
Placeholder | String | Gets or sets the text displayed when color is not selected. |
attribute
static value
|
null | |
PredefinedColors | IEnumerable<String> | Gets or sets an enumeration of predefined HEX colors the user can select from. |
attribute
bindable
|
null | |
SelectedColor | String | Gets or sets the HEX color selected by user. |
attribute
bindable
|
null | |
SelectedRgbaColor | RgbaColor | Gets or sets the RGBA color selected by user. |
attribute
bindable
|
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
static value
|
0 | |
ToggleIcon | IconBase |
inner element
static value
bindable
|
null | ||
UnselectIcon | IconBase |
inner element
static value
bindable
|
null | ||
Visible | Boolean | Gets or sets whether the control is visible. |
attribute
bindable
|
True |
Events
Name | Type | Description | |
---|---|---|---|
Changed | Command | Gets or sets the command that will be triggered when the value is changed. |