Add TextColor property to BaseButton and make MathInputButton's color customizable

CSharpMath.CrossPlatform.slnf

@@ -28,7 +28,8 @@
       "CSharpMath.Avalonia.Example/CSharpMath.Avalonia.Example.csproj",
       "CSharpMath.SkiaSharp/CSharpMath.SkiaSharp.csproj",
       "CSharpMath.Forms/CSharpMath.Forms.csproj",
-      "CSharpMath.Forms.Example/CSharpMath.Forms.Example/CSharpMath.Forms.Example.csproj"
+      "CSharpMath.Forms.Example/CSharpMath.Forms.Example/CSharpMath.Forms.Example.csproj",
+      "CSharpMath.Forms.Tests/CSharpMath.Forms.Tests.csproj"
     ]
   }
 }

CSharpMath.Forms.Example/CSharpMath.Forms.Example/CSharpMath.Forms.Example.csproj

@@ -10,6 +10,18 @@
     <Compile Include="..\..\CSharpMath.Rendering.Tests\TestRenderingSharedData.cs" Link="Examples\TestRenderingSharedData.cs" />
   </ItemGroup>
 
+  <ItemGroup>
+    <Content Include="Controls\ImageSourceMathInputButtons\flame.png">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </Content>
+    <Content Include="Controls\ImageSourceMathInputButtons\metaltrashcan.png">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </Content>
+    <Content Include="Controls\ImageSourceMathInputButtons\recyclebin.png">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </Content>
+  </ItemGroup>
+
   <ItemGroup>
     <PackageReference Include="Xamarin.Forms" Version="4.3.0.908675" />
     <ProjectReference Include="..\..\CSharpMath.Forms\CSharpMath.Forms.csproj" />

CSharpMath.Forms.Example/CSharpMath.Forms.Example/Controls/MathKeyboard.xaml

@@ -1,7 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
-             xmlns:r="clr-namespace:CSharpMath.Rendering.FrontEnd;assembly=CSharpMath.Rendering"
              xmlns:e="clr-namespace:CSharpMath.Forms.Example"
              xmlns:f="clr-namespace:CSharpMath.Forms;assembly=CSharpMath.Forms"
              x:Class="CSharpMath.Forms.Example.MathKeyboard"
@@ -113,12 +112,14 @@
         <!--Right row of first 3 tabs-->
         <Style TargetType="f:MathInputButton" Class="Back">
             <Setter Property="Input" Value="Backspace"/>
+            <Setter Property="TextColor" Value="Red" />
             <Setter Property="Grid.Column" Value="5"/>
             <Setter Property="Grid.Row" Value="0"/>
             <Setter Property="Keyboard" Value="{StaticResource Keyboard}"/>
         </Style>
-        <Style TargetType="f:MathInputButton" Class="Clear">
+        <Style TargetType="f:ImageSourceMathInputButton" Class="Clear">
             <Setter Property="Input" Value="Clear"/>
+            <Setter Property="Source" Value="Controls/ImageSourceMathInputButtons/recyclebin.png" />
             <Setter Property="Grid.Column" Value="5"/>
             <Setter Property="Grid.Row" Value="1"/>
             <Setter Property="Keyboard" Value="{StaticResource Keyboard}"/>
@@ -155,7 +156,7 @@
                 <ColumnDefinition Width="*"/>
             </ColumnDefinitionCollection>
         </Grid.ColumnDefinitions>
-        <f:MathInputButton Input="Left" Grid.Column="0" Keyboard="{StaticResource Keyboard}"/>
+        <f:MathInputButton x:Name="LeftButton" Input="Left" Grid.Column="0" Keyboard="{StaticResource Keyboard}"/>
         <f:MathButton x:Name="NumbersButton" Grid.Column="1" Command="{e:SwitchToTab Self={Reference this}, Target=Numbers}">
             <f:MathView LaTeX="123"/>
         </f:MathButton>
