C#•3y ago

✅ Adding a delete function to Todo application

I followed the avalonia tutorial for creating a todo app, but it only has ways to add items to the list. I'm wanting to remove items from the list based on a delete button, and I'm not quite sure how to implement it. I attempted to copy and do the reverse of the add item button] and I attempted to copy the C# code as well. but when it comes to creating the RemoveItemViewModel.cs file, I'm getting a bit lost. so how can I create a simple code behind for my delete button to just remove the items from the list and from view?

MekOP•8/16/23, 3:28 AM

Todo.zip52.54MB

Kouhai•8/16/23, 3:51 AM

Assuming you're using an

ObservableCollection

ObservableCollection

you can just call

Remove

Remove

on the

ObservableCollection

ObservableCollection

instance

MMek Click to see attachment

Pobiega•8/16/23, 5:45 AM

Don't upload zips, put your project on GitHub and share the URL instead

MekOP•8/16/23, 6:24 AM

sure...

MekOP•8/16/23, 6:24 AM

https://github.com/mekasu0124/Todo there you go

Pobiega•8/16/23, 7:13 AM

At a glance, I don't think you need the

RemoveItemViewModel

RemoveItemViewModel

at all

Pobiega•8/16/23, 7:13 AM

its needed for add since you need to give it a description, but for remove its probably just gonna remove the item selected in the main view

Kouhai•8/16/23, 7:13 AM

In the TodoListView.axaml remove the binding to the RemoveItem in the MainWindowViewModel and instead bind to a new method in TodoListViewModel.cs

<Button DockPanel.Dock="Bottom"
--        Command="{Binding #parent[Window].DataContext.RemoveItem}"
++        Command="{Binding RemoveSelectedItems}"
        Content="Delete"/>

<Button DockPanel.Dock="Bottom"
--        Command="{Binding #parent[Window].DataContext.RemoveItem}"
++        Command="{Binding RemoveSelectedItems}"
        Content="Delete"/>

And in the TodoListViewModel.cs to remove checked items

public void RemoveSelectedItems()
{
    for(var i = Items.Count-1; i >= 0; i--)
    {
        if (Items[i].IsChecked)
            Items.RemoveAt(i);
    }
}

public void RemoveSelectedItems()
{
    for(var i = Items.Count-1; i >= 0; i--)
    {
        if (Items[i].IsChecked)
            Items.RemoveAt(i);
    }
}

Pobiega•8/16/23, 7:14 AM

KKouhai In the TodoListView.axaml remove the binding to the RemoveItem in the MainWindow...

MekOP•8/17/23, 1:07 AM

ok so I implemented this, thank you by the way, however, when I ran the code and selected the items on the screen and clicked the delete button, this triggered. I'm curious if it has to do with my Database.cs file?

using System.Collections.Generic;
using Todo.Models;

namespace Todo.Services
{
    public class Database
    {
        public IEnumerable<TodoItem> GetItems() => new[]
        {
            new TodoItem { Description = "Walk the dog" },
            new TodoItem { Description = "Buy some milk" },
            new TodoItem { Description = "Learn Avalonia", IsChecked = true },
        };
    }
}

using System.Collections.Generic;
using Todo.Models;

namespace Todo.Services
{
    public class Database
    {
        public IEnumerable<TodoItem> GetItems() => new[]
        {
            new TodoItem { Description = "Walk the dog" },
            new TodoItem { Description = "Buy some milk" },
            new TodoItem { Description = "Learn Avalonia", IsChecked = true },
        };
    }
}

Kouhai•8/17/23, 1:11 AM

Np!
As you can see in the sample

for(var i = Items.Count-1; i >= 0; i--)
{
    if (Items[i].IsChecked)
        Items.RemoveAt(i);
}

for(var i = Items.Count-1; i >= 0; i--)
{
    if (Items[i].IsChecked)
        Items.RemoveAt(i);
}

We decrement

(

i--

i--

) instead of incrementing it (

i++

i++

)

