how to bind a viewmodel variable to ObservableCollection items in xamarin form?

Question

I have a list of tasks that I need to bind a Boolean variable to its item. the task object includes a completedDate property that if it has value defines the task as completed. on the view, I need to check if it has value the button text display the text: "mark as incomplete"

----Task Object-----

   public class ProjectTaskLineItemSummary
{
    
    public int TenantId { get; set; }
    public int Id { get; set; }
    public string Name { get; set; }
    public string Description { get; set; }      
    public decimal? CostMultiplier { get; set; }
    public DateTimeOffset? CompletedDate { get; set; }
    public int? CompletedByUserId { get; set; }

    
}

-------viewmodel-------

 viewmodel()
{
 public ObservableCollection<ProjectTaskLineItemSummary> Tasks { get; set; }
...

  bool isCompleted;
        public bool IsCompleted
        {
            get {
                return isCompleted;
                    }
            set
            {
                isCompleted = value;

                OnPropertyChanged();
            }
        }
}

-----view----

 <CollectionView  Grid.Row="1" ItemsSource="{Binding Tasks}" x:Name="List3">
                                <CollectionView.ItemTemplate>
                                    <DataTemplate>
                                        <Grid>
                                            <Frame
                                        Margin="0,10"
                                        Padding="10"
                                        BackgroundColor="{StaticResource PrimaryWhite}"
                                        BorderColor="{StaticResource PrimaryLightGray}"
                                        CornerRadius="10"
                                        HasShadow="False">
                                                <Grid RowDefinitions="Auto,Auto,Auto,Auto,Auto,Auto" RowSpacing="15">
                                                  
                                                       
                                                        <StackLayout HorizontalOptions="EndAndExpand" Orientation="Horizontal">
                                                            <Image
                                                        HeightRequest="20"
                                                        Source="iconCalender.png"
                                                        WidthRequest="20" />
                                                            <Label
                                                        FontFamily="{StaticResource MeduimFont}"
                                                        Style="{StaticResource LabelMedium}"
                                                        Text="{Binding CompletedDate,StringFormat='{0:MMMM dd, yyyy}'}"
                                                        TextColor="{StaticResource PrimaryBlack}" 
                                                        />
                                                        </StackLayout>
                                                    </StackLayout>

                                                    <BoxView
                                                Grid.Row="1"
                                                HeightRequest="1"
                                                Color="{StaticResource PrimaryLightGray}" />

                                                    <Label
                                                Grid.Row="2"
                                                Style="{StaticResource LabelMedium}"
                                                Text="{Binding Name}"
                                                TextColor="{StaticResource PrimaryBlack}" />
                                                    


                                                    <Button
                                                x:Name="lstbtnMarkasComplite"
                                                Grid.Row="5"
                                                Padding="15,0"
                                                Clicked="MarkTaskAsCompletedClicked"
                                                CornerRadius="20"
                                                FontSize="{StaticResource Font12}"
                                                HeightRequest="40"
                                                         CommandParameter="{Binding Id}"
                                                HorizontalOptions="CenterAndExpand"
                                                Style="{StaticResource ButtonPurple}"
                                                Text="Mark as Completed" >
                                                        <Button.Triggers>
                                                            <DataTrigger TargetType="Button" Binding="{Binding IsCompleted}" Value="True">
                                                                <Setter Property="Text" Value="Mark Task as In Completed"/>
                                                            </DataTrigger>

                                                        </Button.Triggers>
                                                    </Button>

                                                </Grid>
                                            </Frame>
                                        </Grid>
                                    </DataTemplate>
                                </CollectionView.ItemTemplate>
                            </CollectionView>

I tried to assign it in view model like below but it doesn't work:

public override async Task InitializeAsync(object navigationData)
        {
            await SetBusyAsync(async () =>
            {
...

                Tasks = ObjectMapper.Map<ObservableCollection<ProjectTaskLineItemSummary>>(project.TaskLineItems);

                foreach (var task in Tasks)
                {
                    isCompleted = task.CompletedDate.HasValue ? true : false;
                }
                RaisePropertyChanged(() => Model);
                RaisePropertyChanged(() => Notes);
                RaisePropertyChanged(() => Files);
                RaisePropertyChanged(() => Tasks);

            });
        }

