feat: implement verificationcodeitem and corresponding delete operation.

demo/Ursa.Demo/Pages/VerificationCodeDemo.axaml

@@ -3,11 +3,14 @@
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              xmlns:u="https://irihi.tech/ursa"
+             xmlns:vm="using:Ursa.Demo.ViewModels"
+             x:DataType="vm:VerificationCodeDemoViewModel"
+             x:CompileBindings="True"
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
              x:Class="Ursa.Demo.Pages.VerificationCodeDemo">
     <StackPanel>
-        <u:VerificationCode CountOfDigit="4" Name="v4"/>
+        <u:VerificationCode Count="4" Name="v4" CompleteCommand="{Binding CompleteCommand}"/>
         <ListBox ItemsSource="{Binding #v4.Digits}"></ListBox>
-        <u:VerificationCode CountOfDigit="6" PasswordChar="*" />
+        <u:VerificationCode Count="6" PasswordChar="•" Complete="VerificationCode_OnComplete" />
     </StackPanel>
 </UserControl>

demo/Ursa.Demo/Pages/VerificationCodeDemo.axaml.cs

@@ -1,6 +1,7 @@
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Markup.Xaml;
+using Ursa.Controls;
 
 namespace Ursa.Demo.Pages;
 
@@ -10,4 +11,10 @@ public partial class VerificationCodeDemo : UserControl
     {
         InitializeComponent();
     }
+
+    private async void VerificationCode_OnComplete(object? sender, VerificationCodeCompleteEventArgs e)
+    {
+        var text = string.Join(string.Empty, e.Code);
+        await MessageBox.ShowOverlayAsync(text);
+    }
 }

demo/Ursa.Demo/ViewModels/VerificationCodeDemoViewModel.cs

@@ -1,8 +1,26 @@
-using CommunityToolkit.Mvvm.ComponentModel;
+using System.Collections.Generic;
+using System.Threading.Tasks;
+using System.Windows.Input;
+using Avalonia.Collections;
+using CommunityToolkit.Mvvm.ComponentModel;
+using CommunityToolkit.Mvvm.Input;
+using Ursa.Controls;
 
 namespace Ursa.Demo.ViewModels;
 
 public class VerificationCodeDemoViewModel: ObservableObject
 {
+    public ICommand CompleteCommand { get; set; }
 
+    public VerificationCodeDemoViewModel()
+    {
+        CompleteCommand = new AsyncRelayCommand<IList<string>>(OnComplete);
+    }
+
+    private async Task OnComplete(IList<string>? obj)
+    {
+        if (obj is null) return;
+        var code = string.Join("", obj);
+        await MessageBox.ShowOverlayAsync(code);
+    }
 }

src/Ursa.Themes.Semi/Controls/VerificationCode.axaml

@@ -1,34 +1,68 @@
-<ResourceDictionary xmlns="https://github.com/avaloniaui"
+<ResourceDictionary
+    xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:u="https://irihi.tech/ursa">
+    <Design.PreviewWith>
+        <u:VerificationCode Count="4" />
+    </Design.PreviewWith>
     <!--  Add Resources Here  -->
-    <ControlTheme TargetType="u:VerificationCode" x:Key="{x:Type u:VerificationCode}">
+    <ControlTheme x:Key="{x:Type u:VerificationCodeItem}" TargetType="u:VerificationCodeItem">
+        <Setter Property="Margin" Value="8" />
+        <Setter Property="FontSize" Value="20" />
+        <Setter Property="Focusable" Value="True" />
+        <Setter Property="BorderThickness" Value="1"/>
+        <Setter Property="Template">
+            <ControlTemplate>
+                <Border
+                    Name="PART_Background"
+                    Width="32"
+                    Height="32"
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    Background="{DynamicResource TextBoxDefaultBackground}"
+                    CornerRadius="3">
+                    <TextPresenter
+                        HorizontalAlignment="Center"
+                        VerticalAlignment="Center"
+                        PasswordChar="{TemplateBinding PasswordChar}"
+                        Text="{TemplateBinding Text}"
+                        TextElement.FontSize="{TemplateBinding FontSize}" />
+                </Border>
+            </ControlTemplate>
+        </Setter>
+        <Style Selector="^:pointerover /template/ Border#PART_Background">
+            <Setter Property="Background" Value="{DynamicResource TextBoxPointeroverBackground}"></Setter>
+        </Style>
+        <Style Selector="^:focus /template/ Border#PART_Background">
+            <Setter Property="Background" Value="{DynamicResource TextBoxPointeroverBackground}"></Setter>
+            <Setter Property="BorderBrush" Value="{DynamicResource TextBoxFocusBorderBrush}"></Setter>
+        </Style>
+    </ControlTheme>
+    
+    <ControlTheme x:Key="{x:Type u:VerificationCodeCollection}" TargetType="u:VerificationCodeCollection">
+        <Setter Property="Template">
+            <ControlTemplate TargetType="u:VerificationCodeCollection">
+                <ItemsPresenter ItemsPanel="{TemplateBinding ItemsPanel}" />
+            </ControlTemplate>
+        </Setter>
+    </ControlTheme>
+
+    <ControlTheme x:Key="{x:Type u:VerificationCode}" TargetType="u:VerificationCode">
+        <Setter Property="HorizontalAlignment" Value="Left"></Setter>
         <Setter Property="Template">
             <ControlTemplate TargetType="u:VerificationCode">
                 <u:VerificationCodeCollection Name="{x:Static u:VerificationCode.PART_ItemsControl}" ItemsSource="{TemplateBinding Digits}">
                     <u:VerificationCodeCollection.ItemsPanel>
                         <ItemsPanelTemplate>
