From b28dd301e8fc98ca40598aa3f2f2be4589290027 Mon Sep 17 00:00:00 2001
From: "1029920178@qq.com" <1029910278@qq.com>
Date: Sat, 7 Dec 2024 09:50:10 +0800
Subject: [PATCH 1/2] feat: add border color/thickness config support

---
 src/VirtualStreetSnap/App.axaml               |   1 +
 src/VirtualStreetSnap/Assets/i18n/en-US.json  |   6 +-
 src/VirtualStreetSnap/Assets/i18n/zh-CN.json  |   6 +-
 src/VirtualStreetSnap/Models/AppConfig.cs     |  35 +++++-
 .../Services/ConfigService.cs                 |   2 +-
 .../ViewModels/SettingsViewModel.cs           |  18 ++-
 .../ViewModels/SnapShotViewModel.cs           |  36 +++++-
 .../Views/SettingsView.axaml                  | 109 +++++++++++-------
 .../Views/SnapShotView.axaml                  |   6 +-
 .../Views/SnapShotView.axaml.cs               |  10 +-
 .../VirtualStreetSnap.csproj                  |   1 +
 11 files changed, 176 insertions(+), 54 deletions(-)

diff --git a/src/VirtualStreetSnap/App.axaml b/src/VirtualStreetSnap/App.axaml
index a8feead..0b4e050 100644
--- a/src/VirtualStreetSnap/App.axaml
+++ b/src/VirtualStreetSnap/App.axaml
@@ -23,6 +23,7 @@
 
     <Application.Styles>
         <FluentTheme />
+        <StyleInclude Source="avares://Avalonia.Controls.ColorPicker/Themes/Fluent/Fluent.xaml" />
         <StyleInclude Source="avares://VirtualStreetSnap/Assets/Icons.axaml" />
     </Application.Styles>
 </Application>
\ No newline at end of file
diff --git a/src/VirtualStreetSnap/Assets/i18n/en-US.json b/src/VirtualStreetSnap/Assets/i18n/en-US.json
index eac1962..7af6207 100644
--- a/src/VirtualStreetSnap/Assets/i18n/en-US.json
+++ b/src/VirtualStreetSnap/Assets/i18n/en-US.json
@@ -72,5 +72,9 @@
   "InvalidFileFormat": "Invalid File Format",
   "LoadingImage": "Loading Image...",
   "LoadingView": "Loading View...",
-  "Curve": "Curve"
+  "Curve": "Curve",
+  "BorderColor": "Border Color",
+  "CommonSettings": "Common Settings",
+  "BorderThickness": "Border Thickness",
+  "BorderSettings": "Border Settings"
 }
\ No newline at end of file
diff --git a/src/VirtualStreetSnap/Assets/i18n/zh-CN.json b/src/VirtualStreetSnap/Assets/i18n/zh-CN.json
index 7a3b2b4..802252c 100644
--- a/src/VirtualStreetSnap/Assets/i18n/zh-CN.json
+++ b/src/VirtualStreetSnap/Assets/i18n/zh-CN.json
@@ -72,5 +72,9 @@
   "InvalidFileFormat": "无效的文件格式",
   "LoadingImage": "加载图像...",
   "LoadingView": "加载视图...",
-  "Curve": "曲线"
+  "Curve": "曲线",
+  "BorderColor": "边框颜色",
+  "CommonSettings": "常规设置",
+  "BorderThickness": "边框厚度",
+  "BorderSettings": "边框设置"
 }
\ No newline at end of file
diff --git a/src/VirtualStreetSnap/Models/AppConfig.cs b/src/VirtualStreetSnap/Models/AppConfig.cs
index 0d03526..c931a52 100644
--- a/src/VirtualStreetSnap/Models/AppConfig.cs
+++ b/src/VirtualStreetSnap/Models/AppConfig.cs
@@ -1,4 +1,5 @@
 using System.ComponentModel;
+using Avalonia.Media;
 
 namespace VirtualStreetSnap.Models;
 