Answer 1

This could simply be achieved by Binding Text Property of the button and then dynamically set the Text of the button based on the CompletedDate of the entity. Below is the code snippets for your reference:

Model: ProjectTaskLineItemSummary.cs

public class ProjectTaskLineItemSummary
    {
        public int TenantId { get; set; }
        public int Id { get; set; }
        public string Name { get; set; }
        public string Description { get; set; }
        public decimal? CostMultiplier { get; set; }
        public DateTimeOffset? CompletedDate { get; set; }
        public int? CompletedByUserId { get; set; }
        public string CompletedButton { get; set; } 
    }

View:

 <CollectionView  ItemsSource="{Binding Tasks}" x:Name="List3" Background="aqua">
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Frame Margin="0,10" Padding="10"  HasShadow="False">
                        <Grid RowDefinitions="Auto,Auto,Auto,Auto,Auto,Auto" RowSpacing="15">
                            <StackLayout HorizontalOptions="EndAndExpand" Orientation="Horizontal">
                                <Image HeightRequest="30" Source="XamarinLogo.png" WidthRequest="80" />
                                <Label x:Name="mydate" Text="{Binding CompletedDate,StringFormat='{0:MMMM dd, yyyy}'}" TextColor="Black"/>
                            </StackLayout>

                            <BoxView Grid.Row="1" HeightRequest="1" Color="Black" />

                            <Label Grid.Row="2"  Text="{Binding Name}" TextColor="Black" />

                            <Button Grid.Row="5" x:Name="lstbtnMarkasComplite" Padding="15,0" 
                                                Clicked="MarkTaskAsCompletedClicked"
                                                CornerRadius="20"
                                                Text="{Binding CompletedButton}"
                                                FontSize="Medium"
                                                HeightRequest="40"
                                                CommandParameter="{Binding Id}"
                                                HorizontalOptions="CenterAndExpand">
                            </Button>

                        </Grid>
                    </Frame>
                </Grid>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>

ViewModel:

 public class PageViewModel : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        public ObservableCollection<ProjectTaskLineItemSummary> Tasks { get; set; }
        bool isCompleted { get; set; }
        public bool IsCompleted
        {
            get => isCompleted;
            set
            {
                isCompleted = value;

                PropertyChanged?.Invoke(this,
                   new PropertyChangedEventArgs(nameof(IsCompleted)));
            }
        }
        string completed { get; set; }
        public String CompletedButton
        {
            get => completed;
            set
            {
                completed = value;
                PropertyChanged?.Invoke(this,
                 new PropertyChangedEventArgs(nameof(CompletedButton)));
            }
        }
        public PageViewModel()
        {
           
            Tasks = new ObservableCollection<ProjectTaskLineItemSummary>()
            {

                new ProjectTaskLineItemSummary(){TenantId = 1, Id =1, Name = "jobs ", Description= "jjjj",CostMultiplier=1 ,CompletedDate =DateTime.UtcNow, CompletedByUserId=1 ,CompletedButton = ""},
                new ProjectTaskLineItemSummary(){TenantId = 2, Id =2, Name = "james ",Description= "aaaa",CostMultiplier=2 , CompletedByUserId=2,CompletedButton = "" },
                new ProjectTaskLineItemSummary(){TenantId = 3, Id =3, Name = "rollex ",Description= "rrrr",CostMultiplier=3 ,CompletedDate =DateTime.UtcNow, CompletedByUserId=3 ,CompletedButton = ""}
            };
            setButtonIsCompleted();
        }

        private void setButtonIsCompleted()
        {
           foreach (var task in Tasks)
            {
                if (task.CompletedDate == null)
                {
                     task.CompletedButton = "Mark Task as Completed";
                }
                else
                {
                    task.CompletedButton = "Mark Task as inCompleted";
                }
            }
        }
    }