-                            <UniformGrid Columns="{TemplateBinding CountOfDigit}" Rows="1"></UniformGrid>
+                            <UniformGrid Columns="{TemplateBinding Count}" Rows="1" />
                         </ItemsPanelTemplate>
                     </u:VerificationCodeCollection.ItemsPanel>
                     <u:VerificationCodeCollection.ItemContainerTheme>
-                        <ControlTheme TargetType="TextBox" BasedOn="{StaticResource {x:Type TextBox}}">
+                        <ControlTheme BasedOn="{StaticResource {x:Type u:VerificationCodeItem}}" TargetType="u:VerificationCodeItem">
-                            <Setter Property="IsReadOnly" Value="True"></Setter>
+                            <Setter Property="PasswordChar" Value="{Binding $parent[u:VerificationCode].PasswordChar}" />
-                            <Setter Property="Focusable" Value="False"></Setter>
-                            <Setter Property="Margin" Value="8"></Setter>
-                            <Setter Property="PasswordChar" Value="{Binding $parent[u:VerificationCode].PasswordChar}"></Setter>
                         </ControlTheme>
                     </u:VerificationCodeCollection.ItemContainerTheme>
                 </u:VerificationCodeCollection>
             </ControlTemplate>
         </Setter>
     </ControlTheme>
-    
-    <ControlTheme TargetType="u:VerificationCodeCollection" x:Key="{x:Type u:VerificationCodeCollection}">
-        <Setter Property="Template">
-            <ControlTemplate TargetType="u:VerificationCodeCollection">
-                <ItemsPresenter ItemsPanel="{TemplateBinding ItemsPanel}"></ItemsPresenter>
-            </ControlTemplate>
-        </Setter>
-    </ControlTheme>
 </ResourceDictionary>

src/Ursa/Controls/VerificationCode/VerificationCode.cs

@@ -28,13 +28,13 @@ public class VerificationCode: TemplatedControl
         set => SetValue(CompleteCommandProperty, value);
     }
 
-    public static readonly StyledProperty<int> CountOfDigitProperty = AvaloniaProperty.Register<VerificationCode, int>(
+    public static readonly StyledProperty<int> CountProperty = AvaloniaProperty.Register<VerificationCode, int>(
-        nameof(CountOfDigit));
+        nameof(Count));
 
-    public int CountOfDigit
+    public int Count
     {
-        get => GetValue(CountOfDigitProperty);
+        get => GetValue(CountProperty);
-        set => SetValue(CountOfDigitProperty, value);
+        set => SetValue(CountProperty, value);
     }
 
     public static readonly StyledProperty<char> PasswordCharProperty =
@@ -47,19 +47,29 @@ public class VerificationCode: TemplatedControl
         set => SetValue(PasswordCharProperty, value);
     }
 
-    public static readonly DirectProperty<VerificationCode, AvaloniaList<string>> DigitsProperty = AvaloniaProperty.RegisterDirect<VerificationCode, AvaloniaList<string>>(
+    public static readonly DirectProperty<VerificationCode, IList<string>> DigitsProperty = AvaloniaProperty.RegisterDirect<VerificationCode, IList<string>>(
         nameof(Digits), o => o.Digits, (o, v) => o.Digits = v);
     
-    private AvaloniaList<string> _digits = [];
+    private IList<string> _digits = [];
-    internal AvaloniaList<string> Digits
+    internal IList<string> Digits
     {
         get => _digits;
         set => SetAndRaise(DigitsProperty, ref _digits, value);
     }
     
+    public static readonly RoutedEvent<VerificationCodeCompleteEventArgs> CompleteEvent =
+        RoutedEvent.Register<VerificationCode, VerificationCodeCompleteEventArgs>(
+            nameof(Complete), RoutingStrategies.Bubble);
+    
+    public event EventHandler<VerificationCodeCompleteEventArgs> Complete
+    {
+        add => AddHandler(CompleteEvent, value);
+        remove => RemoveHandler(CompleteEvent, value);
+    }
+
     static VerificationCode()
     {
-        CountOfDigitProperty.Changed.AddClassHandler<VerificationCode, int>((code, args) => code.OnCountOfDigitChanged(args));
+        CountProperty.Changed.AddClassHandler<VerificationCode, int>((code, args) => code.OnCountOfDigitChanged(args));
         FocusableProperty.OverrideDefaultValue<VerificationCode>(true);
     }
 
@@ -73,9 +83,8 @@ public class VerificationCode: TemplatedControl
         var newValue = args.NewValue.Value;
         if (newValue > 0)
         {
-            Digits = new AvaloniaList<string>(Enumerable.Repeat(string.Empty, newValue));
+            Digits = new List<string>(Enumerable.Repeat(string.Empty, newValue));
         }
-        
     }
 
     protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
