List view selected item value changed is not reflecting UI on time

Question

In Xamarin forms with MVVM ; I'm using observable collection for listing my items in the listview. It worked fine. In my listview i have a Label and i need to change the Label value when the user click on that selected list item. It's also working fine. But the problem is, Selected list item Label value changed only after i scroll the listview.

I need to change the selected list item's Label value On time.

Here is my code: Xaml

<ListView x:Name="Listitem"  Grid.Row="2" Grid.ColumnSpan="2" ItemsSource="{Binding States,Mode=TwoWay}" SelectedItem="{Binding YourSelectedItem,Mode=TwoWay}"  VerticalOptions="FillAndExpand" HasUnevenRows="true" CachingStrategy="RecycleElement" BackgroundColor="White" >
    <ListView.Header>                                                    
        <Grid BackgroundColor="{StaticResource Accent}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Label Grid.Column="0" Text="Country Code" HorizontalOptions="Center" VerticalOptions="Center" TextColor="{StaticResource Primary}" />
            <Label Grid.Column="1" Text="Name"  HorizontalOptions="Center" TextColor="{StaticResource Primary}" />
            <Label Grid.Column="2" Text="Capital"  HorizontalOptions="Center" TextColor="{StaticResource Primary}" />
        </Grid>
    </ListView.Header>
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <ViewCell.View>
                    <Grid VerticalOptions="Center">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="3*" />
                            <ColumnDefinition Width="3*" />
                            <ColumnDefinition Width="3*" />
                            <ColumnDefinition Width="1*" />
                        </Grid.ColumnDefinitions>
                        <Label Grid.Column="0" Text="{Binding abbr}" Margin="5" HorizontalOptions="Center" VerticalOptions="Center" FontSize="18" TextColor="{StaticResource Primary}" />
                        <Label Grid.Column="1" Text="{Binding name}"  Margin="5" HorizontalTextAlignment="Start"  VerticalOptions="Center" FontSize="18" LineBreakMode="WordWrap" TextColor="{StaticResource Primary}"/>
                        <Label Grid.Column="2" Text="{Binding capital}"  Margin="5" HorizontalTextAlignment="Start"  VerticalOptions="Center" FontSize="18" LineBreakMode="WordWrap" TextColor="{StaticResource Primary}"/>
                        <controls:CheckBox Grid.Column="3" Margin="0, 0, 0, 0" CheckedChanged="Handle_CheckedChanged" BindingContext="{Binding .}"  BackgroundColor="Transparent" WidthRequest="40" HeightRequest="30" IsVisible="True" />
                    </Grid>
                </ViewCell.View>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

And this is my View model for selected list item;

public TodoItem YourSelectedItem
{
    get
    {
        return _yourSelectedItem;
    }

    set
    {
        _yourSelectedItem = value;
        _yourSelectedItem.abbr = "Tapped";
        OnPropertyChanged("YourSelectedItem");
    }
}

Item source property;

private ObservableCollection<TodoItem> _States;

public ObservableCollection<TodoItem> States
{ 
    get { return _States; }
    set { _States = value; OnPropertyChanged("States"); }  
}

Yang You Yang You · Accepted Answer · 2019-03-22T01:12:22

The class TodoItem needs to implement the interface INotifyPropertyChanged and the property abbr needs to be implemented as something like blow:

public string abbr {
        get 
        { 
            return _abbr; 
        }
        set 
        { 
            if (_abbr != value) {
                _abbr = value;
                OnPropertyChanged("abbr");
            }
        } 

}

List view selected item value changed is not reflecting UI on time

1 Answers