feat: update focus logic.

This commit is contained in:
rabbitism
2024-03-11 17:02:08 +08:00
parent 99cae144e4
commit 7869752330
4 changed files with 51 additions and 39 deletions

View File

@@ -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>

View File

@@ -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)

View File

@@ -10,16 +10,19 @@
<Setter Property="Margin" Value="8" />
<Setter Property="FontSize" Value="20" />
<Setter Property="Focusable" Value="True" />
<Setter Property="BorderThickness" Value="1"/>
<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"
Height="32"
BorderThickness="{TemplateBinding BorderThickness}"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Background="{DynamicResource TextBoxDefaultBackground}"
CornerRadius="3">
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}">
<TextPresenter
HorizontalAlignment="Center"
VerticalAlignment="Center"
@@ -30,14 +33,20 @@
</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="BorderBrush" Value="{DynamicResource TextBoxFocusBorderBrush}"></Setter>
<Setter Property="Background" Value="{DynamicResource TextBoxPointeroverBackground}" />
<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>
<ControlTheme x:Key="{x:Type u:VerificationCodeCollection}" TargetType="u:VerificationCodeCollection">
<Setter Property="Template">
<ControlTemplate TargetType="u:VerificationCodeCollection">
@@ -47,21 +56,24 @@
</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}">
<u:VerificationCodeCollection.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Columns="{TemplateBinding Count}" Rows="1" />
</ItemsPanelTemplate>
</u:VerificationCodeCollection.ItemsPanel>
<u:VerificationCodeCollection.ItemContainerTheme>
<ControlTheme BasedOn="{StaticResource {x:Type u:VerificationCodeItem}}" TargetType="u:VerificationCodeItem">
<Setter Property="PasswordChar" Value="{Binding $parent[u:VerificationCode].PasswordChar}" />
</ControlTheme>
</u:VerificationCodeCollection.ItemContainerTheme>
</u:VerificationCodeCollection>
<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" />
</ItemsPanelTemplate>
</u:VerificationCodeCollection.ItemsPanel>
<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>

View File

@@ -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();
_currentIndex = _itemsControl?.IndexFromContainer(text) ?? 0;
item.Focus();
_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();
}
}
}