maui-linux-samples/TodoApp/TodoListPage.xaml

130 lines
6.2 KiB
XML

<?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="#F5F7FA">
<ContentPage.Resources>
<ResourceDictionary>
<!-- Colors -->
<Color x:Key="PrimaryColor">#5C6BC0</Color>
<Color x:Key="PrimaryDark">#3949AB</Color>
<Color x:Key="AccentColor">#26A69A</Color>
<Color x:Key="TextPrimary">#212121</Color>
<Color x:Key="TextSecondary">#757575</Color>
<Color x:Key="CardBackground">#FFFFFF</Color>
<Color x:Key="DividerColor">#E0E0E0</Color>
<Color x:Key="CompletedColor">#9E9E9E</Color>
<!-- 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" 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="{StaticResource TextSecondary}"
HorizontalOptions="Center" />
<Label Text="Tap '+ Add' to create your first task"
FontSize="14"
TextColor="{StaticResource TextSecondary}"
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="{StaticResource CardBackground}"
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="{Binding IsCompleted, Converter={StaticResource CompletedToColorConverter}, ConverterParameter=indicator}"
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 -->
<Border Grid.Row="1"
BackgroundColor="{StaticResource PrimaryColor}"
StrokeThickness="0"
Padding="24,14"
Margin="0">
<Grid ColumnDefinitions="Auto,Auto" ColumnSpacing="6" HorizontalOptions="Center" VerticalOptions="Center">
<Label Grid.Column="0"
Text="Tasks:"
FontSize="15"
TextColor="White" />
<Label Grid.Column="1"
x:Name="StatsLabel"
FontSize="15"
TextColor="White"
Opacity="0.9" />
</Grid>
</Border>
</Grid>
</ContentPage>