In your code you're incrementing

, which means

would be outside the bounds of the list!

MekOP•8/17/23, 1:11 AM

oh I didn't even notice that!

MekOP•8/17/23, 1:13 AM

ok so that fixed it, but now how can I have an empty "fake" database, or how can I use a json file instead of a "Database" to hold my entries and such. I'm still trying to learn working with json

MekOP•8/17/23, 1:16 AM

like maybe turning my Database.cs file into 2 functions for workign with json that are callable? like an add function to write to json and a delete function to remove the item(s) from json

Kouhai•8/17/23, 1:17 AM

The reason why this for loop is decrmenting is imagine this scenario
We have a list

["Walk the dog", "Buy some milk", "Learn Avalonia"]

["Walk the dog", "Buy some milk", "Learn Avalonia"]

The indices are

[0, 1, 2]

[0, 1, 2]

We want to remove "Buy some milk" and "Learn Avalonia"
If the loop is incrementing and we start at

i.e

i = 0

i = 0

We first check the 0th index it has "walk the dog" so we skip it
Increment

now is 1
We check the 1st index it has "Buy some milk" we remove it from the list, but what happens to items after it? the get shifted
So now "Learn Avalonia" after removal is at index 1
The list looks like

["Walk the dog", "Learn Avalonia"]

["Walk the dog", "Learn Avalonia"]

The indices are

[0, 1]

[0, 1]

get's incremented

now is 2
We check the 2nd index, but our list only has 0th and 1st, because it got "shrunk" after we removed the item.

Kouhai•8/17/23, 1:17 AM

This would throw an exception (error)

KKouhai The reason why this for loop is decrmenting is imagine this scenario We have a l...

MekOP•8/17/23, 1:19 AM

so we start at the end of the list instead so that we can decrement

to stay within the bounds of the list index?

Kouhai•8/17/23, 1:20 AM

Exactly!
We remove from the end so that when the list items get shifted, we stay within bounds
For saving to a json file, you would simply call

var content = JsonSerializer.Serialize(Items)

var content = JsonSerializer.Serialize(Items)

, content is a string that you can write to the file

MekOP•8/17/23, 1:27 AM

so quick question

Kouhai•8/17/23, 1:28 AM

Sure

MekOP•8/17/23, 1:28 AM

looking at the code on my repo, is there a better way I can layout the code?

MekOP•8/17/23, 1:28 AM

what I mean is

MekOP•8/17/23, 1:34 AM

I have my MainWindow.axaml file. All this file does is exist as a blank screen and it hold the

Content={Binding Content}

Content={Binding Content}

within the

<Window></Window>

<Window></Window>

tag. Then we go to the

TodoListView.axaml

TodoListView.axaml

file which has all of my screen stylings, buttons, it's where the items in the list are displayed, etc. The two buttons (Add, Delete) in this file are bound to two functions that live in separate locations. My Add buttons bound function lives within

MainWindowViewModel.cs

MainWindowViewModel.cs

file and my Delete buttons bound function lives within my

TodoListViewModel.cs

TodoListViewModel.cs

file. If I were to move them to the MainWindowViewModel and move my TodoListView.axaml stuff to my MainWindow.axaml, I'd reduce the project by 2 files. I'm fine with keeping the AddItemView and AddItemViewModel. I don't fully understand the code behind here, but I know that it's creating new items within the collection. And with my Database.cs file, is there a way that I can get rid of that file altogether, and put my json add/delete code behind in with my add and delete buttons?

Questions:

1) Would it be better to move my stuff in my TodoListView.axaml file to my MainWindow.axaml file?
2) Is there a way to re-write the code behind so that if we were to do question #1, then I can have both functions in the MainWindowViewModel instead of them living in two separate places?
3) if we do #3, can I also incorporate my json add/delete functions into the Add/Delete buttons code behind so that it's all together in one place instead of everything being spread across multiple files?

MekOP•8/17/23, 1:36 AM

