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"
        Icon="/Assets/avalonia-logo.ico"
        Title="SimpleDraw"
        Width="{Binding WindowWidth}"
        Height="{Binding WindowHeight}"
        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>
    
    <DockPanel>
        <Menu DockPanel.Dock="Top">
            <MenuItem Header="_File">
                <MenuItem Header="_Open..."/>
                <Separator/>
                <MenuItem Header="_Exit"/>
            </MenuItem>
            <MenuItem Header="_Edit">
                <MenuItem Header="Copy"/>
                <MenuItem Header="Paste"/>
            </MenuItem>
        </Menu>
        <Grid Background="Gray">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="105"></ColumnDefinition>
                <ColumnDefinition Width="1*" MinWidth="300"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Grid Grid.Column="0" Background="LightGray">
                <Grid.RowDefinitions>
                    <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"/>
                    <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>
                    <TextBox HorizontalAlignment="Left" TextAlignment="Left" Margin="5,5,5,0" 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="5, 0" Value="{Binding BrushThickness}" Maximum="50" Minimum="0.5"></Slider>
                </StackPanel>
            </Grid>
            <Canvas Grid.Column="1" 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>
        </Grid>
    </DockPanel>
</Window>