ToolbarColorSelector Class
A color selector item within the DXToolbar control.
Namespace: DevExpress.Maui.Controls
Assembly: DevExpress.Maui.Controls.dll
NuGet Package: DevExpress.Maui.Controls
#Declaration
public class ToolbarColorSelector :
ToolbarItemBase
#Remarks
The ToolbarColorSelector allows you to pick a color from the collection.
#Add ToolbarColorSelector to DXToolbar
Use the ItemsSource property to bind the ToolbarColorSelector to a collection of colors that you want to display.
The following code sample displays a ToolbarColorSelector and binds it to a collection of colors:
<ContentPage ...
xmlns:local="clr-namespace:ToolbarColorSelectorApp"
xmlns:dxc="clr-namespace:DevExpress.Maui.Controls;assembly=DevExpress.Maui.Controls">
<ContentPage.BindingContext>
<local:MainViewModel/>
</ContentPage.BindingContext>
<Grid>
<dxc:DXToolbar>
<dxc:ToolbarColorSelector ItemsSource="{Binding Colors}"/>
<!-- ... -->
</dxc:DXToolbar>
</Grid>
</ContentPage>
namespace ToolbarColorSelectorApp {
public class MainViewModel {
public Color[] Colors { get; } = new Color[]{
Color.FromArgb("#FF0000"),
Color.FromArgb("#00FF00"),
Color.FromArgb("#0000FF")
};
}
}
#Handle Taps
You can use the SelectedColorChanged event to handle a tap on a ToolbarColorSelector item.
You can also use the Command property to specify a command that is invoked when a user taps a ToolbarColorSelector. You can define the CommandParameter property to specify a command’s parameter.
The following code sample creates a command that displays an alert with the text that contains the HEX of the selected item:
<ContentPage ...
xmlns:local="clr-namespace:ToolbarColorSelectorApp"/>
<ContentPage.BindingContext>
<local:MainViewModel/>
</ContentPage.BindingContext>
<Grid>
<dxc:DXToolbar>
<dxc:ToolbarColorSelector x:Name="colorselector" Command="{Binding TapItemCommand}"
CommandParameter="{Binding SelectedColor, Source={x:Reference colorselector}}"/>
<!-- ... -->
</dxc:DXToolbar>
</Grid>
</ContentPage>
public class MainViewModel: INotifyPropertyChanged {
public ICommand TapItemCommand { get; set; }
public MainViewModel() {
this.TapItemCommand = new Command<Color>(OnItemTap);
}
private async void OnItemTap(Color tappedcolor) {
await Application.Current.MainPage.DisplayAlert("Color Selected", "The "+tappedcolor.ToHex()+" item is tapped", "Ok");
}
public event PropertyChangedEventHandler PropertyChanged;
private void OnPropertyChanged( string propertyName = "") {
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
When an item is pressed, you can use PressedScale property to specify its scale factor.
#Selector Availability
Set the IsEnabled property to false
to restrict users to pick an item from the ToolbarColorSelector.
#Handle Loading
You can use the following inherited member to handle the ToolbarColorSelector loading:
Property | Description |
---|---|
Is |
Gets or sets whether a DXElement |
Loaded | Fires when the DXElement |
Unloaded | Fires when the DXElement |
#Customize Appearance
You can use the following properties to customize common ToolbarColorSelector appearance settings:
Property | Description |
---|---|
Corner |
Gets or sets the corner radius of Toolbar |
Margin | Gets or sets margins of the Toolbar |
Padding | Gest or sets paddings of the Toolbar |
Spacing | Gets or sets the spacing between the Toolbar |
Height |
Gets or sets height of the Toolbar |
Maximum |
Gets or sets the maximum height of the Toolbar |
Minimum |
Gets or sets the minimum height of the Toolbar |
Width |
Gets or sets the width of the Toolbar |
Maximum |
Gets or sets the maximum width of the Toolbar |
Minimum |
Gets or sets the minimum width of the Toolbar |
Horizontal |
Gets or sets the horizontal alignment of a Toolbar |
Vertical |
Gets or sets the vertical alignment of the Toolbar |
Background |
Gets or sets the Toolbar |
Border |
Gets or sets the color of the Toolbar |
Border |
Gets or sets thickness of the Toolbar |
Style | Gets or sets the style applied to a DXElement |
#Item Appearance
You can use the following properties to display and customize appearance of ToolbarColorSelector items:
Property | Description |
---|---|
Item |
Gets or sets the corner radius applied to Toolbar |
Item |
Gets or sets the height of Toolbar |
Item |
Gets or sets the width of Toolbar |
#Selection Border Appearance
You can use the following properties to display and customize appearance of ToolbarColorSelector selection border:
Property | Description |
---|---|
Selection |
Gets or sets the color of the Toolbar |
Selection |
Gets or sets the thickness of the selection border within the Toolbar |
Selection |
Gets or sets the corner radius of the selection border within the Toolbar |
Selection |
Gets or sets paddings of the selection border within the Toolbar |
#Customize Animations
The ToolbarColorSelector displays two animations when you select its item:
The first animation changes scale of the tapped item. Use the PressedScale property to specify the scale factor of the tapped item.
The second animation moves the selection border to the selected item.
Use the AnimationDuration property to specify the duration of these animations. The property value is applied to both of these animations.