SimpleDraw/Views/MainWindow.axaml

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="using:SimpleDraw.ViewModels"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:models="clr-namespace:SimpleDraw.Models"
        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
        x:Class="SimpleDraw.Views.MainWindow"
        xmlns:i="using:Avalonia.Xaml.Interactivity"
        xmlns:behaviors="using:Avalonia.Xaml.Interactions.Core"
        xmlns:componentModel="clr-namespace:CommunityToolkit.Mvvm.ComponentModel;assembly=CommunityToolkit.Mvvm"
        xmlns:system="clr-namespace:System;assembly=System.Runtime"
        x:DataType="vm:MainWindowViewModel"
        TransparencyLevelHint="Transparent"
        TransparencyBackgroundFallback="DimGray"
        Background="Transparent"
        Icon="/Assets/avalonia-logo.ico"
        Title="SimpleDraw"
        Width="{Binding WindowWidth}"
        Height="{Binding WindowHeight}"
        WindowState="{Binding WindowStateProperty, Mode=TwoWay}"
        SystemDecorations="None"
        ExtendClientAreaToDecorationsHint="True"
        MinWidth="400"
        MinHeight="300"
        WindowStartupLocation="CenterScreen"
        >
    <Window.Resources>
        <system:String x:Key="BrushSizeFormat">{0:0.#####}</system:String>
    </Window.Resources>
    
    <Design.DataContext>
        <!-- This only sets the DataContext for the previewer in an IDE,
             to set the actual DataContext for runtime, set the DataContext property in code (look at App.axaml.cs) -->
        <vm:MainWindowViewModel/>
    </Design.DataContext>

    <Panel Background="Transparent">
        <SplitView Background="Transparent" IsPaneOpen="{Binding IsSplitOpen, Mode=TwoWay}" DisplayMode="Overlay" OpenPaneLength="250" ClipToBounds="False" PaneBackground="Transparent">
            <SplitView.Pane>
                <Border Background="#d4d4fc" BorderBrush="Gray" BorderThickness="1" CornerRadius="0, 12.5,12.5,0">
                    <Grid Background="#d4d4fc" Margin="5"> <!-- Background of left panel opened -->
                        <Grid Background="Transparent">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="50*"></RowDefinition>
                                <RowDefinition Height="50*"></RowDefinition>
                                <RowDefinition Height="50*"></RowDefinition>
                                <RowDefinition Height="50*"></RowDefinition>
                            </Grid.RowDefinitions>
                            <StackPanel Grid.Row="0">
                                <TextBox Text="Select Color:" IsHitTestVisible="False" IsReadOnly="True" BorderThickness="0" Background="Transparent" Margin="0,5,5,-5"/>
                                <ItemsControl ItemsSource="{Binding ColorPalette}">
                                    <ItemsControl.ItemsPanel>
                                        <ItemsPanelTemplate>
                                            <WrapPanel Orientation="Horizontal" />
                                        </ItemsPanelTemplate>
                                    </ItemsControl.ItemsPanel>
                                    <ItemsControl.ItemTemplate>
                                        <DataTemplate x:DataType="models:ColorPickerButton">
                                            <Button Margin="5,0,0,5"
                                                    BorderBrush="DimGray"
                                                    BorderThickness="2"
                                                    CornerRadius="12.5"
                                                    Background="{Binding Color}"
                                                    Width="20"
                                                    Height="20"
                                                    Command="{Binding SelectColorCommand}"
                                                    CommandParameter="{Binding}"
                                                    />
                                        </DataTemplate>
                                    </ItemsControl.ItemTemplate>
                                </ItemsControl>
                                <!-- Colorpicker -->
                            </StackPanel>
                            <StackPanel Grid.Row="1">
                                <TextBox HorizontalAlignment="Left" TextAlignment="Left" Margin="0,5,5,-5" IsHitTestVisible="False" IsReadOnly="True" BorderThickness="0" Background="Transparent">
                                    Brush Size:
                                </TextBox>
                                <TextBox Text="{Binding BrushThickness, Mode=TwoWay}" Margin="5,0" HorizontalAlignment="Stretch" TextAlignment="Left" BorderThickness="2" Background="Transparent"></TextBox>
                                <Slider Margin="10, -5, 10, 0" Value="{Binding BrushThickness}" Maximum="50" Minimum="0.5"></Slider>
                            </StackPanel>
                        </Grid>
                    </Grid>
                </Border>
            </SplitView.Pane>
            <Grid>
                <Canvas x:Name="Canvas" Background="White" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                    <i:Interaction.Behaviors>
                        <behaviors:EventTriggerBehavior EventName="PointerPressed">
                            <behaviors:InvokeCommandAction
                                Command="{Binding CanvasPointerPressedCommand}"
                                PassEventArgsToCommand="True" />
                        </behaviors:EventTriggerBehavior>
                        <behaviors:EventTriggerBehavior EventName="PointerMoved">
                            <behaviors:InvokeCommandAction
                                Command="{Binding CanvasPointerMovedCommand}"
                                PassEventArgsToCommand="True" />
                        </behaviors:EventTriggerBehavior>
                        <behaviors:EventTriggerBehavior EventName="PointerReleased">
                            <behaviors:InvokeCommandAction
                                Command="{Binding CanvasPointerReleasedCommand}"
                                PassEventArgsToCommand="True" />
                        </behaviors:EventTriggerBehavior>
                    </i:Interaction.Behaviors>

                    <ItemsControl ItemsSource="{Binding DrawingPoints}">
                        <ItemsControl.ItemsPanel>
                            <ItemsPanelTemplate>
                                <Panel HorizontalAlignment="Stretch" VerticalAlignment="Stretch" MinWidth="{Binding WindowWidth}" MinHeight="{Binding WindowHeight}"/>
                            </ItemsPanelTemplate>
                        </ItemsControl.ItemsPanel>
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <Polyline Points="{Binding CurrentDrawingPoints}"
                                          Stroke="{Binding Brush}"
                                          StrokeThickness="{Binding BrushThickness}"
                                          >
                                </Polyline>
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>
                </Canvas>
                <Border Background="Gray" Opacity="0.7" IsVisible="False">
                    <i:Interaction.Behaviors>
                        <DataTriggerBehavior Binding="{Binding IsSplitOpen}" Value="True">
                            <ChangePropertyAction PropertyName="IsVisible" Value="True"/>
                        </DataTriggerBehavior>
                        <DataTriggerBehavior Binding="{Binding IsSplitOpen}" Value="False">
                            <ChangePropertyAction PropertyName="IsVisible" Value="False"/>
                        </DataTriggerBehavior>
                    </i:Interaction.Behaviors>
                </Border>
            </Grid>
        </SplitView>
        <!-- left Info bar -->

        <StackPanel Width="30" HorizontalAlignment="Left" IsVisible="{Binding !IsSplitOpen}" Background="#d4d4fc">
            <!-- Menu-Opener -->
            <Button Content="≡"
                    Command="{Binding DisplaySplitEvent}"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Top"
                    FontSize="18"
                    Width="25"
                    Height="25"
                    HorizontalContentAlignment="Center"
                    VerticalContentAlignment="Center"
                    Padding="0,-6,0,0"
                    Margin="0,5,0,0"
                    >
                <Button.RenderTransform>
                    <TranslateTransform X="{Binding ButtonOffset}" />
                </Button.RenderTransform>
            </Button>
            <!-- SelectedColor Info -->
            <Button HorizontalAlignment="Center"
                    Margin="0,5,0,0"
                    BorderBrush="DimGray"
                    BorderThickness="2"
                    CornerRadius="12.5"
                    Background="{Binding SelectedColor}"
                    Width="20"
                    Height="20"
             />
            <!-- BrushThickness Info -->
            <TextBox Text="{Binding BrushThickness}"
                     HorizontalAlignment="Center"
                     TextAlignment="Center"
                     Margin="0,5,0,0"
                     Padding="0, 2, 0, 0"
                     Background="Transparent"
                     BorderThickness="0"
                     Width="25"
                     Height="25"
                     MinHeight="25"
                     MinWidth="25"
                     IsHitTestVisible="False"
                     IsReadOnly="True"
            />
        </StackPanel>
        <!-- Savebutton -->
        <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>
        <Grid HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,7.5,7.5,0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="25"></ColumnDefinition>
                <ColumnDefinition Width="25"></ColumnDefinition>
                <ColumnDefinition Width="25"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Button Grid.Column="2"
                    Margin="0,0,0,0"
                    Padding="0"
                    CornerRadius="0,5,5,0"
                    Background="#d4d4ff"
                    FontSize="12"
                    Width="25"
                    Height="25"
                    HorizontalContentAlignment="Center"
                    VerticalContentAlignment="Center"
                    Command="{Binding CloseAppEvent}"
            >
                X
            </Button>
            <Button Grid.Column="1"
                    Padding="0"
                    Background="#d4d4ff"
                    FontSize="12"
                    Width="25"
                    Height="25"
                    HorizontalContentAlignment="Center"
                    VerticalContentAlignment="Center"
                    Command="{Binding MaximizeAppEvent}"
            >
                🗖
            </Button>
            <Button Grid.Column="0"
                    Margin="0,0,0,0"
                    Padding="0"
                    CornerRadius="5,0,0,5"
                    Background="#d4d4ff"
                    FontSize="12"
                    Width="25"
                    Height="25"
                    HorizontalContentAlignment="Center"
                    VerticalContentAlignment="Center"
                    Command="{Binding MinimizeAppEvent}"
            >
                🗕
            </Button>
        </Grid>
    </Panel>
</Window>