From 49190e4224e69484ceea46a4fa70e49900a5348c Mon Sep 17 00:00:00 2001
From: "swain.liu" <zjdangge@outlook.com>
Date: Sun, 25 May 2025 23:01:35 +0800
Subject: [PATCH 1/2] Update the theme mode, remove images and converters

Add the `ThemeMode="System"` attribute in `App.xaml` and simplify the resource definition.
Delete the `BooleanToImageConverter.cs` file and its content. Remove the `completed.png` and `incomplete.png` image files.
Replace the image display logic with a `TextBlock` in `MainWindow.xaml`, and update the `TextBox` of `NewTodoItemTitle` to support instant updates.
Remove the references to the deleted images in the project file while keeping other settings unchanged.
---
 samples/todoapp/TodoApp.WPF/App.xaml          |   6 ++--
 .../Converters/BooleanToImageConverter.cs     |  32 ------------------
 .../todoapp/TodoApp.WPF/Images/completed.png  | Bin 1102 -> 0 bytes
 .../todoapp/TodoApp.WPF/Images/incomplete.png | Bin 297 -> 0 bytes
 samples/todoapp/TodoApp.WPF/MainWindow.xaml   |  21 ++++++------
 .../todoapp/TodoApp.WPF/TodoApp.WPF.csproj    |  10 ------
 6 files changed, 13 insertions(+), 56 deletions(-)
 delete mode 100644 samples/todoapp/TodoApp.WPF/Converters/BooleanToImageConverter.cs
 delete mode 100644 samples/todoapp/TodoApp.WPF/Images/completed.png
 delete mode 100644 samples/todoapp/TodoApp.WPF/Images/incomplete.png

diff --git a/samples/todoapp/TodoApp.WPF/App.xaml b/samples/todoapp/TodoApp.WPF/App.xaml
index 1acf29e3..bda5cc8d 100644
--- a/samples/todoapp/TodoApp.WPF/App.xaml
+++ b/samples/todoapp/TodoApp.WPF/App.xaml
@@ -2,7 +2,7 @@
              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:local="clr-namespace:TodoApp.WPF"
-             StartupUri="MainWindow.xaml">
-    <Application.Resources>
-    </Application.Resources>
+             StartupUri="MainWindow.xaml"
+             ThemeMode="System">
+    <Application.Resources />
 </Application>
