在 ItemSelected - ListView - Xamarin Forms 上添加复选标记图像

Question

I would like to add a checkmark image when an item is selected .see below

I tried forcing the IsChecked to true , just to see the img . but nothing seems to work

xaml

                <ListView x:Name="EmployeeView" ItemSelected="EmployeeView_ItemTapped"
            ItemsSource="{Binding Employees}">
    <ListView.ItemTemplate>
      <DataTemplate>
           <ViewCell>
          <StackLayout>
       <Image Source="calendar" IsVisible="{Binding IsChecked}"/>
       <Label Text="{Binding name}" />

           </StackLayout>
                </ViewCell>
      </DataTemplate>
    </ListView.ItemTemplate>
  </ListView>

C#

 ObservableCollection<Employee> employees = new ObservableCollection<Employee>();
 public ObservableCollection<Employee> Employees { get { return employees; } }

EmployeeView.ItemsSource = employees;

            // ObservableCollection allows items to be added after ItemsSource
            // is set and the UI will react to changes
            employees.Add(new Employee { name = "Rob Finnerty" });
            employees.Add(new Employee { name = "Bill Wrestler" });
            employees.Add(new Employee { name = "Dr. Geri-Beth Hooper" });
            employees.Add(new Employee { name = "Dr. Keith Joyce-Purdy" });
            employees.Add(new Employee { name = "Sheri Spruce" });
            employees.Add(new Employee { name = "Burt Indybrick" , IsChecked=true });




void EmployeeView_ItemTapped(object sender, Xamarin.Forms.SelectedItemChangedEventArgs e)
        {
            if (e.SelectedItem != null)
            {
                var index = (Employee)e.SelectedItem;
                index.IsChecked = true;
            }

Answer 1

if every image is the same, just hardcode the source instead of binding it. Instead, bind the IsVisible property

<Image Source="checkmark.png" IsVisible="{Binding IsChecked}" x:Name="tickimage">

then in the handler (be sure your model implements INotifyPropertyChanged )

void Handle_ItemSelected(object sender, Xamarin.Forms.SelectedItemChangedEventArgs e){

  if (e.SelectedItem != null)
  {
    var index = (ImagesModel)e.SelectedItem;
    index.IsChecked = true;
  }
}

Answer 2

did your Employee class implement INotifyPropertyChanged like :

public class Employee: INotifyPropertyChanged
{
    public string name { get; set; }
    public bool isChecked;

    public bool IsChecked
    {
        set
        {
            if (isChecked != value)
            {
                isChecked = value;
                OnPropertyChanged("IsChecked");

            }
        }
        get
        {
            return isChecked;
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

Answer 3

Please add Trigger also to change Image according to True False Value Like this

<Image
                                    x:Name="starImage"
                                    Aspect="AspectFit"
                                    HeightRequest="24"
                                    HorizontalOptions="End">
                                    <Image.GestureRecognizers>
                                        <TapGestureRecognizer Tapped="NotificationStarred" />
                                    </Image.GestureRecognizers>
                                    <Image.Triggers>
                                        <DataTrigger
                                            Binding="{Binding Path=IsImportant}"
                                            TargetType="Image"
                                            Value="True">
                                            <Setter Property="Source" Value="StarSelected.png" />
                                        </DataTrigger>

                                        <DataTrigger
                                            Binding="{Binding Path=IsImportant}"
                                            TargetType="Image"
                                            Value="False">
                                            <Setter Property="Source" Value="StarUnselected.png" />
                                        </DataTrigger>
                                    </Image.Triggers>
                                </Image>