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

Question

我想在选中某个项目时添加复选标记图像。请参见下文

我试图将 IsChecked 强制设置为 true ，只是为了查看 img 。但似乎没有任何效果

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

如果每个图像都相同，只需对源进行硬编码而不是绑定它。相反，绑定 IsVisible 属性

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

然后在处理程序中（确保您的模型实现 INotifyPropertyChanged）

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

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

Answer 2

你的 Employee class 实现 INotifyPropertyChanged 了吗：

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

请也添加Trigger根据True False Value改变Image 像这样

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

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

Add checkmark image on ItemSelected - ListView - Xamarin Forms

listview

listviewitem

expandablelistview

xamarin.forms