Use AvaloniaEdit

src/RunSQL/App.xaml

@@ -5,5 +5,6 @@
   <Application.Styles>
     <FluentTheme />
     <StyleInclude Source="avares://Avalonia.Controls.DataGrid/Themes/Fluent.xaml" />
+    <StyleInclude Source="avares://AvaloniaEdit/AvaloniaEdit.xaml" />
   </Application.Styles>
 </Application>

src/RunSQL/RunSQL.csproj

@@ -10,6 +10,7 @@
         <PackageReference Include="Avalonia.Controls.DataGrid" Version="$(AvaloniaVersion)" />
         <PackageReference Include="Avalonia.Desktop" Version="$(AvaloniaVersion)" />
         <PackageReference Include="Avalonia.ReactiveUI" Version="$(AvaloniaVersion)" />
+        <PackageReference Include="Avalonia.AvaloniaEdit" Version="$(AvaloniaVersion)" />
         <PackageReference Include="Avalonia.Diagnostics" Version="$(AvaloniaVersion)"
                           Condition=" '$(Configuration)' == 'Debug' " />
         <PackageReference Include="System.Data.SQLite.Core" Version="1.0.113.7" />

src/RunSQL/Views/MainWindow.xaml

@@ -3,6 +3,7 @@
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         xmlns:views="clr-namespace:RunSQL.Views"
+        xmlns:avaloniaEdit="https://github.com/avaloniaui/avaloniaedit"
         mc:Ignorable="d" d:DesignWidth="500" d:DesignHeight="350"
         x:Class="RunSQL.Views.MainWindow"
         Width="800" Height="400"
@@ -22,11 +23,10 @@
             </ItemsControl>
         </ScrollViewer>
         <DockPanel Margin="6 12 12 12">
-            <TextBox DockPanel.Dock="Top"
-                     Text="{Binding CommandText}"
-                     AcceptsReturn="True"
-                     Watermark="Enter your SQL script"
-                     Margin="0 0 0 6" />
+            <avaloniaEdit:TextEditor Name="TextEditor"
+                                     SyntaxHighlighting="TSQL"
+                                     DockPanel.Dock="Top"
+                                     Margin="0 10 0 6" />
             <Button Command="{Binding Run}"
                     Content="Run"
                     Margin="0 6 0 6"
@@ -37,7 +37,7 @@
                        Foreground="Red"
                        DockPanel.Dock="Top"
                        Margin="0 6 0 0" />
-            <DataGrid Name="dataGrid"
+            <DataGrid Name="DataGrid"
                       Items="{Binding Table.Rows}"
                       IsReadOnly="True"
                       CanUserResizeColumns="True"

src/RunSQL/Views/MainWindow.xaml.cs

@@ -1,10 +1,12 @@
 using System.Reactive;
 using System.Reactive.Disposables;
+using System.Reactive.Linq;
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Data;
 using Avalonia.Markup.Xaml;
 using Avalonia.ReactiveUI;
+using AvaloniaEdit;
 using ReactiveUI;
 using RunSQL.Models;
 using RunSQL.ViewModels;
@@ -13,7 +15,9 @@ namespace RunSQL.Views
 {
     public class MainWindow : ReactiveWindow<MainWindowViewModel>
     {
-        private DataGrid DataGrid => this.FindControl<DataGrid>("dataGrid");
+        private DataGrid DataGrid => this.FindControl<DataGrid>("DataGrid");
+
+        private TextEditor TextEditor => this.FindControl<TextEditor>("TextEditor");
 
         public MainWindow()
         {
@@ -39,6 +43,17 @@ private void InitializeComponent()
                             });
                     }))
                     .DisposeWith(disposables);
+
+                this.Bind(ViewModel, vm => vm.CommandText, v => v.TextEditor.Text)
+                    .DisposeWith(disposables);
+
+                Observable
+                    .FromEventPattern(this.TextEditor, nameof(TextEditor.TextChanged))
+                    .Subscribe(Observer.Create<EventPattern<object>>(_ =>
+                    {
+                        ViewModel.CommandText = TextEditor.Text;
+                    }))
+                    .DisposeWith(disposables);
             });
             AvaloniaXamlLoader.Load(this);
         }