@@ -181,7 +182,7 @@
             <f:MathInputButton Input="Equals" Grid.Row="3" Grid.Column="3" Keyboard="{StaticResource Keyboard}"/>
             <f:MathInputButton Input="Plus" Grid.Row="3" Grid.Column="4" Keyboard="{StaticResource Keyboard}"/>
             <f:MathInputButton StyleClass="Back"/>
-            <f:MathInputButton StyleClass="Clear"/>
+            <f:ImageSourceMathInputButton StyleClass="Clear"/>
             <f:MathInputButton StyleClass="Dismiss"/>
             <f:MathInputButton StyleClass="Enter"/>
         </Grid>
@@ -210,7 +211,7 @@
             <f:MathInputButton Input="Ratio" Grid.Row="3" Grid.Column="3" Keyboard="{StaticResource Keyboard}"/>
             <f:MathInputButton Input="Comma" Grid.Row="3" Grid.Column="4" Keyboard="{StaticResource Keyboard}"/>
             <f:MathInputButton StyleClass="Back"/>
-            <f:MathInputButton StyleClass="Clear"/>
+            <f:ImageSourceMathInputButton StyleClass="Clear"/>
             <f:MathInputButton StyleClass="Dismiss"/>
             <f:MathInputButton StyleClass="Enter"/>
         </Grid>
@@ -239,7 +240,7 @@
             <f:MathInputButton Input="NthRoot" Grid.Row="3" Grid.Column="3" Keyboard="{StaticResource Keyboard}"/>
             <f:MathInputButton Input="Degree" Grid.Row="3" Grid.Column="4" Keyboard="{StaticResource Keyboard}"/>
             <f:MathInputButton StyleClass="Back"/>
-            <f:MathInputButton StyleClass="Clear"/>
+            <f:ImageSourceMathInputButton StyleClass="Clear"/>
             <f:MathInputButton StyleClass="Dismiss"/>
             <f:MathInputButton StyleClass="Enter"/>
         </Grid>
@@ -268,7 +269,7 @@
             <f:MathInputButton Input="Up" Grid.Row="3" Grid.Column="3" Keyboard="{StaticResource Keyboard}"/>
             <f:MathInputButton Input="Up" Grid.Row="3" Grid.Column="4" Keyboard="{StaticResource Keyboard}"/>
             <f:MathInputButton StyleClass="Back"/>
-            <f:MathInputButton StyleClass="Clear"/>
+            <f:ImageSourceMathInputButton StyleClass="Clear"/>
             <f:MathInputButton StyleClass="Dismiss"/>
             <f:MathInputButton StyleClass="Enter"/>
         </Grid>
@@ -349,10 +350,10 @@
             <f:MathButton Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="3" Command="{e:SwitchToTab Self={Reference this}, Target=Letters}" x:Name="ShiftCapitalsButton">
                 <f:MathView LaTeX="⇧"/>
             </f:MathButton>
-            <f:MathInputButton StyleClass="Clear" Grid.Row="2" Grid.Column="17" Grid.ColumnSpan="3"/>
+            <f:ImageSourceMathInputButton StyleClass="Clear" Grid.Row="2" Grid.Column="17" Grid.ColumnSpan="3"/>
             <f:MathInputButton StyleClass="Dismiss" Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="5"/>
             <f:MathInputButton StyleClass="Enter" Grid.Row="3" Grid.Column="15" Grid.RowSpan="1" Grid.ColumnSpan="5"/>
         </Grid>
-        <f:MathInputButton Input="Right" Grid.Column="6" Keyboard="{StaticResource Keyboard}"/>
+        <f:MathInputButton x:Name="RightButton" Input="Right" Grid.Column="6" Keyboard="{StaticResource Keyboard}"/>
     </Grid>
 </ContentView>

CSharpMath.Forms.Example/CSharpMath.Forms.Example/Controls/MathKeyboard.xaml.cs

