Add a page for displaying Todo details

This commit is contained in:
Manuel Thalmann 2024-06-06 23:55:29 +02:00
parent 468f66ab59
commit b00dfc6f5b
8 changed files with 108 additions and 1 deletions

View file

@ -1,10 +1,13 @@
namespace TodoDetails
using TodoDetails.View;
namespace TodoDetails
{
public partial class AppShell : Shell
{
public AppShell()
{
InitializeComponent();
Routing.RegisterRoute(nameof(TodoDetailsPage), typeof(TodoDetailsPage));
}
}
}

View file

@ -23,6 +23,10 @@
<DataTemplate x:DataType="model:Todo">
<Grid Padding="10">
<Border HeightRequest="125">
<Border.GestureRecognizers>
<TapGestureRecognizer Command="{Binding Source={RelativeSource AncestorType={x:Type viewmodel:TodosViewModel}}, Path=GoToDetailsCommand}"
CommandParameter="{Binding .}"/>
</Border.GestureRecognizers>
<Grid Padding="0">
<Grid.ColumnDefinitions>
<ColumnDefinition/>

View file

@ -1,5 +1,6 @@
using Microsoft.Extensions.Logging;
using TodoDetails.Services;
using TodoDetails.View;
using TodoDetails.ViewModel;
namespace TodoDetails
@ -23,6 +24,8 @@ namespace TodoDetails
builder.Services.AddSingleton<TodoService>();
builder.Services.AddSingleton<TodosViewModel>();
builder.Services.AddSingleton<MainPage>();
builder.Services.AddTransient<TodoDetailsViewModel>();
builder.Services.AddTransient<TodoDetailsPage>();
return builder.Build();
}

View file

@ -67,4 +67,10 @@
<PackageReference Include="Microsoft.Extensions.Logging.Debug" Version="8.0.0" />
</ItemGroup>
<ItemGroup>
<MauiXaml Update="View\TodoDetailsPage.xaml">
<Generator>MSBuild:Compile</Generator>
</MauiXaml>
</ItemGroup>
</Project>

View file

@ -0,0 +1,50 @@
<?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:viewmodel="clr-namespace:TodoDetails.ViewModel"
x:Class="TodoDetails.View.TodoDetailsPage"
x:DataType="viewmodel:TodoDetailsViewModel"
Title="{Binding Todo.Title}">
<ScrollView>
<Grid Padding="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Entry Text="{Binding Todo.Title}"
FontSize="20"
Grid.ColumnSpan="2"/>
<Picker Grid.Row="1"
Grid.ColumnSpan="2"
SelectedIndex="0">
<Picker.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>Default</x:String>
<x:String>XAML</x:String>
<x:String>MVVM</x:String>
<x:String>Database</x:String>
</x:Array>
</Picker.ItemsSource>
</Picker>
<HorizontalStackLayout Grid.Row="2"
VerticalOptions="Center"
Spacing="20">
<Label Text="Is Done"
VerticalTextAlignment="Center"/>
<CheckBox IsChecked="{Binding Todo.IsDone}"/>
</HorizontalStackLayout>
<DatePicker Date="{Binding Todo.DueDate}"
Grid.Row="2"
Grid.Column="1"/>
<Editor Text="{Binding Todo.Description}"
Grid.Row="3"
Grid.ColumnSpan="2"/>
</Grid>
</ScrollView>
</ContentPage>

View file

@ -0,0 +1,12 @@
using TodoDetails.ViewModel;
namespace TodoDetails.View;
public partial class TodoDetailsPage : ContentPage
{
public TodoDetailsPage(TodoDetailsViewModel viewModel)
{
InitializeComponent();
BindingContext = viewModel;
}
}

View file

@ -0,0 +1,20 @@
using CommunityToolkit.Mvvm.ComponentModel;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using TodoDetails.Model;
namespace TodoDetails.ViewModel
{
[QueryProperty(nameof(Model.Todo), nameof(Todo))]
public partial class TodoDetailsViewModel : BaseViewModel
{
[ObservableProperty]
Todo todo;
public TodoDetailsViewModel()
{ }
}
}

View file

@ -8,6 +8,7 @@ using System.Text;
using System.Threading.Tasks;
using TodoDetails.Model;
using TodoDetails.Services;
using TodoDetails.View;
namespace TodoDetails.ViewModel
{
@ -63,6 +64,14 @@ namespace TodoDetails.ViewModel
{
return;
}
await Shell.Current.GoToAsync(
nameof(TodoDetailsPage),
true,
new Dictionary<string, object>()
{
{ nameof(Todo), todo }
});
}
}
}