Todo Sample App

[Chuckh008]

I am currently trying to implement a checkbox into the Todo sample application. I would like to move the update isComplete functionality away from the ListView ItemTapped and replace it with a different feature.

At first, I didn't think it would very difficult. I added the CheckBox to the ViewCell.

    <ListView ItemsSource="{Binding Items}" ItemTapped="OnListItemTapped">
        <ListView.ItemTemplate>
            <DataTemplate x:DataType="local:TodoItem">
                <ViewCell>
                    <Grid Style="{StaticResource listItemContainer}">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>

                        <Label Style="{StaticResource listItemTitle}" Text="{Binding Title}" />

                        <CheckBox Grid.Column="1"  BindingContext="{Binding .}" 
                                  CheckedChanged="OnCheckBoxCheckedChanged"
                                  IsChecked="{Binding IsComplete}"/>
                    </Grid>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

I ran the application and initially it look promising. The items loaded and the checkboxes properly represented the completed todos.

Then I added the CheckedChanged event handler.

    public void OnCheckBoxCheckedChanged(object sender, CheckedChangedEventArgs e)
    {
        var checkbox = (CheckBox)sender;
        TodoItem item = (TodoItem)checkbox.BindingContext;

        if (item != null) {
            Debug.WriteLine($"[OnCheckBoxCheckedChanged] >>> TodoItem: {item.Title}");
            Debug.WriteLine($"[OnCheckBoxCheckedChanged] >>> TodoItem: {item.IsComplete}");
            //viewModel.SelectItemCommand.Execute(item);
        }

    }

When the view is rendered I notice the the CheckedChanged event is fired each time a ViewCell is generated where isCompleted is True.

Console Output:

[0:] [OnCheckBoxCheckedChanged] >>> TodoItem: Drink a beer.
[0:] [OnCheckBoxCheckedChanged] >>> TodoItem: True
[0:] [OnCheckBoxCheckedChanged] >>> TodoItem: Walk the dog.
[0:] [OnCheckBoxCheckedChanged] >>> TodoItem: True

When an item checkbox is check or unchecked, OnCheckBoxCheckedChanged is called.

Console Output:
[0:] [OnCheckBoxCheckedChanged] >>> TodoItem: Walk the dog.
[0:] [OnCheckBoxCheckedChanged] >>> TodoItem: False

So far so good.

When then line viewModel.SelectItemCommand.Execute(item); is uncommented, the wheels come off.

    public void OnCheckBoxCheckedChanged(object sender, CheckedChangedEventArgs e)
    {
        var checkbox = (CheckBox)sender;
        TodoItem item = (TodoItem)checkbox.BindingContext;

        if (item != null) {
            Debug.WriteLine($"[OnCheckBoxCheckedChanged] >>> TodoItem: {item.Title}");
            Debug.WriteLine($"[OnCheckBoxCheckedChanged] >>> TodoItem: {item.IsComplete}");
            viewModel.SelectItemCommand.Execute(item);
        }

    }

When the project is reloaded, the items that are complete (isComplete = true), fire the CheckedChanged event. I suspect that is because the default value for the CheckBox is False when created, then it is change to True through Data Binding.

The call to UpdateItemAsync results in the items where IsComplete = True are assigned the value of False, therefore, updating the database and clearing the checkbox.

    public ICommand SelectItemCommand
        => new Command<TodoItem>(async (TodoItem item) => await UpdateItemAsync(item.Id, !item.IsComplete));

When the items are checked, the database is updated; however, the checkbox is not.

Questions:

How can the CheckedChanged event be supresss when the ListView is rendered?
How do I get the CheckBox component to update?
Is there a better way to do this?

Please consider that I am very new to dotnet/mobile app dev if you decide provide an answerer.

Thanks in advance

[ideas2appsaustralia]

Hello @Chuckh008

this type of question might be better posted on stackoverflow as its not related (I think) to Datasync library

Are you using MVVM design? So a ViewModel class with all your business logic in it and a View for UI only? Your xaml looks like typical MVVM View but not sure where the items collection is created. MVVM doesnt use much at all in code behind. ie no need for "OnCheckBoxCheckedChanged" as this can be handled in the ViewModel

I bind all propertys of controls I want to change to observable propertys created in a ViewModel. They have behaviour that monitors when it changes in either ViewModel or View and triggers checkbox behaviour.

create in ViewModel:
[Observable Property]
bool IsThisComplete;

In View:
Bind observable property "IsThisComplete" to IsChecked property in CheckBox control in xaml

Retrieve IsComplete value from database and let the observable property equal this value in the ViewModel
If user changes checkbox the IsThisComplete Observable property changes and can be acted upon in ViewModel eg saved to database
If observable property "IsThisComplete" value in ViewModel is changed by business logic or by read from database then control in View is changed ie ticked or unticked

scott

[Chuckh008]

Thanks Scott!

I am sorry that my question wasn't relevant to Datasync library: however, Datasync is why I am here.

I posted here because I downloaded the sample code from this repository (azure-mobile-apps-main). After searching everywhere for a solution for this problem, I thought there might be someone here that is familiar with the sample Todo app. Again, I apologize.

It is my goal to learn everything about how the Todo app works, along with the other samples. I am working on an app that requires everything this todo app demonstrates.

1. Offline synchronization.
2. SQL Server relational database
3. Active Directory Authentication

My app is invoice based and it will often be used in places where the user has no connection.

I am new to .net, and mobile app development. I have so many questions. I promise to keep the question more on point.

I will work using the direction that you provided and I thank you very much.

chuck

[ideas2appsaustralia]

@Chuckh008 send me an email to ideas2appsaust@gmail.com and I can share with you some resources I've used to learn. I've been working on mobile app (xamarin now maui) and API to perform CRUD back to azure sql database using B2C authentication. Happy to share what I can.

I am self taught for 2 years so am not professional, but I know that a few pointers early on can speed up learning

scott

[adrianhall]

I totally agree with Scott here - you need to learn the basics of MV* programming and the UX components.

The way I've done it in the TodoItems sample is to abstract the offline sync part. There is another service provider in the TodoApp.Data project that is just an in-memory implementation. It doesn't have anything to do with datasync. When I am developing each version of the TodoApp, I start with the InMemory implementation and make it work with that. This allows me to deal with everything in memory and none of the complexities of the SQLite implementation, datasync service, etc. Once that is working, only then do I switch over to the service implementation. Then I get it working with the service implementation but no offline. Once that is working, I add authentication. Finally, when everything else is working, I add offline.

If you try to do everything all at once, you will not know which piece of the puzzle is causing issues. Incrementally solving each part will allow you to focus on just the bits that have changed.