diff --git a/samples/todoapp/TodoApp.WPF/Converters/BooleanToImageConverter.cs b/samples/todoapp/TodoApp.WPF/Converters/BooleanToImageConverter.cs
deleted file mode 100644
index 3931eaf3..00000000
--- a/samples/todoapp/TodoApp.WPF/Converters/BooleanToImageConverter.cs
+++ /dev/null
@@ -1,32 +0,0 @@
-// Licensed to the .NET Foundation under one or more agreements.
-// The .NET Foundation licenses this file to you under the MIT license.
-// See the LICENSE file in the project root for more information.
-
-using System.Globalization;
-using System.Windows.Data;
-using System.Windows.Media.Imaging;
-
-namespace TodoApp.WPF.Converters;
-
-/// <summary>
-/// A converter to convert the boolean for IsComplete into one of two images.
-/// </summary>
-public class BooleanToImageConverter : IValueConverter
-{
-    private const string baseUri = "pack://application:,,,/Images";
-
-    public object? Convert(object value, Type targetType, object parameter, CultureInfo culture)
-    {
-        if (value is bool booleanValue)
-        {
-            return new BitmapImage(new Uri(booleanValue ? $"{baseUri}/completed.png" : $"{baseUri}/incomplete.png"));
-        }
-
-        return null;
-    }
-
-    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
-    {
-        throw new NotImplementedException();
-    }
-}
diff --git a/samples/todoapp/TodoApp.WPF/Images/completed.png b/samples/todoapp/TodoApp.WPF/Images/completed.png
deleted file mode 100644
index 8ac0e7f1a52185ce9b9c909c958f3ceeed3f4413..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1102
zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDA1|-9oezpTCmUKs7M+SzC{oH>NS%G|oWRD<U
z28Jp%28M<f28Lfip@tU>45dJguM!v-tY$DUh!@P+6=(yLU`z6LcLCBs@Y8vBJ&@uo
z@Q5sCVBk9f!i-b3`J@>bn6*7!978hhy`6d6FW6C}&0cW}o7CFQ2_}JhwTygU4@~t}
zsAUtF=WxX%XG*q?9gB-V4Ric~!>v_|S(=Vz^ty2-tS~>?JyW*)+Puu~^K4VI-^}+>
zm>c>3*Y!7+>l*cT{n%f4NZ6m>fGg%|y*|V92FBR`!aq3nu*Na?H$HbTe$A)B$bEqQ
zfktBG`dsfw4tr)D#&*6#sg_q_jy@KOXWUmIpywT1T+Xw1*YX^uZw;vlQWDH;jdrnY
zjfJt>7u~*9k#%c&_#7599X@-;%?|ZU`|1+7Zfq&Y%b0(!>R;zUPv#lV&wD*?vP<wQ
zp4s%_ld8|*XT}95!}%Gf2Npa0s+=%wN0LG<@0{-%b_X^*<NKY(G<jXi^1#Q@>qO=X
z$n!bXby{WJ^y_JFdLgj?@Ub>+m*+=<f+h)F^v&Am+;sYY?8n=>i{?(xI3B04D`Z(@
zZdB*}t9I{N>&`PqI~{h4xg>YRQZ>iscH&3Jm2I!qckhy2yH@vD>qEJdW}4w2jT#se
z;;-}{Q{1oFGtF2){=viyWAWn$lM_wmPONB<yqKrkC%kiJPpXRD2F~rZqQ@_qCzhBg
ze`Ii8^!K{OxjN3pbC%wf`M9rdbw$IT4Vgc<7OZ+*w$(w}t>Hb}$MVM<g}e*y3ask-
zCBI_n_4M=X1yW8$Lf(Z&4G+9qZvPbEFA!|^lu4J|${P4hLr!LT;LeF_BW~Sn`k*S8
z5c=UxNAi>>8i`zorvG3nP}q?qtLoFfbEVkZXx4{XazQfB6sqRjbBR4LnPs9|job~f
zn(vbZX6Tu`<qLYKaH)fRhi;Afz6%Z}(ia_4`ERjK4Ew`!@$8moP9<EQm)2P<JrK4b
z_Eq<~7SWI_=VhT*f=3KKxc$gtx_(LMdWYWyE3N7W+`==2k9FIfs5X4=D!t;3<GH!B
zWU>yOGOTA=^Vsm@?Bnz9+;v)e({qy;YwqUUhcVaf_AU~ix_U~nlE&{9)^B)T*_bS;
zwpjjOfAJ>i)h^{XKFo;!a`UsAPm<q}WxAz7PaG#N>bS4IOzQZLBO-2`TaTXJ96V>!
z;@n`{Pd{tYWEFp%iMsHWeMS1U@&m?Kj9+{IYf8TcOvu+iO3yVh*KS<Vy%d<2R7+eV
zN>UO_QmvAUQh^kMk%5tcu7QQFfpLhDk(IHfm65Twfq|8Q!S28BJWw>`=BH$)RpQog
zYC+f+paw~h4Z-<oCFO}lsSM@i<$9TU*~Q6;1*v-ZMd`EO*+>BuF?hQAxvX<aXaWE^
CL&<ai

diff --git a/samples/todoapp/TodoApp.WPF/Images/incomplete.png b/samples/todoapp/TodoApp.WPF/Images/incomplete.png
deleted file mode 100644
index a715fd31bb0fe95163f7dbeb0ab0d22decc88d0f..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 297
zcmV+^0oMMBP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00001b5ch_0Itp)
z=>Px#<4Ht8R5(wqlQB|4K@5h!KSKo!o&e6FQd`mJ1w4e64Hb=*hu{LxP*H=PLr(w$
zHZqB`PoIFuFmIOaHko|+H=AD^o|e!M)B|ci=?%mrh<jkUTcZ7oMxa~ZL-6eQB;^h3
z1v~(Ch;a~iW!*18*c;FeybH|#QI<m2!e+pG;GGmG0OGrI;7wqCq__+>gsn;?3D6R@
zIMMkpvrrQFg@neSo4^|<I`5^0ts$lo_9=LByk7-i*dX9B0V41#;I#?>xD@ts7C`P3
vGKZM`jptaTV)$9ByfsFKnRa%dlAXT*)faV<#&%Hq00000NkvXXu0mjf^V@n-

diff --git a/samples/todoapp/TodoApp.WPF/MainWindow.xaml b/samples/todoapp/TodoApp.WPF/MainWindow.xaml
index 4e006553..7445fc1f 100644
--- a/samples/todoapp/TodoApp.WPF/MainWindow.xaml
+++ b/samples/todoapp/TodoApp.WPF/MainWindow.xaml
@@ -4,15 +4,15 @@
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         xmlns:local="clr-namespace:TodoApp.WPF"
-        xmlns:conv="clr-namespace:TodoApp.WPF.Converters"
         mc:Ignorable="d"
         Title="MainWindow" Height="420" Width="800"
         ResizeMode="CanMinimize">
     <Window.Resources>
-        <conv:BooleanToImageConverter x:Key="BooleanToImageConverter" />
-
         <DataTemplate x:Key="CompletedIconTemplate">
-            <Image Width="16" Height="16" Source="{Binding Path=IsComplete, Converter={StaticResource BooleanToImageConverter}}" />
+            <Grid>
+                <TextBlock FontFamily="Segoe Fluent Icons,Segoe MDL2 Assets" Text="&#xEC61;" Visibility="{Binding Path=IsComplete, Converter={StaticResource BooleanToVisibilityConverter}}" />
+                <TextBlock FontFamily="Segoe Fluent Icons,Segoe MDL2 Assets" Text="&#xEA3A;" />
+            </Grid>
         </DataTemplate>
     </Window.Resources>
     
@@ -23,7 +23,7 @@
                 <ListView
                     x:Name="TodoListView"
                     ItemsSource="{Binding Items}"
-                    Height="300"
+                    Height="270"
                     Margin="5"
                     VerticalAlignment="Top">
                     <ListView.View>
@@ -42,27 +42,26 @@
         </GroupBox>
 
         <GroupBox Header="Add Task">
-            <StackPanel Margin="5">
-                <DockPanel Height="26">
-                    <TextBox x:Name="NewTodoItemTitle"
+            <StackPanel Margin="5" Height="30" Orientation="Horizontal">
+                <TextBox x:Name="NewTodoItemTitle"
                              Width="560"
                              HorizontalAlignment="Left"
                              Margin="5,0,5,0"
-                             Text="{Binding AddItemTitle, Mode=TwoWay}"
+                             Text="{Binding AddItemTitle, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                              VerticalContentAlignment="Center"/>
                     <Button x:Name="AddTodoItemButton"
                             Width="75"
                             HorizontalAlignment="Right"
                             Content="Add" 
                             Margin="5,0,5,0"
+                            IsDefault="True"
                             Command="{Binding AddItemCommand}"/>
-                    <Button x:Name="RefreshTodoItemsButton"
+                <Button x:Name="RefreshTodoItemsButton"
                             Width="75"
                             HorizontalAlignment="Right"
                             Margin="5,0,5,0"
                             Content="Refresh" 
                             Command="{Binding RefreshItemsCommand}"/>
-                </DockPanel>
             </StackPanel>
         </GroupBox>
     </StackPanel>
diff --git a/samples/todoapp/TodoApp.WPF/TodoApp.WPF.csproj b/samples/todoapp/TodoApp.WPF/TodoApp.WPF.csproj
index 9233af2b..72483d7b 100644
--- a/samples/todoapp/TodoApp.WPF/TodoApp.WPF.csproj
+++ b/samples/todoapp/TodoApp.WPF/TodoApp.WPF.csproj
@@ -8,16 +8,6 @@
     <UseWPF>true</UseWPF>
   </PropertyGroup>
 
-  <ItemGroup>
-    <None Remove="Images\completed.png" />
-    <None Remove="Images\incomplete.png" />
-  </ItemGroup>
-
-  <ItemGroup>
-    <Resource Include="Images\completed.png" />
-    <Resource Include="Images\incomplete.png" />
-  </ItemGroup>
-
   <ItemGroup>
     <PackageReference Include="CommunityToolkit.Mvvm" Version="8.4.0" />
     <PackageReference Include="CommunityToolkit.Datasync.Client" Version="9.0.2" />

From d4d5dab5550ead0c014beada83eaa3197046d375 Mon Sep 17 00:00:00 2001
From: "swain.liu" <zjdangge@outlook.com>
Date: Sat, 31 May 2025 03:14:01 +0800
Subject: [PATCH 2/2] Refactor the main window layout and task item template

Remove the old CompletedIconTemplate, and introduce a new TaskItemTemplate. Change the layout from StackPanel to Grid to better organize the interface elements. Update the task list to use the new template and optimize the layout of the bottom input area, which includes a TextBox and two buttons.
---
 samples/todoapp/TodoApp.WPF/MainWindow.xaml | 112 +++++++++++---------
 1 file changed, 60 insertions(+), 52 deletions(-)

diff --git a/samples/todoapp/TodoApp.WPF/MainWindow.xaml b/samples/todoapp/TodoApp.WPF/MainWindow.xaml
index 7445fc1f..58c6241f 100644
--- a/samples/todoapp/TodoApp.WPF/MainWindow.xaml
+++ b/samples/todoapp/TodoApp.WPF/MainWindow.xaml
@@ -4,65 +4,73 @@
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         xmlns:local="clr-namespace:TodoApp.WPF"
+        xmlns:data="clr-namespace:TodoApp.WPF.Database"
         mc:Ignorable="d"
         Title="MainWindow" Height="420" Width="800"
         ResizeMode="CanMinimize">
     <Window.Resources>
-        <DataTemplate x:Key="CompletedIconTemplate">
+        <DataTemplate x:Key="TaskItemTemplate" DataType="{x:Type data:TodoItem}">
             <Grid>
-                <TextBlock FontFamily="Segoe Fluent Icons,Segoe MDL2 Assets" Text="&#xEC61;" Visibility="{Binding Path=IsComplete, Converter={StaticResource BooleanToVisibilityConverter}}" />
-                <TextBlock FontFamily="Segoe Fluent Icons,Segoe MDL2 Assets" Text="&#xEA3A;" />
+                <Grid.ColumnDefinitions>
+                    <ColumnDefinition Width="*" />
+                    <ColumnDefinition Width="auto" />
+                </Grid.ColumnDefinitions>
+                <TextBlock Text="{Binding Title}" />
+                <Grid Grid.Column="1" Width="75">
+                    <TextBlock FontFamily="Segoe Fluent Icons,Segoe MDL2 Assets" Text="&#xEC61;" Visibility="{Binding Path=IsComplete, Converter={StaticResource BooleanToVisibilityConverter}}" />
+                    <TextBlock FontFamily="Segoe Fluent Icons,Segoe MDL2 Assets" Text="&#xEA3A;" />
+                </Grid>
             </Grid>
         </DataTemplate>
     </Window.Resources>
-    
-    <StackPanel Margin="10">
-        <!-- List View-->
-        <GroupBox Header="Tasks" Height="300">
-            <StackPanel>
-                <ListView
-                    x:Name="TodoListView"
-                    ItemsSource="{Binding Items}"
-                    Height="270"
-                    Margin="5"
-                    VerticalAlignment="Top">
-                    <ListView.View>
-                        <GridView>
-                            <GridViewColumn Header="Title" Width="650" DisplayMemberBinding="{Binding Title}"/>
-                            <GridViewColumn Header="Completed" Width="75" CellTemplate="{StaticResource CompletedIconTemplate}"/>
-                        </GridView>
-                    </ListView.View>
-                    <ListView.Resources>
-                        <Style TargetType="ListViewItem">
-                            <EventSetter Event="MouseDoubleClick" Handler="ListViewItem_DoubleClickEventHandler" />
-                        </Style>
-                    </ListView.Resources>
-                </ListView>
-            </StackPanel>
-        </GroupBox>
 
-        <GroupBox Header="Add Task">
-            <StackPanel Margin="5" Height="30" Orientation="Horizontal">
-                <TextBox x:Name="NewTodoItemTitle"
-                             Width="560"
-                             HorizontalAlignment="Left"
-                             Margin="5,0,5,0"
-                             Text="{Binding AddItemTitle, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
-                             VerticalContentAlignment="Center"/>
-                    <Button x:Name="AddTodoItemButton"
-                            Width="75"
-                            HorizontalAlignment="Right"
-                            Content="Add" 
-                            Margin="5,0,5,0"
-                            IsDefault="True"
-                            Command="{Binding AddItemCommand}"/>
-                <Button x:Name="RefreshTodoItemsButton"
-                            Width="75"
-                            HorizontalAlignment="Right"
-                            Margin="5,0,5,0"
-                            Content="Refresh" 
-                            Command="{Binding RefreshItemsCommand}"/>
-            </StackPanel>
-        </GroupBox>
-    </StackPanel>
+    <Grid Margin="10">
+        <Grid.RowDefinitions>
+            <RowDefinition Height="auto"/>
+            <RowDefinition Height="*"/>
+            <RowDefinition Height="auto"/>
+        </Grid.RowDefinitions>
+        <!-- Title -->
+        <TextBlock Margin="10" Style="{StaticResource SubtitleTextBlockStyle}" Text="Tasks" />
+        <!-- List View-->
+        <ListView x:Name="TodoListView"
+                  Grid.Row="1"
+                  Margin="5"
+                  ItemTemplate="{StaticResource TaskItemTemplate}"
+                  ItemsSource="{Binding Items}">
+            <ListView.Resources>
+                <Style BasedOn="{StaticResource {x:Type ListViewItem}}" TargetType="ListViewItem">
+                    <EventSetter Event="MouseDoubleClick" Handler="ListViewItem_DoubleClickEventHandler" />
+                </Style>
+            </ListView.Resources>
+        </ListView>
+        <!-- Buttom -->
+        <Grid Grid.Row="2" Height="36">
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="*" />
+                <ColumnDefinition Width="auto" />
+                <ColumnDefinition Width="auto" />
+            </Grid.ColumnDefinitions>
+            <TextBox x:Name="NewTodoItemTitle"
+                     HorizontalAlignment="Stretch"
+                     Margin="5,0,5,0"
+                     Text="{Binding AddItemTitle, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
+                     VerticalContentAlignment="Center"/>
+            <Button x:Name="AddTodoItemButton"
+                    Grid.Column="1"
+                    Width="75"
+                    HorizontalAlignment="Right"
+                    Content="Add" 
+                    Margin="5,0,5,0"
+                    IsDefault="True"
+                    Command="{Binding AddItemCommand}"/>
+            <Button x:Name="RefreshTodoItemsButton"
+                    Grid.Column="2"
+                    Width="75"
+                    HorizontalAlignment="Right"
+                    Margin="5,0,5,0"
+                    Content="Refresh" 
+                    Command="{Binding RefreshItemsCommand}"/>
+        </Grid>
+    </Grid>
 </Window>