@@ -30,7 +31,39 @@ protected virtual void OnPropertyChanged(string propertyName)
 public class Overlays
 {
     public required Guides Guides { get; set; }
-    public bool Focus { get; set; } = true;
+    public bool ShowFocusBorder { get; set; } = true;
+    private int _focusBorderThickness = 10;
+
+    public int FocusBorderThickness
+    {
+        get => _focusBorderThickness;
+        set
+        {
+            if (_focusBorderThickness == value) return;
+            _focusBorderThickness = value;
+            OnPropertyChanged(nameof(FocusBorderThickness));
+        }
+    }
+
+    private Color _focusBorderColor = Colors.Brown;
+
+    public Color FocusBorderColor
+    {
+        get => _focusBorderColor;
+        set
+        {
+            if (_focusBorderColor == value) return;
+            _focusBorderColor = value;
+            OnPropertyChanged(nameof(FocusBorderColor));
+        }
+    }
+
+    public event PropertyChangedEventHandler? PropertyChanged;
+
+    protected virtual void OnPropertyChanged(string propertyName)
+    {
+        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
+    }
 }
 
 public class Guides
diff --git a/src/VirtualStreetSnap/Services/ConfigService.cs b/src/VirtualStreetSnap/Services/ConfigService.cs
index 82f816c..198074b 100644
--- a/src/VirtualStreetSnap/Services/ConfigService.cs
+++ b/src/VirtualStreetSnap/Services/ConfigService.cs
@@ -70,7 +70,7 @@ private static AppConfig NewDefaultConfig()
                     Ratio = false,
                     Opacity = 0.5f
                 },
-                Focus = true
+                ShowFocusBorder = true
             }
         };
     }
diff --git a/src/VirtualStreetSnap/ViewModels/SettingsViewModel.cs b/src/VirtualStreetSnap/ViewModels/SettingsViewModel.cs
index 4389586..f22ed91 100644
--- a/src/VirtualStreetSnap/ViewModels/SettingsViewModel.cs
+++ b/src/VirtualStreetSnap/ViewModels/SettingsViewModel.cs
@@ -4,6 +4,7 @@
 using System.IO;
 using System.Linq;
 using System.Threading.Tasks;
+using Avalonia.Media;
 using CommunityToolkit.Mvvm.ComponentModel;
 using VirtualStreetSnap.Models;
 using VirtualStreetSnap.Services;
@@ -14,7 +15,7 @@ public partial class SettingsViewModel : ViewModelBase
 {
     [ObservableProperty]
     private AppConfig _config = ConfigService.Instance;
-    
+
     [ObservableProperty]
     private string _appVersion = "Unknown";
 
@@ -22,6 +23,12 @@ public partial class SettingsViewModel : ViewModelBase
     [ObservableProperty]
     private string _filePrefix = "IMG";
 
+    [ObservableProperty]
+    private Color _focusBorderColor = Colors.Brown;
+
+    [ObservableProperty]
+    private int _focusBorderThickness = 10;
+
     [ObservableProperty]
     private LanguageModel _selectedLanguage;
 
@@ -41,11 +48,14 @@ public SettingsViewModel()
         FilePrefix = Config.Settings.FilePrefix;
         SelectedLanguage = LanguageModels.FirstOrDefault(x => x.Identifier == Config.Settings.Language) ??
                            LanguageModels.First();
+        FocusBorderColor = Config.Overlays.FocusBorderColor;
+        FocusBorderThickness = Config.Overlays.FocusBorderThickness;
         // Set the default values if the config is not existing
         ConfigService.SaveConfig();
         GetFileVersion();
     }
-    
+
+
     public void GetFileVersion()
     {
         var exeDir = Path.GetDirectoryName(AppDomain.CurrentDomain.BaseDirectory);
@@ -56,6 +66,10 @@ public void GetFileVersion()
         if (version == null) return;
         AppVersion = version;
     }
