DXColorSelector Class

A color selector item.

Namespace : DevExpress.Maui.Core

Assembly : DevExpress.Maui.Core.dll

NuGet Package : DevExpress.Maui.Core

Declaration

[DXLicenseMAUI]
public class DXColorSelector :
    DXControlBase

Remarks

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

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.

Handle Loading

You can use the following inherited member to handle the DXColorSelector loading:

Customize Appearance

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

Item Appearance

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

Selection Border Appearance

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

Customize Animations

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

Show 14 items

INotifyPropertyChanged

IAnimatable

Microsoft.Maui.Controls.ITabStopElement

IViewController

IVisualElementController

IElementController

IGestureController

IGestureRecognizers

IPropertyMapperView

IHotReloadableView

IView

Microsoft.Maui.IFrameworkElement

ITransform

IReplaceableView

Inheritance

Show 11 items

System.Object BindableObject Element NavigableElement VisualElement View DevExpress.Maui.Core.Internal.DXViewElement DevExpress.Maui.Core.Internal.DXViewBaseCore DXViewBase DXControlBase DXColorSelector

Extension Methods

Yield<DXColorSelector>()

YieldIfNotNull<DXColorSelector>()

See Also

DXColorSelector Members

DevExpress.Maui.Core Namespace