add SettingsCard

GZStudio/GZStudio.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk">
   <PropertyGroup>
     <OutputType>WinExe</OutputType>
-    <TargetFramework>net7.0-windows10.0.19041.0</TargetFramework>
+    <TargetFramework>net7.0-windows10.0.22621.0</TargetFramework>
     <TargetPlatformMinVersion>10.0.17763.0</TargetPlatformMinVersion>
     <RootNamespace>GZStudio</RootNamespace>
     <ApplicationIcon>Assets/WindowIcon.ico</ApplicationIcon>
@@ -25,6 +25,8 @@
 
   <ItemGroup>
     <PackageReference Include="CommunityToolkit.Mvvm" Version="8.3.0" />
+    <PackageReference Include="CommunityToolkit.WinUI.Controls.SettingsControls" Version="8.1.240821" />
+    <PackageReference Include="CommunityToolkit.WinUI.Triggers" Version="8.1.240821" />
     <PackageReference Include="Microsoft.Extensions.Hosting" Version="8.0.0" />
     <PackageReference Include="Microsoft.WindowsAppSDK" Version="1.5.240802000" />
     <PackageReference Include="Microsoft.Xaml.Behaviors.WinUI.Managed" Version="2.0.9" />

GZStudio/Views/AppListPage.xaml.cs

@@ -33,16 +33,25 @@ public sealed partial class AppListPage : Page
 
         AppListData = new ObservableCollection<AppInfo>
         {
-            new AppInfo { Name = "App A", CreatedTime = "2024-06-15" },
+            new() { Name = "App A", CreatedTime = "2024-06-15" },
-            new AppInfo { Name = "App B", CreatedTime = "2024-08-30" },
+            new() { Name = "App B", CreatedTime = "2024-08-30" },
-            new AppInfo { Name = "App C", CreatedTime = "2024-08-30" },
+            new() { Name = "App C", CreatedTime = "2024-08-30" },
-            new AppInfo { Name = "App D", CreatedTime = "2024-08-30" },
+            new() { Name = "App C", CreatedTime = "2024-08-30" },
-            new AppInfo { Name = "App E", CreatedTime = "2024-08-30" },
+            new() { Name = "App C", CreatedTime = "2024-08-30" },
-            new AppInfo { Name = "App F", CreatedTime = "2024-08-30" },
+            new() { Name = "App C", CreatedTime = "2024-08-30" },
-            new AppInfo { Name = "App G", CreatedTime = "2024-08-30" },
+            new() { Name = "App C", CreatedTime = "2024-08-30" },
-            new AppInfo { Name = "App H", CreatedTime = "2024-08-30" },
+            new() { Name = "App C", CreatedTime = "2024-08-30" },
-            new AppInfo { Name = "App I", CreatedTime = "2024-08-30" },
+            new() { Name = "App C", CreatedTime = "2024-08-30" },
-            new AppInfo { Name = "App J", CreatedTime = "2024-08-30" },
+            new() { Name = "App C", CreatedTime = "2024-08-30" },
+            new() { Name = "App C", CreatedTime = "2024-08-30" },
+            new() { Name = "App C", CreatedTime = "2024-08-30" },
+            new() { Name = "App C", CreatedTime = "2024-08-30" },
+            new() { Name = "App C", CreatedTime = "2024-08-30" },
+            new() { Name = "App C", CreatedTime = "2024-08-30" },
+            new() { Name = "App C", CreatedTime = "2024-08-30" },
+            new() { Name = "App C", CreatedTime = "2024-08-30" },
+            new() { Name = "App C", CreatedTime = "2024-08-30" },
+    
         };
         DataContext = this;
     }

GZStudio/Views/ConfigurationPage.xaml

@@ -1,5 +1,6 @@
 <Page
     x:Class="GZStudio.Views.ConfigurationPage"
+    xmlns:controls="using:CommunityToolkit.WinUI.Controls"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
@@ -9,21 +10,25 @@
     <Grid x:Name="ContentArea">
         <Grid.RowDefinitions>
             <RowDefinition Height="Auto"/>
-			<!-- Row for the Button -->
             <RowDefinition Height="Auto"/>
-			<!-- Row for the ListView -->
+            <RowDefinition Height="Auto"/>
             <RowDefinition Height="Auto"/>
             <RowDefinition Height="Auto"/>
 
         </Grid.RowDefinitions>
-		<TextBlock Text="Python 配置"  Grid.Row="0" Margin="0,0,0,8"/>
-		<ComboBox IsEditable="True" Width="200"  Grid.Row="1" Margin="0,0,0,8"/>
 
-		<TextBlock Text="计算机配置" Grid.Row="2" Margin="0,0,0,4"/>
+        <TextBlock Text="Windows 配置" Grid.Row="0"  Margin="0,12,0,8" Style="{StaticResource SubtitleTextBlockStyle}"/>    
 
-		<ComboBox IsEditable="True" Width="200"  Grid.Row="3" Margin="0,0,0,8"/>
+        <controls:SettingsCard Header="显示文件扩展名"  Grid.Row="1" Margin="0,0,0,8" IsEnabled="{x:Bind IsCardEnabled, Mode=OneWay}">
+            <ToggleSwitch />
+        </controls:SettingsCard>
 
+        <controls:SettingsCard Header="启用长路径"  Grid.Row="2" Margin="0,0,0,8" IsEnabled="{x:Bind IsCardEnabled, Mode=OneWay}">
+            <ToggleSwitch />
+        </controls:SettingsCard>
 
+        <TextBlock Text="Python 配置"  Grid.Row="3" Margin="0,12,0,8" Style="{StaticResource SubtitleTextBlockStyle}"/>
+        <ComboBox IsEditable="True" Width="200"  Grid.Row="4" Margin="0,0,0,8"/>
 
     </Grid>
 </Page>

GZStudio/Views/ConfigurationPage.xaml.cs

@@ -11,9 +11,25 @@ public sealed partial class ConfigurationPage : Page
         get;
     }
 
+    private bool _isCardEnabled;
+
+    public bool IsCardEnabled
+    {
+        get => _isCardEnabled;
+        set
+        {
+            if (_isCardEnabled != value)
+            {
+                _isCardEnabled = value;
+            }
+        }
+    }
+
     public ConfigurationPage()
     {
         ViewModel = App.GetService<ConfigurationViewModel>();
         InitializeComponent();
+
+        IsCardEnabled = true;
     }
 }