+
+    partial void OnFocusBorderColorChanged(Color value) => Config.Overlays.FocusBorderColor = value;
+
+    partial void OnFocusBorderThicknessChanged(int value) => Config.Overlays.FocusBorderThickness = value;
     
     partial void OnSelectedLanguageChanged(LanguageModel value)
     {
diff --git a/src/VirtualStreetSnap/ViewModels/SnapShotViewModel.cs b/src/VirtualStreetSnap/ViewModels/SnapShotViewModel.cs
index a7ac9ab..abc8c83 100644
--- a/src/VirtualStreetSnap/ViewModels/SnapShotViewModel.cs
+++ b/src/VirtualStreetSnap/ViewModels/SnapShotViewModel.cs
@@ -1,6 +1,9 @@
 using System.Collections.ObjectModel;
+using System.ComponentModel;
 using System.Linq;
+using Avalonia;
 using Avalonia.Media;
+using Avalonia.Media.Immutable;
 using CommunityToolkit.Mvvm.ComponentModel;
 using VirtualStreetSnap.Models;
 using VirtualStreetSnap.Services;
@@ -24,8 +27,22 @@ public partial class SnapShotViewModel : ViewModelBase
     [ObservableProperty]
     private float _guideLinesOpacity = 0.5f;
 
-    [ObservableProperty]
-    private Color _borderColor = Colors.Brown;
+
+    private Thickness _focusBorderThickness;
+
+    public Thickness FocusBorderThickness
+    {
+        get => _focusBorderThickness;
+        private set => SetProperty(ref _focusBorderThickness, value);
+    }
+
+    private IImmutableSolidColorBrush _focusFocusBorderBrush;
+
+    public IImmutableSolidColorBrush FocusBorderBrush
+    {
+        get => _focusFocusBorderBrush;
+        private set => SetProperty(ref _focusFocusBorderBrush, value);
+    }
 
     [ObservableProperty]
     private SizeRatio? _selectedSizeRatio;
@@ -64,6 +81,19 @@ public SnapShotViewModel()
         ShowGuideLinesGrid = Config.Overlays.Guides.Grid;
         ShowGuideLinesCenter = Config.Overlays.Guides.Center;
         ShowGuideLinesRatio = Config.Overlays.Guides.Ratio;
-        ShowFocusBorder = Config.Overlays.Focus;
+        ShowFocusBorder = Config.Overlays.ShowFocusBorder;
+        var thickness = Config.Overlays.FocusBorderThickness;
+        FocusBorderThickness = new Thickness(thickness);
+        FocusBorderBrush = new ImmutableSolidColorBrush(Config.Overlays.FocusBorderColor);
+
+        Config.Overlays.PropertyChanged += OnOverlaysPropertyChanged;
+    }
+
+    private void OnOverlaysPropertyChanged(object? sender, PropertyChangedEventArgs e)
+    {
+        if (e.PropertyName == nameof(Config.Overlays.FocusBorderColor))
+            FocusBorderBrush = new ImmutableSolidColorBrush(Config.Overlays.FocusBorderColor);
+        else if (e.PropertyName == nameof(Config.Overlays.FocusBorderThickness))
+            FocusBorderThickness = new Thickness(Config.Overlays.FocusBorderThickness);
     }
 }
\ No newline at end of file
diff --git a/src/VirtualStreetSnap/Views/SettingsView.axaml b/src/VirtualStreetSnap/Views/SettingsView.axaml
index 427d3cc..7e8d729 100644
--- a/src/VirtualStreetSnap/Views/SettingsView.axaml
+++ b/src/VirtualStreetSnap/Views/SettingsView.axaml
@@ -15,47 +15,74 @@
     <UserControl.DataContext>
         <viewModels:SettingsViewModel />
     </UserControl.DataContext>
-    <Panel>
-        <StackPanel VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="10" Opacity="0.5">
-            <TextBlock Text="{Binding AppVersion, StringFormat=v{0}}"></TextBlock>
-        </StackPanel>
-        <Grid ColumnDefinitions="150,10,Auto" RowDefinitions="Auto,10,Auto,10,Auto" Margin="50"
-              VerticalAlignment="Center" HorizontalAlignment="Center">
-
-            <TextBlock VerticalAlignment="Center"
-                       Text="{i18n:Localize Language}" FontSize="16" />
-
-            <ListBox Grid.Column="2" ItemsSource="{Binding LanguageModels}"
-                     SelectedItem="{Binding SelectedLanguage}"
-                     HorizontalAlignment="Left" CornerRadius="4"
-                     SelectionMode="Single">
-                <ListBox.ItemsPanel>
-                    <ItemsPanelTemplate>
-                        <StackPanel Orientation="Horizontal" />
-                    </ItemsPanelTemplate>
-                </ListBox.ItemsPanel>
-                <ListBox.ItemTemplate>
-                    <DataTemplate DataType="{x:Type models:LanguageModel}">
-                        <TextBlock Text="{Binding Label}" Width="150" TextAlignment="Center" />
-                    </DataTemplate>
-                </ListBox.ItemTemplate>
-            </ListBox>
-
-            <TextBlock Grid.Row="2" VerticalAlignment="Center"
-                       Text="{i18n:Localize FilePrefix}" FontSize="16" />
-            <TextBox Grid.Row="2" Grid.Column="2"
-                     Text="{Binding FilePrefix}" TextAlignment="Center" />
-            <TextBlock Grid.Row="4" VerticalAlignment="Center" Margin="0,0,10,0"
-                       Text="{i18n:Localize  SaveDirectory}" FontSize="16" />
-            <Grid Grid.Column="2" Grid.Row="4" ColumnDefinitions="*,Auto">
-                <TextBox Text="{Binding SaveDirectory}" IsReadOnly="True"
-                         ToolTip.Tip="{Binding SaveDirectory}" />
-                <Button Grid.Column="2" Command="{Binding ChangeDir}"
-                        CommandParameter="SaveDirectory">
-                    ...
-                </Button>
+    <UserControl.Styles>
+        <Style Selector="Expander">
+            <Setter Property="Background" Value="#191919"></Setter>
+        </Style>
+    </UserControl.Styles>
+    <ScrollViewer>
+        <StackPanel>
+            <Grid Margin="20" ColumnDefinitions="*,Auto" RowDefinitions="*,Auto">
+                <StackPanel DockPanel.Dock="Left">
+                    <TextBlock Text="VirtualStreetSnap" FontSize="18" />
+                    <TextBlock Text="Created by Atticus" Foreground="DimGray" Opacity="0.8" />
+                    <TextBlock Text="{Binding AppVersion, StringFormat=v{0}}"></TextBlock>
+                </StackPanel>
             </Grid>
