Skip to content

Commit 8a82eba

Browse files
zjdanggezjdangge
authored
Simplify and modernize WPF sample (#368)
* 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. * 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.
1 parent e6290ec commit 8a82eba

File tree

6 files changed

+65
-100
lines changed

6 files changed

+65
-100
lines changed

‎samples/todoapp/TodoApp.WPF/App.xaml

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
33
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
44
xmlns:local="clr-namespace:TodoApp.WPF"
5-
StartupUri="MainWindow.xaml">
6-
<Application.Resources>
7-
</Application.Resources>
5+
StartupUri="MainWindow.xaml"
6+
ThemeMode="System">
7+
<Application.Resources />
88
</Application>

‎samples/todoapp/TodoApp.WPF/Converters/BooleanToImageConverter.cs

Lines changed: 0 additions & 32 deletions
This file was deleted.

‎samples/todoapp/TodoApp.WPF/Images/completed.png

-1.08 KB
Binary file not shown.

‎samples/todoapp/TodoApp.WPF/Images/incomplete.png

-297 Bytes
Binary file not shown.

‎samples/todoapp/TodoApp.WPF/MainWindow.xaml

Lines changed: 62 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -4,66 +4,73 @@
44
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
55
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
66
xmlns:local="clr-namespace:TodoApp.WPF"
7-
xmlns:conv="clr-namespace:TodoApp.WPF.Converters"
7+
xmlns:data="clr-namespace:TodoApp.WPF.Database"
88
mc:Ignorable="d"
99
Title="MainWindow" Height="420" Width="800"
1010
ResizeMode="CanMinimize">
1111
<Window.Resources>
12-
<conv:BooleanToImageConverter x:Key="BooleanToImageConverter" />
13-
14-
<DataTemplate x:Key="CompletedIconTemplate">
15-
<Image Width="16" Height="16" Source="{Binding Path=IsComplete, Converter={StaticResource BooleanToImageConverter}}" />
12+
<DataTemplate x:Key="TaskItemTemplate" DataType="{x:Type data:TodoItem}">
13+
<Grid>
14+
<Grid.ColumnDefinitions>
15+
<ColumnDefinition Width="*" />
16+
<ColumnDefinition Width="auto" />
17+
</Grid.ColumnDefinitions>
18+
<TextBlock Text="{Binding Title}" />
19+
<Grid Grid.Column="1" Width="75">
20+
<TextBlock FontFamily="Segoe Fluent Icons,Segoe MDL2 Assets" Text="&#xEC61;" Visibility="{Binding Path=IsComplete, Converter={StaticResource BooleanToVisibilityConverter}}" />
21+
<TextBlock FontFamily="Segoe Fluent Icons,Segoe MDL2 Assets" Text="&#xEA3A;" />
22+
</Grid>
23+
</Grid>
1624
</DataTemplate>
1725
</Window.Resources>
18-
19-
<StackPanel Margin="10">
20-
<!-- List View-->
21-
<GroupBox Header="Tasks" Height="300">
22-
<StackPanel>
23-
<ListView
24-
x:Name="TodoListView"
25-
ItemsSource="{Binding Items}"
26-
Height="300"
27-
Margin="5"
28-
VerticalAlignment="Top">
29-
<ListView.View>
30-
<GridView>
31-
<GridViewColumn Header="Title" Width="650" DisplayMemberBinding="{Binding Title}"/>
32-
<GridViewColumn Header="Completed" Width="75" CellTemplate="{StaticResource CompletedIconTemplate}"/>
33-
</GridView>
34-
</ListView.View>
35-
<ListView.Resources>
36-
<Style TargetType="ListViewItem">
37-
<EventSetter Event="MouseDoubleClick" Handler="ListViewItem_DoubleClickEventHandler" />
38-
</Style>
39-
</ListView.Resources>
40-
</ListView>
41-
</StackPanel>
42-
</GroupBox>
4326

44-
<GroupBox Header="Add Task">
45-
<StackPanel Margin="5">
46-
<DockPanel Height="26">
47-
<TextBox x:Name="NewTodoItemTitle"
48-
Width="560"
49-
HorizontalAlignment="Left"
50-
Margin="5,0,5,0"
51-
Text="{Binding AddItemTitle, Mode=TwoWay}"
52-
VerticalContentAlignment="Center"/>
53-
<Button x:Name="AddTodoItemButton"
54-
Width="75"
55-
HorizontalAlignment="Right"
56-
Content="Add"
57-
Margin="5,0,5,0"
58-
Command="{Binding AddItemCommand}"/>
59-
<Button x:Name="RefreshTodoItemsButton"
60-
Width="75"
61-
HorizontalAlignment="Right"
62-
Margin="5,0,5,0"
63-
Content="Refresh"
64-
Command="{Binding RefreshItemsCommand}"/>
65-
</DockPanel>
66-
</StackPanel>
67-
</GroupBox>
68-
</StackPanel>
27+
<Grid Margin="10">
28+
<Grid.RowDefinitions>
29+
<RowDefinition Height="auto"/>
30+
<RowDefinition Height="*"/>
31+
<RowDefinition Height="auto"/>
32+
</Grid.RowDefinitions>
33+
<!-- Title -->
34+
<TextBlock Margin="10" Style="{StaticResource SubtitleTextBlockStyle}" Text="Tasks" />
35+
<!-- List View-->
36+
<ListView x:Name="TodoListView"
37+
Grid.Row="1"
38+
Margin="5"
39+
ItemTemplate="{StaticResource TaskItemTemplate}"
40+
ItemsSource="{Binding Items}">
41+
<ListView.Resources>
42+
<Style BasedOn="{StaticResource {x:Type ListViewItem}}" TargetType="ListViewItem">
43+
<EventSetter Event="MouseDoubleClick" Handler="ListViewItem_DoubleClickEventHandler" />
44+
</Style>
45+
</ListView.Resources>
46+
</ListView>
47+
<!-- Buttom -->
48+
<Grid Grid.Row="2" Height="36">
49+
<Grid.ColumnDefinitions>
50+
<ColumnDefinition Width="*" />
51+
<ColumnDefinition Width="auto" />
52+
<ColumnDefinition Width="auto" />
53+
</Grid.ColumnDefinitions>
54+
<TextBox x:Name="NewTodoItemTitle"
55+
HorizontalAlignment="Stretch"
56+
Margin="5,0,5,0"
57+
Text="{Binding AddItemTitle, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
58+
VerticalContentAlignment="Center"/>
59+
<Button x:Name="AddTodoItemButton"
60+
Grid.Column="1"
61+
Width="75"
62+
HorizontalAlignment="Right"
63+
Content="Add"
64+
Margin="5,0,5,0"
65+
IsDefault="True"
66+
Command="{Binding AddItemCommand}"/>
67+
<Button x:Name="RefreshTodoItemsButton"
68+
Grid.Column="2"
69+
Width="75"
70+
HorizontalAlignment="Right"
71+
Margin="5,0,5,0"
72+
Content="Refresh"
73+
Command="{Binding RefreshItemsCommand}"/>
74+
</Grid>
75+
</Grid>
6976
</Window>

‎samples/todoapp/TodoApp.WPF/TodoApp.WPF.csproj

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,6 @@
88
<UseWPF>true</UseWPF>
99
</PropertyGroup>
1010

11-
<ItemGroup>
12-
<None Remove="Images\completed.png" />
13-
<None Remove="Images\incomplete.png" />
14-
</ItemGroup>
15-
16-
<ItemGroup>
17-
<Resource Include="Images\completed.png" />
18-
<Resource Include="Images\incomplete.png" />
19-
</ItemGroup>
20-
2111
<ItemGroup>
2212
<PackageReference Include="CommunityToolkit.Mvvm" Version="8.4.0" />
2313
<PackageReference Include="CommunityToolkit.Datasync.Client" Version="9.0.2" />

0 commit comments

Comments
 (0)