在 ItemSelected - ListView - Xamarin Forms 上添加復選標記圖像

Question

我想在選擇項目時添加復選標記圖像。見下文

我試圖強制 IsChecked 為 true ，只是為了查看 img 。 但似乎沒有任何效果

xml

                <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類是否實現了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

請添加觸發器也可以根據真假值改變圖像像這樣

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