-        </Grid>
-    </Panel>
+            <StackPanel Margin="10 0 10 0" Spacing="10">
+                <Expander Header="{i18n:Localize CommonSettings}" HorizontalAlignment="Stretch" IsExpanded="True" >
+                    <Grid ColumnDefinitions="150,*,Auto" RowDefinitions="Auto,10,Auto,10,Auto" 
+                          VerticalAlignment="Center" >
+
+                        <TextBlock VerticalAlignment="Center"
+                                   Text="{i18n:Localize Language}" FontSize="16" />
+
+                        <ListBox Grid.Column="2" ItemsSource="{Binding LanguageModels}"
+                                 SelectedItem="{Binding SelectedLanguage}"
+                                 HorizontalAlignment="Left" CornerRadius="4"
+                                 SelectionMode="Single">
+                            <ListBox.ItemsPanel>
+                                <ItemsPanelTemplate>
+                                    <StackPanel Orientation="Horizontal" />
+                                </ItemsPanelTemplate>
+                            </ListBox.ItemsPanel>
+                            <ListBox.ItemTemplate>
+                                <DataTemplate DataType="{x:Type models:LanguageModel}">
+                                    <TextBlock Text="{Binding Label}" Width="150" TextAlignment="Center" />
+                                </DataTemplate>
+                            </ListBox.ItemTemplate>
+                        </ListBox>
+
+                        <TextBlock Grid.Row="2" VerticalAlignment="Center"
+                                   Text="{i18n:Localize FilePrefix}" FontSize="16" />
+                        <TextBox Grid.Row="2" Grid.Column="2"
+                                 Text="{Binding FilePrefix}" TextAlignment="Center" />
+                        <TextBlock Grid.Row="4" VerticalAlignment="Center" Margin="0,0,10,0"
+                                   Text="{i18n:Localize  SaveDirectory}" FontSize="16" />
+                        <Grid Grid.Row="4"  Grid.Column="2" ColumnDefinitions="*,Auto">
+                            <TextBox Text="{Binding SaveDirectory}" IsReadOnly="True"
+                                     ToolTip.Tip="{Binding SaveDirectory}" />
+                            <Button Grid.Column="2" Command="{Binding ChangeDir}"
+                                    CommandParameter="SaveDirectory">
+                                ...
+                            </Button>
+                        </Grid>
+                         </Grid>
+                </Expander>
+                <Expander Header="{i18n:Localize BorderSettings}" HorizontalAlignment="Stretch" IsExpanded="False">
+                    <Grid ColumnDefinitions="150,*,Auto" RowDefinitions="Auto,10,Auto" 
+                          VerticalAlignment="Center" >
+                        <TextBlock Grid.Row="0"  Text="{i18n:Localize BorderColor}" FontSize="16"></TextBlock>
+                        <ColorPicker Grid.Row="0" Grid.Column="2" Width="200" HorizontalAlignment="Right" Color="{Binding FocusBorderColor}"></ColorPicker>
+                        <TextBlock Grid.Row="2"  Text="{i18n:Localize BorderThickness}" FontSize="16"></TextBlock>
+                        <NumericUpDown Grid.Row="2" Grid.Column="2" Value="{Binding FocusBorderThickness}" Minimum="2" Maximum="16" FormatString="F0" ClipValueToMinMax="True"></NumericUpDown>
+
+                    </Grid>
+                </Expander>
+            </StackPanel>
+
+        </StackPanel>
+    </ScrollViewer>
+
 
 </UserControl>
