chuan/Ursa.Avalonia
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: implement verificationcodeitem and corresponding delete operation.

Browse Source
This commit is contained in:
rabbitism
2024-03-09 17:20:24 +08:00
parent de0124eb8e
commit 27f613f4e4
8 changed files with 168 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
demo/Ursa.Demo/Pages/VerificationCodeDemo.axaml
View File

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

7
demo/Ursa.Demo/Pages/VerificationCodeDemo.axaml.cs
View File

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

22
demo/Ursa.Demo/ViewModels/VerificationCodeDemoViewModel.cs
View File

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

72
src/Ursa.Themes.Semi/Controls/VerificationCode.axaml
View File

@@ -1,34 +1,68 @@
<ResourceDictionary xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:u="https://irihi.tech/ursa">
<!-- Add Resources Here -->
<ControlTheme TargetType="u:VerificationCode" x:Key="{x:Type u:VerificationCode}">
<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 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}}">
<Setter Property="IsReadOnly" Value="True"></Setter>
<Setter Property="Focusable" Value="False"></Setter>
<Setter Property="Margin" Value="8"></Setter>
<Setter Property="PasswordChar" Value="{Binding $parent[u:VerificationCode].PasswordChar}"></Setter>
<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>
</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>

64
src/Ursa/Controls/VerificationCode/VerificationCode.cs
View File

@@ -28,13 +28,13 @@ public class VerificationCode: TemplatedControl
set => SetValue(CompleteCommandProperty, value);
}
public static readonly StyledProperty<int> CountOfDigitProperty = AvaloniaProperty.Register<VerificationCode, int>(
nameof(CountOfDigit));
public static readonly StyledProperty<int> CountProperty = AvaloniaProperty.Register<VerificationCode, int>(
nameof(Count));
public int CountOfDigit
public int Count
{
get => GetValue(CountOfDigitProperty);
set => SetValue(CountOfDigitProperty, value);
get => GetValue(CountProperty);
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 = [];
internal AvaloniaList<string> Digits
private IList<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();
}
}
}

5
src/Ursa/Controls/VerificationCode/VerificationCodeCollection.cs
View File

@@ -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,
};
}

9
src/Ursa/Controls/VerificationCode/VerificationCodeCompleteEventArgs.cs Normal file
View File

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

26
src/Ursa/Controls/VerificationCode/VerificationCodeItem.cs Normal file
View File

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