ToolbarColorSelector Class

A color selector item within the DXToolbar control.

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.

DevExpress .NET MAUI Toolbar - ToolbarColorSelector

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:

MainPage.xaml

<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>

MainViewModel.cs

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:

MainPage.xaml

<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>

MainViewModel.cs

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.

DevExpress .NET MAUI Toolbar - ToolbarColorSelector PressedScale Property

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
IsLoaded	Gets or sets whether a DXElementBase descendant is loaded.
Loaded	Fires when the DXElementBase descendant is loaded.
Unloaded	Fires when the DXElementBase descendant is unloaded.

Customize Appearance

You can use the following properties to customize common ToolbarColorSelector appearance settings:

Property	Description
CornerRadius	Gets or sets the corner radius of ToolbarColorSelector. This is a bindable property.
Margin	Gets or sets margins of the ToolbarColorSelector. This is a bindable property.
Padding	Gest or sets paddings of the ToolbarColorSelector. This is a bindable property.
Spacing	Gets or sets the spacing between the ToolbarColorSelector items. This is a bindable property.
HeightRequest	Gets or sets height of the ToolbarColorSelector. This is a bindable property.
MaximumHeightRequest	Gets or sets the maximum height of the ToolbarColorSelector. This is a bindable property.
MinimumHeightRequest	Gets or sets the minimum height of the ToolbarColorSelector. This is a bindable property.
WidthRequest	Gets or sets the width of the ToolbarColorSelector. This is a bindable property.
MaximumWidthRequest	Gets or sets the maximum width of the ToolbarColorSelector. This is a bindable property.
MinimumWidthRequest	Gets or sets the minimum width of the ToolbarColorSelector. This is a bindable property.
HorizontalOptions	Gets or sets the horizontal alignment of a ToolbarColorSelector. This is a bindable property.
VerticalOptions	Gets or sets the vertical alignment of the ToolbarColorSelector. This is a bindable property.
BackgroundColor	Gets or sets the ToolbarColorSelector background color. This is a bindable property.
BorderColor	Gets or sets the color of the ToolbarColorSelector border. This is a bindable property.
BorderThickness	Gets or sets thickness of the ToolbarColorSelector border. This is a bindable property.
Style	Gets or sets the style applied to a DXElementBase descendant. This is a bindable property.

Item Appearance

You can use the following properties to display and customize appearance of ToolbarColorSelector items:

Property	Description
ItemCornerRadius	Gets or sets the corner radius applied to ToolbarColorSelector colors. This is a bindable property.
ItemHeight	Gets or sets the height of ToolbarColorSelector items. This is a bindable property.
ItemWidth	Gets or sets the width of ToolbarColorSelector items. This is a bindable property.

Selection Border Appearance

You can use the following properties to display and customize appearance of ToolbarColorSelector selection border:

Property	Description
SelectionBorderColor	Gets or sets the color of the ToolbarColorSelector‘s selection border. This is a bindable property.
SelectionBorderThickness	Gets or sets the thickness of the selection border within the ToolbarColorSelector. This is a bindable property.
SelectionBorderCornerRadius	Gets or sets the corner radius of the selection border within the ToolbarColorSelector. This is a bindable property.
SelectionBorderPadding	Gets or sets paddings of the selection border within the ToolbarColorSelector. This is a bindable property.