To be more specific

MekOP•8/17/23, 1:38 AM

I'm just trying to find a better way to write this code so that it's easier for me to understand, and everything isn't so spread out between so many files. MVVM is awesome and I like it, but this seems a bit excessive for a simple Todo Application

Kouhai•8/17/23, 1:49 AM

Yes you can move the view and viewmodel implementation from
```
TodoListView.axaml
```
```
TodoListView.axaml
```
and
```
TodoListViewModel.cs
```
```
TodoListViewModel.cs
```
to
```
MainWindow.axaml
```
```
MainWindow.axaml
```
and
```
MainWindowViewModel.cs
```
```
MainWindowViewModel.cs
```
respectively, but the reason it's implemented that way is if you were to add more operations to the todo list view (sorting, searching, etc.) the
```
MainWindowViewModel.cs
```
```
MainWindowViewModel.cs
```
would be clutered. And switching between different views would be a bit more complex.
I'm not sure what did you mean by both functions but assuming you mean TodoList and AddItem, it's again possible but it would add more complexity to how you switch between a view for deleting and adding (Unless it everything would be in a single view).
It's possible, but using a seperate class to handle the saving/loading would be better, because you can change how the
```
database
```
```
database
```
(which in this case is a json file) behaves without affecting the View or ViewModel, you'd simply need to call the
```
Load
```
```
Load
```
or
```
Save
```
```
Save
```
method this class provide and Load/Save the database.

Unfortunately MVVM adds complexity to simple apps, but it's really awesome when you try encounter more complex situations!

MekOP•8/17/23, 1:54 AM

Yes you can move the view and viewmodel implementation from TodoListView.axaml and TodoListViewModel.cs to MainWindow.axaml and MainWindowViewModel.cs respectively, but the reason it's implemented that way is if you were to add more operations to the todo list view (sorting, searching, etc.) the MainWindowViewModel.cs would be clutered. And switching between different views would be a bit more complex.

ok so I'll leave it as is. I do want to add a date and time column to the main view so that it can start being sorted at least by date and by time (2 separate sort things).

I'm not sure what did you mean by both functions but assuming you mean TodoList and AddItem, it's again possible but it would add more complexity to how you switch between a view for deleting and adding (Unless it everything would be in a single view).

Currently my AddItems which is the function that adds the new item to the collection, lives in both the

AddItemViewModel.cs

AddItemViewModel.cs

which pushes it to the parent function which lives in

MainWindowViewModel.cs

MainWindowViewModel.cs

file. There are two separate functions for adding a new item to the collection list. Then my delete items function, which you wrote earlier in this thread, lives in the

TodoListViewModel.cs

TodoListViewModel.cs

file and I wanted to put them all together in the same file, but if it's meant to be separated like that for a reason, then I don't want to mess that up which I would assume blends in with

1.

1.

as I add complexity, it makes it less jumbled.

It's possible, but using a seperate class to handle the saving/loading would be better, because you can change how the database (which in this case is a json file) behaves without affecting the View or ViewModel, you'd simply need to call the Load or Save method this class provide and Load/Save the database.

With this being said, I like easier to use and easier to understand. I'd like to re-write my

Database.cs

Database.cs

file to handle my json operations of adding a new item to the json file, and removing the selected items from the json file.

MekOP•8/17/23, 2:01 AM

I'm just confused on how to go about implementing the changes I want. Adding Date and Time to the items so that they can be sorted by Date and Time. I can make the buttons with no problem, but the rest of it will be hard for me. This is where I want to start

MekOP•8/17/23, 2:02 AM

and I'd honestly like to switch from a dock panel back to a grid. is that plausible?

MekOP•8/17/23, 2:06 AM

I switched from DockPanel to Grid and updated the repo

Kouhai•8/17/23, 2:06 AM

The idea behind MVVM is to enforce separation of concerns, basically each part of the app (Model, View, ViewModel) handles it's own thing and you can change the underlying code for them without effecting one another that much.
You can rewrite your

