Search code examples
xamarin.formsmenuitemdatatriggerxamarin.forms.listview

Using DataTrigger on MenuItem to display different state in Xamarin.Forms


I'm trying to use DataTrigger on a MenuItem inside a ViewCell in Xamarin.Forms. The ListView displays a list of conversations. If the conversation is deleted, I want the menu item to show "Restore". If the conversation is not deleted, I want to show "Delete".

On build I get the error:

Error: Position 12:49. Can't resolve Clicked on MenuItem

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="EventingVolunteers.MailboxBoxPage" Title="Mailbox - Box">
    <ContentPage.Content>
        <AbsoluteLayout x:Name="absLayout" VerticalOptions="FillAndExpand">
            <ListView x:Name="listView" HasUnevenRows="true" ItemSelected="OnItemSelected" HeightRequest="{Binding Path=Height, Source={x:Reference absLayout}}">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                            <ViewCell.ContextActions>
                                <MenuItem CommandParameter="{Binding Id}">
                                    <DataTrigger TargetType="MenuItem" Binding="{Binding Is_Deleted}" Value="false">
                                        <Setter Property="Clicked" Value="OnDelete" />
                                        <Setter Property="Text" Value="Delete" />
                                        <Setter Property="IsDestructive" Value="True" />
                                        <Setter Property="Icon" Value="ic_delete.png" />
                                    </DataTrigger>
                                    <DataTrigger TargetType="MenuItem" Binding="{Binding Is_Deleted}" Value="true">
                                        <Setter Property="Clicked" Value="OnRestore" />
                                        <Setter Property="Text" Value="Restore" />
                                        <Setter Property="IsDestructive" Value="False" />
                                        <Setter Property="Icon" Value="" />
                                    </DataTrigger>
                                </MenuItem>
                            </ViewCell.ContextActions>
                            <StackLayout Orientation="Horizontal" BackgroundColor="White" Padding="10,10,10,10">
                                <StackLayout Spacing="0" Orientation="Horizontal" HorizontalOptions="StartAndExpand">
                                    <StackLayout Orientation="Vertical">
                                        <StackLayout HorizontalOptions="StartAndExpand" Orientation="Horizontal">
                                            <Label Text="{Binding Subject}" VerticalTextAlignment="Center" FontAttributes="Bold">
                                                <Label.Triggers>
                                                    <DataTrigger TargetType="Label" Binding="{Binding Is_Unread}" Value="true">
                                                        <Setter Property="TextColor" Value="#337ab7" />
                                                    </DataTrigger>
                                                </Label.Triggers>
                                            </Label>
                                        </StackLayout>
                                        <StackLayout HorizontalOptions="StartAndExpand" Orientation="Horizontal">
                                            <Label Text="{Binding Participant}" VerticalTextAlignment="Center" />
                                        </StackLayout>
                                        <StackLayout HorizontalOptions="StartAndExpand" Orientation="Horizontal">
                                            <Label Text="{Binding Last_Message_At}" VerticalTextAlignment="Center" />
                                        </StackLayout>
                                    </StackLayout>
                                </StackLayout>
                            </StackLayout>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
            <ContentView x:Name="overlay" AbsoluteLayout.LayoutBounds="0, 0, 1, 1"  AbsoluteLayout.LayoutFlags="All" IsVisible="True" BackgroundColor="#C0808080" Padding="10, 0">
                <ActivityIndicator  WidthRequest="110" HeightRequest="70" IsRunning="True" IsVisible="True" Color="Black" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
            </ContentView>
        </AbsoluteLayout>
    </ContentPage.Content>
</ContentPage>

Solution

  • Your issue is with this line:

    <Setter Property="Clicked" Value="OnDelete" />

    Remove this line - MenuItem has no Clicked property. Clicked is an Event.

    You should be binding to the Clicked event in the MenuItem tag, eg:

    <MenuItem CommandParameter="{Binding Id}" Command="{Binding OnDelete}">