Added Button to save - updated SplitView functionality - updated SplitViewOpenButton

ViewModels/MainWindowViewModel.cs

@@ -75,6 +75,7 @@ public class MainWindowViewModel : ViewModelBase
     private void ChangeSelectedColor(SolidColorBrush color)
     {
         Brush = color;
+        SelectedColor = color.Color.ToString();
     }
     
     private void OnCanvasPointerPressed(PointerPressedEventArgs? e)

ViewModels/ViewModelBase.cs

@@ -1,11 +1,19 @@
 using System;
 using System.Collections.ObjectModel;
 using System.ComponentModel.DataAnnotations;
+using System.IO;
+using System.Threading.Tasks;
+using Avalonia;
+using Avalonia.Controls;
 using Avalonia.Input;
 using Avalonia.Media;
+using Avalonia.Media.Imaging;
+using Avalonia.Platform;
+using Avalonia.Platform.Storage;
 using CommunityToolkit.Mvvm.ComponentModel;
 using CommunityToolkit.Mvvm.Input;
 using SimpleDraw.Models;
+using SimpleDraw.Views;
 
 namespace SimpleDraw.ViewModels;
 
@@ -13,8 +21,7 @@ public class ViewModelBase : ObservableObject
 {
     public int WindowWidth { get; set; } = 1200;
     public int WindowHeight { get; set; } = 800;
-    
+    public ObservableCollection<ColorPickerButton>? ColorPalette { get; set; }
-    public ObservableCollection<ColorPickerButton>? ColorPalette { get; set; } 
     public IRelayCommand<PointerPressedEventArgs>? CanvasPointerPressedCommand { get; set; }
     public IRelayCommand<PointerEventArgs>? CanvasPointerMovedCommand { get; set; }
     public IRelayCommand<PointerReleasedEventArgs>? CanvasPointerReleasedCommand { get; set; }
@@ -22,7 +29,15 @@ public class ViewModelBase : ObservableObject
     public DrawingPoints? DrawingPoint { get; set; }
     
     protected bool IsDrawing { get; set; }
-    
+
+    private string _selectedColor = "Black";
+
+    public string SelectedColor
+    {
+        get => _selectedColor;
+        set => SetProperty(ref _selectedColor, value);
+    }
+
     private Brush _brush = new SolidColorBrush(new Color(a: 255, r: 0, g: 0, b: 0));
     private double _brushThickness = 2.0;
     
@@ -31,7 +46,7 @@ public class ViewModelBase : ObservableObject
         get => _brush;
         set => SetProperty(ref _brush, value);
     }