\ No newline at end of file
diff --git a/src/VirtualStreetSnap/Views/SnapShotView.axaml b/src/VirtualStreetSnap/Views/SnapShotView.axaml
index 582687e..74b644d 100644
--- a/src/VirtualStreetSnap/Views/SnapShotView.axaml
+++ b/src/VirtualStreetSnap/Views/SnapShotView.axaml
@@ -54,14 +54,16 @@
                   Opacity="{Binding ShowGuideLinesRatio}" />
         </Panel>
 
-        <Border Classes="Guides" Name="FocusBorder" BorderBrush="Brown" BorderThickness="10"
+        <Border Classes="Guides" Name="FocusBorder"
+                BorderBrush="{Binding FocusBorderBrush}"
+                BorderThickness="{Binding FocusBorderThickness}"
                 Opacity="{Binding ShowFocusBorder}">
             <Rectangle Name="CaptureArea"></Rectangle>
         </Border>
 
         <StackPanel VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="0 0 20 20" Spacing="10"
                     Orientation="Horizontal">
-            
+
             <Button Background="Transparent">
                 <PathIcon Data="{StaticResource Overlay}" ToolTip.Tip="{i18n:Localize  Guides}" Width="30" Height="30" />
                 <Button.Flyout>
diff --git a/src/VirtualStreetSnap/Views/SnapShotView.axaml.cs b/src/VirtualStreetSnap/Views/SnapShotView.axaml.cs
index 7f07933..9e5c0f3 100644
--- a/src/VirtualStreetSnap/Views/SnapShotView.axaml.cs
+++ b/src/VirtualStreetSnap/Views/SnapShotView.axaml.cs
@@ -23,6 +23,7 @@ public SnapShotView()
     {
         InitializeComponent();
         SizeChanged += UpdateRealSize;
+        FocusBorder.PropertyChanged += UpdateRealSize2;
     }
 
     private void GetCurrentScreenInfo()
@@ -91,7 +92,7 @@ private void SelectingItemsControl_OnSelectionChanged(object? sender, SelectionC
         _window.Position = new PixelPoint((int)endX, (int)(endY));
     }
 
-    private void UpdateRealSize(object sender, RoutedEventArgs e)
+    private void UpdateRealSize(object sender, RoutedEventArgs? e)
     {
         var viewModel = DataContext as SnapShotViewModel;
         if (_currentScreen == null)
@@ -104,7 +105,12 @@ private void UpdateRealSize(object sender, RoutedEventArgs e)
         viewModel.RealCaptureAreaWidth = (int)(CaptureArea.Bounds.Width * scaling);
         viewModel.RealCaptureAreaHeight = (int)(CaptureArea.Bounds.Height * scaling);
     }
