Microsoft Learn

Prerequisites

Before you begin, ensure you have the following installed:

• Visual Studio 2022 (with .NET MAUI workload)
• .NET SDK (latest version)
• (Optional) An Android emulator or physical device for testing
• (Optional) An iOS simulator or physical device for testing

If you haven't set up your development environment yet, please refer to the MAUI Setup Guide.

Step 1: Create a New .NET MAUI Project

Launch Visual Studio and create a new project. Select the .NET MAUI App template and name your project TodoApp.

Choose a location for your project and click Create.

Step 2: Design the User Interface

Open the MainPage.xaml file. This is where we'll define the UI for our To-Do app. We'll use XAML to lay out the elements.

Replace the existing content with the following XAML:

<?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="TodoApp.MainPage"
             Title="My To-Do List">

    <ScrollView>
        <VerticalStackLayout Padding="20" Spacing="15">
            <Label Text="Add a New To-Do"
                   FontSize="20"
                   FontAttributes="Bold"
                   HorizontalOptions="Center"/>

            <Entry x:Name="todoEntry"
                   Placeholder="Enter your task here..."
                   Margin="0,10,0,0"/>

            <Button Text="Add Task"
                    Clicked="OnAddTaskClicked"
                    BackgroundColor="{StaticResource Primary}"
                    TextColor="White"
                    FontSize="16"/>

            <Label Text="Your Tasks:"
                   FontSize="20"
                   FontAttributes="Bold"
                   Margin="0,20,0,10"/>

            <CollectionView x:Name="todoCollectionView"
                            ItemsSource="{Binding Items}"
                            HeightRequest="300">
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <StackLayout Orientation="Horizontal" Padding="10" BackgroundColor="{StaticResource Secondary}" Margin="0,5" CornerRadius="5">
                            <CheckBox IsChecked="{Binding IsCompleted}" Color="{StaticResource Primary}"/>
                            <Label Text="{Binding Text}"
                                   FontSize="16"
                                   VerticalOptions="Center"
                                   FlexLayout.Grow="1"/>
                            <Button Text="Delete"
                                    Clicked="OnDeleteItemClicked"
                                    CommandParameter="{Binding .}"
                                    BackgroundColor="#dc3545"
                                    TextColor="White"
                                    FontSize="12"/>
                        </StackLayout>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

Step 3: Implement the Code-Behind Logic

Navigate to MainPage.xaml.cs and add the C# code to handle user interactions and manage the To-Do items.

using Microsoft.Maui.Controls;
using System.Collections.ObjectModel;

namespace TodoApp
{
    public partial class MainPage : ContentPage
    {
        public ObservableCollection<TodoItem> Items { get; set; }

        public MainPage()
        {
            InitializeComponent();
            Items = new ObservableCollection<TodoItem>();
            BindingContext = this;
        }

        private void OnAddTaskClicked(object sender, EventArgs e)
        {
            if (!string.IsNullOrWhiteSpace(todoEntry.Text))
            {
                Items.Add(new TodoItem { Text = todoEntry.Text });
                todoEntry.Text = string.Empty;
            }
        }

        private void OnDeleteItemClicked(object sender, EventArgs e)
        {
            var button = sender as Button;
            if (button?.CommandParameter is TodoItem itemToDelete)
            {
                Items.Remove(itemToDelete);
            }
        }
    }

    public class TodoItem
    {
        public string Text { get; set; }
        public bool IsCompleted { get; set; } = false;
    }
}

Note: Ensure you have a TodoItem class defined, as shown above, to represent each task.

Step 4: Run the Application

Select your desired target platform (e.g., Windows Machine, Android Emulator) and click the Run button in Visual Studio.

You should now see your To-Do list app running. You can add new tasks, mark them as complete, and delete them.