feat: initialize.
This commit is contained in:
13
demo/Ursa.Demo/Pages/VerificationCodeDemo.axaml
Normal file
13
demo/Ursa.Demo/Pages/VerificationCodeDemo.axaml
Normal file
@@ -0,0 +1,13 @@
|
||||
<UserControl xmlns="https://github.com/avaloniaui"
|
||||
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
|
||||
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
|
||||
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
|
||||
xmlns:u="https://irihi.tech/ursa"
|
||||
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
|
||||
x:Class="Ursa.Demo.Pages.VerificationCodeDemo">
|
||||
<StackPanel>
|
||||
<u:VerificationCode CountOfDigit="4" Name="v4"/>
|
||||
<ListBox ItemsSource="{Binding #v4.Digits}"></ListBox>
|
||||
<u:VerificationCode CountOfDigit="6" PasswordChar="*" />
|
||||
</StackPanel>
|
||||
</UserControl>
|
||||
13
demo/Ursa.Demo/Pages/VerificationCodeDemo.axaml.cs
Normal file
13
demo/Ursa.Demo/Pages/VerificationCodeDemo.axaml.cs
Normal file
@@ -0,0 +1,13 @@
|
||||
using Avalonia;
|
||||
using Avalonia.Controls;
|
||||
using Avalonia.Markup.Xaml;
|
||||
|
||||
namespace Ursa.Demo.Pages;
|
||||
|
||||
public partial class VerificationCodeDemo : UserControl
|
||||
{
|
||||
public VerificationCodeDemo()
|
||||
{
|
||||
InitializeComponent();
|
||||
}
|
||||
}
|
||||
@@ -56,6 +56,7 @@ public class MainViewViewModel : ViewModelBase
|
||||
MenuKeys.MenuKeyTwoTonePathIcon => new TwoTonePathIconDemoViewModel(),
|
||||
MenuKeys.MenuKeyThemeToggler => new ThemeTogglerDemoViewModel(),
|
||||
MenuKeys.MenuKeyToolBar => new ToolBarDemoViewModel(),
|
||||
MenuKeys.MenuKeyVerificationCode => new VerificationCodeDemoViewModel(),
|
||||
};
|
||||
}
|
||||
}
|
||||
@@ -42,7 +42,8 @@ public class MenuViewModel: ViewModelBase
|
||||
new() { MenuHeader = "Theme Toggler", Key = MenuKeys.MenuKeyThemeToggler, Status = "New" },
|
||||
new() { MenuHeader = "Timeline", Key = MenuKeys.MenuKeyTimeline, Status = "WIP" },
|
||||
new() { MenuHeader = "TwoTonePathIcon", Key = MenuKeys.MenuKeyTwoTonePathIcon},
|
||||
new() { MenuHeader = "ToolBar", Key = MenuKeys.MenuKeyToolBar, Status = "New" }
|
||||
new() { MenuHeader = "ToolBar", Key = MenuKeys.MenuKeyToolBar, Status = "New" },
|
||||
new() { MenuHeader = "Verification Code", Key = MenuKeys.MenuKeyVerificationCode, Status = "New" },
|
||||
};
|
||||
}
|
||||
}
|
||||
@@ -81,5 +82,6 @@ public static class MenuKeys
|
||||
public const string MenuKeyTwoTonePathIcon = "TwoTonePathIcon";
|
||||
public const string MenuKeyThemeToggler = "ThemeToggler";
|
||||
public const string MenuKeyToolBar = "ToolBar";
|
||||
public const string MenuKeyVerificationCode = "VerificationCode";
|
||||
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
using CommunityToolkit.Mvvm.ComponentModel;
|
||||
|
||||
namespace Ursa.Demo.ViewModels;
|
||||
|
||||
public class VerificationCodeDemoViewModel: ObservableObject
|
||||
{
|
||||
|
||||
}
|
||||
34
src/Ursa.Themes.Semi/Controls/VerificationCode.axaml
Normal file
34
src/Ursa.Themes.Semi/Controls/VerificationCode.axaml
Normal file
@@ -0,0 +1,34 @@
|
||||
<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}">
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
@@ -33,5 +33,6 @@
|
||||
<ResourceInclude Source="Skeleton.axaml" />
|
||||
<ResourceInclude Source="TwoTonePathIcon.axaml" />
|
||||
<ResourceInclude Source="ToolBar.axaml" />
|
||||
<ResourceInclude Source="VerificationCode.axaml" />
|
||||
</ResourceDictionary.MergedDictionaries>
|
||||
</ResourceDictionary>
|
||||
|
||||
117
src/Ursa/Controls/VerificationCode/VerificationCode.cs
Normal file
117
src/Ursa/Controls/VerificationCode/VerificationCode.cs
Normal file
@@ -0,0 +1,117 @@
|
||||
using System.Windows.Input;
|
||||
using Avalonia;
|
||||
using Avalonia.Collections;
|
||||
using Avalonia.Controls;
|
||||
using Avalonia.Controls.Metadata;
|
||||
using Avalonia.Controls.Presenters;
|
||||
using Avalonia.Controls.Primitives;
|
||||
using Avalonia.Input;
|
||||
using Avalonia.Interactivity;
|
||||
using Avalonia.LogicalTree;
|
||||
using Irihi.Avalonia.Shared.Helpers;
|
||||
|
||||
namespace Ursa.Controls;
|
||||
|
||||
[TemplatePart(PART_ItemsControl, typeof(ItemsControl))]
|
||||
public class VerificationCode: TemplatedControl
|
||||
{
|
||||
public const string PART_ItemsControl = "PART_ItemsControl";
|
||||
private ItemsControl? _itemsControl;
|
||||
private int _currentIndex = 0;
|
||||
|
||||
public static readonly StyledProperty<ICommand?> CompleteCommandProperty = AvaloniaProperty.Register<VerificationCode, ICommand?>(
|
||||
nameof(CompleteCommand));
|
||||
|
||||
public ICommand? CompleteCommand
|
||||
{
|
||||
get => GetValue(CompleteCommandProperty);
|
||||
set => SetValue(CompleteCommandProperty, value);
|
||||
}
|
||||
|
||||
public static readonly StyledProperty<int> CountOfDigitProperty = AvaloniaProperty.Register<VerificationCode, int>(
|
||||
nameof(CountOfDigit));
|
||||
|
||||
public int CountOfDigit
|
||||
{
|
||||
get => GetValue(CountOfDigitProperty);
|
||||
set => SetValue(CountOfDigitProperty, value);
|
||||
}
|
||||
|
||||
public static readonly StyledProperty<char> PasswordCharProperty =
|
||||
AvaloniaProperty.Register<VerificationCode, char>(
|
||||
nameof(PasswordChar));
|
||||
|
||||
public char PasswordChar
|
||||
{
|
||||
get => GetValue(PasswordCharProperty);
|
||||
set => SetValue(PasswordCharProperty, value);
|
||||
}
|
||||
|
||||
public static readonly DirectProperty<VerificationCode, AvaloniaList<string>> DigitsProperty = AvaloniaProperty.RegisterDirect<VerificationCode, AvaloniaList<string>>(
|
||||
nameof(Digits), o => o.Digits, (o, v) => o.Digits = v);
|
||||
|
||||
private AvaloniaList<string> _digits = [];
|
||||
internal AvaloniaList<string> Digits
|
||||
{
|
||||
get => _digits;
|
||||
set => SetAndRaise(DigitsProperty, ref _digits, value);
|
||||
}
|
||||
|
||||
static VerificationCode()
|
||||
{
|
||||
CountOfDigitProperty.Changed.AddClassHandler<VerificationCode, int>((code, args) => code.OnCountOfDigitChanged(args));
|
||||
FocusableProperty.OverrideDefaultValue<VerificationCode>(true);
|
||||
}
|
||||
|
||||
public VerificationCode()
|
||||
{
|
||||
InputMethod.SetIsInputMethodEnabled(this, false);
|
||||
}
|
||||
|
||||
private void OnCountOfDigitChanged(AvaloniaPropertyChangedEventArgs<int> args)
|
||||
{
|
||||
var newValue = args.NewValue.Value;
|
||||
if (newValue > 0)
|
||||
{
|
||||
Digits = new AvaloniaList<string>(Enumerable.Repeat(string.Empty, newValue));
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
|
||||
{
|
||||
base.OnApplyTemplate(e);
|
||||
_itemsControl = e.NameScope.Get<ItemsControl>(PART_ItemsControl);
|
||||
PointerPressedEvent.AddHandler(OnControlPressed, RoutingStrategies.Tunnel, false, this);
|
||||
}
|
||||
|
||||
private void OnControlPressed(object sender, PointerPressedEventArgs e)
|
||||
{
|
||||
if (e.Source is Control t)
|
||||
{
|
||||
var text = t.FindLogicalAncestorOfType<TextBox>();
|
||||
if (text != null)
|
||||
{
|
||||
_currentIndex = _itemsControl?.IndexFromContainer(text) ?? 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
protected override void OnTextInput(TextInputEventArgs e)
|
||||
{
|
||||
base.OnTextInput(e);
|
||||
if (e.Text?.Length == 1 && _currentIndex < CountOfDigit)
|
||||
{
|
||||
Digits[_currentIndex] = e.Text;
|
||||
var presenter = _itemsControl?.ContainerFromIndex(_currentIndex) as TextBox;
|
||||
if (presenter is null) return;
|
||||
_currentIndex++;
|
||||
var newPresenter = _itemsControl?.ContainerFromIndex(_currentIndex)?.Focus();
|
||||
presenter.Text = e.Text;
|
||||
if (_currentIndex == CountOfDigit)
|
||||
{
|
||||
CompleteCommand?.Execute(Digits);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
using Avalonia;
|
||||
using Avalonia.Controls;
|
||||
using Avalonia.Controls.Presenters;
|
||||
using Avalonia.Data;
|
||||
using Avalonia.Input;
|
||||
using Avalonia.Media;
|
||||
|
||||
namespace Ursa.Controls;
|
||||
|
||||
public class VerificationCodeCollection: ItemsControl
|
||||
{
|
||||
protected override bool NeedsContainerOverride(object? item, int index, out object? recycleKey)
|
||||
{
|
||||
return NeedsContainer<TextBox>(item, out recycleKey);
|
||||
}
|
||||
|
||||
protected override Control CreateContainerForItemOverride(object? item, int index, object? recycleKey)
|
||||
{
|
||||
return new TextBox()
|
||||
{
|
||||
TextAlignment = TextAlignment.Center,
|
||||
[InputMethod.IsInputMethodEnabledProperty] = false,
|
||||
};
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user