Database.cs

Database.cs

to have a

Save

Save

and

Load

Load

method, when the application starts you call

Load

Load

to populate your

TodoListView

TodoListView

and when you

Add

Add

Remove

Remove

you update the Database's

TodoItem

TodoItem

list and call

Save

Save

Kouhai•8/17/23, 2:06 AM

And yes you can any container be it Grid, DockPanel, StackLayout, whatever suits your needs!

MekOP•8/17/23, 2:07 AM

You can rewrite your Database.cs to have a Save and Load method, when the application starts you call Load to populate your TodoListView and when you Add or Remove you update the Database's TodoItem list and call Save

I would like to have this, but would I need to get my sort button and having date and time added into my items first?

MMek I'm just confused on how to go about implementing the changes I want. Adding Dat...

Kouhai•8/17/23, 2:07 AM

Are Date and Time seperate here?

MekOP•8/17/23, 2:07 AM

yes so like this is where I'm confused

MekOP•8/17/23, 2:07 AM

right now I Have this

Kouhai•8/17/23, 2:08 AM

You can add to your

TodoItem

TodoItem

model, and simply bind on these two properties

public DateOnly Date { get; set; }
public TimeOnly TimeOfDay { get; set; }

public DateOnly Date { get; set; }
public TimeOnly TimeOfDay { get; set; }

MekOP•8/17/23, 2:11 AM

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d" d:DesignWidth="200" d:DesignHeight="300"
             x:Class="Todo.Views.TodoListView">

    <Grid
        RowDefinitions="Auto,*,Auto,Auto"
        ColumnDefinitions="*,*"
        Background="#000000">

    <Grid.Styles>
        <Style Selector="Button">
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="Foreground" Value="#00B71C" />
        <Setter Property="BorderBrush" Value="#00B71C" />
        <Setter Property="BorderThickness" Value="2" />
            <Setter Property="CornerRadius" Value="20" />
        </Style>

        <Style Selector="CheckBox">
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="Foreground" Value="#00B71C" />
        <Setter Property="BorderBrush" Value="#00B71C" />
        <Setter Property="BorderThickness" Value="2" />
            <Setter Property="CornerRadius" Value="10" />
        </Style>
    </Grid.Styles>
        
    <Button Grid.Row="0" Content="Sort" />
        
    <ItemsControl Items="{Binding Items}" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2">
        <ItemsControl.ItemTemplate>
        <DataTemplate>
            <CheckBox Margin="4"
                IsChecked="{Binding IsChecked}"
                Content="{Binding Description}"/>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>

    <Button Grid.Row="2"
        Grid.Column="0" 
        Grid.ColumnSpan="2"
        Command="{Binding $parent[Window].DataContext.AddItem}"
        Content="New Item"/>

    <Button Grid.Row="3"
        Grid.Column="0" 
        Grid.ColumnSpan="2"
        Command="{Binding RemoveSelectedItems}"
            Content="Delete"/>
    </Grid>
</UserControl>

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d" d:DesignWidth="200" d:DesignHeight="300"
             x:Class="Todo.Views.TodoListView">

    <Grid
        RowDefinitions="Auto,*,Auto,Auto"
        ColumnDefinitions="*,*"
        Background="#000000">

    <Grid.Styles>
        <Style Selector="Button">
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="Foreground" Value="#00B71C" />
        <Setter Property="BorderBrush" Value="#00B71C" />
        <Setter Property="BorderThickness" Value="2" />
            <Setter Property="CornerRadius" Value="20" />
        </Style>

        <Style Selector="CheckBox">
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="Foreground" Value="#00B71C" />
        <Setter Property="BorderBrush" Value="#00B71C" />
        <Setter Property="BorderThickness" Value="2" />
            <Setter Property="CornerRadius" Value="10" />
        </Style>
    </Grid.Styles>
        
    <Button Grid.Row="0" Content="Sort" />
        
    <ItemsControl Items="{Binding Items}" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2">
        <ItemsControl.ItemTemplate>
        <DataTemplate>
            <CheckBox Margin="4"
                IsChecked="{Binding IsChecked}"
                Content="{Binding Description}"/>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>

    <Button Grid.Row="2"
        Grid.Column="0" 
        Grid.ColumnSpan="2"
        Command="{Binding $parent[Window].DataContext.AddItem}"
        Content="New Item"/>

    <Button Grid.Row="3"
        Grid.Column="0" 
        Grid.ColumnSpan="2"
        Command="{Binding RemoveSelectedItems}"
            Content="Delete"/>
    </Grid>
