CollectionView's selected item and another control bound to the same property behave incorrectly

Question

In .Net MAUI app, I have a label's text and CollectionView's selected item bound to the same property. So I expect upon selecting an item in the CollectionView, a corresponding text to appear in the label, and the selected item to change color in the CollectionView. Instead, when I touch an item, only the label's text changes, but the item's color stays the same. Only when I touch the same item second time, it changes its color. How can I fix it, so both label and the item's color change simultaneously?

Here is my page:

<toolkit:Expander Margin="0,15">
    <toolkit:Expander.Header>
        <StackLayout Orientation="Horizontal">
            <Label FontSize="Medium" Text="{Binding SelectedTime, Mode=TwoWay, StringFormat='{0:hh:mm tt}'}" />
        </StackLayout>
    </toolkit:Expander.Header>
    <HorizontalStackLayout Padding="10">
        <CollectionView
            Margin="5,5,5,15"
            ItemSizingStrategy="MeasureAllItems"
            ItemsSource="{Binding Times, Mode=OneTime}"
            SelectedItem="{Binding SelectedTime, Mode=TwoWay}"
            SelectionMode="Single">
            <CollectionView.ItemsLayout>
                <GridItemsLayout Orientation="Vertical" Span="3" />
            </CollectionView.ItemsLayout>
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <ContentView Padding="5">
                        <Border StrokeShape="RoundRectangle 10" StrokeThickness="1">
                            <Label
                                Padding="10"
                                BackgroundColor="Transparent"
                                FontAttributes="Bold"
                                HorizontalTextAlignment="Center"
                                Text="{Binding ., StringFormat='{0:hh:mm tt}'}"
                                TextColor="Black" />
                        </Border>
                    </ContentView>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </HorizontalStackLayout>
</toolkit:Expander>

Here is the ViewModel:

[ObservableProperty]
[Required(ErrorMessage = "Please select the time of your appointment.")]
private DateTime? _selectedTime;

I made a work around using another property that duplicates SelectedTime using NotifyPropertyChangedFor. But I wonder why binding two controls to the same property doesn't work properly...

I have seen this symptom in Xamarin.Forms also. I infer that a change coming from xaml (one of the two binding subscribers) triggers change in such a way that it does not reflect back to binding subscribers. This was likely done because the original subscriber does not need to be told. Avoiding possible infinite recursion. But not handling the case where there is a second binding listening to that property. You could submit an issue at `github maui issues`. — ToolmakerSteve, Jul 30 '23 at 20:08

score 0 · Answer 1 · answered Aug 03 '23 at 05:46

I made a work around using another property that duplicates SelectedTime using NotifyPropertyChangedFor. But I wonder why binding two controls to the same property doesn't work properly...

As ToolmakerSteve said that "a change coming from xaml (one of the two binding subscribers) triggers change in such a way that it does not reflect back to binding subscribers. This was likely done because the original subscriber does not need to be told."

You can raise an issue on GitHub for it.

CollectionView's selected item and another control bound to the same property behave incorrectly

1 Answers1