-
+    
+    private void UpdateRealSize2(object? sender, AvaloniaPropertyChangedEventArgs e)
+    {
+        UpdateRealSize(sender, null);
+    }
+    
     // call when init
     public bool FixWindowSize()
     {
diff --git a/src/VirtualStreetSnap/VirtualStreetSnap.csproj b/src/VirtualStreetSnap/VirtualStreetSnap.csproj
index 473bbd4..b198ace 100644
--- a/src/VirtualStreetSnap/VirtualStreetSnap.csproj
+++ b/src/VirtualStreetSnap/VirtualStreetSnap.csproj
@@ -30,6 +30,7 @@
 
     <ItemGroup>
         <PackageReference Include="Avalonia" Version="11.2.2"/>
+        <PackageReference Include="Avalonia.Controls.ColorPicker" Version="11.2.2" />
         <PackageReference Include="Avalonia.Desktop" Version="11.2.2"/>
         <PackageReference Include="Avalonia.Themes.Fluent" Version="11.2.2"/>
         <PackageReference Include="Avalonia.Fonts.Inter" Version="11.2.2"/>

From 099432e6f6016bffef79543a5d9bf770ebd1c2d0 Mon Sep 17 00:00:00 2001
From: "1029920178@qq.com" <1029910278@qq.com>
Date: Sun, 8 Dec 2024 16:24:48 +0800
Subject: [PATCH 2/2] refactor: settings view with new custom setting card;
 bump to 0.1.5.2

---
 .../Controls/SettingsCard.axaml               | 32 +++++++++
 .../Controls/SettingsCard.axaml.cs            | 27 ++++++++
 src/VirtualStreetSnap/Program.cs              | 57 +++++++++++++++-
 .../Views/SettingsView.axaml                  | 66 +++++++++----------
 .../VirtualStreetSnap.csproj                  |  6 +-
 5 files changed, 151 insertions(+), 37 deletions(-)
 create mode 100644 src/VirtualStreetSnap/Controls/SettingsCard.axaml
 create mode 100644 src/VirtualStreetSnap/Controls/SettingsCard.axaml.cs

diff --git a/src/VirtualStreetSnap/Controls/SettingsCard.axaml b/src/VirtualStreetSnap/Controls/SettingsCard.axaml
new file mode 100644
index 0000000..95deaa6
--- /dev/null
+++ b/src/VirtualStreetSnap/Controls/SettingsCard.axaml
@@ -0,0 +1,32 @@
+<UserControl xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:controls="clr-namespace:VirtualStreetSnap.Controls"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             x:Class="VirtualStreetSnap.Controls.SettingsCard">
+    <ContentControl.Styles>
+        <Style Selector="controls|SettingsCard">
+            <Setter Property="Template">
+                <ControlTemplate>
+                    <Border Background="{TemplateBinding Background}"
+                            CornerRadius="{TemplateBinding CornerRadius}">
+                        <Border.Effect>
+                            <DropShadowEffect Color="Black" BlurRadius="4" Opacity="1" OffsetX="0" OffsetY="0" />
+                        </Border.Effect>
+                        <Grid ColumnDefinitions="150,*,Auto">
+                            <TextBlock Margin="10 5 0 5"
+                                VerticalAlignment="Center"
+                                Text="{TemplateBinding SettingName}"
+                                FontSize="{TemplateBinding FontSize}">
+                            </TextBlock>
+                            <ContentPresenter Grid.Column="2" Margin="0 5 10  5"
+                                              VerticalContentAlignment="Center" VerticalAlignment="Center"
+                                              Content="{TemplateBinding Content}" />
+                        </Grid>
+                    </Border>
+                </ControlTemplate>
+            </Setter>
+        </Style>
+    </ContentControl.Styles>
+</UserControl>
\ No newline at end of file
diff --git a/src/VirtualStreetSnap/Controls/SettingsCard.axaml.cs b/src/VirtualStreetSnap/Controls/SettingsCard.axaml.cs
new file mode 100644
index 0000000..9b9bc09
--- /dev/null
+++ b/src/VirtualStreetSnap/Controls/SettingsCard.axaml.cs
@@ -0,0 +1,27 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+
+namespace VirtualStreetSnap.Controls;
+
+public partial class SettingsCard : ContentControl
+{
+    public static readonly StyledProperty<string> SettingNameProperty =
+        AvaloniaProperty.Register<SettingsCard, string>(nameof(SettingName));
+
+    public string SettingName
+    {
+        get { return GetValue(SettingNameProperty); }
+        set { SetValue(SettingNameProperty, value); }
+    }
+
+    public SettingsCard()
+    {
+        InitializeComponent();
+    }
+
+    private void InitializeComponent()
+    {
+        AvaloniaXamlLoader.Load(this);
+    }
+}
\ No newline at end of file
diff --git a/src/VirtualStreetSnap/Program.cs b/src/VirtualStreetSnap/Program.cs
index 94a0871..94b5a14 100644
--- a/src/VirtualStreetSnap/Program.cs
+++ b/src/VirtualStreetSnap/Program.cs
@@ -1,5 +1,8 @@
 using Avalonia;
 using System;
+using System.Diagnostics;
+using System.IO;
+using System.Text;
 
 namespace VirtualStreetSnap;
 
@@ -9,8 +12,17 @@ sealed class Program
     // SynchronizationContext-reliant code before AppMain is called: things aren't initialized
     // yet and stuff might break.
     [STAThread]
-    public static void Main(string[] args) => BuildAvaloniaApp()
-        .StartWithClassicDesktopLifetime(args);
+    public static void Main(string[] args)
+    {
+        Trace.Listeners.Add(new TextWriterTraceListener("VirtualStreetSnap.log"));
+        Trace.AutoFlush = true;
+        TextWriter originalConsoleOutput = Console.Out;
+        MultiTextWriter multiTextWriter = new MultiTextWriter(originalConsoleOutput, new TraceTextWriter());
+        Console.SetOut(multiTextWriter);
+
+        BuildAvaloniaApp()
+            .StartWithClassicDesktopLifetime(args);
+    }
 
     // Avalonia configuration, don't remove; also used by visual designer.
     public static AppBuilder BuildAvaloniaApp()
@@ -18,4 +30,45 @@ public static AppBuilder BuildAvaloniaApp()
             .UsePlatformDetect()
             .WithInterFont()
             .LogToTrace();
+}
+
+public class MultiTextWriter : TextWriter
+{
+    private readonly TextWriter _consoleWriter;
+    private readonly TextWriter _traceWriter;
+
+    public MultiTextWriter(TextWriter consoleWriter, TextWriter traceWriter)
+    {
+        _consoleWriter = consoleWriter;
+        _traceWriter = traceWriter;
+    }
+
+    public override Encoding Encoding => Encoding.UTF8;
+
+    public override void WriteLine(string value)
+    {
+        _consoleWriter.WriteLine(value);
+        _traceWriter.WriteLine(value);
+    }
+
+    public override void Write(string value)
+    {
+        _consoleWriter.Write(value);
+        _traceWriter.Write(value);
+    }
+}
+
+public class TraceTextWriter : TextWriter
+{
+    public override Encoding Encoding => Encoding.UTF8;
+
+    public override void WriteLine(string value)
+    {
+        Trace.WriteLine(value);
+    }
+
+    public override void Write(string value)
+    {
+        Trace.Write(value);
+    }
 }