</UserControl>

I am confused on how I'll get 3 separate columns within my ItemsControl so that I have a column for the Date, one for Time, and one for the note itself

MekOP•8/17/23, 2:13 AM

I need to get 3 columns within my ItemsControl, and my sort button needs to have a pop-open window with select boxes that will show a check box list of ways the user can sort their todo items, and then an update button within that popup box that will refresh the screen and display according to the new parameters

MekOP•8/17/23, 2:14 AM

with that being said, I'm assuming that I'll need a

SortView.axaml

SortView.axaml

and a

SortViewModel.cs

SortViewModel.cs

file?

Kouhai•8/17/23, 2:18 AM

You can have something like

<ItemsControl Items="{Binding Items}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
++      <StackPanel Orientation="Horizontal">
                <CheckBox Margin="4"
                        IsChecked="{Binding IsChecked}"
                        Content="{Binding Description}"/>
++        <Label Margin="4" Foreground="AliceBlue" Content="{Binding Date}"/>
++      </StackPanel>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

<ItemsControl Items="{Binding Items}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
++      <StackPanel Orientation="Horizontal">
                <CheckBox Margin="4"
                        IsChecked="{Binding IsChecked}"
                        Content="{Binding Description}"/>
++        <Label Margin="4" Foreground="AliceBlue" Content="{Binding Date}"/>
++      </StackPanel>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

But if you want something like a table you could use a DataGrid, which is meant for tabular data

Kouhai•8/17/23, 2:21 AM

Sry, I'll be afk for a bit!

MekOP•8/17/23, 2:21 AM

well I've thought about it 2 ways.

Way #1

Sort button with a pop out screen. This pop out will show a list of checkboxes that have a different way to sort the list of todo's with an update button to reload the screen with the new sort parameters and show the information accordingly

Way #2

Clickable column names. This will look like

Date | Time | Todo
-----------------------------------
xxxx | xxxx | xxxxxxxxxxxxxxxxx

Date | Time | Todo
-----------------------------------
xxxx | xxxx | xxxxxxxxxxxxxxxxx

and when you click the Date, it sorts the information by the date column and so on

MekOP•8/17/23, 3:22 AM

so something like this, but with better alignment lol I can't figure out the alignment with the columns, but I'm sure it's not a grid?

<Border BorderBrush="#000000" BorderThickness="2">
    <Grid RowDefinitions="Auto, *, Auto">
        <Border Grid.Row="0" BorderBrush="Green" BorderThickness="2" Margin="5">
        <Grid ColumnDefinitions="Auto, *, *">
            <Button Grid.Column="0" HorizontalAlignment="Center" HorizontalContentAlignment="Center" Content="Date" />
        <Button Grid.Column="1" HorizontalAlignment="Center" HorizontalContentAlignment="Center" Content="Time" />
        <Label Grid.Column="2" HorizontalAlignment="Center" HorizontalContentAlignment="Center" VerticalAlignment="Center" VerticalContentAlignment="Center" Content="Todo Note" />
        </Grid>
    </Border>

    <Border Grid.Row="1" BorderBrush="Black" BorderThickness="2" Margin="5">
        <Grid ColumnDefinitions="Auto, *, *" RowDefinitions="Auto, Auto, Auto">
            <CheckBox Margin=5 Grid.Row="0" Grid.Column="0" Content="12/12/2023 12:42 PM Some Todo Item" />
        </Grid>
    </Border>

    <Border Grid.Row="2" BorderBrush="Orange" BorderThickness="2" Margin="5">
        <Grid Grid.Row="2" RowDefinitions="*, *">
            <Button Grid.Row="0" HorizontalAlignment="Center" HorizontalContentAlignment="Center" Content="New Item" Width="250"/>
        <Button Grid.Row="1" HorizontalAlignment="Center" HorizontalContentAlignment="Center" Content="Delete Items" Width="250"/>
        </Grid>
    </Border>
    </Grid>
