How to change BG color for ListView ViewCell ContextActions

Question

Hope your doing great,

I created ListView with three Context Actions, here I want to set different background color for each MenuItem like below ViewCell:

<?xml version="1.0" encoding="UTF-8"?>
<ViewCell xmlns="http://xamarin.com/schemas/2014/forms"
 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="PureSale.Core.Views.OrdersListTemplate">
    <Grid Padding="10">
      <Grid.ColumnDefinitions>
          <ColumnDefinition Width="*"/>
          <ColumnDefinition Width="Auto"/>
        </Grid.ColumnDefinitions>
        <StackLayout Spacing="5">
           <Label Text="{Binding Title}" FontAttributes="Bold" HorizontalOptions="StartAndExpand"/>
         <Label Text="{Binding StartDate}" HorizontalOptions="StartAndExpand"/>
     </StackLayout>
        <Image Source="indicatorIconBlack.png" Grid.Column="1" HorizontalOptions="EndAndExpand" VerticalOptions="CenterAndExpand"/>
    </Grid>
</ViewCell>


public partial class OrdersListTemplate : ViewCell {
 public OrdersListTemplate(){
    InitializeComponent();

 var deleteAction = new MenuItem { Text = "Delete", StyleId = "labelRedStyle" };
    deleteAction.SetBinding(MenuItem.CommandParameterProperty, new Binding("."));
    deleteAction.Clicked += (sender, e) => {
    };

    var archiveAction = new MenuItem { Text = "Archive", IsDestructive = true}; 
    archiveAction.SetBinding(MenuItem.CommandParameterProperty, new Binding("."));
    archiveAction.Clicked +=  (sender, e) => {
    };

    var cancelAction = new MenuItem { Text = "Cancel" };
    cancelAction.SetBinding(MenuItem.CommandParameterProperty, new Binding("."));
    cancelAction.Clicked += (sender, e) => {
    };

    ContextActions.Add(cancelAction);
    ContextActions.Add(archiveAction);
    ContextActions.Add(deleteAction);
   }
 }

XAML

 <ListView HasUnevenRows="true" ItemsSource="{Binding OrderItems}" ios:ListView.SeparatorStyle="FullWidth" SelectedItem="{Binding SelectedListItem}">
        <ListView.ItemTemplate>
            <DataTemplate>
                <views:OrdersListTemplate/>

            </DataTemplate>
        </ListView.ItemTemplate>
 </ListView>

How can I set StyledId for menu items,

Please suggest me Thanks... in advance

K K K K · Accepted Answer · 2018-09-14T08:57:06

You can achieve this by writing a converter which will get the type and send the associated color with that type.

First add one enum in your object

public enum ActionType
{
    Delete = 0,
    Archive = 1,
    Cancel = 2
};

Add one converter which returns the color on the basis of your action type

class FileIconConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value != null)
        {
            switch ((ActionType)value)
            {
                case ActionType.Delete:
                    return Color.Red;

                case ActionType.Archive:
                    return Color.Yellow;

                case ActionType.Canncel:
                    return Color.Gray;
            }
        }

        return Color.Black;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

Add this converter entry into to APP.xaml

<Convert:ActionTypeConverter x:Key="ActionTypeConverter"></Convert:ActionTypeConverter>

Then you can add this converter in your xaml file

<Label BackgroundColor="{Binding ActionType, Converter={StaticResource ActionTypeConverter}}"/>

It works perfect for me, I hope this will work.

How to change BG color for ListView ViewCell ContextActions

1 Answers