\ No newline at end of file
diff --git a/src/VirtualStreetSnap/Views/SettingsView.axaml b/src/VirtualStreetSnap/Views/SettingsView.axaml
index 7e8d729..9ab5c32 100644
--- a/src/VirtualStreetSnap/Views/SettingsView.axaml
+++ b/src/VirtualStreetSnap/Views/SettingsView.axaml
@@ -6,6 +6,7 @@
              xmlns:models="clr-namespace:VirtualStreetSnap.Models"
              xmlns:i18n="clr-namespace:VirtualStreetSnap.Localizer"
              xmlns:services="clr-namespace:VirtualStreetSnap.Services"
+             xmlns:controls="clr-namespace:VirtualStreetSnap.Controls"
              mc:Ignorable="d" d:DesignWidth="1280" d:DesignHeight="720"
              services:ToplevelService.Register="{Binding}"
              x:Class="VirtualStreetSnap.Views.SettingsView"
@@ -16,8 +17,10 @@
         <viewModels:SettingsViewModel />
     </UserControl.DataContext>
     <UserControl.Styles>
-        <Style Selector="Expander">
-            <Setter Property="Background" Value="#191919"></Setter>
+        <Style Selector="controls|SettingsCard">
+            <Setter Property="Background" Value="#1D1D1D"></Setter>
+            <Setter Property="CornerRadius" Value="5"></Setter>
+            <Setter Property="FontSize" Value="16"></Setter>
         </Style>
     </UserControl.Styles>
     <ScrollViewer>
@@ -30,13 +33,8 @@
                 </StackPanel>
             </Grid>
             <StackPanel Margin="10 0 10 0" Spacing="10">
-                <Expander Header="{i18n:Localize CommonSettings}" HorizontalAlignment="Stretch" IsExpanded="True" >
-                    <Grid ColumnDefinitions="150,*,Auto" RowDefinitions="Auto,10,Auto,10,Auto" 
-                          VerticalAlignment="Center" >
-
-                        <TextBlock VerticalAlignment="Center"
-                                   Text="{i18n:Localize Language}" FontSize="16" />
-
+                <StackPanel Margin="10" Spacing="10">
+                    <controls:SettingsCard SettingName="{i18n:Localize Language}">
                         <ListBox Grid.Column="2" ItemsSource="{Binding LanguageModels}"
                                  SelectedItem="{Binding SelectedLanguage}"
                                  HorizontalAlignment="Left" CornerRadius="4"
@@ -48,41 +46,41 @@
                             </ListBox.ItemsPanel>
                             <ListBox.ItemTemplate>
                                 <DataTemplate DataType="{x:Type models:LanguageModel}">
-                                    <TextBlock Text="{Binding Label}" Width="150" TextAlignment="Center" />
+                                    <TextBlock Text="{Binding Label}" Width="125" TextAlignment="Center" />
                                 </DataTemplate>
                             </ListBox.ItemTemplate>
                         </ListBox>
