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

[DXLicenseMAUI]
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:

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

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:

Customize Appearance

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

Item Appearance

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

Selection Border Appearance

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

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.

Implements

INotifyPropertyChanged

IElementController

Inheritance

System.Object BindableObject Element DevExpress.Maui.Core.Internal.DXElementBaseCore DXElementBase ToolbarElementBase ToolbarItemBase ToolbarColorSelector

Extension Methods

Yield<ToolbarColorSelector>()

YieldIfNotNull<ToolbarColorSelector>()

See Also

ToolbarColorSelector Members

Items

DevExpress.Maui.Controls Namespace