-    
+
     public double BrushThickness
     {
         get => _brushThickness;

Views/MainWindow.axaml

@@ -33,9 +33,9 @@
     </Design.DataContext>
 
     <Panel Background="Transparent">
-        <SplitView Background="Transparent" IsPaneOpen="{Binding IsSplitOpen, Mode=TwoWay}" DisplayMode="Overlay" OpenPaneLength="250">
+        <SplitView Background="Transparent" IsPaneOpen="{Binding IsSplitOpen, Mode=TwoWay}" DisplayMode="Overlay" OpenPaneLength="250" ClipToBounds="False">
             <SplitView.Pane>
-                <Border Background="Transparent" BorderBrush="Gray" BorderThickness="2">
+                <Border Background="Transparent" BorderBrush="Gray" BorderThickness="2" BoxShadow="50 0 10 10 DarkGray" CornerRadius="0, 12.5,12.5,0" >
                     <Grid Background="Transparent">
                         <Grid Background="Transparent">
                             <Grid.RowDefinitions>
@@ -56,6 +56,7 @@
                                         <MenuItem Header="Paste"/>
                                     </MenuItem>
                                 </Menu>
+                                <Button DockPanel.Dock="Top" HorizontalAlignment="Right">X</Button>
                             </DockPanel>
 
                             <StackPanel Grid.Row="1">
@@ -91,7 +92,7 @@
                     </Grid>
                 </Border>
             </SplitView.Pane>
-                <Canvas Grid.Column="1" Background="White" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
+                <Canvas x:Name="Canvas" Background="White" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                     <i:Interaction.Behaviors>
                         <behaviors:EventTriggerBehavior EventName="PointerPressed">
                             <behaviors:InvokeCommandAction
@@ -128,12 +129,35 @@
                     </ItemsControl>
                 </Canvas>
         </SplitView>
-        <Button Content="≡" Command="{Binding DisplaySplitEvent}" HorizontalAlignment="Left" VerticalAlignment="Top">
+        <StackPanel Width="30" HorizontalAlignment="Left" IsVisible="{Binding !IsSplitOpen}" Background="#d4d4fc">
-            <Button.RenderTransform>
+            <Button Content="≡" Command="{Binding DisplaySplitEvent}" HorizontalAlignment="Center" VerticalAlignment="Top">
-                <TranslateTransform X="{Binding ButtonOffset}" />
+                <Button.RenderTransform>
-            </Button.RenderTransform>
+                    <TranslateTransform X="{Binding ButtonOffset}" />
-            <Button.Transitions>
+                </Button.RenderTransform>
-            </Button.Transitions>
+            </Button>
+            <Button HorizontalAlignment="Center"
+                    Margin="0,5,0,0"
+                    BorderBrush="DimGray"
+                    BorderThickness="2"
+                    CornerRadius="12.5"
+                    Background="{Binding SelectedColor}"
+                    Width="20"
+                    Height="20"
+             />
+        </StackPanel>
+        <Button HorizontalAlignment="Right"
+                VerticalAlignment="Bottom"
+                Margin="0,0,7.5,7.5"
+                CornerRadius="5"
+                Background="#d4d4ff"
+                FontSize="18"
+                Width="35"
+                Height="35"
+                HorizontalContentAlignment="Center"
+                VerticalContentAlignment="Center"
+                Click="SaveFileButton_Clicked"
+                >
+            🖫
         </Button>
     </Panel>
 </Window>

Views/MainWindow.axaml.cs

@@ -1,5 +1,12 @@
+using System;
+using System.IO;
+using System.Threading.Tasks;
+using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Input;
+using Avalonia.Interactivity;
+using Avalonia.Media.Imaging;
+using Avalonia.Platform.Storage;
 using SimpleDraw.ViewModels;
 
 namespace SimpleDraw.Views;
@@ -13,4 +20,39 @@ public partial class MainWindow : Window
         Topmost = true;
         Topmost = false;
     }
+
+    private async void SaveFileButton_Clicked(object sender, RoutedEventArgs args)
+    {
+        TopLevel? topLevel = TopLevel.GetTopLevel(this);
+        if(topLevel == null) return;
+
+        var file = await topLevel.StorageProvider.SaveFilePickerAsync(new FilePickerSaveOptions
+        {
+            Title = "Save Drawing",
+            DefaultExtension = ".png",
+            SuggestedFileName = "unnamed",
+            SuggestedStartLocation = await topLevel.StorageProvider.TryGetFolderFromPathAsync(Environment.GetFolderPath(Environment.SpecialFolder.MyPictures)),
+        });
+
+        if (file is not null)
+        {
+            SaveCanvasAsPngAsync(Canvas, file.Path.AbsolutePath);
+        }
+    }
+
+    public async Task SaveCanvasAsPngAsync(Canvas canvas, string filePath)
+    {
+        Rect bounds = canvas.Bounds;
+        PixelSize pixelSize = new PixelSize((int)bounds.Width, (int)bounds.Height);
+        Vector dpi = new Vector(96, 96);
+
+        RenderTargetBitmap renderBitmap = new RenderTargetBitmap(pixelSize, dpi);
+
+        renderBitmap.Render(canvas);
+
+        await using (FileStream stream = File.OpenWrite(filePath))
+        {
+            renderBitmap.Save(stream);
+        }
+    }
 }