-
-                        <TextBlock Grid.Row="2" VerticalAlignment="Center"
-                                   Text="{i18n:Localize FilePrefix}" FontSize="16" />
-                        <TextBox Grid.Row="2" Grid.Column="2"
-                                 Text="{Binding FilePrefix}" TextAlignment="Center" />
-                        <TextBlock Grid.Row="4" VerticalAlignment="Center" Margin="0,0,10,0"
-                                   Text="{i18n:Localize  SaveDirectory}" FontSize="16" />
-                        <Grid Grid.Row="4"  Grid.Column="2" ColumnDefinitions="*,Auto">
-                            <TextBox Text="{Binding SaveDirectory}" IsReadOnly="True"
-                                     ToolTip.Tip="{Binding SaveDirectory}" />
+                    </controls:SettingsCard>
+                    <controls:SettingsCard SettingName="{i18n:Localize  SaveDirectory}">
+                        <Grid ColumnDefinitions="*,Auto">
+                            <TextBox Text="{Binding SaveDirectory}"
+                                       VerticalAlignment="Center" Margin="0 0 2 0" IsReadOnly="True"
+                                       ToolTip.Tip="{Binding SaveDirectory}" />
                             <Button Grid.Column="2" Command="{Binding ChangeDir}"
                                     CommandParameter="SaveDirectory">
                                 ...
                             </Button>
                         </Grid>
-                         </Grid>
-                </Expander>
-                <Expander Header="{i18n:Localize BorderSettings}" HorizontalAlignment="Stretch" IsExpanded="False">
-                    <Grid ColumnDefinitions="150,*,Auto" RowDefinitions="Auto,10,Auto" 
-                          VerticalAlignment="Center" >
-                        <TextBlock Grid.Row="0"  Text="{i18n:Localize BorderColor}" FontSize="16"></TextBlock>
-                        <ColorPicker Grid.Row="0" Grid.Column="2" Width="200" HorizontalAlignment="Right" Color="{Binding FocusBorderColor}"></ColorPicker>
-                        <TextBlock Grid.Row="2"  Text="{i18n:Localize BorderThickness}" FontSize="16"></TextBlock>
-                        <NumericUpDown Grid.Row="2" Grid.Column="2" Value="{Binding FocusBorderThickness}" Minimum="2" Maximum="16" FormatString="F0" ClipValueToMinMax="True"></NumericUpDown>
+                    </controls:SettingsCard>
+                    <controls:SettingsCard SettingName="{i18n:Localize FilePrefix}">
+                        <TextBox Width="150"
+                                 Text="{Binding FilePrefix}" TextAlignment="Center" />
+                    </controls:SettingsCard>
 
-                    </Grid>
-                </Expander>
-            </StackPanel>
+                    <controls:SettingsCard SettingName="{i18n:Localize BorderColor}">
+                        <ColorPicker Width="150" HorizontalAlignment="Right"
+                                     Color="{Binding FocusBorderColor}">
+                        </ColorPicker>
+                    </controls:SettingsCard>
+                    <controls:SettingsCard SettingName="{i18n:Localize BorderThickness}">
+                        <NumericUpDown Value="{Binding FocusBorderThickness}" Minimum="2"
+                                       Maximum="16" FormatString="F0" ClipValueToMinMax="True" Width="150">
+                        </NumericUpDown>
+                    </controls:SettingsCard>
 
+
+                </StackPanel>
+            </StackPanel>
         </StackPanel>
     </ScrollViewer>
-
-
 </UserControl>
\ No newline at end of file
diff --git a/src/VirtualStreetSnap/VirtualStreetSnap.csproj b/src/VirtualStreetSnap/VirtualStreetSnap.csproj
index b198ace..5f3549d 100644
--- a/src/VirtualStreetSnap/VirtualStreetSnap.csproj
+++ b/src/VirtualStreetSnap/VirtualStreetSnap.csproj
@@ -15,7 +15,7 @@
         <BuiltInComInteropSupport>true</BuiltInComInteropSupport>
         <ApplicationManifest>app.manifest</ApplicationManifest>
         <AvaloniaUseCompiledBindingsByDefault>true</AvaloniaUseCompiledBindingsByDefault>
-        <Version>0.1.5.1</Version>
+        <Version>0.1.5.2</Version>
         <Authors>Atticus</Authors>
         <Description>A simple screen shot tool design for VirtualStreetSnap</Description>
     </PropertyGroup>
@@ -59,5 +59,9 @@
         <DependentUpon>ImageEditorWindow.axaml</DependentUpon>
         <SubType>Code</SubType>
       </Compile>
+      <Compile Update="Controls\SettingsCard.axaml.cs">
+        <DependentUpon>Card.axaml</DependentUpon>
+        <SubType>Code</SubType>
+      </Compile>
     </ItemGroup>
 </Project>