feat: update focus logic.
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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();
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user