feat: update focus logic.

demo/Ursa.Demo/Pages/VerificationCodeDemo.axaml

@@ -4,13 +4,14 @@
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              xmlns:u="https://irihi.tech/ursa"
              xmlns:vm="using:Ursa.Demo.ViewModels"
+             xmlns:system="clr-namespace:System;assembly=System.Runtime"
              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 Count="4" Name="v4" CompleteCommand="{Binding CompleteCommand}"/>
-        <u:VerificationCode Count="4" Mode="Digit"/>
+        <u:VerificationCode Count="4" Mode="Digit" DataValidationErrors.Errors="{Binding Error}"/>
         <u:VerificationCode Count="4" Mode="Letter"/>
         <u:VerificationCode Count="6" PasswordChar="•" Complete="VerificationCode_OnComplete" />
     </StackPanel>

demo/Ursa.Demo/ViewModels/VerificationCodeDemoViewModel.cs

@@ -1,4 +1,5 @@
-using System.Collections.Generic;
+using System;
+using System.Collections.Generic;
 using System.Threading.Tasks;
 using System.Windows.Input;
 using Avalonia.Collections;
@@ -8,13 +9,15 @@ using Ursa.Controls;
 
 namespace Ursa.Demo.ViewModels;
 
-public class VerificationCodeDemoViewModel: ObservableObject
+public partial class VerificationCodeDemoViewModel: ObservableObject
 {
     public ICommand CompleteCommand { get; set; }
+    [ObservableProperty] private List<Exception>? _error;
 
     public VerificationCodeDemoViewModel()
     {
         CompleteCommand = new AsyncRelayCommand<IList<string>>(OnComplete);
+        Error = [new Exception("Invalid verification code")];
     }
 
     private async Task OnComplete(IList<string>? obj)

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

@@ -10,16 +10,19 @@
         <Setter Property="Margin" Value="8" />
         <Setter Property="FontSize" Value="20" />
         <Setter Property="Focusable" Value="True" />
+        <Setter Property="Height" Value="48" />
+        <Setter Property="Width" Value="48" />
+        <Setter Property="CornerRadius" Value="3" />
         <Setter Property="BorderThickness" Value="1" />
         <Setter Property="Template">
             <ControlTemplate>
                 <Border
                     Name="PART_Background"
-                    Width="32"
+                    HorizontalAlignment="Stretch"
-                    Height="32"
+                    VerticalAlignment="Stretch"
-                    BorderThickness="{TemplateBinding BorderThickness}"
                     Background="{DynamicResource TextBoxDefaultBackground}"
-                    CornerRadius="3">
+                    BorderThickness="{TemplateBinding BorderThickness}"
+                    CornerRadius="{TemplateBinding CornerRadius}">
                     <TextPresenter
                         HorizontalAlignment="Center"
                         VerticalAlignment="Center"
@@ -30,11 +33,17 @@
             </ControlTemplate>
         </Setter>
         <Style Selector="^:pointerover /template/ Border#PART_Background">
-            <Setter Property="Background" Value="{DynamicResource TextBoxPointeroverBackground}"></Setter>
+            <Setter Property="Background" Value="{DynamicResource TextBoxPointeroverBackground}" />
         </Style>
         <Style Selector="^:focus /template/ Border#PART_Background">
-            <Setter Property="Background" Value="{DynamicResource TextBoxPointeroverBackground}"></Setter>
+            <Setter Property="Background" Value="{DynamicResource TextBoxPointeroverBackground}" />
-            <Setter Property="BorderBrush" Value="{DynamicResource TextBoxFocusBorderBrush}"></Setter>
+            <Setter Property="BorderBrush" Value="{DynamicResource TextBoxFocusBorderBrush}" />
+        </Style>
+        <Style Selector="^:error /template/ Border#PART_Background">
+            <Setter Property="Background" Value="{DynamicResource DataValidationErrorsSelectedBackground}" />
+        </Style>
+        <Style Selector="^:focus:error /template/ Border#PART_Background">
+            <Setter Property="BorderBrush" Value="{DynamicResource DataValidationErrorsSelectedBorderBrush}" />
         </Style>
     </ControlTheme>
 
@@ -47,10 +56,11 @@
     </ControlTheme>
 
     <ControlTheme x:Key="{x:Type u:VerificationCode}" TargetType="u:VerificationCode">
-        <Setter Property="HorizontalAlignment" Value="Left"></Setter>
+        <Setter Property="HorizontalAlignment" Value="Left" />
         <Setter Property="Template">
             <ControlTemplate TargetType="u:VerificationCode">
-                <u:VerificationCodeCollection Name="{x:Static u:VerificationCode.PART_ItemsControl}" ItemsSource="{TemplateBinding Digits}">
+                <DataValidationErrors>
+                    <u:VerificationCodeCollection HorizontalAlignment="Left" Name="{x:Static u:VerificationCode.PART_ItemsControl}" ItemsSource="{TemplateBinding Digits}">
                         <u:VerificationCodeCollection.ItemsPanel>
                             <ItemsPanelTemplate>
                                 <UniformGrid Columns="{TemplateBinding Count}" Rows="1" />
@@ -59,9 +69,11 @@
                         <u:VerificationCodeCollection.ItemContainerTheme>
                             <ControlTheme BasedOn="{StaticResource {x:Type u:VerificationCodeItem}}" TargetType="u:VerificationCodeItem">
                                 <Setter Property="PasswordChar" Value="{Binding $parent[u:VerificationCode].PasswordChar}" />
+                                <Setter Property="DataValidationErrors.Errors" Value="{Binding $parent[u:VerificationCode].(DataValidationErrors.Errors)}" />
                             </ControlTheme>
                         </u:VerificationCodeCollection.ItemContainerTheme>
                     </u:VerificationCodeCollection>
+                </DataValidationErrors>
             </ControlTemplate>
         </Setter>
     </ControlTheme>

src/Ursa/Controls/VerificationCode/VerificationCode.cs

@@ -8,6 +8,7 @@ using Avalonia.Controls.Primitives;
 using Avalonia.Input;
 using Avalonia.Interactivity;
 using Avalonia.LogicalTree;
+using Avalonia.Utilities;
 using Irihi.Avalonia.Shared.Helpers;
 
 namespace Ursa.Controls;
@@ -108,12 +109,16 @@ public class VerificationCode: TemplatedControl
     {
         if (e.Source is Control t)
         {
-            var text = t.FindLogicalAncestorOfType<VerificationCodeItem>();
+            /*
-            if (text != null)
+            var item = t.FindLogicalAncestorOfType<VerificationCodeItem>();
+            if (item != null)
             {
-                text.Focus();
+                item.Focus();
-                _currentIndex = _itemsControl?.IndexFromContainer(text) ?? 0;
+                _currentIndex = _itemsControl?.IndexFromContainer(item) ?? 0;
             }
+            */
+            _currentIndex = MathUtilities.Clamp(_currentIndex, 0, Count - 1);
+            _itemsControl?.ContainerFromIndex(_currentIndex)?.Focus();
         }
         e.Handled = true;
     }
@@ -157,6 +162,7 @@ public class VerificationCode: TemplatedControl
         base.OnKeyDown(e);
         if (e.Key == Key.Back && _currentIndex >= 0)
         {
+            _currentIndex = MathUtilities.Clamp(_currentIndex, 0, Count - 1);
             var presenter = _itemsControl?.ContainerFromIndex(_currentIndex) as VerificationCodeItem;
             if (presenter is null) return;
             Digits[_currentIndex] = string.Empty;
@@ -165,15 +171,5 @@ public class VerificationCode: TemplatedControl
             _currentIndex--;
             _itemsControl?.ContainerFromIndex(_currentIndex)?.Focus();
         }
-        else if(e.Key == Key.Left && _currentIndex > 0)
-        {
-            _currentIndex--;
-            _itemsControl?.ContainerFromIndex(_currentIndex)?.Focus();
-        }
-        else if(e.Key == Key.Right && _currentIndex < Count)
-        {
-            _currentIndex++;
-            _itemsControl?.ContainerFromIndex(_currentIndex)?.Focus();
-        }
     }
 }