</Border>

<Border BorderBrush="#000000" BorderThickness="2">
    <Grid RowDefinitions="Auto, *, Auto">
        <Border Grid.Row="0" BorderBrush="Green" BorderThickness="2" Margin="5">
        <Grid ColumnDefinitions="Auto, *, *">
            <Button Grid.Column="0" HorizontalAlignment="Center" HorizontalContentAlignment="Center" Content="Date" />
        <Button Grid.Column="1" HorizontalAlignment="Center" HorizontalContentAlignment="Center" Content="Time" />
        <Label Grid.Column="2" HorizontalAlignment="Center" HorizontalContentAlignment="Center" VerticalAlignment="Center" VerticalContentAlignment="Center" Content="Todo Note" />
        </Grid>
    </Border>

    <Border Grid.Row="1" BorderBrush="Black" BorderThickness="2" Margin="5">
        <Grid ColumnDefinitions="Auto, *, *" RowDefinitions="Auto, Auto, Auto">
            <CheckBox Margin=5 Grid.Row="0" Grid.Column="0" Content="12/12/2023 12:42 PM Some Todo Item" />
        </Grid>
    </Border>

    <Border Grid.Row="2" BorderBrush="Orange" BorderThickness="2" Margin="5">
        <Grid Grid.Row="2" RowDefinitions="*, *">
            <Button Grid.Row="0" HorizontalAlignment="Center" HorizontalContentAlignment="Center" Content="New Item" Width="250"/>
        <Button Grid.Row="1" HorizontalAlignment="Center" HorizontalContentAlignment="Center" Content="Delete Items" Width="250"/>
        </Grid>
    </Border>
    </Grid>
</Border>

MekOP•8/17/23, 3:30 AM

MMek so something like this, but with better alignment lol I can't figure out the ali...

Kouhai•8/17/23, 5:20 AM

Grid would work nicely for this, but you could also just use DataGrid package if you want something like a table

MekOP•8/17/23, 5:24 AM

how would I use the DataGrid?

Kouhai•8/17/23, 5:25 AM

You'd need to install it first
https://docs.avaloniaui.net/docs/controls/datagrid/
And you can have something like this

<DataGrid  SelectionMode="Extended" AutoGenerateColumns="False" Items="{Binding Items}" >
  <DataGrid.Columns>
    <DataGridTextColumn Header="Description"  Binding="{Binding Description}"/>
    <DataGridTextColumn Header="Date" Binding="{Binding Date}" />
  </DataGrid.Columns>
</DataGrid>

<DataGrid  SelectionMode="Extended" AutoGenerateColumns="False" Items="{Binding Items}" >
  <DataGrid.Columns>
    <DataGridTextColumn Header="Description"  Binding="{Binding Description}"/>
    <DataGridTextColumn Header="Date" Binding="{Binding Date}" />
  </DataGrid.Columns>
</DataGrid>

You can add more columns in

<DataGrid.Columns>

<DataGrid.Columns>

DataGrid | Avalonia UI

The DataGrid control is a control that displays data in a customizable grid.

Kouhai•8/17/23, 5:26 AM

Make sure to install a version matching your Avalonia's package version so 0.10.21

MekOP•8/17/23, 5:26 AM

and those few lines of code would iterate through all of the entries and display them correctly?