@@ -89,29 +98,48 @@ public class VerificationCode: TemplatedControl
     {
         if (e.Source is Control t)
         {
-            var text = t.FindLogicalAncestorOfType<TextBox>();
+            var text = t.FindLogicalAncestorOfType<VerificationCodeItem>();
             if (text != null)
             {
+                text.Focus();
                 _currentIndex = _itemsControl?.IndexFromContainer(text) ?? 0;
             }
         }
+        e.Handled = true;
     }
 
     protected override void OnTextInput(TextInputEventArgs e)
     {
         base.OnTextInput(e);
-        if (e.Text?.Length == 1 && _currentIndex < CountOfDigit)
+        if (e.Text?.Length == 1 && _currentIndex < Count)
         {
-            Digits[_currentIndex] = e.Text;
+            
-            var presenter = _itemsControl?.ContainerFromIndex(_currentIndex) as TextBox;
+            var presenter = _itemsControl?.ContainerFromIndex(_currentIndex) as VerificationCodeItem;
             if (presenter is null) return;
-            _currentIndex++;
-            var newPresenter = _itemsControl?.ContainerFromIndex(_currentIndex)?.Focus();
             presenter.Text = e.Text;
-            if (_currentIndex == CountOfDigit)
+            Digits[_currentIndex] = e.Text;
+            _currentIndex++;
+            _itemsControl?.ContainerFromIndex(_currentIndex)?.Focus();
+            if (_currentIndex == Count)
             {
                 CompleteCommand?.Execute(Digits);
+                RaiseEvent(new VerificationCodeCompleteEventArgs(Digits, CompleteEvent));
             }
         }
     }
+
+    protected override void OnKeyDown(KeyEventArgs e)
+    {
+        base.OnKeyDown(e);
+        if (e.Key == Key.Back && _currentIndex >= 0)
+        {
+            var presenter = _itemsControl?.ContainerFromIndex(_currentIndex) as VerificationCodeItem;
+            if (presenter is null) return;
+            Digits[_currentIndex] = string.Empty;
+            presenter.Text = string.Empty;
+            if (_currentIndex == 0) return;
+            _currentIndex--;
+            _itemsControl?.ContainerFromIndex(_currentIndex)?.Focus();
+        }
+    }
 }

src/Ursa/Controls/VerificationCode/VerificationCodeCollection.cs

@@ -11,14 +11,13 @@ public class VerificationCodeCollection: ItemsControl
 {
     protected override bool NeedsContainerOverride(object? item, int index, out object? recycleKey)
     {
-        return NeedsContainer<TextBox>(item, out recycleKey);
+        return NeedsContainer<VerificationCodeItem>(item, out recycleKey);
     }
 
     protected override Control CreateContainerForItemOverride(object? item, int index, object? recycleKey)
     {
-        return new TextBox()
+        return new VerificationCodeItem()
         {
-            TextAlignment = TextAlignment.Center,
             [InputMethod.IsInputMethodEnabledProperty] = false,
         };
     }

src/Ursa/Controls/VerificationCode/VerificationCodeCompleteEventArgs.cs

@@ -0,0 +1,9 @@
+using Avalonia.Collections;
+using Avalonia.Interactivity;
+
+namespace Ursa.Controls;
+
+public class VerificationCodeCompleteEventArgs(IList<string> code, RoutedEvent? @event) : RoutedEventArgs(@event)
+{
+    public IList<string> Code { get; } = code;
+}

src/Ursa/Controls/VerificationCode/VerificationCodeItem.cs

@@ -0,0 +1,26 @@
+using Avalonia;
+using Avalonia.Controls.Primitives;
+using Avalonia.Data;
+
+namespace Ursa.Controls;
+
+public class VerificationCodeItem: TemplatedControl
+{
+    public static readonly StyledProperty<string> TextProperty = AvaloniaProperty.Register<VerificationCodeItem, string>(
+        nameof(Text), defaultBindingMode: BindingMode.TwoWay);
+
+    public string Text
+    {
+        get => GetValue(TextProperty);
+        set => SetValue(TextProperty, value);
+    }
+
+    public static readonly StyledProperty<char> PasswordCharProperty = AvaloniaProperty.Register<VerificationCodeItem, char>(
+        nameof(PasswordChar), defaultBindingMode: BindingMode.TwoWay);
+
+    public char PasswordChar
+    {
+        get => GetValue(PasswordCharProperty);
+        set => SetValue(PasswordCharProperty, value);
+    }
+}