Single Selection

Question

I have a list with a border.

<CollectionView.ItemTemplate>
     <DataTemplate x:DataType="models:DemyUser">
         <Border BackgroundColor="{Binding Path=ItemColor, Source={x:RelativeSource AncestorType={x:Type vm:ManageCoursePageViewModel}}}">
             <Border.StrokeShape>
                 <RoundRectangle CornerRadius="40,40,40,40" />
             </Border.StrokeShape>
             <Grid ColumnDefinitions="40,*,Auto">
                 <Image
                     HeightRequest="40"
                     HorizontalOptions="Start"
                     Source="teacher.png"
                     WidthRequest="40" />
                 <VerticalStackLayout
                     Grid.Column="1"
                     HorizontalOptions="Start">
                     <Label
                         FontAttributes="Bold"
                         Text="{Binding DemyId, StringFormat='Demy id: {0}'}" />
                     <Label Text="{Binding CompleteName, StringFormat='Name: {0}'}" />
                 </VerticalStackLayout>
                 <Label
                     Grid.Column="2"
                     Margin="10"
                     FontAttributes="Bold"
                     HorizontalTextAlignment="End"
                     Text="contact the teacher"
                     TextColor="DarkBlue"
                     TextDecorations="Underline"
                     VerticalTextAlignment="Center">
                     <Label.GestureRecognizers>
                         <TapGestureRecognizer
                             Command="{Binding Path=OpenEmailClientCommand, Source={x:RelativeSource AncestorType={x:Type vm:ManageCoursePageViewModel}}}"
                             CommandParameter="{Binding Email}" />
                     </Label.GestureRecognizers>
                 </Label>
             </Grid>
             <Border.GestureRecognizers>
                 <TapGestureRecognizer Command="{Binding Path=SelectedItemCommand, Source={x:RelativeSource AncestorType={x:Type vm:ManageCoursePageViewModel}}}"
                                       CommandParameter="{Binding .}"/>
             </Border.GestureRecognizers>
         </Border>

in my class I have

  public bool IsAssignedToCourse { get; set; }

But when I change, it changes everything

    [ObservableProperty]
    Color itemColor;
    [RelayCommand]
    async Task Appearing() {
        await GetTeachers();
    }
    private async Task GetTeachers() {
        Teachers.Clear();
        var usersCollection = await dataService.GetAllAsync<DemyUser>(Constants.USERS);
        var filteredData = usersCollection.Where(u => u.CurrentRole == nameof(Role.Teacher))
            .ToList();
        foreach(var teacher in filteredData) {
            Teachers.Add(teacher);
        }
    }
    [RelayCommand]
    public static async Task OpenEmailClientAsync(string email) {
        var message = new EmailMessage {
            To = { email },
            Subject = "Subject",
            Body = "Body of the email"
        };
        await Email.ComposeAsync(message);
    }
    [RelayCommand]
    void SelectedItem(DemyUser selectedUser) {
        foreach(var teacher in Teachers!) {
            teacher.IsAssignedToCourse = teacher == selectedUser;
            if(teacher.IsAssignedToCourse) {
                ItemColor = Constants.SelectedColor;
            } else {
                ItemColor = Constants.DefaultUnselectedColor;
            }
        }
    }
}

Answer 1

Hello,

Please add Color itemColor; to your DemyUser.cs like following code.

public partial class DemyUser:ObservableObject
{
      [ObservableProperty]
       Color itemColor;
...
}

Then you can set the itemColor by the teacher object in the SelectedItem like following code.

[RelayCommand]
void SelectedItem(DemyUser selectedUser)
{
     foreach (var teacher in Teachers!)
     {
         teacher.IsAssignedToCourse = teacher == selectedUser;
         if (teacher.IsAssignedToCourse)
         {
         teacher.ItemColor = Constants.SelectedColor;
         }
         else
         {
         teacher.ItemColor=Constants.DefaultUnselectedColor;
         }
     }
}

In the end, please change the ItemColor's binding way in the <CollectionView>.

<CollectionView.ItemTemplate>
     <DataTemplate>
         <Border BackgroundColor="{Binding ItemColor}">

Best Regards,

Leon Lu

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.