Xamarin Command for Custom ViewCell

Question

I want to create a humburger menu. I create an ExtendedViewCell, which overrides SelectedColor, I also added CommandProperty to it. Did I do it right? Then I created a data model for my MenuItemCellData menu cells.

ExtendedViewCell Class:

public class ExtendedViewCell : ViewCell
    {
        #region BindavleProperties

        public static BindableProperty SelectedColorProperty = BindableProperty.Create(
            "SelectedColor",
            typeof(Color),
            typeof(ExtendedViewCell),
            Color.Accent);

        public static BindableProperty CommandProperty = BindableProperty.Create(
            "Command",
            typeof(ICommand),
            typeof(ExtendedViewCell));

        #endregion


        #region Properies

        public Color SelectedColor
        {
            get => (Color)GetValue(SelectedColorProperty);
            set => SetValue(SelectedColorProperty, value);
        }

        public ICommand Command
        {
            get => (ICommand) GetValue(CommandProperty);
            set => SetValue(CommandProperty, value);
        }

        #endregion

        public ExtendedViewCell()
        {
            if (Command != null)
            {
                Tapped += (sender, args) =>
                {
                    if (Command.CanExecute(null))
                        Command.Execute(null);
                };
            }
        }
    }

First, I create an array of my cells in the Xaml Resource, and then assign them to my ListView.ItemSource. But the Command property causes an error when initializing in MenuItemCellData.

My Page:

<pages:BasePage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MDOSchedule.UI.Pages.MasterDetailPage"
             xmlns:pages="clr-namespace:MDOSchedule.UI.Pages;assembly=MDOSchedule"
             xmlns:extensions="clr-namespace:MDOSchedule.Extensions;assembly=MDOSchedule"
             xmlns:uimodels="clr-namespace:MDOSchedule.UI.Models;assembly=MDOSchedule">

    <ContentPage.Resources>
        <ResourceDictionary>

            <!-- Menu Data -->
            <x:Array x:Key="NavigationItems" Type="{x:Type uimodels:MenuItemCellData}">
                <uimodels:MenuItemCellData Text="{extensions:Translate AllJobsPageTitle}"
                                           ImageFileName="ic_assignment.png"
                                           Command="{Binding GoToAllJobsCommand}"/>
                <uimodels:MenuItemCellData Text="{extensions:Translate MyJobsPageTitle}"
                                           ImageFileName="ic_assignment.png"
                                           Command="{Binding GoToMyJobsCommand}"/>
                <uimodels:MenuItemCellData Text="{extensions:Translate MyTasksPageTitle}"
                                           ImageFileName="ic_assignment.png"
                                           Command="{Binding GoToMyTasksCommand}"/>
                <uimodels:MenuItemCellData Text="{extensions:Translate LogoutButton}"
                                           ImageFileName="ic_assignment.png"
                                           Command="{Binding GoToLoginCommand}"/>
            </x:Array>
        </ResourceDictionary>
    </ContentPage.Resources>

    <ContentPage.Content>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="2*"/>
                <RowDefinition Height="3*"/>
            </Grid.RowDefinitions>

            <!-- App Info -->
            <StackLayout BackgroundColor="{StaticResource PrimaryColor}">
                <Grid Margin="{StaticResource SmallMargin}">

                    <!-- App Name -->
                    <Label Grid.Row="0" Text="{extensions:Translate AppName}"
                           TextColor="White" FontSize="Large"/>
                </Grid>
            </StackLayout>

            <ListView Grid.Row="1"
                      ItemsSource="{StaticResource NavigationItems}"
                      ItemTemplate="{StaticResource DataTemplate.MenuItems}"/>

        </Grid>
    </ContentPage.Content>
</pages:BasePage>

MenuItemCellData:

public class MenuItemCellData : Bindable
    {
        #region Properties

        public string Text
        {
            get => Get(String.Empty);
            set => Set(value);
        }

        public string ImageFileName
        {
            get => Get(String.Empty);
            set => Set(value);
        }

        public ICommand Command
        {
            get => Get<ICommand>();
            set => Set(value);
        }

        #endregion
    }

My Template

<!-- Menu Item Commands-->
            <DataTemplate x:Key="DataTemplate.MenuItems">
                <controls:ExtendedViewCell SelectedColor="{StaticResource PrimaryColorLight}"
                                           Command="{Binding Command}">
                    <Grid>
                        <StackLayout Orientation="Horizontal" 
                                     Margin="{StaticResource SmallMargin}">
                            <Image Aspect="AspectFit" Source="{Binding ImageFileName}"
                                   WidthRequest="16" HeightRequest="16"/>
                            <Label Text="{Binding Text}"/>
                        </StackLayout>
                    </Grid>
                </controls:ExtendedViewCell>
            </DataTemplate>

Error: No property, bindable property, or event found for 'Command', or mismatching type between value and property.

How Can i resolve this problem or how to do it differently?

Nikita Goncharuk Nikita Goncharuk · Accepted Answer · 2018-02-24T10:52:00

This is a solution: https://anthonysimmon.com/eventtocommand-in-xamarin-forms-apps/ or you can see xamarin.Forum https://forums.xamarin.com/discussion/60937/how-to-bind-a-command-to-listview-itemtapped

Xamarin Command for Custom ViewCell

1 Answers