maui-linux-samples/TodoApp/Pages/TodoListPage.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"
             xmlns:local="clr-namespace:TodoApp"
             x:Class="TodoApp.TodoListPage"
             Title="My Tasks"
             BackgroundColor="{AppThemeBinding Light={StaticResource PageBackgroundLight}, Dark={StaticResource PageBackgroundDark}}">

    <ContentPage.Resources>
        <ResourceDictionary>
            <!-- Converters -->
            <local:AlternatingRowColorConverter x:Key="AlternatingRowColorConverter" />
            <local:CompletedToColorConverter x:Key="CompletedToColorConverter" />
            <local:CompletedToTextDecorationsConverter x:Key="CompletedToTextDecorationsConverter" />
            <local:CompletedToOpacityConverter x:Key="CompletedToOpacityConverter" />
        </ResourceDictionary>
    </ContentPage.Resources>

    <ContentPage.ToolbarItems>
        <ToolbarItem Text="Add"
                     IconImageSource="add_white.svg"
                     Clicked="OnAddClicked" />
    </ContentPage.ToolbarItems>

    <Grid RowDefinitions="*,Auto" Padding="0">

        <!-- Task List -->
        <CollectionView Grid.Row="0"
                        x:Name="TodoCollectionView"
                        SelectionMode="Single"
                        SelectionChanged="OnSelectionChanged"
                        VerticalOptions="FillAndExpand"
                        BackgroundColor="Transparent"
                        Margin="16,16,16,0">

            <CollectionView.EmptyView>
                <VerticalStackLayout VerticalOptions="Center"
                                     HorizontalOptions="Center"
                                     Padding="40">
                    <Label Text="No tasks yet"
                           FontSize="22"
                           TextColor="{AppThemeBinding Light={StaticResource TextSecondaryLight}, Dark={StaticResource TextSecondaryDark}}"
                           HorizontalOptions="Center" />
                    <Label Text="Tap '+ Add' to create your first task"
                           FontSize="14"
                           TextColor="{AppThemeBinding Light={StaticResource TextSecondaryLight}, Dark={StaticResource TextSecondaryDark}}"
                           HorizontalOptions="Center"
                           Margin="0,8,0,0" />
                </VerticalStackLayout>
            </CollectionView.EmptyView>

            <CollectionView.ItemTemplate>
                <DataTemplate x:DataType="local:TodoItem">
                    <!-- Card-style item -->
                    <Grid Padding="0,6" BackgroundColor="Transparent">
                        <Border StrokeThickness="0"
                                BackgroundColor="{AppThemeBinding Light=#FFFFFF, Dark=#1E1E1E}"
                                Padding="16,14"
                                Opacity="{Binding IsCompleted, Converter={StaticResource CompletedToOpacityConverter}}">
                            <Border.StrokeShape>
                                <RoundRectangle CornerRadius="12" />
                            </Border.StrokeShape>

                            <Grid ColumnDefinitions="Auto,*" ColumnSpacing="16">
                                <!-- Completion indicator -->
                                <Border Grid.Column="0"
                                        WidthRequest="8"
                                        HeightRequest="44"
                                        Margin="0"
                                        BackgroundColor="#26A69A"
                                        VerticalOptions="Center">
                                    <Border.StrokeShape>
                                        <RoundRectangle CornerRadius="4" />
                                    </Border.StrokeShape>
                                </Border>

                                <!-- Content -->
                                <VerticalStackLayout Grid.Column="1"
                                                     Spacing="4"
                                                     VerticalOptions="Center">
                                    <!-- Title -->
                                    <Label Text="{Binding Title}"
                                           FontSize="16"
                                           TextColor="{Binding IsCompleted, Converter={StaticResource CompletedToColorConverter}}"
                                           TextDecorations="{Binding IsCompleted, Converter={StaticResource CompletedToTextDecorationsConverter}}" />

                                    <!-- Notes preview -->
                                    <Label Text="{Binding Notes}"
                                           FontSize="13"
                                           TextColor="{Binding IsCompleted, Converter={StaticResource CompletedToColorConverter}, ConverterParameter=notes}"
                                           MaxLines="2"
                                           LineBreakMode="TailTruncation" />
                                </VerticalStackLayout>
                            </Grid>
                        </Border>
                    </Grid>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>

        <!-- Footer Stats with Theme Toggle -->
        <Border Grid.Row="1"
                BackgroundColor="{StaticResource PrimaryColor}"
                StrokeThickness="0"
                Padding="20,10"
                Margin="0">
            <Grid ColumnDefinitions="*,Auto" VerticalOptions="Center">
                <!-- Stats on the left -->
                <Label Grid.Column="0"
                       x:Name="StatsLabel"
                       FontSize="15"
                       TextColor="White"
                       VerticalOptions="Center"
                       LineBreakMode="NoWrap" />

                <!-- Theme Toggle on the right -->
                <ImageButton Grid.Column="1"
                             x:Name="ThemeToggleButton"
                             Source="light_mode_white.svg"
                             WidthRequest="32"
                             HeightRequest="32"
                             BackgroundColor="Transparent"
                             Clicked="OnThemeToggleClicked"
                             VerticalOptions="Center" />
            </Grid>
        </Border>

    </Grid>
</ContentPage>