DXColorSelector Class

A color selector item.

Assembly: DevExpress.Maui.Core.dll

Declaration

public class DXColorSelector :
    DXViewBase

Remarks

The DXColorSelector allows you to pick a color from the collection.

DevExpress .NET MAUI - ColorSelector

Add ColorSelector

Use the ItemsSource property to bind the DXColorSelector to a collection of colors that you want to display.

The following code sample displays a DXColorSelector and binds it to a collection of colors:

MainPage.xaml

<ContentPage ...
             xmlns:local="clr-namespace:ColorSelectorApp"
             xmlns:dx="clr-namespace:DevExpress.Maui.Core;assembly=DevExpress.Maui.Core">
    <ContentPage.BindingContext>
        <local:MainViewModel/>
    </ContentPage.BindingContext>
    <Grid>
        <dx:DXColorSelector ItemsSource="{Binding Colors}"/>
    </Grid>
</ContentPage>

MainViewModel.cs

namespace ColorSelectorApp {
    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 DXColorSelector item.

You can also use the Command property to specify a command that is invoked when a user taps a DXColorSelector. 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:ColorSelectorApp"/>
    <ContentPage.BindingContext>
        <local:MainViewModel/>
    </ContentPage.BindingContext>
    <Grid>
        <dx:DXColorSelector x:Name="colorselector" Command="{Binding TapItemCommand}" 
                            CommandParameter="{Binding SelectedColor, Source={x:Reference colorselector}}"/>
    </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 the PressedScale property to specify its scale factor.

DevExpress .NET MAUI Utility Controls - ColorSelector PressedScale Property

Handle Loading

You can use the following inherited member to handle the DXColorSelector 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 DXColorSelector appearance settings:

Property	Description
Orientation	Gets or sets the direction of child item flow. This is a bindable property.
Spacing	Gets or sets the spacing between the DXColorSelector items. 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 DXColorSelector items:

Property	Description
ItemAlignment	Gets or sets how the DXColorSelector control aligns its child items. This is a bindable property.
ItemCornerRadius	Gets or sets the corner radius applied to DXColorSelector colors. This is a bindable property.
ItemHeight	Gets or sets the height of DXColorSelector items. This is a bindable property.
ItemWidth	Gets or sets the width of DXColorSelector items. This is a bindable property.

Selection Border Appearance

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

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