Listview with Checkbox is not responding based on the enable condition?

Sowndarrajan Vijayaragavan 410 Reputation points
2024-05-30T19:48:38.0533333+00:00
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Test.View.Test"
             Title="Test">
    <StackLayout>
        <Border StrokeThickness="2" HeightRequest="320" WidthRequest="200">
            <ListView ItemsSource="{Binding Items}"  HeightRequest="320" WidthRequest="200">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout Orientation="Horizontal" Padding="10">
                                <CheckBox IsChecked="{Binding IsChecked}" VerticalOptions="Center" CheckedChanged="CheckBox_CheckedChanged" IsEnabled="{Binding IsEnabled}" />
                                <Label Text="{Binding Name}" VerticalOptions="Center" Margin="10,0,0,0" IsEnabled="{Binding IsEnabled}" />
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
        </Border>
    </StackLayout>
    
</ContentPage>


public partial class Test : ContentPage
{
    Testviewmodel _viewmodel = new Testviewmodel();
    public Test()
	{
		InitializeComponent();
        this.BindingContext = _viewmodel;

}

    private void CheckBox_CheckedChanged(object sender, CheckedChangedEventArgs e)
    {
        try
        {
            if (_viewmodel.Flag)
            {
                foreach (var item in _viewmodel.Items)
                {
                    if(e.Value)
                    {
                        if (item.IsChecked == true)
                        {

                            item.IsEnabled = true;
                        }
                        else
                        {
                            item.IsEnabled = false;
                        }

                    }
                    else
                    {
                        item.IsChecked = false;
                        item.IsEnabled = true;
                    }
                    

                }
                _viewmodel.Flag = false;
                _viewmodel.Items = new ObservableCollection<ITEMTEST>(_viewmodel.Items);
                _viewmodel.Flag = true;
            }
        }
        catch (Exception ex)
        {

        }
    }
}

public partial class Testviewmodel: ObservableObject
{

    [ObservableProperty]
    ObservableCollection<ITEMTEST> items;

    [ObservableProperty]
    bool flag = true;
    public Testviewmodel()
    {
        Items = new ObservableCollection<ITEMTEST>
    {
        new ITEMTEST { Name = "ITEMTEST 1" ,IsChecked = false, IsEnabled = true },
        new ITEMTEST { Name = "ITEMTEST 2" ,IsChecked = false, IsEnabled = true},
        new ITEMTEST { Name = "ITEMTEST 3" ,IsChecked = false, IsEnabled = true},
        new ITEMTEST { Name = "ITEMTEST 4" ,IsChecked = false, IsEnabled = true},
        new ITEMTEST { Name = "ITEMTEST 5" ,IsChecked = false, IsEnabled = true},
        new ITEMTEST { Name = "ITEMTEST 6" ,IsChecked = false, IsEnabled = true},
        new ITEMTEST { Name = "ITEMTEST 7" ,IsChecked = false, IsEnabled = true},
        new ITEMTEST { Name = "ITEMTEST 8" ,IsChecked = false, IsEnabled = true},
        new ITEMTEST { Name = "ITEMTEST 9" ,IsChecked = false, IsEnabled = true},
        new ITEMTEST { Name = "ITEMTEST 10" ,IsChecked = false, IsEnabled = true}
    };
    }
}


Expectation : Only One should be allowed to tick.
If the user want to change then they have to untick the already ticked one and re-tick it on the required item.

Issue:User's image

For the first 5 visible items there is no issue . But if the user scroll and try to tick from 6 to 10 item.
It is not working as i expect.
User's image

.NET MAUI
.NET MAUI
A Microsoft open-source framework for building native device applications spanning mobile, tablet, and desktop.
3,088 questions
0 comments No comments
{count} votes

Accepted answer
  1. Leon Lu (Shanghai Wicresoft Co,.Ltd.) 70,966 Reputation points Microsoft Vendor
    2024-05-31T02:34:05.4466667+00:00

    Hello,

    Please remove following lines in your CheckBox_CheckedChanged event.

        _viewmodel.Flag = false;
        _viewmodel.Items = new ObservableCollection<ITEMTEST>(_viewmodel.Items);
        _viewmodel.Flag = true;
    

    And make sure your properties added the [ObservableProperty] in ITEMTEST.cs like following code.

    public partial class ITEMTEST : ObservableObject
    {
        [ObservableProperty]
        string name;
     
        [ObservableProperty]
        bool isChecked;
     
        [ObservableProperty]
        bool isEnabled;
    }
    

    If so, your properties could be changed at runtime, no need to set _viewmodel.Items = new ObservableCollection<ITEMTEST>(_viewmodel.Items); again.

    By the way, ObservableCollection have implement the INotifyCollectionChanged as well.

    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.


0 additional answers

Sort by: Most helpful