iT邦幫忙

2022 iThome 鐵人賽

DAY 19
0
Software Development

30天學習.Net MAUI系列 第 19

19.實作Todo (四)

  • 分享至 

  • xImage
  •  

今天我們來將done功能給加入到我們的App裡,並順便筆記複習一下


修改一下我們的Todo\Pages\TodoPage.xaml

...
   <VerticalStackLayout Margin="10">
        <Label 
            Text="Welcome to .NET MAUI!"
            VerticalOptions="Center" 
            HorizontalOptions="Center" />
        <Button Text="Go to Add Page" Clicked="ButtonClicked"/>
        <CollectionView ItemsSource="{Binding Todos}">
            <CollectionView.ItemTemplate>
                <DataTemplate x:DataType="models:TodoItemModel">
                    <Frame>
                        <HorizontalStackLayout Spacing="10" HorizontalOptions="Center">
                            <Label Text="{Binding Title}">
                                <Label.Triggers>
                                    <DataTrigger TargetType="Label"
                                                 Binding="{Binding IsDone}"
                                                 Value="True">
                                        <Setter Property="TextColor"
                                                Value="Gray" />
                                    </DataTrigger>
                                </Label.Triggers>
                            </Label>
                            <Button Text="Delete" 
                                    Command="{Binding Source={x:RelativeSource AncestorType={x:Type viewModels:TodoListViewModel}},Path=DeleteTodoCommand}" 
                                    CommandParameter="{Binding .}"/>
                            <Button Text="Edit" 
                                    Command="{Binding Source={x:RelativeSource AncestorType={x:Type viewModels:TodoListViewModel}},Path=EditTodoCommand}" 
                                    CommandParameter="{Binding .}"/>
                        </HorizontalStackLayout>
                    </Frame>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </VerticalStackLayout>
	...

並在Todo\Pages\AddTodoPage.xaml加入我們的Done

<?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:models="clr-namespace:Todo.Models"
             x:Class="Todo.AddTodoPage"
             Title="AddTodoPage">
    <VerticalStackLayout Padding="10">
        <Label 
            Text="Add Todo"
            VerticalOptions="Center" 
            HorizontalOptions="Center" />
        <Entry Placeholder="Add Todo" Text="{Binding TodoItem.Title}"/>
        <CheckBox IsChecked="{Binding TodoItem.IsDone}" />
        <Button Text="Add Todo Item" Command="{Binding AddUpdateTodoCommand}" />
    </VerticalStackLayout>
</ContentPage>

接著進行測試
app-test.gif


今天將Todo的done功能給加入,並且當完成時文字變灰色


上一篇
18.實作Todo (三)
下一篇
關於.NET MAUI Navigation (一)
系列文
30天學習.Net MAUI30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言