@@ -1,5 +1,8 @@
 using System;
+using System.Linq;
+using CSharpMath.Editor;
 using Xamarin.Forms;
+using Xamarin.Forms.Internals;
 using Xamarin.Forms.Xaml;
 
 namespace CSharpMath.Forms.Example {
@@ -20,12 +23,8 @@ public MathKeyboard(float fontSize = Rendering.FrontEnd.PainterConstants.Default
     public Tab CurrentTab {
       get => _tab;
       set {
-        foreach (var grid in new[] {
-          Numbers, Symbols, Functions, Operations, Letters, LettersCapitals
-        }) grid.IsVisible = false;
-        foreach (var gridButton in new[] {
-          NumbersButton, SymbolsButton, FunctionsButton, OperationsButton, LettersButton
-        }) gridButton.BackgroundColor = Color.Transparent;
+        foreach (var buttonGrid in ButtonGrids) buttonGrid.IsVisible = false;
+        foreach (var tabButton in TabButtons) tabButton.BackgroundColor = Color.Transparent;
         var (selectedGrid, selectedGridButton) =
           value switch {
             Tab.Numbers => (Numbers, NumbersButton),
@@ -43,6 +42,27 @@ public Tab CurrentTab {
         _tab = value;
       }
     }
+    public void SetButtonsTextColor(Color color, Color? placeholderRestingColor = null, Color? placeholderActiveColor = null) {
+      foreach (var button in new MathButton[] { ShiftButton, ShiftCapitalsButton }.Concat(TabButtons))
+        button.TextColor = color;
+      foreach (var button in new[] { LeftButton, RightButton}
+                            .Concat(ButtonGrids.SelectMany(grid => grid.Children)
+                            .Where(child => child is MathInputButton button && button.Input != MathKeyboardInput.Backspace)
+                            .Cast<MathInputButton>())) {
+        button.TextColor = color;
+        button.PlaceholderRestingColor = placeholderRestingColor;
+        button.PlaceholderActiveColor = placeholderActiveColor;
+        button.ButtonDraw(/* If the LaTeXSettings change but the button's appearance properties don't, there's no event that causes the execution of this method. */);
+      };
+    }
+    public void SetClearButtonImageSource(ImageSource imageSource) {
+      foreach(var button in ButtonGrids.SelectMany(grid => grid.Children)
+                            .OfType<ImageSourceMathInputButton>()
+                            .Where(button => button.Input == MathKeyboardInput.Clear))
+      button.Source = imageSource;
+    }
+    MathButton[] TabButtons => new[] { NumbersButton, SymbolsButton, FunctionsButton, OperationsButton, LettersButton };
+    Grid[] ButtonGrids => new[] { Numbers, Symbols, Functions, Operations, Letters, LettersCapitals };
   }
   [AcceptEmptyServiceProvider]
   public class SwitchToTabExtension : IMarkupExtension<Command> {
@@ -54,4 +74,4 @@ public Command ProvideValue(IServiceProvider _) =>
       new Command(() => Self.CurrentTab = Target);
     object IMarkupExtension.ProvideValue(IServiceProvider _) => ProvideValue(_);
   }
-}
+}

CSharpMath.Forms.Example/CSharpMath.Forms.Example/EditorPage.xaml.cs

@@ -1,4 +1,7 @@
+using System;
+using System.Collections.Generic;
 using System.Linq;
+using CSharpMath.SkiaSharp;
 using SkiaSharp;
 using SkiaSharp.Views.Forms;
 using Xamarin.Forms;
@@ -13,14 +16,13 @@ public EditorPage() {
     }
   }
   public class EditorView : ContentView {
+    public MathPainter OutputMathPainter = new MathPainter { TextColor = SKColors.Black };
+    MathKeyboard keyboard = new MathKeyboard(Rendering.FrontEnd.PainterConstants.LargerFontSize);
     public EditorView() {
       // Basic functionality
       var view = new SKCanvasView { HeightRequest = 225 };
-      var keyboard = new MathKeyboard(Rendering.FrontEnd.PainterConstants.LargerFontSize);
       var viewModel = keyboard.Keyboard;
-      viewModel.BindDisplay(view, new SkiaSharp.MathPainter {
-        TextColor = SKColors.Black
-      }, new SKColor(0, 0, 0, 153));
+      viewModel.BindDisplay(view, OutputMathPainter, new SKColor(0, 0, 0, 153));
 
       // Input from physical keyboard
       var entry = new Entry {
@@ -84,6 +86,7 @@ static View GridItem(int row, int col, View view) {
               new StackLayout {
                 Orientation = StackOrientation.Horizontal,
                 Children = {
+                  new Button { Text = "Change appearance", Command = new Command(ChangeAppearance) },
                   entry,
                   new Button {
                     Text = "Reset answer pan",
@@ -96,5 +99,44 @@ static View GridItem(int row, int col, View view) {
         }
       };
     }
+    int CurrentThemeIndex = 0;
+    public void ChangeAppearance() {
+      CurrentThemeIndex = (CurrentThemeIndex + 1) % Themes.Count;
+      Themes[CurrentThemeIndex].Invoke();
+      keyboard.Keyboard.InsertionIndex = keyboard.Keyboard.InsertionIndex; // Hack to redraw placeholders in the output.
+    }
+    IList<Action> Themes => new Action[] {
+      () => { // This theme is the default. For a round-trip through the themes we need to set them again:
+        OutputMathPainter.TextColor = SKColors.Black;
+        Atom.LaTeXSettings.PlaceholderBlinks = false;
+        Atom.LaTeXSettings.PlaceholderActiveColor = null;
+        Atom.LaTeXSettings.PlaceholderRestingColor = null;
+        Atom.LaTeXSettings.PlaceholderActiveNucleus = "■";
+        Atom.LaTeXSettings.PlaceholderRestingNucleus = "□";
+        keyboard.SetButtonsTextColor(Color.Black);
+        keyboard.SetClearButtonImageSource("Controls/ImageSourceMathInputButtons/recyclebin.png");
+      },
+      () => {
+        UseMyCustomizedPlaceholderAppearance();
+        keyboard.SetButtonsTextColor(Color.Black); // Placeholder appearance on the keys is the same as in the output by default.
+        keyboard.SetClearButtonImageSource("Controls/ImageSourceMathInputButtons/metaltrashcan.png");
+      },
+      () => {
+        Atom.LaTeXSettings.PlaceholderBlinks = true;
+        OutputMathPainter.TextColor = SKColors.DarkGreen;
+        UseMyCustomizedPlaceholderAppearance();
+        // If you'd like to use different keyboard colors than output colors and you specified a placeholder color,
+        // probably you'll not want to use the same placeholder color on the keyboard:
+        keyboard.SetButtonsTextColor(Color.Brown, CalculateMyPlaceholderRestingColorFromSurroundingTextColor(Color.Brown));
+        keyboard.SetClearButtonImageSource("Controls/ImageSourceMathInputButtons/flame.png");
+      }
+    };
+
+    public void UseMyCustomizedPlaceholderAppearance() {
+      // You could also customize the "Active" placeholder nucleus and color, but for this example we don't.
+      Atom.LaTeXSettings.PlaceholderRestingNucleus = "■";
+      Atom.LaTeXSettings.PlaceholderRestingColor = CalculateMyPlaceholderRestingColorFromSurroundingTextColor(OutputMathPainter.TextColor.ToFormsColor());
+    }
+    public static Color CalculateMyPlaceholderRestingColorFromSurroundingTextColor(Color textColor) => textColor.WithLuminosity(textColor.Luminosity > 0.5 ? 0.2 : 0.8);
   }
 }