[QuickAccent] Add description of current selected letter (#20587)

* Adding unicode names and adjusting UI (WIP)

* Added changing letter names

* Add optioins to hide description (WIP)

* WIP

* Change to binding property

* Adress PR comments

* Set TextBlock in border

* * Added to settings
* Fixed string showing/not showing one time after switching character
* Removed unneccessairy command in SettingsService.cs
* Moved showdescription enum to settings.ui

* Adding Fluent design :)

* Fix merge errors

* Center list

* Fixed code not working. Accepted some code style changes.

* Merge main in branch #2

* [Quick Accent] support unicode description for UTF-16 surrogate pairs

* [Quick Accent] fix check-spelling-bot errors

* [check-spelling] accept LANGID as correct word

* [Quick Accent] fix delay when calling ShowToolbar for the first time

* [Quick Accent] use toggle switch to turn off/on Unicode description

* [Quick Accent] fix after merge

* [Quick Accent] add UnicodeInformation.dll to installer

Co-authored-by: Niels Laute <niels.laute@live.nl>

src/modules/poweraccent/PowerAccent.UI/App.xaml.cs

@@ -17,9 +17,8 @@ namespace PowerAccent.UI
         protected override void OnStartup(StartupEventArgs e)
         {
             const string appName = "QuickAccent";
-            bool createdNew;
 
-            _mutex = new Mutex(true, appName, out createdNew);
+            _mutex = new Mutex(true, appName, out bool createdNew);
 
             if (!createdNew)
             {

src/modules/poweraccent/PowerAccent.UI/PowerAccent.UI.csproj

@@ -29,7 +29,9 @@
 	</ItemGroup>
 
 	<ItemGroup>
+		<ProjectReference Include="..\..\..\common\Common.UI\Common.UI.csproj" />
 		<ProjectReference Include="..\PowerAccent.Core\PowerAccent.Core.csproj" />
+		<ProjectReference Include="..\PowerAccentKeyboardService\PowerAccentKeyboardService.vcxproj" />
 	</ItemGroup>
 
 

src/modules/poweraccent/PowerAccent.UI/Selector.xaml

@@ -3,72 +3,138 @@
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-    xmlns:local="clr-namespace:PowerAccent"
+    xmlns:local="clr-namespace:PowerAccent.UI"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     Title="MainWindow"
-    Width="50"
-    Height="50"
+    Height="120"
+    MinWidth="600"
+    AllowsTransparency="True"
+    Background="Transparent"
+    DataContext="{Binding RelativeSource={RelativeSource Self}}"
     ResizeMode="NoResize"
     ShowInTaskbar="False"
     SizeToContent="WidthAndHeight"
     Visibility="Collapsed"
     WindowStyle="None"
     mc:Ignorable="d">
-    <Grid>
-        <ListBox
-            x:Name="characters"
-            HorizontalContentAlignment="Stretch"
-            VerticalContentAlignment="Stretch"
-            BorderBrush="SlateGray"
+    <Window.Resources>
+
+        <DataTemplate x:Key="DefaultKeyTemplate">
+            <TextBlock
+                VerticalAlignment="Center"
+                FontSize="18"
+                Text="{Binding}"
+                TextAlignment="Center" />
+        </DataTemplate>
+
+        <DataTemplate x:Key="SelectedKeyTemplate">
+            <TextBlock
+                VerticalAlignment="Center"
+                FontSize="18"
+                Foreground="White"
+                Text="{Binding}"
+                TextAlignment="Center" />
+        </DataTemplate>
+
+
+    </Window.Resources>
+    <Grid Margin="24,24,24,24">
+        <Border
+            HorizontalAlignment="Center"
+            VerticalAlignment="Center"
+            Background="#F9F9F9"
+            BorderBrush="#B6B6B6"
             BorderThickness="1"
-            IsHitTestVisible="False">
-            <ListBox.ItemsPanel>
-                <ItemsPanelTemplate>
-                    <VirtualizingStackPanel IsItemsHost="False" Orientation="Horizontal" />
-                </ItemsPanelTemplate>
-            </ListBox.ItemsPanel>
-            <ListBox.ItemTemplate>
-                <DataTemplate>
-                    <TextBlock
-                        VerticalAlignment="Center"
-                        FontSize="18"
-                        Text="{Binding}"
-                        TextAlignment="Center" />
-                </DataTemplate>
-            </ListBox.ItemTemplate>
-            <ListBox.ItemContainerStyle>
-                <Style x:Name="ItemStyle" TargetType="ListBoxItem">
-                    <Setter Property="Template">
-                        <Setter.Value>
-                            <ControlTemplate TargetType="{x:Type ListBoxItem}">
-                                <Border
-                                    x:Name="myBorder"
-                                    Margin="0"
-                                    Padding="0"
-                                    SnapsToDevicePixels="true"
-                                    Style="{DynamicResource borderContent}">
-                                    <ContentPresenter />
-                                </Border>
-                                <ControlTemplate.Resources>
-                                    <Style x:Key="borderContent" TargetType="Border">
-                                        <Setter Property="BorderThickness" Value="0" />
-                                        <Setter Property="BorderBrush" Value="Transparent" />
-                                        <Setter Property="Background" Value="#ECECEC" />
-                                        <Setter Property="Width" Value="50" />
-                                        <Setter Property="Height" Value="50" />
-                                    </Style>
-                                </ControlTemplate.Resources>
-                                <ControlTemplate.Triggers>
-                                    <Trigger Property="IsSelected" Value="true">
-                                        <Setter TargetName="myBorder" Property="Background" Value="White" />
-                                        <Setter Property="FontWeight" Value="Bold" />
-                                    </Trigger>
-                                </ControlTemplate.Triggers>
-                            </ControlTemplate>
-                        </Setter.Value>
-                    </Setter>
-                </Style>
-            </ListBox.ItemContainerStyle>
-        </ListBox>
+            CornerRadius="8">
+            <Border.Effect>
+                <DropShadowEffect
+                    BlurRadius="32"
+                    Opacity="0.28"
+                    ShadowDepth="1" />
+            </Border.Effect>
+            <Grid>
+                <Grid.RowDefinitions>
+                    <RowDefinition Height="Auto" />
+                    <RowDefinition Height="Auto" />
+                </Grid.RowDefinitions>
+                <ListBox
+                    x:Name="characters"
+                    HorizontalContentAlignment="Stretch"
+                    VerticalContentAlignment="Stretch"
+                    Background="Transparent"
+                    IsHitTestVisible="False"
+                    HorizontalAlignment="Center">
+                    <ListBox.ItemContainerStyle>
+                        <Style
+                            TargetType="ListBoxItem">
+                            <Setter Property="ContentTemplate" Value="{StaticResource DefaultKeyTemplate}" />
+                            <Setter Property="Template">
+                                <Setter.Value>
+                                    <ControlTemplate TargetType="{x:Type ListBoxItem}">
+                                        <Grid
+                                            Width="48"
+                                            Height="48"
+                                            Margin="0"
+                                            HorizontalAlignment="Center"
+                                            VerticalAlignment="Center"
+                                            SnapsToDevicePixels="true"
+                                            Style="{DynamicResource borderContent}">
+                                            <Rectangle
+                                                x:Name="SelectionIndicator"
+                                                Margin="7"
+                                                HorizontalAlignment="Stretch"
+                                                VerticalAlignment="Stretch"
+                                                Fill="#005FB8"
+                                                RadiusX="4"
+                                                RadiusY="4"
+                                                Visibility="Collapsed" />
+                                            <ContentPresenter Margin="12" />
+
+                                        </Grid>
+                                        <ControlTemplate.Triggers>
+                                            <Trigger Property="IsSelected" Value="true">
+                                                <Setter TargetName="SelectionIndicator" Property="Visibility" Value="Visible" />
+                                                <Setter Property="ContentTemplate" Value="{StaticResource SelectedKeyTemplate}" />
+                                            </Trigger>
+                                        </ControlTemplate.Triggers>
+                                    </ControlTemplate>
+                                </Setter.Value>
+                            </Setter>
+                        </Style>
+                    </ListBox.ItemContainerStyle>
+                    <ListBox.ItemsPanel>
+                        <ItemsPanelTemplate>
+                            <VirtualizingStackPanel
+                                IsItemsHost="False"
+                                Orientation="Horizontal" />
+                        </ItemsPanelTemplate>
+                    </ListBox.ItemsPanel>
+
+                </ListBox>
+                <Grid
+                    Grid.Row="1"
+                    Visibility="{Binding CharacterNameVisibility, UpdateSourceTrigger=PropertyChanged}">
+
+                    <Border
+                        HorizontalAlignment="Stretch"
+                        VerticalAlignment="Stretch"
+                        Background="#F3F3F3"
+                        CornerRadius="0,0,8,8">
+                        <TextBlock
+                            x:Name="characterName"
+                            Margin="8"
+                            FontSize="12"
+                            Foreground="#8D8D8D"
+                            Text="(U+0000) A COOL LETTER NAME COMES HERE"
+                            TextAlignment="Center" />
+                    </Border>
+                    <Rectangle
+                        Height="1"
+                        HorizontalAlignment="Stretch"
+                        VerticalAlignment="Top"
+                        Fill="#E5E5E5" />
+                </Grid>
+            </Grid>
+        </Border>
     </Grid>
 </Window>

src/modules/poweraccent/PowerAccent.UI/Selector.xaml.cs

@@ -3,15 +3,39 @@
 // See the LICENSE file in the project root for more information.
 
 using System;
+using System.Collections;
+using System.ComponentModel;
+using System.Globalization;
+using System.Linq;
+using System.Unicode;
 using System.Windows;
+using PowerToys.PowerAccentKeyboardService;
 using Point = PowerAccent.Core.Point;
 using Size = PowerAccent.Core.Size;
 
 namespace PowerAccent.UI;
 
-public partial class Selector : Window, IDisposable
+public partial class Selector : Window, IDisposable, INotifyPropertyChanged
 {
-    private Core.PowerAccent _powerAccent = new Core.PowerAccent();
+    private readonly Core.PowerAccent _powerAccent = new ();
+
+    private Visibility _characterNameVisibility = Visibility.Visible;
+
+    public event PropertyChangedEventHandler PropertyChanged;
+
+    public Visibility CharacterNameVisibility
+    {
+        get
+        {
+            return _characterNameVisibility;
+        }
+
+        set
+        {
+            _characterNameVisibility = value;
+            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(CharacterNameVisibility)));
+        }
+    }
 
     public Selector()
     {
@@ -31,11 +55,16 @@ public partial class Selector : Window, IDisposable
     private void PowerAccent_OnSelectionCharacter(int index, string character)
     {
         characters.SelectedIndex = index;
+
+        characterName.Text = _powerAccent.CharacterDescriptions[index];
     }
 
     private void PowerAccent_OnChangeDisplay(bool isActive, string[] chars)
     {
+        CharacterNameVisibility = _powerAccent.ShowUnicodeDescription ? Visibility.Visible : Visibility.Collapsed;
+
         this.Visibility = isActive ? Visibility.Visible : Visibility.Collapsed;
+
         if (isActive)
         {
             characters.ItemsSource = chars;
@@ -52,7 +81,7 @@ public partial class Selector : Window, IDisposable
     private void CenterWindow()
     {
         UpdateLayout();
-        Size window = new Size(((System.Windows.Controls.Panel)Application.Current.MainWindow.Content).ActualWidth, ((System.Windows.Controls.Panel)Application.Current.MainWindow.Content).ActualHeight);
+        Size window = new (((System.Windows.Controls.Panel)Application.Current.MainWindow.Content).ActualWidth, ((System.Windows.Controls.Panel)Application.Current.MainWindow.Content).ActualHeight);
         Point position = _powerAccent.GetDisplayCoordinates(window);
         this.Left = position.X;
         this.Top = position.Y;